Add an optional rootElementProps prop

Zloka commented 3 years ago

This PR aims to add support for props that are assigned to the root element.

In my particular case, I would need to add support for the id property. My use-case is that I use the Intersection Observer API to measure the offset relative to some parent, and the parent is identified using the id property. In practice, this is used to lazily load content (for example images) within a scrollable container, which is a fairly common use-case.

The prepublish and build:docs scripts run just fine but I wasn't able to run the tests locally, seemingly because of issues with the webpack configuration. If I can get some pointers on that, I'll happily add a few test cases as well.

This is the output I get when attempting to run the tests:

 rc-scrollbars git:(support-htmldivelement-props) ✗ yarn test                
yarn run v1.22.4
$ cross-env NODE_ENV=test karma start
WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module has an unknown property 'loaders'. These properties are valid:
   object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, defaultRules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp?, strictExportPresence?, strictThisContextOnImports? }
   -> Options affecting the normal modules (`NormalModuleFactory`).
    at webpack (/Users/zakke/sources/mafy/rc-scrollbars/node_modules/webpack/lib/webpack.js:23:9)
    at Plugin (/Users/zakke/sources/mafy/rc-scrollbars/node_modules/karma-webpack/dist/karma-webpack.js:128:16)
    at invoke (/Users/zakke/sources/mafy/rc-scrollbars/node_modules/di/lib/injector.js:75:15)
    at Array.instantiate (/Users/zakke/sources/mafy/rc-scrollbars/node_modules/di/lib/injector.js:59:20)
    at get (/Users/zakke/sources/mafy/rc-scrollbars/node_modules/di/lib/injector.js:48:43)
    at /Users/zakke/sources/mafy/rc-scrollbars/node_modules/di/lib/injector.js:71:14
    at Array.map (<anonymous>)
    at Array.invoke (/Users/zakke/sources/mafy/rc-scrollbars/node_modules/di/lib/injector.js:70:31)
    at Injector.get (/Users/zakke/sources/mafy/rc-scrollbars/node_modules/di/lib/injector.js:48:43)
    at instantiatePreprocessor (/Users/zakke/sources/mafy/rc-scrollbars/node_modules/karma/lib/preprocessor.js:84:20)
25 02 2021 11:00:42.442:ERROR [preprocess]: Can not load "webpack"!
  WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module has an unknown property 'loaders'. These properties are valid:
   object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, defaultRules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp?, strictExportPresence?, strictThisContextOnImports? }
   -> Options affecting the normal modules (`NormalModuleFactory`).
    at webpack (/Users/zakke/sources/mafy/rc-scrollbars/node_modules/webpack/lib/webpack.js:23:9)
    at Plugin (/Users/zakke/sources/mafy/rc-scrollbars/node_modules/karma-webpack/dist/karma-webpack.js:128:16)
    at invoke (/Users/zakke/sources/mafy/rc-scrollbars/node_modules/di/lib/injector.js:75:15)
    at Array.instantiate (/Users/zakke/sources/mafy/rc-scrollbars/node_modules/di/lib/injector.js:59:20)
    at get (/Users/zakke/sources/mafy/rc-scrollbars/node_modules/di/lib/injector.js:48:43)
    at /Users/zakke/sources/mafy/rc-scrollbars/node_modules/di/lib/injector.js:71:14
    at Array.map (<anonymous>)
    at Array.invoke (/Users/zakke/sources/mafy/rc-scrollbars/node_modules/di/lib/injector.js:70:31)
    at Injector.get (/Users/zakke/sources/mafy/rc-scrollbars/node_modules/di/lib/injector.js:48:43)
    at instantiatePreprocessor (/Users/zakke/sources/mafy/rc-scrollbars/node_modules/karma/lib/preprocessor.js:84:20)

START:
25 02 2021 11:00:42.476:ERROR [karma-server]: Error during file loading or preprocessing
TypeError: process is not a function
    at executeProcessor (/Users/zakke/sources/mafy/rc-scrollbars/node_modules/karma/lib/preprocessor.js:47:11)
    at runProcessors (/Users/zakke/sources/mafy/rc-scrollbars/node_modules/karma/lib/preprocessor.js:60:23)
    at FileList.preprocess [as _preprocess] (/Users/zakke/sources/mafy/rc-scrollbars/node_modules/karma/lib/preprocessor.js:134:11)
25 02 2021 11:00:42.477:INFO [karma-server]: Karma v5.2.3 server started at http://localhost:9876/
25 02 2021 11:00:42.477:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
25 02 2021 11:00:42.478:ERROR [karma-server]: Error: Found 1 load error
    at Server.webServer.listen (/Users/zakke/sources/mafy/rc-scrollbars/node_modules/karma/lib/server.js:213:27)
    at Object.onceWrapper (events.js:286:20)
    at Server.emit (events.js:203:15)
    at emitListeningNT (net.js:1314:10)
    at process._tickCallback (internal/process/next_tick.js:63:19)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

vercel[bot] commented 3 years ago

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/sakhnyuk/rc-scrollbars/BRtW5nFPkJkNVDUdWWKSzHVu6KjD
✅ Preview: https://rc-scrollbars-git-fork-zloka-support-htmldivelement-pro-7eab6c.vercel.app

Zloka commented 3 years ago

Updated PR to include only id prop after discussion in the related issue.

sakhnyuk / rc-scrollbars

Add an optional rootElementProps prop #24