Skip to content

Commit 164ebe3

Browse files
tayeinteractjs-ci
authored andcommitted
fix: improve build; check output for ES2018 compatibility
Close taye#1024 # Conflicts: # packages/@interactjs/dev-tools/visualizer/plugin.ts # packages/@interactjs/multi-target/plugin.ts
1 parent f56f1fa commit 164ebe3

19 files changed

+304
-667
lines changed

.browserslistrc

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,2 @@
1-
maintained node versions
2-
last 5 versions
3-
> 2%
4-
not dead
1+
defaults and fully supports es6-module
2+
node >= 16

babel.config.js

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
11
const isProd = process.env.NODE_ENV === 'production'
22

33
module.exports = {
4-
targets: { ie: 9 },
5-
browserslistConfigFile: false,
64
presets: [
75
[require.resolve('@babel/preset-env'), { exclude: ['transform-regenerator'] }],
86
[
97
require.resolve('@babel/preset-typescript'),
10-
{ isTSX: false, onlyRemoveTypeImports: true, allExtensions: true, allowDeclareFields: true },
8+
{ isTsx: false, onlyRemoveTypeImports: true, allExtensions: true, allowDeclareFields: true },
119
],
12-
],
10+
].filter(Boolean),
1311

1412
plugins: [
1513
require.resolve('./scripts/babel/vue-sfc'),
@@ -20,8 +18,9 @@ module.exports = {
2018
regenerator: false,
2119
},
2220
],
23-
isProd && require.resolve('@babel/plugin-transform-optional-catch-binding'),
24-
isProd && [require.resolve('@babel/plugin-transform-optional-chaining'), { loose: true }],
25-
isProd && [require.resolve('@babel/plugin-transform-nullish-coalescing-operator'), { loose: true }],
21+
isProd && require.resolve('./scripts/babel/for-of-array'),
22+
isProd && require.resolve('@babel/plugin-proposal-optional-catch-binding'),
23+
isProd && [require.resolve('@babel/plugin-proposal-optional-chaining'), { loose: true }],
24+
[require.resolve('@babel/plugin-transform-modules-commonjs'), { noInterop: isProd }],
2625
].filter(Boolean),
2726
}

bin/_bundle_shims

Lines changed: 0 additions & 2 deletions
This file was deleted.

bundle.rollup.config.cjs

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
/* eslint-disable import/no-extraneous-dependencies */
2+
const { resolve } = require('path')
3+
4+
const babel = require('@rollup/plugin-babel')
5+
const commonjs = require('@rollup/plugin-commonjs')
6+
const nodeResolve = require('@rollup/plugin-node-resolve')
7+
const replace = require('@rollup/plugin-replace')
8+
const terser = require('@rollup/plugin-terser')
9+
const { defineConfig } = require('rollup')
10+
11+
const headers = require('./scripts/headers')
12+
const { extendBabelOptions, getModuleDirectories, isPro } = require('./scripts/utils')
13+
14+
const globals = {
15+
react: 'React',
16+
vue: 'Vue',
17+
}
18+
const external = Object.keys(globals)
19+
const INPUT_EXTENSIONS = ['.ts', '.tsx', '.vue']
20+
21+
module.exports = defineConfig(async () => {
22+
const variations = [
23+
{ env: { NODE_ENV: 'development' }, ext: '.js', minify: isPro },
24+
{ env: { NODE_ENV: 'production' }, ext: '.min.js', minify: true },
25+
]
26+
27+
return variations.map(({ minify, ext, env }) => {
28+
const babelConfig = extendBabelOptions({
29+
babelrc: false,
30+
configFile: false,
31+
browserslistConfigFile: false,
32+
targets: { ie: 9 },
33+
babelHelpers: 'bundled',
34+
skipPreflightCheck: true,
35+
extensions: INPUT_EXTENSIONS,
36+
plugins: [[require.resolve('@babel/plugin-transform-runtime'), { helpers: false, regenerator: true }]],
37+
})
38+
39+
return defineConfig({
40+
input: resolve(__dirname, 'packages', 'interactjs', 'index.ts'),
41+
external,
42+
plugins: [
43+
nodeResolve({
44+
modulePaths: getModuleDirectories(),
45+
extensions: INPUT_EXTENSIONS,
46+
}),
47+
commonjs({ include: '**/node_modules/{rebound,symbol-tree}/**' }),
48+
babel(babelConfig),
49+
replace({
50+
preventAssignment: true,
51+
values: Object.entries({
52+
npm_package_version: process.env.npm_package_version,
53+
IJS_BUNDLE: '1',
54+
...env,
55+
}).reduce((acc, [key, value]) => {
56+
acc[`process.env.${key}`] = JSON.stringify(value)
57+
return acc
58+
}, {}),
59+
}),
60+
minify &&
61+
terser({
62+
module: false,
63+
mangle: true,
64+
compress: {
65+
ecma: 5,
66+
unsafe: true,
67+
unsafe_Function: true,
68+
unsafe_arrows: false,
69+
unsafe_methods: true,
70+
},
71+
format: {
72+
preamble: headers?.min,
73+
},
74+
}),
75+
],
76+
context: 'window',
77+
moduleContext: 'window',
78+
output: {
79+
file: resolve(__dirname, 'packages', 'interactjs', 'dist', `interact${ext}`),
80+
format: 'umd',
81+
name: 'interact',
82+
banner: minify ? headers.min : headers.raw,
83+
minifyInternalExports: true,
84+
inlineDynamicImports: true,
85+
sourcemap: true,
86+
globals,
87+
},
88+
})
89+
})
90+
})

