diff --git a/local/browser-testing/tsconfig.json b/local/browser-testing/tsconfig.json index 1445090..0ffc56a 100644 --- a/local/browser-testing/tsconfig.json +++ b/local/browser-testing/tsconfig.json @@ -2,9 +2,6 @@ "extends": "@local/tsconfig", "compilerOptions": { "outDir": "./dist/", - "baseUrl": "./src/", - "paths": { - "@/overlayscrollbars*": ["../../../packages/overlayscrollbars/src*"] - } + "baseUrl": "./src/" } } diff --git a/local/rollup/src/createRollupConfig.js b/local/rollup/src/createRollupConfig.js index 3d832e7..1bdd61c 100644 --- a/local/rollup/src/createRollupConfig.js +++ b/local/rollup/src/createRollupConfig.js @@ -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)]; diff --git a/local/rollup/src/defaultOptions.js b/local/rollup/src/defaultOptions.js index 62d1bbc..12b130b 100644 --- a/local/rollup/src/defaultOptions.js +++ b/local/rollup/src/defaultOptions.js @@ -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', diff --git a/local/rollup/src/pipeline.build.js b/local/rollup/src/pipeline.build.js index 2f979d8..3fc5aba 100644 --- a/local/rollup/src/pipeline.build.js +++ b/local/rollup/src/pipeline.build.js @@ -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), }; diff --git a/local/rollup/src/pipeline.common.plugins.js b/local/rollup/src/pipeline.common.plugins.js index 2c63974..bda83f6 100644 --- a/local/rollup/src/pipeline.common.plugins.js +++ b/local/rollup/src/pipeline.common.plugins.js @@ -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'], + }), }; diff --git a/local/rollup/src/pipeline.dev.js b/local/rollup/src/pipeline.dev.js index f477667..4ccfd75 100644 --- a/local/rollup/src/pipeline.dev.js +++ b/local/rollup/src/pipeline.dev.js @@ -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, diff --git a/local/rollup/src/pipeline.styles.js b/local/rollup/src/pipeline.styles.js new file mode 100644 index 0000000..574b769 --- /dev/null +++ b/local/rollup/src/pipeline.styles.js @@ -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; + }, + }, + ], + }; +}; diff --git a/local/rollup/src/pipeline.types.js b/local/rollup/src/pipeline.types.js new file mode 100644 index 0000000..ce6d4d3 --- /dev/null +++ b/local/rollup/src/pipeline.types.js @@ -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 }); + } + }); + }, + }, + ], + }, + ]; +}; diff --git a/package-lock.json b/package-lock.json index b4ac39c..7ce2059 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index c24fbe2..befde7f 100644 --- a/package.json +++ b/package.json @@ -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" } } diff --git a/packages/overlayscrollbars/package.json b/packages/overlayscrollbars/package.json index 9734827..dcc4dc7 100644 --- a/packages/overlayscrollbars/package.json +++ b/packages/overlayscrollbars/package.json @@ -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" } } diff --git a/packages/overlayscrollbars/rollup.config.js b/packages/overlayscrollbars/rollup.config.js index de7ed0d..31ce082 100644 --- a/packages/overlayscrollbars/rollup.config.js +++ b/packages/overlayscrollbars/rollup.config.js @@ -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, + }), + ], }, }); diff --git a/packages/overlayscrollbars/dist/overlayscrollbars.css b/packages/overlayscrollbars/styles/overlayscrollbars.css similarity index 100% rename from packages/overlayscrollbars/dist/overlayscrollbars.css rename to packages/overlayscrollbars/styles/overlayscrollbars.css diff --git a/packages/overlayscrollbars/tests/jest/instances.test.ts b/packages/overlayscrollbars/tests/jest/instances.test.ts index c54c880..e76c501 100644 --- a/packages/overlayscrollbars/tests/jest/instances.test.ts +++ b/packages/overlayscrollbars/tests/jest/instances.test.ts @@ -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(() => { diff --git a/packages/overlayscrollbars/tsconfig.json b/packages/overlayscrollbars/tsconfig.json index 7d63bc7..386b674 100644 --- a/packages/overlayscrollbars/tsconfig.json +++ b/packages/overlayscrollbars/tsconfig.json @@ -1,6 +1,6 @@ { "extends": "@local/tsconfig", "compilerOptions": { - "baseUrl": "./src", + "baseUrl": "./src" } } diff --git a/packages/overlayscrollbars/types/overlayscrollbars.d.ts b/packages/overlayscrollbars/types/overlayscrollbars.d.ts index aea9c03..4c6d158 100644 --- a/packages/overlayscrollbars/types/overlayscrollbars.d.ts +++ b/packages/overlayscrollbars/types/overlayscrollbars.d.ts @@ -1,50 +1,46 @@ -type CacheValues = [ - value: T, - changed: boolean, - previous?: T -]; -type UpdateCache = (force?: boolean) => CacheValues; -interface WH { +declare type CacheValues = [value: T, changed: boolean, previous?: T]; +declare type UpdateCache = (force?: boolean) => CacheValues; + +interface WH { w: T; h: T; } -type DeepPartial = { + +declare type DeepPartial = { [P in keyof T]?: T[P] extends Record ? DeepPartial : T[P]; }; -type StyleObject = { - [Key in keyof CSSStyleDeclaration | (CustomCssProps extends string ? CustomCssProps : "")]?: string | number; +declare type StyleObject = { + [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 { + +interface XY { x: T; y: T; } -type EventListener, Name extends keyof EventMap> = (...args: EventMap[Name]) => void; -type InitialEventListeners> = { - [K in keyof EventMap]?: EventListener | EventListener[]; + +declare type EventListener$1, Name extends keyof EventMap = keyof EventMap> = (...args: EventMap[Name]) => void; +declare type InitialEventListeners> = { + [K in keyof EventMap]?: EventListener$1 | EventListener$1[]; }; -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 | ((staticObj: OverlayScrollbarsStatic, instanceObj: OverlayScrollbars) => void); -type Plugin = { + +declare type PluginInstance = Record | ((staticObj: OverlayScrollbarsStatic, instanceObj: OverlayScrollbars) => void); +declare type Plugin = { [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; -type StaticInitialization = HTMLElement | false | null; -type DynamicInitialization = HTMLElement | boolean | null; -type InitializationTargetElement = HTMLElement | HTMLTextAreaElement; -type Initialization = Omit & ScrollbarsInitialization & { + +declare type StaticInitialization = HTMLElement | false | null; +declare type DynamicInitialization = HTMLElement | boolean | null; +declare type InitializationTargetElement = HTMLElement | HTMLTextAreaElement; +declare type Initialization = Omit & ScrollbarsInitialization & { cancel: { nativeScrollbarsOverlaid: boolean; body: boolean | null; }; }; -type InitializationTargetObject = DeepPartial & Pick; -type InitializationTarget = InitializationTargetElement | InitializationTargetObject; +declare type InitializationTargetObject = DeepPartial & Pick; +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: Args) => StaticInitialization) | StaticInitialization; +declare type StaticInitializationElement = ((...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: Args) => DynamicInitialization) | DynamicInitialization; -type ScrollbarsDynamicInitializationElement = DynamicInitializationElement<[ +declare type DynamicInitializationElement = ((...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; _scrollbarsHideOffsetArrange: XY; _overflowScroll: XY; _overflowStyle: XY; } -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): () => void; + _addListener(listener: EventListener$1): () => void; _getDefaultInitialization(): Initialization; _setDefaultInitialization(newInitialization: DeepPartial): void; _getDefaultOptions(): Options; _setDefaultOptions(newDefaultOptions: DeepPartial): void; } -type ArrangeViewport = (viewportOverflowState: ViewportOverflowState, viewportScrollSize: WH, sizeFraction: WH, directionIsRTL: boolean) => boolean; -type UndoViewportArrangeResult = [ + +declare type ArrangeViewport = (viewportOverflowState: ViewportOverflowState, viewportScrollSize: WH, sizeFraction: WH, 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>, triggerEvent: () => void) => void; }; declare const scrollbarsHidingPlugin: Plugin; -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, eventListeners?: GeneralInitialEventListeners): OverlayScrollbars; + (target: InitializationTarget, options: DeepPartial, eventListeners?: InitialEventListeners): OverlayScrollbars; plugin(plugin: Plugin | Plugin[]): void; valid(osInstance: any): boolean; env(): Environment; @@ -261,29 +256,21 @@ interface OnUpdatedEventListenerArgs { changedOptions: DeepPartial; 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 = GeneralEventListener; +declare type EventListener = EventListener$1; interface OverlayScrollbars { options(): Options; options(newOptions?: DeepPartial): Options; @@ -291,11 +278,11 @@ interface OverlayScrollbars { destroy(): void; state(): State; elements(): Elements; - on(name: Name, listener: EventListener$0): () => void; - on(name: Name, listener: EventListener$0[]): () => void; - off(name: Name, listener: EventListener$0): void; - off(name: Name, listener: EventListener$0[]): void; + on(name: Name, listener: EventListener): () => void; + on(name: Name, listener: EventListener[]): () => void; + off(name: Name, listener: EventListener): void; + off(name: Name, listener: EventListener[]): void; } -// eslint-disable-next-line @typescript-eslint/no-redeclare declare const OverlayScrollbars: OverlayScrollbarsStatic; + export { OverlayScrollbars, scrollbarsHidingPlugin, sizeObserverPlugin };