mirrors/OverlayScrollbars
2
0
Fork 0
mirror of https://github.com/tenrok/OverlayScrollbars.git synced 2026-05-17 06:09:40 +03:00
Code Issues Packages Projects Releases Wiki Activity

improve build flow

Browse Source
This commit is contained in:
Rene Haas
2022-08-01 16:43:45 +02:00
parent cb992fea85
commit 30a9123cd2
16 changed files with 402 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files
local/browser-testing/tsconfig.json
+1 -4
View File
@@ -2,9 +2,6 @@
"extends": "@local/tsconfig",
"compilerOptions": {
"outDir": "./dist/",
"baseUrl": "./src/",
"paths": {
"@/overlayscrollbars*": ["../../../packages/overlayscrollbars/src*"]
}
"baseUrl": "./src/"
}
}
local/rollup/src/createRollupConfig.js
+23 -10
View File
@@ -1,6 +1,6 @@
/* eslint-disable no-console */
/* eslint-disable import/no-dynamic-require */
const { execSync } = require("child_process");
const { execSync } = require('child_process');
const fs = require('fs');
const path = require('path');
const glob = require('glob');
@@ -8,6 +8,8 @@ const resolve = require('@local/config/resolve');
const defaultOptions = require('./defaultOptions');
const pipelineBuild = require('./pipeline.build');
const pipelineDev = require('./pipeline.dev');
const pipelineStyles = require('./pipeline.styles');
const pipelineTypes = require('./pipeline.types');
const workspaceRoot = path.dirname(execSync('npm root').toString());
const pkg = require(`${workspaceRoot}/package.json`);
@@ -57,7 +59,9 @@ const mergeAndResolveOptions = (userOptions) => {
versions: defaultVersions,
alias: defaultAlias,
rollup: defaultRollup,
extractStyle: defaultExtractStyle,
extractStyles: defaultExtractStyles,
extractTypes: defaultExtractTypes,
verbose: defaultVerbose,
} = defaultOptions;
const {
project,
@@ -66,14 +70,18 @@ const mergeAndResolveOptions = (userOptions) => {
versions: rawVersions = {},
alias: rawAlias = {},
rollup: rawRollup = {},
extractStyle: rawExtractStyle,
extractStyles: rawExtractStyles,
extractTypes: rawExtractTypes,
verbose: rawVerbose,
} = userOptions;
const projectPath = process.cwd();
const mergedOptions = {
project: project || path.basename(projectPath),
mode: rawMode || defaultMode,
repoRoot: workspaceRoot,
extractStyle: rawExtractStyle ?? defaultExtractStyle,
extractStyles: rawExtractStyles ?? defaultExtractStyles,
extractTypes: rawExtractTypes ?? defaultExtractTypes,
verbose: rawVerbose ?? defaultVerbose,
paths: {
...defaultPaths,
...rawPaths,
@@ -96,11 +104,12 @@ const mergeAndResolveOptions = (userOptions) => {
},
},
};
const { src, dist, types } = mergedOptions.paths;
const { src, dist, types, styles } = mergedOptions.paths;
mergedOptions.paths.src = resolvePath(projectPath, src);
mergedOptions.paths.dist = resolvePath(projectPath, dist);
mergedOptions.paths.types = resolvePath(projectPath, types);
mergedOptions.paths.styles = resolvePath(projectPath, styles);
mergedOptions.rollup.input = resolvePath(projectPath, mergedOptions.rollup.input, true);
mergedOptions.rollup.output = {
@@ -114,19 +123,23 @@ const mergeAndResolveOptions = (userOptions) => {
const createConfig = (userOptions = {}) => {
const options = mergeAndResolveOptions(userOptions);
const { project, mode, versions } = options;
const { project, mode, versions, extractTypes, extractStyles, verbose } = options;
const { module: buildModuleVersion } = versions;
const isBuild = mode === 'build';
if (isBuild) {
if (verbose) {
console.log('');
console.log('PROJECT : ', project);
console.log('OPTIONS : ', options);
}
const umd = pipelineBuild(resolve, false, options, { declarationFiles: true, outputStyle: true });
const esm = buildModuleVersion ? pipelineBuild(resolve, true, options) : null;
if (isBuild) {
const umd = pipelineBuild(resolve, options);
const esm = buildModuleVersion && pipelineBuild(resolve, options, true);
const types = extractTypes && pipelineTypes(resolve, options);
const styles = extractStyles && pipelineStyles(resolve, options);
return [umd, esm].filter((build) => !!build);
return [umd, esm, types, styles].flat().filter((build) => !!build);
}
return [pipelineDev(resolve, options)];
local/rollup/src/defaultOptions.js
+4 -1
View File
@@ -1,16 +1,19 @@
module.exports = {
project: null,
mode: 'build',
verbose: false,
paths: {
src: './src',
dist: './dist',
types: './types',
styles: './styles',
},
versions: {
minified: true,
module: true,
},
extractStyle: false,
extractStyles: false,
extractTypes: false,
alias: {},
rollup: {
input: './src/index',
local/rollup/src/pipeline.build.js
+8 -56
View File
@@ -1,12 +1,8 @@
const path = require('path');
const { babel: rollupBabelInputPlugin } = require('@rollup/plugin-babel');
const { terser: rollupTerser } = require('rollup-plugin-terser');
const { summary } = require('rollup-plugin-summary');
const rollupTs = require('rollup-plugin-ts');
const babelConfigUmd = require('./babel.config.umd');
const babelConfigEsm = require('./babel.config.esm');
const {
rollupBabel,
rollupTs,
rollupCommonjs,
rollupResolve,
rollupAlias,
@@ -39,12 +35,12 @@ const createOutputWithMinifiedVersion = (output, esm, buildMinifiedVersion) =>
: []
);
module.exports = (resolve, esm, options, { declarationFiles = false, outputStyle = false } = {}) => {
const { rollup, paths, versions, alias, extractStyle } = options;
module.exports = (resolve, options, esm) => {
const { rollup, paths, versions, alias, extractStyles } = options;
const { output: rollupOutput, input, plugins = [], ...rollupOptions } = rollup;
const { name, file, globals, exports, sourcemap: rawSourcemap, ...outputConfig } = rollupOutput;
const { minified: buildMinifiedVersion } = versions;
const { src: srcPath, dist: distPath, types: typesPath } = paths;
const { src: srcPath, dist: distPath } = paths;
const sourcemap = rawSourcemap;
const output = createOutputWithMinifiedVersion(
@@ -73,56 +69,12 @@ module.exports = (resolve, esm, options, { declarationFiles = false, outputStyle
},
...rollupOptions,
plugins: [
summary({
showGzippedSize: true,
showBrotliSize: true,
showMinifiedSize: false,
warnLow: 33000,
totalLow: 33000,
warnHigh: 36000,
totalHigh: 36000,
}),
rollupAlias(alias),
rollupScss(extractStyle, outputStyle),
rollupTs({
tsconfig: (resolvedConfig) => ({
...resolvedConfig,
declaration: declarationFiles,
declarationDir: typesPath,
}),
include: ['*.ts+(|x)', '**/*.ts+(|x)'],
exclude: ['node_modules', '**/node_modules/*'],
}),
rollupScss(extractStyles, false),
rollupTs(srcPath),
rollupResolve(srcPath, resolve),
rollupCommonjs(sourcemap, resolve),
rollupBabelInputPlugin({
...(esm ? babelConfigEsm : babelConfigUmd),
assumptions: {
enumerableModuleMeta: false,
constantReexports: true,
iterableIsArray: true,
objectRestNoSymbols: true,
noNewArrows: true,
noClassCalls: true,
ignoreToPrimitiveHint: true,
ignoreFunctionLength: true,
// privateFieldsAsProperties: true,
// setPublicClassFields: true,
setSpreadProperties: true,
pureGetters: true,
},
plugins: [
'@babel/plugin-transform-runtime',
['@babel/plugin-proposal-class-properties', { loose: true }],
['@babel/plugin-proposal-private-methods', { loose: true }],
],
babelHelpers: 'runtime',
shouldPrintComment: () => false,
caller: {
name: 'babel-rollup-build',
},
extensions: resolve.extensions,
}),
rollupBabel(resolve, esm),
...plugins,
].filter(Boolean),
};
local/rollup/src/pipeline.common.plugins.js
+56
View File
@@ -1,10 +1,15 @@
const postcss = require('postcss');
const autoprefixer = require('autoprefixer');
const { nodeResolve: rollupPluginResolve } = require('@rollup/plugin-node-resolve');
const { babel: rollupBabelInputPlugin } = require('@rollup/plugin-babel');
const rollupPluginScss = require('rollup-plugin-scss');
const rollupPluginIgnoreImport = require('rollup-plugin-ignore-import');
const rollupPluginCommonjs = require('@rollup/plugin-commonjs');
const rollupPluginAlias = require('@rollup/plugin-alias');
const rollupPluginTs = require('rollup-plugin-typescript2');
const { default: rollupPluginEsBuild } = require('rollup-plugin-esbuild');
const babelConfigUmd = require('./babel.config.umd');
const babelConfigEsm = require('./babel.config.esm');
module.exports = {
rollupAlias: (aliasEntries) =>
@@ -36,4 +41,55 @@ module.exports = {
});
}
},
rollupEsBuild: () =>
rollupPluginEsBuild({
include: /\.[jt]sx?$/,
sourceMap: true,
target: 'es6',
tsconfig: './tsconfig.json',
}),
rollupBabel: (resolve, esm) =>
rollupBabelInputPlugin({
...(esm ? babelConfigEsm : babelConfigUmd),
assumptions: {
enumerableModuleMeta: false,
constantReexports: true,
iterableIsArray: true,
objectRestNoSymbols: true,
noNewArrows: true,
noClassCalls: true,
ignoreToPrimitiveHint: true,
ignoreFunctionLength: true,
// privateFieldsAsProperties: true,
// setPublicClassFields: true,
setSpreadProperties: true,
pureGetters: true,
},
plugins: [
'@babel/plugin-transform-runtime',
['@babel/plugin-proposal-class-properties', { loose: true }],
['@babel/plugin-proposal-private-methods', { loose: true }],
],
babelHelpers: 'runtime',
shouldPrintComment: () => false,
caller: {
name: 'babel-rollup-build',
},
extensions: resolve.extensions,
}),
rollupTs: (srcPath, declaration) =>
rollupPluginTs({
tsconfigOverride: {
compilerOptions: {
declaration,
emitDeclarationOnly: declaration,
},
// files to include / exclude from typescript .d.ts generation
include: [`${srcPath}/**/*`],
exclude: ['node_modules', '**/node_modules/*', '*.d.ts', '**/*.d.ts'],
},
// files to include / exclude from the plugin
include: ['*.ts+(|x)', '**/*.ts+(|x)'],
exclude: ['node_modules', '**/node_modules/*', '*.d.ts', '**/*.d.ts'],
}),
};
local/rollup/src/pipeline.dev.js
+4 -9
View File
@@ -1,6 +1,6 @@
const path = require('path');
const { default: rollupEsBuild } = require('rollup-plugin-esbuild');
const {
rollupEsBuild,
rollupCommonjs,
rollupResolve,
rollupAlias,
@@ -8,7 +8,7 @@ const {
} = require('./pipeline.common.plugins');
module.exports = (resolve, options) => {
const { rollup, paths, alias, extractStyle } = options;
const { rollup, paths, alias, extractStyles } = options;
const { output: rollupOutput, input, plugins = [], ...rollupOptions } = rollup;
const { file, sourcemap: rawSourcemap, ...outputConfig } = rollupOutput;
const { src: srcPath, dist: distPath } = paths;
@@ -28,13 +28,8 @@ module.exports = (resolve, options) => {
...rollupOptions,
plugins: [
rollupAlias(alias),
rollupScss(extractStyle),
rollupEsBuild({
include: /\.[jt]sx?$/,
sourceMap: true,
target: 'es6',
tsconfig: './tsconfig.json',
}),
rollupScss(extractStyles, false),
rollupEsBuild(),
rollupResolve(srcPath, resolve),
rollupCommonjs(sourcemap, resolve),
...plugins,
local/rollup/src/pipeline.styles.js
+29
View File
@@ -0,0 +1,29 @@
const path = require('path');
const { rollupResolve, rollupScss, rollupEsBuild } = require('./pipeline.common.plugins');
module.exports = (resolve, options) => {
const { rollup, paths } = options;
const { output: rollupOutput, input } = rollup;
const { file } = rollupOutput;
const { src: srcPath, styles: stylesPath } = paths;
const ogWrite = process.stdout.write;
return {
input,
plugins: [
rollupResolve(srcPath, resolve),
rollupScss(true, path.resolve(stylesPath, `${file}.css`)),
rollupEsBuild(),
{
generateBundle() {
process.stdout.write = () => {
process.stdout.write = ogWrite;
};
},
writeBundle() {
process.stdout.write = ogWrite;
},
},
],
};
};
local/rollup/src/pipeline.types.js
+47
View File
@@ -0,0 +1,47 @@
const fs = require('fs');
const { basename } = require('path');
const path = require('path');
const rollupDts = require('rollup-plugin-dts');
const { rollupTs } = require('./pipeline.common.plugins');
module.exports = (resolve, options) => {
const { rollup, paths } = options;
const { output: rollupOutput, input } = rollup;
const { file } = rollupOutput;
const { src: srcPath, types: typesPath } = paths;
const dtsOutput = path.resolve(typesPath, `${file}.d.ts`);
return [
{
input,
output: {
file: path.resolve(typesPath, `${file}`),
},
plugins: [rollupTs(srcPath, true)],
},
{
input: path.join(typesPath, `${basename(input).replace('.ts', '.d.ts')}`),
output: {
file: dtsOutput,
},
plugins: [
rollupDts.default({
respectExternal: true,
compilerOptions: {
baseUrl: typesPath,
},
}),
{
writeBundle() {
const filesAndDirs = fs.readdirSync(typesPath);
filesAndDirs.forEach((fileOrDir) => {
if (basename(fileOrDir) !== basename(dtsOutput)) {
fs.rmSync(path.join(typesPath, fileOrDir), { recursive: true });
}
});
},
},
],
},
];
};
package-lock.json
Generated
+123 -65
View File
@@ -7,6 +7,9 @@
"workspaces": [
"packages/*"
],
"dependencies": {
"rollup-plugin-typescript2": "^0.32.1"
},
"bin": {
"workspace-root": "workspace.root.js"
},
@@ -63,6 +66,7 @@
"postcss": "^8.4.14",
"prettier": "^2.6.2",
"rollup": "^2.75.5",
"rollup-plugin-dts": "^4.2.2",
"rollup-plugin-esbuild": "^4.9.1",
"rollup-plugin-ignore-import": "^1.3.2",
"rollup-plugin-livereload": "^2.0.0",
@@ -3982,7 +3986,6 @@
},
"node_modules/commondir": {
"version": "1.0.1",
"dev": true,
"license": "MIT"
},
"node_modules/compatfactory": {
@@ -5445,7 +5448,6 @@
},
"node_modules/estree-walker": {
"version": "2.0.2",
"dev": true,
"license": "MIT"
},
"node_modules/esutils": {
@@ -5617,7 +5619,6 @@
},
"node_modules/find-cache-dir": {
"version": "3.3.2",
"dev": true,
"license": "MIT",
"dependencies": {
"commondir": "^1.0.1",
@@ -5633,7 +5634,6 @@
},
"node_modules/find-up": {
"version": "4.1.0",
"dev": true,
"license": "MIT",
"dependencies": {
"locate-path": "^5.0.0",
@@ -5726,7 +5726,6 @@
},
"node_modules/fs-extra": {
"version": "10.1.0",
"dev": true,
"license": "MIT",
"dependencies": {
"graceful-fs": "^4.2.0",
@@ -5755,7 +5754,6 @@
},
"node_modules/function-bind": {
"version": "1.1.1",
"dev": true,
"license": "MIT"
},
"node_modules/function.prototype.name": {
@@ -5999,7 +5997,6 @@
},
"node_modules/graceful-fs": {
"version": "4.2.10",
"dev": true,
"license": "ISC"
},
"node_modules/gzip-size": {
@@ -6051,7 +6048,6 @@
},
"node_modules/has": {
"version": "1.0.3",
"dev": true,
"license": "MIT",
"dependencies": {
"function-bind": "^1.1.1"
@@ -6425,7 +6421,6 @@
},
"node_modules/is-core-module": {
"version": "2.9.0",
"dev": true,
"license": "MIT",
"dependencies": {
"has": "^1.0.3"
@@ -7880,7 +7875,6 @@
},
"node_modules/jsonfile": {
"version": "6.1.0",
"dev": true,
"license": "MIT",
"dependencies": {
"universalify": "^2.0.0"
@@ -8001,7 +7995,6 @@
},
"node_modules/locate-path": {
"version": "5.0.0",
"dev": true,
"license": "MIT",
"dependencies": {
"p-locate": "^4.1.0"
@@ -8080,7 +8073,6 @@
},
"node_modules/make-dir": {
"version": "3.1.0",
"dev": true,
"license": "MIT",
"dependencies": {
"semver": "^6.0.0"
@@ -8997,7 +8989,6 @@
},
"node_modules/p-limit": {
"version": "2.3.0",
"dev": true,
"license": "MIT",
"dependencies": {
"p-try": "^2.0.0"
@@ -9011,7 +9002,6 @@
},
"node_modules/p-locate": {
"version": "4.1.0",
"dev": true,
"license": "MIT",
"dependencies": {
"p-limit": "^2.2.0"
@@ -9059,7 +9049,6 @@
},
"node_modules/p-try": {
"version": "2.2.0",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=6"
@@ -9114,7 +9103,6 @@
},
"node_modules/path-exists": {
"version": "4.0.0",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=8"
@@ -9138,7 +9126,6 @@
},
"node_modules/path-parse": {
"version": "1.0.7",
"dev": true,
"license": "MIT"
},
"node_modules/path-type": {
@@ -9161,7 +9148,6 @@
},
"node_modules/picomatch": {
"version": "2.3.1",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=8.6"
@@ -9180,7 +9166,6 @@
},
"node_modules/pkg-dir": {
"version": "4.2.0",
"dev": true,
"license": "MIT",
"dependencies": {
"find-up": "^4.0.0"
@@ -10231,7 +10216,6 @@
},
"node_modules/resolve": {
"version": "1.22.1",
"dev": true,
"license": "MIT",
"dependencies": {
"is-core-module": "^2.9.0",
@@ -10305,7 +10289,6 @@
},
"node_modules/rollup": {
"version": "2.75.7",
"dev": true,
"license": "MIT",
"bin": {
"rollup": "dist/bin/rollup"
@@ -10317,6 +10300,40 @@
"fsevents": "~2.3.2"
}
},
"node_modules/rollup-plugin-dts": {
"version": "4.2.2",
"resolved": "https://registry.npmjs.org/rollup-plugin-dts/-/rollup-plugin-dts-4.2.2.tgz",
"integrity": "sha512-A3g6Rogyko/PXeKoUlkjxkP++8UDVpgA7C+Tdl77Xj4fgEaIjPSnxRmR53EzvoYy97VMVwLAOcWJudaVAuxneQ==",
"dev": true,
"dependencies": {
"magic-string": "^0.26.1"
},
"engines": {
"node": ">=v12.22.11"
},
"funding": {
"url": "https://github.com/sponsors/Swatinem"
},
"optionalDependencies": {
"@babel/code-frame": "^7.16.7"
},
"peerDependencies": {
"rollup": "^2.55",
"typescript": "^4.1"
}
},
"node_modules/rollup-plugin-dts/node_modules/magic-string": {
"version": "0.26.2",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.2.tgz",
"integrity": "sha512-NzzlXpclt5zAbmo6h6jNc8zl2gNRGHvmsZW4IvZhTC4W7k4OlLP+S5YLussa/r3ixNT66KOQfNORlXHSOy/X4A==",
"dev": true,
"dependencies": {
"sourcemap-codec": "^1.4.8"
},
"engines": {
"node": ">=12"
}
},
"node_modules/rollup-plugin-esbuild": {
"version": "4.9.1",
"dev": true,
@@ -10557,6 +10574,34 @@
"node": ">=12"
}
},
"node_modules/rollup-plugin-typescript2": {
"version": "0.32.1",
"resolved": "https://registry.npmjs.org/rollup-plugin-typescript2/-/rollup-plugin-typescript2-0.32.1.tgz",
"integrity": "sha512-RanO8bp1WbeMv0bVlgcbsFNCn+Y3rX7wF97SQLDxf0fMLsg0B/QFF005t4AsGUcDgF3aKJHoqt4JF2xVaABeKw==",
"dependencies": {
"@rollup/pluginutils": "^4.1.2",
"find-cache-dir": "^3.3.2",
"fs-extra": "^10.0.0",
"resolve": "^1.20.0",
"tslib": "^2.4.0"
},
"peerDependencies": {
"rollup": ">=1.26.3",
"typescript": ">=2.4.0"
}
},
"node_modules/rollup-plugin-typescript2/node_modules/@rollup/pluginutils": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
"integrity": "sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==",
"dependencies": {
"estree-walker": "^2.0.1",
"picomatch": "^2.2.2"
},
"engines": {
"node": ">= 8.0.0"
}
},
"node_modules/rollup-pluginutils": {
"version": "2.8.2",
"dev": true,
@@ -10649,7 +10694,6 @@
},
"node_modules/semver": {
"version": "6.3.0",
"dev": true,
"license": "ISC",
"bin": {
"semver": "bin/semver.js"
@@ -11204,7 +11248,6 @@
},
"node_modules/supports-preserve-symlinks-flag": {
"version": "1.0.0",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.4"
@@ -11434,7 +11477,6 @@
},
"node_modules/tslib": {
"version": "2.4.0",
"dev": true,
"license": "0BSD"
},
"node_modules/tsutils": {
@@ -11512,7 +11554,6 @@
},
"node_modules/typescript": {
"version": "4.7.4",
"dev": true,
"license": "Apache-2.0",
"bin": {
"tsc": "bin/tsc",
@@ -11608,7 +11649,6 @@
},
"node_modules/universalify": {
"version": "2.0.0",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 10.0.0"
@@ -14452,8 +14492,7 @@
"dev": true
},
"commondir": {
"version": "1.0.1",
"dev": true
"version": "1.0.1"
},
"compatfactory": {
"version": "1.0.1",
@@ -15398,8 +15437,7 @@
"dev": true
},
"estree-walker": {
"version": "2.0.2",
"dev": true
"version": "2.0.2"
},
"esutils": {
"version": "2.0.3",
@@ -15518,7 +15556,6 @@
},
"find-cache-dir": {
"version": "3.3.2",
"dev": true,
"requires": {
"commondir": "^1.0.1",
"make-dir": "^3.0.2",
@@ -15527,7 +15564,6 @@
},
"find-up": {
"version": "4.1.0",
"dev": true,
"requires": {
"locate-path": "^5.0.0",
"path-exists": "^4.0.0"
@@ -15576,7 +15612,6 @@
},
"fs-extra": {
"version": "10.1.0",
"dev": true,
"requires": {
"graceful-fs": "^4.2.0",
"jsonfile": "^6.0.1",
@@ -15595,8 +15630,7 @@
"dev": true
},
"function-bind": {
"version": "1.1.1",
"dev": true
"version": "1.1.1"
},
"function.prototype.name": {
"version": "1.1.5",
@@ -15748,8 +15782,7 @@
}
},
"graceful-fs": {
"version": "4.2.10",
"dev": true
"version": "4.2.10"
},
"gzip-size": {
"version": "7.0.0",
@@ -15782,7 +15815,6 @@
},
"has": {
"version": "1.0.3",
"dev": true,
"requires": {
"function-bind": "^1.1.1"
}
@@ -16008,7 +16040,6 @@
},
"is-core-module": {
"version": "2.9.0",
"dev": true,
"requires": {
"has": "^1.0.3"
}
@@ -16954,7 +16985,6 @@
},
"jsonfile": {
"version": "6.1.0",
"dev": true,
"requires": {
"graceful-fs": "^4.1.6",
"universalify": "^2.0.0"
@@ -17033,7 +17063,6 @@
},
"locate-path": {
"version": "5.0.0",
"dev": true,
"requires": {
"p-locate": "^4.1.0"
}
@@ -17089,7 +17118,6 @@
},
"make-dir": {
"version": "3.1.0",
"dev": true,
"requires": {
"semver": "^6.0.0"
}
@@ -17683,14 +17711,12 @@
},
"p-limit": {
"version": "2.3.0",
"dev": true,
"requires": {
"p-try": "^2.0.0"
}
},
"p-locate": {
"version": "4.1.0",
"dev": true,
"requires": {
"p-limit": "^2.2.0"
}
@@ -17718,8 +17744,7 @@
}
},
"p-try": {
"version": "2.2.0",
"dev": true
"version": "2.2.0"
},
"package-hash": {
"version": "4.0.0",
@@ -17753,8 +17778,7 @@
"dev": true
},
"path-exists": {
"version": "4.0.0",
"dev": true
"version": "4.0.0"
},
"path-is-absolute": {
"version": "1.0.1",
@@ -17765,8 +17789,7 @@
"dev": true
},
"path-parse": {
"version": "1.0.7",
"dev": true
"version": "1.0.7"
},
"path-type": {
"version": "4.0.0",
@@ -17781,8 +17804,7 @@
"dev": true
},
"picomatch": {
"version": "2.3.1",
"dev": true
"version": "2.3.1"
},
"pirates": {
"version": "4.0.5",
@@ -17790,7 +17812,6 @@
},
"pkg-dir": {
"version": "4.2.0",
"dev": true,
"requires": {
"find-up": "^4.0.0"
}
@@ -18408,7 +18429,6 @@
},
"resolve": {
"version": "1.22.1",
"dev": true,
"requires": {
"is-core-module": "^2.9.0",
"path-parse": "^1.0.7",
@@ -18447,11 +18467,31 @@
},
"rollup": {
"version": "2.75.7",
"dev": true,
"requires": {
"fsevents": "~2.3.2"
}
},
"rollup-plugin-dts": {
"version": "4.2.2",
"resolved": "https://registry.npmjs.org/rollup-plugin-dts/-/rollup-plugin-dts-4.2.2.tgz",
"integrity": "sha512-A3g6Rogyko/PXeKoUlkjxkP++8UDVpgA7C+Tdl77Xj4fgEaIjPSnxRmR53EzvoYy97VMVwLAOcWJudaVAuxneQ==",
"dev": true,
"requires": {
"@babel/code-frame": "^7.16.7",
"magic-string": "^0.26.1"
},
"dependencies": {
"magic-string": {
"version": "0.26.2",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.2.tgz",
"integrity": "sha512-NzzlXpclt5zAbmo6h6jNc8zl2gNRGHvmsZW4IvZhTC4W7k4OlLP+S5YLussa/r3ixNT66KOQfNORlXHSOy/X4A==",
"dev": true,
"requires": {
"sourcemap-codec": "^1.4.8"
}
}
}
},
"rollup-plugin-esbuild": {
"version": "4.9.1",
"dev": true,
@@ -18599,6 +18639,29 @@
}
}
},
"rollup-plugin-typescript2": {
"version": "0.32.1",
"resolved": "https://registry.npmjs.org/rollup-plugin-typescript2/-/rollup-plugin-typescript2-0.32.1.tgz",
"integrity": "sha512-RanO8bp1WbeMv0bVlgcbsFNCn+Y3rX7wF97SQLDxf0fMLsg0B/QFF005t4AsGUcDgF3aKJHoqt4JF2xVaABeKw==",
"requires": {
"@rollup/pluginutils": "^4.1.2",
"find-cache-dir": "^3.3.2",
"fs-extra": "^10.0.0",
"resolve": "^1.20.0",
"tslib": "^2.4.0"
},
"dependencies": {
"@rollup/pluginutils": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
"integrity": "sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==",
"requires": {
"estree-walker": "^2.0.1",
"picomatch": "^2.2.2"
}
}
}
},
"rollup-pluginutils": {
"version": "2.8.2",
"dev": true,
@@ -18659,8 +18722,7 @@
}
},
"semver": {
"version": "6.3.0",
"dev": true
"version": "6.3.0"
},
"serialize-javascript": {
"version": "4.0.0",
@@ -19035,8 +19097,7 @@
}
},
"supports-preserve-symlinks-flag": {
"version": "1.0.0",
"dev": true
"version": "1.0.0"
},
"svgo": {
"version": "2.8.0",
@@ -19183,8 +19244,7 @@
}
},
"tslib": {
"version": "2.4.0",
"dev": true
"version": "2.4.0"
},
"tsutils": {
"version": "3.21.0",
@@ -19233,8 +19293,7 @@
}
},
"typescript": {
"version": "4.7.4",
"dev": true
"version": "4.7.4"
},
"ua-parser-js": {
"version": "1.0.2",
@@ -19285,8 +19344,7 @@
}
},
"universalify": {
"version": "2.0.0",
"dev": true
"version": "2.0.0"
},
"update-browserslist-db": {
"version": "1.0.3",
package.json
+14 -10
View File
@@ -12,6 +12,12 @@
"@babel/preset-env": "^7.18.2",
"@babel/preset-typescript": "^7.17.12",
"@babel/runtime": "^7.18.2",
"@local/browser-testing": "file:./local/browser-testing",
"@local/config": "file:./local/config",
"@local/full-coverage": "file:./local/full-coverage",
"@local/playwright-tooling": "file:./local/playwright-tooling",
"@local/rollup": "file:./local/rollup",
"@local/tsconfig": "file:./local/tsconfig",
"@playwright/test": "^1.22.2",
"@rollup/plugin-alias": "^3.1.9",
"@rollup/plugin-babel": "^5.3.1",
@@ -53,6 +59,7 @@
"postcss": "^8.4.14",
"prettier": "^2.6.2",
"rollup": "^2.75.5",
"rollup-plugin-dts": "^4.2.2",
"rollup-plugin-esbuild": "^4.9.1",
"rollup-plugin-ignore-import": "^1.3.2",
"rollup-plugin-livereload": "^2.0.0",
@@ -66,19 +73,16 @@
"tslib": "^2.4.0",
"typescript": "^4.7.4",
"utf-8-validate": "^5.0.2",
"v8-to-istanbul": "^9.0.1",
"@local/tsconfig": "file:./local/tsconfig",
"@local/config": "file:./local/config",
"@local/rollup": "file:./local/rollup",
"@local/full-coverage": "file:./local/full-coverage",
"@local/playwright-tooling": "file:./local/playwright-tooling",
"@local/browser-testing": "file:./local/browser-testing"
"v8-to-istanbul": "^9.0.1"
},
"scripts": {
"test:jsdom": "npm run test:jsdom --workspace=overlayscrollbars",
"test:playwright": "npm run test:playwright --workspace=overlayscrollbars",
"test:playwright:dev": "npm run test:playwright --workspace=overlayscrollbars",
"jest": "npm run jest --workspace=overlayscrollbars",
"playwright": "npm run playwright --workspace=overlayscrollbars",
"playwright:dev": "npm run test:playwright:dev --workspace=overlayscrollbars",
"build": "npm run build --workspace=overlayscrollbars",
"lint": "npx eslint --fix ."
},
"dependencies": {
"rollup-plugin-typescript2": "^0.32.1"
}
}
packages/overlayscrollbars/package.json
+7 -6
View File
@@ -6,17 +6,18 @@
"files": [
"src",
"dist",
"types/overlayscrollbars.d.ts"
"types",
"styles"
],
"main": "dist/overlayscrollbars.js",
"module": "dist/overlayscrollbars.esm.js",
"types": "types/overlayscrollbars.d.ts",
"scripts": {
"test:jsdom": "jest --coverage --runInBand --detectOpenHandles --testPathPattern",
"posttest:jsdom": "full-coverage",
"build": "rollup -c",
"test:playwright": "playwright test --quiet",
"test:playwright:dev": "playwright test",
"posttest:playwright": "playwright-merge-coverage && full-coverage"
"jest": "jest --coverage --runInBand --detectOpenHandles --testPathPattern",
"postjest": "full-coverage",
"playwright": "playwright test --quiet",
"playwright:dev": "playwright test",
"postplaywright": "playwright-merge-coverage && full-coverage"
}
}
packages/overlayscrollbars/rollup.config.js
+15 -1
View File
@@ -1,10 +1,13 @@
const { terser: rollupTerser } = require('rollup-plugin-terser');
const { summary } = require('rollup-plugin-summary');
const createRollupConfig = require('@local/rollup');
const { devDependencies, peerDependencies } = require('./package.json');
module.exports = createRollupConfig({
project: 'OverlayScrollbars',
extractStyle: true,
verbose: true,
extractStyles: true,
extractTypes: true,
rollup: {
external: Object.keys(devDependencies || {}).concat(Object.keys(peerDependencies || {})),
output: {
@@ -32,5 +35,16 @@ module.exports = createRollupConfig({
}),
],
},
plugins: [
summary({
showGzippedSize: true,
showBrotliSize: true,
showMinifiedSize: false,
warnLow: 33000,
totalLow: 33000,
warnHigh: 36000,
totalHigh: 36000,
}),
],
},
});
packages/overlayscrollbars/dist/overlayscrollbars.css → packages/overlayscrollbars/styles/overlayscrollbars.css
View File
packages/overlayscrollbars/tests/jest/instances.test.ts
+1 -1
View File
@@ -2,7 +2,7 @@ import { addInstance, removeInstance, getInstance } from 'instances';
import { OverlayScrollbars } from 'overlayscrollbars';
const testElm = document.body;
const testInstance = OverlayScrollbars(document.body);
const testInstance = OverlayScrollbars(document.body, {});
describe('instances', () => {
afterEach(() => {
packages/overlayscrollbars/tsconfig.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"extends": "@local/tsconfig",
"compilerOptions": {
"baseUrl": "./src",
"baseUrl": "./src"
}
}
packages/overlayscrollbars/types/overlayscrollbars.d.ts
Vendored
+69 -82
View File
@@ -1,50 +1,46 @@
type CacheValues<T> = [
value: T,
changed: boolean,
previous?: T
];
type UpdateCache<Value> = (force?: boolean) => CacheValues<Value>;
interface WH<T> {
declare type CacheValues<T> = [value: T, changed: boolean, previous?: T];
declare type UpdateCache<Value> = (force?: boolean) => CacheValues<Value>;
interface WH<T = number> {
w: T;
h: T;
}
type DeepPartial<T> = {
declare type DeepPartial<T> = {
[P in keyof T]?: T[P] extends Record<string, unknown> ? DeepPartial<T[P]> : T[P];
};
type StyleObject<CustomCssProps> = {
[Key in keyof CSSStyleDeclaration | (CustomCssProps extends string ? CustomCssProps : "")]?: string | number;
declare type StyleObject<CustomCssProps = ''> = {
[Key in keyof CSSStyleDeclaration | (CustomCssProps extends string ? CustomCssProps : '')]?: string | number;
};
type OverflowStyle = "scroll" | "hidden" | "visible";
declare type OverflowStyle = 'scroll' | 'hidden' | 'visible';
interface TRBL {
t: number;
r: number;
b: number;
l: number;
}
interface XY<T> {
interface XY<T = number> {
x: T;
y: T;
}
type EventListener<EventMap extends Record<string, any[]>, Name extends keyof EventMap> = (...args: EventMap[Name]) => void;
type InitialEventListeners<EventMap extends Record<string, any[]>> = {
[K in keyof EventMap]?: EventListener<EventMap> | EventListener<EventMap>[];
declare type EventListener$1<EventMap extends Record<string, any[]>, Name extends keyof EventMap = keyof EventMap> = (...args: EventMap[Name]) => void;
declare type InitialEventListeners<EventMap extends Record<string, any[]>> = {
[K in keyof EventMap]?: EventListener$1<EventMap> | EventListener$1<EventMap>[];
};
type OverflowBehavior = "hidden" | "scroll" | "visible" | "visible-hidden" | "visible-scroll";
type ScrollbarVisibilityBehavior = "visible" | "hidden" | "auto";
type ScrollbarAutoHideBehavior = "never" | "scroll" | "leave" | "move";
declare type OverflowBehavior = 'hidden' | 'scroll' | 'visible' | 'visible-hidden' | 'visible-scroll';
declare type ScrollbarVisibilityBehavior = 'visible' | 'hidden' | 'auto';
declare type ScrollbarAutoHideBehavior = 'never' | 'scroll' | 'leave' | 'move';
interface Options {
paddingAbsolute: boolean;
showNativeOverlaidScrollbars: boolean;
updating: {
elementEvents: Array<[
elementSelector: string,
eventNames: string
]> | null;
elementEvents: Array<[elementSelector: string, eventNames: string]> | null;
attributes: string[] | null;
debounce: [
timeout: number,
maxWait: number
] | number | null; // (if tuple: [timeout: 0, maxWait: 33], if number: [timeout: number, maxWait: false]) debounce for content Changes
debounce: [timeout: number, maxWait: number] | number | null;
ignoreMutation: ((mutation: MutationRecord) => any) | null;
};
overflow: {
@@ -61,41 +57,42 @@ interface Options {
pointers: string[] | null;
};
}
type PluginInstance = Record<string, unknown> | ((staticObj: OverlayScrollbarsStatic, instanceObj: OverlayScrollbars) => void);
type Plugin<T extends PluginInstance> = {
declare type PluginInstance = Record<string, unknown> | ((staticObj: OverlayScrollbarsStatic, instanceObj: OverlayScrollbars) => void);
declare type Plugin<T extends PluginInstance = PluginInstance> = {
[pluginName: string]: T;
};
type SizeObserverPluginInstance = {
_: (listenerElement: HTMLElement, onSizeChangedCallback: (appear: boolean) => any, observeAppearChange: boolean) => [
appearCallback: () => any,
offFns: (() => any)[]
];
declare type SizeObserverPluginInstance = {
_: (listenerElement: HTMLElement, onSizeChangedCallback: (appear: boolean) => any, observeAppearChange: boolean) => [appearCallback: () => any, offFns: (() => any)[]];
};
declare const sizeObserverPlugin: Plugin<SizeObserverPluginInstance>;
type StaticInitialization = HTMLElement | false | null;
type DynamicInitialization = HTMLElement | boolean | null;
type InitializationTargetElement = HTMLElement | HTMLTextAreaElement;
type Initialization = Omit<StructureInitialization, "target"> & ScrollbarsInitialization & {
declare type StaticInitialization = HTMLElement | false | null;
declare type DynamicInitialization = HTMLElement | boolean | null;
declare type InitializationTargetElement = HTMLElement | HTMLTextAreaElement;
declare type Initialization = Omit<StructureInitialization, 'target'> & ScrollbarsInitialization & {
cancel: {
nativeScrollbarsOverlaid: boolean;
body: boolean | null;
};
};
type InitializationTargetObject = DeepPartial<Initialization> & Pick<StructureInitialization, "target">;
type InitializationTarget = InitializationTargetElement | InitializationTargetObject;
declare type InitializationTargetObject = DeepPartial<Initialization> & Pick<StructureInitialization, 'target'>;
declare type InitializationTarget = InitializationTargetElement | InitializationTargetObject;
/**
* Static elements MUST be present.
* With false, null or undefined the element will be generated, otherwise the specified element is taken.
*/
type StaticInitializationElement<Args extends any[]> = ((...args: Args) => StaticInitialization) | StaticInitialization;
declare type StaticInitializationElement<Args extends any[]> = ((...args: Args) => StaticInitialization) | StaticInitialization;
/**
* Dynamic element CAN be present.
* If its a element the element will be taken as the repsective element.
* With true the element will be generated.
* With false, null or undefined the element won't be generated.
*/
type DynamicInitializationElement<Args extends any[]> = ((...args: Args) => DynamicInitialization) | DynamicInitialization;
type ScrollbarsDynamicInitializationElement = DynamicInitializationElement<[
declare type DynamicInitializationElement<Args extends any[]> = ((...args: Args) => DynamicInitialization) | DynamicInitialization;
declare type ScrollbarsDynamicInitializationElement = DynamicInitializationElement<[
target: InitializationTargetElement,
host: HTMLElement,
viewport: HTMLElement
@@ -111,6 +108,7 @@ type ScrollbarsDynamicInitializationElement = DynamicInitializationElement<[
interface ScrollbarsInitialization {
scrollbarsSlot: ScrollbarsDynamicInitializationElement;
}
interface StructureSetupState {
_padding: TRBL;
_paddingAbsolute: boolean;
@@ -122,10 +120,11 @@ interface StructureSetupState {
_heightIntrinsic: boolean;
_directionIsRTL: boolean;
}
type StructureStaticInitializationElement = StaticInitializationElement<[
declare type StructureStaticInitializationElement = StaticInitializationElement<[
target: InitializationTargetElement
]>;
type StructureDynamicInitializationElement = DynamicInitializationElement<[
declare type StructureDynamicInitializationElement = DynamicInitializationElement<[
target: InitializationTargetElement
]>;
/**
@@ -140,22 +139,23 @@ type StructureDynamicInitializationElement = DynamicInitializationElement<[
*/
interface StructureInitialization {
target: InitializationTargetElement;
host: StructureStaticInitializationElement; // only relevant for textarea
host: StructureStaticInitializationElement;
viewport: StructureStaticInitializationElement;
padding: StructureDynamicInitializationElement;
content: StructureDynamicInitializationElement;
}
interface ViewportOverflowState {
_scrollbarsHideOffset: XY<number>;
_scrollbarsHideOffsetArrange: XY<boolean>;
_overflowScroll: XY<boolean>;
_overflowStyle: XY<OverflowStyle>;
}
type GetViewportOverflowState = (showNativeOverlaidScrollbars: boolean, viewportStyleObj?: StyleObject) => ViewportOverflowState;
type HideNativeScrollbars = (viewportOverflowState: ViewportOverflowState, directionIsRTL: boolean, viewportArrange: boolean, viewportStyleObj: StyleObject) => void;
type EnvironmentEventMap = {
_: [
];
declare type GetViewportOverflowState = (showNativeOverlaidScrollbars: boolean, viewportStyleObj?: StyleObject) => ViewportOverflowState;
declare type HideNativeScrollbars = (viewportOverflowState: ViewportOverflowState, directionIsRTL: boolean, viewportArrange: boolean, viewportStyleObj: StyleObject) => void;
declare type EnvironmentEventMap = {
_: [];
};
interface InternalEnvironment {
readonly _nativeScrollbarsSize: XY;
@@ -169,34 +169,29 @@ interface InternalEnvironment {
readonly _cssCustomProperties: boolean;
readonly _staticDefaultInitialization: Initialization;
readonly _staticDefaultOptions: Options;
_addListener(listener: EventListener<EnvironmentEventMap, "_">): () => void;
_addListener(listener: EventListener$1<EnvironmentEventMap, '_'>): () => void;
_getDefaultInitialization(): Initialization;
_setDefaultInitialization(newInitialization: DeepPartial<Initialization>): void;
_getDefaultOptions(): Options;
_setDefaultOptions(newDefaultOptions: DeepPartial<Options>): void;
}
type ArrangeViewport = (viewportOverflowState: ViewportOverflowState, viewportScrollSize: WH<number>, sizeFraction: WH<number>, directionIsRTL: boolean) => boolean;
type UndoViewportArrangeResult = [
declare type ArrangeViewport = (viewportOverflowState: ViewportOverflowState, viewportScrollSize: WH<number>, sizeFraction: WH<number>, directionIsRTL: boolean) => boolean;
declare type UndoViewportArrangeResult = [
redoViewportArrange: () => void,
overflowState?: ViewportOverflowState
];
type UndoArrangeViewport = (showNativeOverlaidScrollbars: boolean, directionIsRTL: boolean, viewportOverflowState?: ViewportOverflowState) => UndoViewportArrangeResult;
type ScrollbarsHidingPluginInstance = {
declare type UndoArrangeViewport = (showNativeOverlaidScrollbars: boolean, directionIsRTL: boolean, viewportOverflowState?: ViewportOverflowState) => UndoViewportArrangeResult;
declare type ScrollbarsHidingPluginInstance = {
_createUniqueViewportArrangeElement(env: InternalEnvironment): HTMLStyleElement | false;
_overflowUpdateSegment(doViewportArrange: boolean, flexboxGlue: boolean, viewport: HTMLElement, viewportArrange: HTMLStyleElement | false | null | undefined, getState: () => StructureSetupState, getViewportOverflowState: GetViewportOverflowState, hideNativeScrollbars: HideNativeScrollbars): [
ArrangeViewport,
UndoArrangeViewport
];
_overflowUpdateSegment(doViewportArrange: boolean, flexboxGlue: boolean, viewport: HTMLElement, viewportArrange: HTMLStyleElement | false | null | undefined, getState: () => StructureSetupState, getViewportOverflowState: GetViewportOverflowState, hideNativeScrollbars: HideNativeScrollbars): [ArrangeViewport, UndoArrangeViewport];
_envWindowZoom(): (envInstance: InternalEnvironment, updateNativeScrollbarSizeCache: UpdateCache<XY<number>>, triggerEvent: () => void) => void;
};
declare const scrollbarsHidingPlugin: Plugin<ScrollbarsHidingPluginInstance>;
type GeneralInitialEventListeners = InitialEventListeners;
type GeneralEventListener = EventListener;
// Notes:
// Height intrinsic detection use "content: true" init strategy - or open ticket for custom height intrinsic observer
interface OverlayScrollbarsStatic {
(target: InitializationTarget): OverlayScrollbars | undefined;
(target: InitializationTarget, options: DeepPartial<Options>, eventListeners?: GeneralInitialEventListeners<EventListenerMap>): OverlayScrollbars;
(target: InitializationTarget, options: DeepPartial<Options>, eventListeners?: InitialEventListeners<EventListenerMap>): OverlayScrollbars;
plugin(plugin: Plugin | Plugin[]): void;
valid(osInstance: any): boolean;
env(): Environment;
@@ -261,29 +256,21 @@ interface OnUpdatedEventListenerArgs {
changedOptions: DeepPartial<Options>;
force: boolean;
}
type EventListenerMap = {
declare type EventListenerMap = {
/**
* Triggered after all elements are initialized and appended.
*/
initialized: [
instance: OverlayScrollbars
];
initialized: [instance: OverlayScrollbars];
/**
* Triggered after an update.
*/
updated: [
instance: OverlayScrollbars,
onUpdatedArgs: OnUpdatedEventListenerArgs
];
updated: [instance: OverlayScrollbars, onUpdatedArgs: OnUpdatedEventListenerArgs];
/**
* Triggered after all elements, observers and events are destroyed.
*/
destroyed: [
instance: OverlayScrollbars,
canceled: boolean
];
destroyed: [instance: OverlayScrollbars, canceled: boolean];
};
type EventListener$0<Name extends keyof EventListenerMap> = GeneralEventListener<EventListenerMap, Name>;
declare type EventListener<Name extends keyof EventListenerMap> = EventListener$1<EventListenerMap, Name>;
interface OverlayScrollbars {
options(): Options;
options(newOptions?: DeepPartial<Options>): Options;
@@ -291,11 +278,11 @@ interface OverlayScrollbars {
destroy(): void;
state(): State;
elements(): Elements;
on<Name extends keyof EventListenerMap>(name: Name, listener: EventListener$0<Name>): () => void;
on<Name extends keyof EventListenerMap>(name: Name, listener: EventListener$0<Name>[]): () => void;
off<Name extends keyof EventListenerMap>(name: Name, listener: EventListener$0<Name>): void;
off<Name extends keyof EventListenerMap>(name: Name, listener: EventListener$0<Name>[]): void;
on<Name extends keyof EventListenerMap>(name: Name, listener: EventListener<Name>): () => void;
on<Name extends keyof EventListenerMap>(name: Name, listener: EventListener<Name>[]): () => void;
off<Name extends keyof EventListenerMap>(name: Name, listener: EventListener<Name>): void;
off<Name extends keyof EventListenerMap>(name: Name, listener: EventListener<Name>[]): void;
}
// eslint-disable-next-line @typescript-eslint/no-redeclare
declare const OverlayScrollbars: OverlayScrollbarsStatic;
export { OverlayScrollbars, scrollbarsHidingPlugin, sizeObserverPlugin };