esnext.rollup.config.cjs

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
/* eslint-disable import/no-extraneous-dependencies */
2+
const { resolve, basename, dirname, relative, extname } = require('path')
3+
const { promisify } = require('util')
4+
5+
const { transformAsync } = require('@babel/core')
6+
const babel = require('@rollup/plugin-babel')
7+
const commonjs = require('@rollup/plugin-commonjs')
8+
const nodeResolve = require('@rollup/plugin-node-resolve')
9+
const replace = require('@rollup/plugin-replace')
10+
const terser = require('@rollup/plugin-terser')
11+
const { defineConfig } = require('rollup')
12+
const glob = promisify(require('glob'))
13+
14+
const headers = require('./scripts/headers')
15+
const {
16+
getPackages,
17+
sourcesIgnoreGlobs,
18+
extendBabelOptions,
19+
getEsnextBabelOptions,
20+
getModuleDirectories,
21+
isPro,
22+
} = require('./scripts/utils')
23+
24+
const BUNDLED_DEPS = ['rebound', 'symbol-tree']
25+
const INPUT_EXTENSIONS = ['.ts', '.tsx', '.vue']
26+
const moduleDirectory = getModuleDirectories()
27+
28+
module.exports = defineConfig(async () => {
29+
const packageDirs = (await getPackages()).map((dir) => resolve(__dirname, dir))
30+
return (
31+
await Promise.all(
32+
packageDirs.map(async (packageDir) => {
33+
const packageName = `${basename(dirname(packageDir))}/${basename(packageDir)}`
34+
35+
const external = (id_, importer) => {
36+
const id = id_.startsWith('.') ? resolve(dirname(importer), id_) : id_
37+
38+
// not external if it's a dependency that's intented to be bundled
39+
if (BUNDLED_DEPS.some((dep) => id === dep || id.includes(`/node_modules/${dep}/`))) return false
40+
41+
// not external if the id is in the current package dir
42+
if (
43+
[packageName, packageDir].some(
44+
(prefix) =>
45+
id.startsWith(prefix) && (id.length === prefix.length || id.charAt(prefix.length) === '/'),
46+
)
47+
)
48+
return false
49+
50+
return true
51+
}
52+
53+
const entryFiles = await glob('**/*.{ts,tsx}', {
54+
cwd: packageDir,
55+
ignore: sourcesIgnoreGlobs,
56+
strict: false,
57+
nodir: true,
58+
absolute: true,
59+
})
60+
const input = Object.fromEntries(
61+
entryFiles.map((file) => [
62+
relative(packageDir, file.slice(0, file.length - extname(file).length)),
63+
file,
64+
]),
65+
)
66+
67+
return [
68+
// dev unminified
69+
{ env: { NODE_ENV: 'development' }, ext: '.js', minify: isPro },
70+
// prod minified
71+
{ env: { NODE_ENV: 'production' }, ext: '.prod.js', minify: true },
72+
].map(({ env, ext, minify }) =>
73+
defineConfig({
74+
external,
75+
input,
76+
plugins: [
77+
commonjs({ include: '**/node_modules/{rebound,symbol-tree}/**' }),
78+
nodeResolve({
79+
modulePaths: moduleDirectory,
80+
extensions: INPUT_EXTENSIONS,
81+
}),
82+
babel(
83+
extendBabelOptions(
84+
{
85+
babelrc: false,
86+
configFile: false,
87+
babelHelpers: 'bundled',
88+
skipPreflightCheck: true,
89+
extensions: INPUT_EXTENSIONS,
90+
plugins: [
91+
[
92+
require.resolve('@babel/plugin-transform-runtime'),
93+
{ helpers: false, regenerator: false },
94+
],
95+
],
96+
},
97+
getEsnextBabelOptions(),
98+
),
99+
),
100+
replace({
101+
preventAssignment: true,
102+
values: Object.entries({
103+
npm_package_version: process.env.npm_package_version,
104+
IJS_BUNDLE: '',
105+
...env,
106+
}).reduce((acc, [key, value]) => {
107+
acc[`process.env.${key}`] = JSON.stringify(value)
108+
return acc
109+
}, {}),
110+
}),
111+
],
112+
context: 'window',
113+
moduleContext: 'window',
114+
preserveEntrySignatures: 'strict',
115+
output: [
116+
{
117+
dir: packageDir,
118+
entryFileNames: `[name]${ext}`,
119+
format: 'es',
120+
banner: minify ? headers?.min : headers?.raw,
121+
inlineDynamicImports: false,
122+
sourcemap: true,
123+
plugins: [
124+
{
125+
name: '@interactjs/_dev:output-transforms',
126+
async renderChunk(code, chunk, outputOptions) {
127+
return await transformAsync(code, {
128+
babelrc: false,
129+
configFile: false,
130+
inputSourceMap: chunk.map,
131+
filename: `${packageDir}/${chunk.fileName}`,
132+
plugins: [
133+
[
134+
require.resolve('./scripts/babel/relative-imports'),
135+
{ extension: ext, moduleDirectory },
136+
],
137+
[require.resolve('@babel/plugin-transform-class-properties'), { loose: true }],
138+
],
139+
})
140+
},
141+
},
142+
minify &&
143+
terser({
144+
module: false,
145+
mangle: true,
146+
compress: {
147+
ecma: '2019',
148+
unsafe: true,
149+
unsafe_Function: true,
150+
unsafe_arrows: false,
151+
unsafe_methods: true,
152+
},
153+
format: {
154+
preamble: headers?.min,
155+
},
156+
}),
157+
],
158+
},
159+
],
160+
}),
161+
)
162+
}),
163+
)
164+
).flat()
165+
})

