improve codebase

babel.config.base.js

@@ -1,21 +1,21 @@
 module.exports = function (api) {
   api.cache.using(() => process.env.NODE_ENV);
+  const isRollup = api.caller((caller) => !!(caller && caller.name === 'babel-rollup-build'));
+  const isJest = api.caller((caller) => !!(caller && caller.name === 'babel-jest'));
 
-  if (api.env('build')) {
+  if (isRollup) {
     return {
       plugins: ['@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties'],
     };
   }
 
-  if (api.env('test')) {
+  if (isJest) {
     return {
       plugins: ['@babel/plugin-transform-modules-commonjs'],
       presets: [
         [
           '@babel/preset-env',
           {
-            useBuiltIns: 'usage',
-            corejs: { version: 3, proposals: true },
             targets: {
               node: 'current',
             },

config/jest-puppeteer.rollup.js

@@ -8,7 +8,6 @@ const rollupPluginStyles = require('rollup-plugin-styles');
 const deploymentConfig = require('./jest-puppeteer.rollup.config.js');
 
 const rollupConfigName = 'rollup.config.js';
-const rollupNodeEnv = 'build';
 const cacheFilePrefix = 'jest-puppeteer-overlayscrollbars-cache-';
 const cacheEncoding = 'utf8';
 const cacheHash = 'md5';
@@ -111,7 +110,7 @@ const genHtmlTemplateFunc = (content) => ({ attributes, files, meta, publicPath,
         background: lime;
       }
       #testResult.passed::before {
-        content: 'success';
+        content: 'passed';
       }
       #testResult.failed {
         display: block;
@@ -193,9 +192,6 @@ const setupRollupTest = async (rootDir, testPath, cacheDir) => {
   const buildFolderExists = fs.existsSync(path.resolve(testDir, deploymentConfig.build));
 
   if (changed || !buildFolderExists) {
-    const env = process.env.NODE_ENV;
-    process.env.NODE_ENV = rollupNodeEnv;
-
     const rollupConfigPath = path.resolve(rootDir, rollupConfigName);
 
     if (fs.existsSync(rollupConfigPath)) {
@@ -208,7 +204,7 @@ const setupRollupTest = async (rootDir, testPath, cacheDir) => {
 
           let rollupConfigObj = rollupConfig(undefined, {
             project: rootDir,
-            overwrite: (rollupConfigDefaults, legacyBabelConfig) => {
+            overwrite: ({ defaultConfig, legacyBabelConfig }) => {
               mergeBabelConfigs(legacyBabelConfig, legacyBabelConfigAssign);
               return {
                 input: path.resolve(testDir, deploymentConfig.js.input),
@@ -221,7 +217,7 @@ const setupRollupTest = async (rootDir, testPath, cacheDir) => {
                 name: testName,
                 pipeline: [
                   rollupPluginStyles(),
-                  ...rollupConfigDefaults.pipeline,
+                  ...defaultConfig.pipeline,
                   rollupPluginHtml({
                     title: `Jest-Puppeteer: ${testName}`,
                     fileName: deploymentConfig.html.output,
@@ -260,8 +256,6 @@ const setupRollupTest = async (rootDir, testPath, cacheDir) => {
         }
       }
     }
-
-    process.env.NODE_ENV = env;
   }
 };
 

package.json

@@ -11,8 +11,10 @@
     "@rollup/plugin-babel": "^5.1.0",
     "@rollup/plugin-commonjs": "^14.0.0",
     "@rollup/plugin-html": "^0.2.0",
+    "@rollup/plugin-inject": "^4.0.2",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-typescript": "^5.0.2",
+    "@testing-library/dom": "^7.26.3",
     "@types/expect-puppeteer": "^4.4.3",
     "@types/jest": "^25.2.3",
     "@types/jest-environment-puppeteer": "^4.3.2",
@@ -51,6 +53,7 @@
     "rollup-plugin-styles": "^3.10.0",
     "rollup-plugin-terser": "^6.1.0",
     "rollup-plugin-typescript2": "^0.27.1",
+    "should": "^13.2.3",
     "tslib": "^2.0.0",
     "typescript": "^3.9.7",
     "utf-8-validate": "^5.0.2"

packages/overlayscrollbars/package.json

@@ -7,6 +7,6 @@
     "test": "jest --coverage --runInBand --detectOpenHandles",
     "test:jsdom": "jest --coverage --runInBand --detectOpenHandles --selectProjects jsdom",
     "test:pptr": "jest --coverage --runInBand --detectOpenHandles --selectProjects puppeteer",
-    "build": "cross-env NODE_ENV=build rollup -c"
+    "build": "rollup -c"
   }
 }

packages/overlayscrollbars/tests/puppeteer/SizeObserver/index.test.ts

@@ -9,7 +9,7 @@ describe('Environment', () => {
   it('test', async () => {
     await expectPuppeteer(page).toClick('#start');
     await expectPuppeteer(page).toMatchElement('#testResult.passed', {
-      timeout: 30000,
+      timeout: 60000,
     });
-  }, 30000);
+  }, 60000);
 });

packages/overlayscrollbars/tests/puppeteer/SizeObserver/index.ts

@@ -2,6 +2,8 @@ import 'overlayscrollbars.scss';
 import './index.scss';
 import { createSizeObserver } from 'overlayscrollbars/observers/createSizeObserver';
 import { from, removeClass, addClass, hasDimensions, isString, isNumber, offsetSize } from 'support';
+import { waitFor } from '@testing-library/dom';
+import should from 'should';
 
 const targetElm = document.querySelector('#target');
 const heightSelect: HTMLSelectElement | null = document.querySelector('#height');
@@ -67,26 +69,6 @@ const selectOption = (select: HTMLSelectElement | null, selectedOption: string |
   return true;
 };
 
-const waitFor = (func: () => any) => {
-  const start = Date.now();
-
-  return new Promise((resolve, reject) => {
-    const intervalId = setInterval(() => {
-      const now = Date.now();
-
-      if (func()) {
-        clearInterval(intervalId);
-        resolve();
-      }
-      if (now - start > 5000) {
-        clearInterval(intervalId);
-        window.setTestResult(false);
-        reject();
-      }
-    }, 30);
-  });
-};
-
 const iterateSelect = async (select: HTMLSelectElement | null, afterEach?: () => any) => {
   if (select) {
     const selectOptions = getSelectOptions(select);
@@ -102,7 +84,12 @@ const iterateSelect = async (select: HTMLSelectElement | null, afterEach?: () =>
 
         if (hasDimensions(targetElm as HTMLElement) && offsetSizeChanged) {
           // eslint-disable-next-line
-          await waitFor(() => iterations === currIterations + 1);
+          await waitFor(() => should.equal(iterations, currIterations + 1), {
+            onTimeout(error): Error {
+              window.setTestResult(false);
+              return error;
+            },
+          });
         }
 
         if (typeof afterEach === 'function') {
@@ -140,26 +127,26 @@ selectCallback({ target: boxSizingSelect });
 // @ts-ignore
 selectCallback({ target: displaySelect });
 
-const iteratePadding = (window.iteratePadding = async (afterEach?: () => any) => {
+const iteratePadding = async (afterEach?: () => any) => {
   await iterateSelect(paddingSelect, afterEach);
-});
+};
-const iterateBorder = (window.iterateBorder = async (afterEach?: () => any) => {
+const iterateBorder = async (afterEach?: () => any) => {
   await iterateSelect(borderSelect, afterEach);
-});
+};
-const iterateHeight = (window.iterateHeight = async (afterEach?: () => any) => {
+const iterateHeight = async (afterEach?: () => any) => {
   await iterateSelect(heightSelect, afterEach);
-});
+};
-const iterateWidth = (window.iterateWidth = async (afterEach?: () => any) => {
+const iterateWidth = async (afterEach?: () => any) => {
   await iterateSelect(widthSelect, afterEach);
-});
+};
-const iterateBoxSizing = (window.iterateBoxSizing = async (afterEach?: () => any) => {
+const iterateBoxSizing = async (afterEach?: () => any) => {
   await iterateSelect(boxSizingSelect, afterEach);
-});
+};
-const iterateDisplay = (window.iterateDisplay = async (afterEach?: () => any) => {
+const iterateDisplay = async (afterEach?: () => any) => {
   await iterateSelect(displaySelect, afterEach);
-});
+};
 
-const start = (window.iterate = async () => {
+const start = async () => {
   window.setTestResult(null);
   targetElm?.removeAttribute('style');
   await iterateDisplay();
@@ -173,8 +160,10 @@ const start = (window.iterate = async () => {
     });
   });
   window.setTestResult(true);
-});
+};
 
 startBtn?.addEventListener('click', start);
 
 targetElm?.appendChild(observerElm);
+
+export { start };

packages/overlayscrollbars/types/support/dom/dimensions.d.ts

@@ -3,3 +3,4 @@ export declare const windowSize: () => WH;
 export declare const offsetSize: (elm: HTMLElement | null) => WH;
 export declare const clientSize: (elm: HTMLElement | null) => WH;
 export declare const getBoundingClientRect: (elm: HTMLElement) => DOMRect;
+export declare const hasDimensions: (elm: HTMLElement | null) => boolean;

rollup.config.base.js

@@ -1,6 +1,7 @@
 const { nodeResolve: rollupResolve } = require('@rollup/plugin-node-resolve');
 const { babel: rollupBabelPlugin } = require('@rollup/plugin-babel');
 const { terser: rollupTerser } = require('rollup-plugin-terser');
+const rollupInject = require('@rollup/plugin-inject');
 const rollupCommonjs = require('@rollup/plugin-commonjs');
 const rollupTypescript = require('rollup-plugin-typescript2');
 const rollupPrettier = require('rollup-plugin-prettier');
@@ -20,7 +21,7 @@ const rollupConfigDefaults = {
   sourcemap: true,
   esmBuild: true,
   exports: 'auto',
-  pipeline: ['resolve', 'commonjs', 'typescript', 'babel'],
+  pipeline: ['resolve', 'typescript', 'inject', 'commonjs', 'babel'],
 };
 
 const legacyBabelConfig = {
@@ -64,9 +65,16 @@ const resolvePath = (basePath, pathToResolve, appendExt) => {
   return result && appendExt ? appendExtension(result) : result;
 };
 
-const resolveConfig = (config) => {
+const resolveConfig = (config, userConfig) => {
   if (typeof config === 'function') {
-    return config(rollupConfigDefaults, legacyBabelConfig, esmBabelConfig) || {};
+    return (
+      config({
+        defaultConfig: rollupConfigDefaults,
+        legacyBabelConfig,
+        esmBabelConfig,
+        userConfig,
+      }) || {}
+    );
   }
   return config;
 };
@@ -79,14 +87,33 @@ const rollupConfig = (config = {}, { project = process.cwd(), overwrite = {}, si
   const tsconfigJSONPath = resolvePath(projectPath, 'tsconfig.json');
 
   const isTypeScriptProject = fs.existsSync(tsconfigJSONPath);
+  const userConfig = resolveConfig(config);
+  const overwriteConfig = resolveConfig(overwrite, userConfig);
   const buildConfig = {
     ...rollupConfigDefaults,
     ...{ name: projectName, file: projectName },
-    ...resolveConfig(config),
+    ...userConfig,
-    ...resolveConfig(overwrite),
+    ...overwriteConfig,
   };
 
-  const { input, src, dist, types, tests, file, cache, minVersions, sourcemap, esmBuild, name, exports, globals, pipeline } = buildConfig;
+  const {
+    input,
+    src,
+    dist,
+    types,
+    tests,
+    file,
+    cache,
+    minVersions,
+    sourcemap,
+    esmBuild,
+    name,
+    exports,
+    globals,
+    external,
+    pipeline,
+    inject,
+  } = buildConfig;
   const { devDependencies = {}, peerDependencies = {} } = require(packageJSONPath);
 
   const srcPath = resolvePath(projectPath, src);
@@ -118,13 +145,13 @@ const rollupConfig = (config = {}, { project = process.cwd(), overwrite = {}, si
   const genConfig = ({ esm, typeDeclaration }) => {
     const pipelineMap = {
       resolve: rollupResolve({
+        mainFields: ['browser', 'umd:main', 'module', 'main'],
         extensions: resolve.extensions,
         rootDir: srcPath,
         customResolveOptions: {
           moduleDirectory: [...resolve.directories.map((dir) => path.resolve(projectPath, dir)), path.resolve(__dirname, 'node_modules')],
         },
       }),
-      commonjs: rollupCommonjs(),
       typescript: isTypeScriptProject
         ? rollupTypescript({
             check: !fast,
@@ -142,10 +169,20 @@ const rollupConfig = (config = {}, { project = process.cwd(), overwrite = {}, si
             },
           })
         : {},
+      inject: rollupInject({
+        ...(typeof inject === 'object' ? inject : {}),
+      }),
+      commonjs: rollupCommonjs({
+        sourceMap: sourcemap,
+        extensions: resolve.extensions,
+      }),
       babel: rollupBabelPlugin({
         ...(esm ? esmBabelConfig : legacyBabelConfig),
         babelHelpers: 'runtime',
         extensions: resolve.extensions,
+        caller: {
+          name: 'babel-rollup-build',
+        },
       }),
     };
 
@@ -175,20 +212,14 @@ const rollupConfig = (config = {}, { project = process.cwd(), overwrite = {}, si
             }
           : []
       ),
-      external: [...Object.keys(devDependencies), ...Object.keys(peerDependencies)],
+      external: [...Object.keys(devDependencies), ...Object.keys(peerDependencies), ...((Array.isArray(external) && external) || [])],
-      plugins: pipeline.map((item) => {
+      plugins: pipeline.map((item) => (typeof item === 'string' ? pipelineMap[item] : item)),
-        if (typeof item === 'string') {
-          return pipelineMap[item];
-        }
-        return item;
-      }),
     };
   };
 
   if (!silent) {
     console.log('');
     console.log('PROJECT : ', project);
-    console.log('ENV     : ', process.env.NODE_ENV);
     console.log('CONFIG  : ', buildConfig);
   }
 

yarn.lock

@@ -851,6 +851,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.10.3":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.1.tgz#b4116a6b6711d010b2dad3b7b6e43bf1b9954740"
+  integrity sha512-J5AIf3vPj3UwXaAzb5j1xM4WAQDX3EMgemF8rjCP3SoW09LfRKAXQKt6CoVYl230P6iWdRcBbnLDDdnqWxZSCA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.10.4", "@babel/template@^7.3.3", "@babel/template@^7.4.0":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.10.4.tgz#3251996c4200ebc71d1a8fc405fba940f36ba278"
@@ -1266,6 +1273,15 @@
   resolved "https://registry.yarnpkg.com/@rollup/plugin-html/-/plugin-html-0.2.0.tgz#a01068e3e0e089a65f44c1b1988b8acd236f36e9"
   integrity sha512-aT73feaTUmJIQ45K61+5pL9GE5IYgHi0SvQ+yhQfPG1HoDlPnIjk3af9IA/DxJ+8ZlWDWFcN3pik0VavWF88hw==
 
+"@rollup/plugin-inject@^4.0.2":
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-inject/-/plugin-inject-4.0.2.tgz#55b21bb244a07675f7fdde577db929c82fc17395"
+  integrity sha512-TSLMA8waJ7Dmgmoc8JfPnwUwVZgLjjIAM6MqeIFqPO2ODK36JqE0Cf2F54UTgCUuW8da93Mvoj75a6KAVWgylw==
+  dependencies:
+    "@rollup/pluginutils" "^3.0.4"
+    estree-walker "^1.0.1"
+    magic-string "^0.25.5"
+
 "@rollup/plugin-node-resolve@^8.4.0":
   version "8.4.0"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-8.4.0.tgz#261d79a680e9dc3d86761c14462f24126ba83575"
@@ -1287,7 +1303,7 @@
     "@rollup/pluginutils" "^3.0.1"
     resolve "^1.14.1"
 
-"@rollup/pluginutils@^3.0.1", "@rollup/pluginutils@^3.0.8", "@rollup/pluginutils@^3.1.0":
+"@rollup/pluginutils@^3.0.1", "@rollup/pluginutils@^3.0.4", "@rollup/pluginutils@^3.0.8", "@rollup/pluginutils@^3.1.0":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-3.1.0.tgz#706b4524ee6dc8b103b3c995533e5ad680c02b9b"
   integrity sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==
@@ -1310,6 +1326,25 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
+"@testing-library/dom@^7.26.3":
+  version "7.26.3"
+  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-7.26.3.tgz#5554ee985f712d621bd676104b879f85d9a7a0ef"
+  integrity sha512-/1P6taENE/H12TofJaS3L1J28HnXx8ZFhc338+XPR5y1E3g5ttOgu86DsGnV9/n2iPrfJQVUZ8eiGYZGSxculw==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/runtime" "^7.10.3"
+    "@types/aria-query" "^4.2.0"
+    aria-query "^4.2.2"
+    chalk "^4.1.0"
+    dom-accessibility-api "^0.5.1"
+    lz-string "^1.4.4"
+    pretty-format "^26.4.2"
+
+"@types/aria-query@^4.2.0":
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-4.2.0.tgz#14264692a9d6e2fa4db3df5e56e94b5e25647ac0"
+  integrity sha512-iIgQNzCm0v7QMhhe4Jjn9uRh+I6GoPmt03CbEtwx3ao8/EfoQcmgtqH4vQ5Db/lxiIGaWDv6nwvunuh0RyX0+A==
+
 "@types/babel__core@^7.0.0", "@types/babel__core@^7.1.7":
   version "7.1.9"
   resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.9.tgz#77e59d438522a6fb898fa43dc3455c6e72f3963d"
@@ -2981,6 +3016,11 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
+dom-accessibility-api@^0.5.1:
+  version "0.5.4"
+  resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.4.tgz#b06d059cdd4a4ad9a79275f9d414a5c126241166"
+  integrity sha512-TvrjBckDy2c6v6RLxPv5QXOnU+SmF9nBII5621Ve5fu6Z/BDrENurBEvlC1f44lKEUVqOpK4w9E5Idc5/EgkLQ==
+
 dom-serializer@0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
@@ -5650,7 +5690,12 @@ lru-cache@^4.0.1:
     pseudomap "^1.0.2"
     yallist "^2.1.2"
 
-magic-string@0.25.7, magic-string@^0.25.2:
+lz-string@^1.4.4:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26"
+  integrity sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=
+
+magic-string@0.25.7, magic-string@^0.25.2, magic-string@^0.25.5:
   version "0.25.7"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.7.tgz#3f497d6fd34c669c6798dcb821f2ef31f5445051"
   integrity sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==
@@ -7697,6 +7742,50 @@ shellwords@^0.1.1:
   resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
   integrity sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==
 
+should-equal@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/should-equal/-/should-equal-2.0.0.tgz#6072cf83047360867e68e98b09d71143d04ee0c3"
+  integrity sha512-ZP36TMrK9euEuWQYBig9W55WPC7uo37qzAEmbjHz4gfyuXrEUgF8cUvQVO+w+d3OMfPvSRQJ22lSm8MQJ43LTA==
+  dependencies:
+    should-type "^1.4.0"
+
+should-format@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/should-format/-/should-format-3.0.3.tgz#9bfc8f74fa39205c53d38c34d717303e277124f1"
+  integrity sha1-m/yPdPo5IFxT04w01xcwPidxJPE=
+  dependencies:
+    should-type "^1.3.0"
+    should-type-adaptors "^1.0.1"
+
+should-type-adaptors@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/should-type-adaptors/-/should-type-adaptors-1.1.0.tgz#401e7f33b5533033944d5cd8bf2b65027792e27a"
+  integrity sha512-JA4hdoLnN+kebEp2Vs8eBe9g7uy0zbRo+RMcU0EsNy+R+k049Ki+N5tT5Jagst2g7EAja+euFuoXFCa8vIklfA==
+  dependencies:
+    should-type "^1.3.0"
+    should-util "^1.0.0"
+
+should-type@^1.3.0, should-type@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/should-type/-/should-type-1.4.0.tgz#0756d8ce846dfd09843a6947719dfa0d4cff5cf3"
+  integrity sha1-B1bYzoRt/QmEOmlHcZ36DUz/XPM=
+
+should-util@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/should-util/-/should-util-1.0.1.tgz#fb0d71338f532a3a149213639e2d32cbea8bcb28"
+  integrity sha512-oXF8tfxx5cDk8r2kYqlkUJzZpDBqVY/II2WhvU0n9Y3XYvAYRmeaf1PvvIvTgPnv4KJ+ES5M0PyDq5Jp+Ygy2g==
+
+should@^13.2.3:
+  version "13.2.3"
+  resolved "https://registry.yarnpkg.com/should/-/should-13.2.3.tgz#96d8e5acf3e97b49d89b51feaa5ae8d07ef58f10"
+  integrity sha512-ggLesLtu2xp+ZxI+ysJTmNjh2U0TsC+rQ/pfED9bUZZ4DKefP27D+7YJVVTvKsmjLpIi9jAa7itwDGkDDmt1GQ==
+  dependencies:
+    should-equal "^2.0.0"
+    should-format "^3.0.3"
+    should-type "^1.4.0"
+    should-type-adaptors "^1.0.1"
+    should-util "^1.0.0"
+
 side-channel@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.3.tgz#cdc46b057550bbab63706210838df5d4c19519c3"