package.json

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,11 @@
88
"scripts": {
99
"bootstrap": "yarn install --pure-lockfile --prefer-offline --silent && bin/_link",
1010
"start": "_add_plugin_indexes && vite serve",
11-
"build:bundle": "_bundle_shims && NODE_ENV=${NODE_ENV:-production} _bundle",
12-
"build": "yarn docs && yarn bundle && _add_plugin_indexes && _types && _esnext",
11+
"build": "yarn build:docs && yarn build:bundle && _add_plugin_indexes && yarn build:types && yarn build:esnext",
1312
"build:docs": "yarn typedoc",
14-
"build:esnext": "_add_plugin_indexes && _esnext",
13+
"build:bundle": "rollup -c bundle.rollup.config.cjs",
14+
"build:types": "_types",
15+
"build:esnext": "_add_plugin_indexes && rollup -c esnext.rollup.config.cjs",
1516
"test": "jest",
1617
"test:debug": "node --inspect node_modules/.bin/jest --no-cache --runInBand ",
1718
"tsc_lint_test": "_add_plugin_indexes && tsc -b -f && _lint && yarn test",
@@ -24,11 +25,13 @@
2425
"@babel/plugin-proposal-export-default-from": "^7.17.12",
2526
"@babel/plugin-proposal-optional-catch-binding": "^7.16.7",
2627
"@babel/plugin-proposal-optional-chaining": "^7.17.12",
28+
"@babel/plugin-transform-class-properties": "^7.23.3",
2729
"@babel/plugin-transform-runtime": "^7.18.2",
2830
"@babel/preset-env": "^7.18.2",
2931
"@babel/preset-typescript": "^7.17.12",
3032
"@babel/runtime": "^7.18.3",
3133
"@rollup/plugin-babel": "^6.0.4",
34+
"@rollup/plugin-commonjs": "^25.0.7",
3235
"@rollup/plugin-node-resolve": "^15.2.3",
3336
"@rollup/plugin-replace": "^5.0.5",
3437
"@rollup/plugin-terser": "^0.4.4",
@@ -88,7 +91,6 @@
8891
"rebound": "^0.1.0",
8992
"resolve": "^1.22.0",
9093
"rollup": "3",
91-
"rollup-plugin-cjs-es": "^3.0.0",
9294
"semver": "^7.3.7",
9395
"serve-index": "^1.9.1",
9496
"shelljs": "^0.8.5",

packages/@interactjs/dev-tools/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@
1414
"@interactjs/utils": "1.10.25"
1515
},
1616
"optionalDependencies": {
17-
"@interactjs/interact": "1.10.25"
17+
"@interactjs/interact": "1.10.25",
18+
"vue": "3"
1819
},
1920
"devDependencies": {
2021
"vue": "next"

packages/@interactjs/dev-tools/plugin.ts

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,23 +9,12 @@ import isNonNativeEvent from '@interactjs/utils/isNonNativeEvent'
99
import normalizeListeners from '@interactjs/utils/normalizeListeners'
1010
import * as win from '@interactjs/utils/window'
1111

12-
/* eslint-disable import/no-duplicates -- for typescript module augmentations */
13-
import './visualizer/plugin'
14-
import visualizer from './visualizer/plugin'
15-
/* eslint-enable import/no-duplicates */
16-
1712
declare module '@interactjs/core/scope' {
1813
interface Scope {
1914
logger: Logger
2015
}
2116
}
2217

23-
declare module '@interactjs/core/InteractStatic' {
24-
export interface InteractStatic {
25-
visializer: typeof visualizer
26-
}
27-
}
28-
2918
declare module '@interactjs/core/options' {
3019
interface BaseDefaults {
3120
devTools?: DevToolsOptions
@@ -112,7 +101,6 @@ function install(scope: Scope, { logger }: { logger?: Logger } = {}) {
112101

113102
return _onOff.call(this, method, normalizedListeners, options)
114103
}
115-
scope.usePlugin(visualizer)
116104
}
117105

118106
const checks: Check[] = [

0 commit comments

Comments
 (0)