Skip to content

Commit

Permalink
fix: improve build; check output for ES2018 compatibility
Browse files Browse the repository at this point in the history
Close #1024

# Conflicts:
#	packages/@interactjs/dev-tools/visualizer/plugin.ts
#	packages/@interactjs/multi-target/plugin.ts
  • Loading branch information
taye authored and interactjs-ci committed Dec 7, 2023
1 parent f56f1fa commit 164ebe3
Show file tree
Hide file tree
Showing 19 changed files with 304 additions and 667 deletions.
6 changes: 2 additions & 4 deletions .browserslistrc
Original file line number Diff line number Diff line change
@@ -1,4 +1,2 @@
maintained node versions
last 5 versions
> 2%
not dead
defaults and fully supports es6-module
node >= 16
13 changes: 6 additions & 7 deletions babel.config.js
Original file line number Diff line number Diff line change
@@ -1,15 +1,13 @@
const isProd = process.env.NODE_ENV === 'production'

module.exports = {
targets: { ie: 9 },
browserslistConfigFile: false,
presets: [
[require.resolve('@babel/preset-env'), { exclude: ['transform-regenerator'] }],
[
require.resolve('@babel/preset-typescript'),
{ isTSX: false, onlyRemoveTypeImports: true, allExtensions: true, allowDeclareFields: true },
{ isTsx: false, onlyRemoveTypeImports: true, allExtensions: true, allowDeclareFields: true },
],
],
].filter(Boolean),

plugins: [
require.resolve('./scripts/babel/vue-sfc'),
Expand All @@ -20,8 +18,9 @@ module.exports = {
regenerator: false,
},
],
isProd && require.resolve('@babel/plugin-transform-optional-catch-binding'),
isProd && [require.resolve('@babel/plugin-transform-optional-chaining'), { loose: true }],
isProd && [require.resolve('@babel/plugin-transform-nullish-coalescing-operator'), { loose: true }],
isProd && require.resolve('./scripts/babel/for-of-array'),
isProd && require.resolve('@babel/plugin-proposal-optional-catch-binding'),
isProd && [require.resolve('@babel/plugin-proposal-optional-chaining'), { loose: true }],
[require.resolve('@babel/plugin-transform-modules-commonjs'), { noInterop: isProd }],
].filter(Boolean),
}
2 changes: 0 additions & 2 deletions bin/_bundle_shims

This file was deleted.

90 changes: 90 additions & 0 deletions bundle.rollup.config.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
/* eslint-disable import/no-extraneous-dependencies */
const { resolve } = require('path')

const babel = require('@rollup/plugin-babel')
const commonjs = require('@rollup/plugin-commonjs')
const nodeResolve = require('@rollup/plugin-node-resolve')
const replace = require('@rollup/plugin-replace')
const terser = require('@rollup/plugin-terser')
const { defineConfig } = require('rollup')

const headers = require('./scripts/headers')
const { extendBabelOptions, getModuleDirectories, isPro } = require('./scripts/utils')

const globals = {
react: 'React',
vue: 'Vue',
}
const external = Object.keys(globals)
const INPUT_EXTENSIONS = ['.ts', '.tsx', '.vue']

module.exports = defineConfig(async () => {
const variations = [
{ env: { NODE_ENV: 'development' }, ext: '.js', minify: isPro },
{ env: { NODE_ENV: 'production' }, ext: '.min.js', minify: true },
]

return variations.map(({ minify, ext, env }) => {
const babelConfig = extendBabelOptions({
babelrc: false,
configFile: false,
browserslistConfigFile: false,
targets: { ie: 9 },
babelHelpers: 'bundled',
skipPreflightCheck: true,
extensions: INPUT_EXTENSIONS,
plugins: [[require.resolve('@babel/plugin-transform-runtime'), { helpers: false, regenerator: true }]],
})

return defineConfig({
input: resolve(__dirname, 'packages', 'interactjs', 'index.ts'),
external,
plugins: [
nodeResolve({
modulePaths: getModuleDirectories(),
extensions: INPUT_EXTENSIONS,
}),
commonjs({ include: '**/node_modules/{rebound,symbol-tree}/**' }),
babel(babelConfig),
replace({
preventAssignment: true,
values: Object.entries({
npm_package_version: process.env.npm_package_version,
IJS_BUNDLE: '1',
...env,
}).reduce((acc, [key, value]) => {
acc[`process.env.${key}`] = JSON.stringify(value)
return acc
}, {}),
}),
minify &&
terser({
module: false,
mangle: true,
compress: {
ecma: 5,
unsafe: true,
unsafe_Function: true,
unsafe_arrows: false,
unsafe_methods: true,
},
format: {
preamble: headers?.min,
},
}),
],
context: 'window',
moduleContext: 'window',
output: {
file: resolve(__dirname, 'packages', 'interactjs', 'dist', `interact${ext}`),
format: 'umd',
name: 'interact',
banner: minify ? headers.min : headers.raw,
minifyInternalExports: true,
inlineDynamicImports: true,
sourcemap: true,
globals,
},
})
})
})
165 changes: 165 additions & 0 deletions esnext.rollup.config.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,165 @@
/* eslint-disable import/no-extraneous-dependencies */
const { resolve, basename, dirname, relative, extname } = require('path')
const { promisify } = require('util')

const { transformAsync } = require('@babel/core')
const babel = require('@rollup/plugin-babel')
const commonjs = require('@rollup/plugin-commonjs')
const nodeResolve = require('@rollup/plugin-node-resolve')
const replace = require('@rollup/plugin-replace')
const terser = require('@rollup/plugin-terser')
const { defineConfig } = require('rollup')
const glob = promisify(require('glob'))

const headers = require('./scripts/headers')
const {
getPackages,
sourcesIgnoreGlobs,
extendBabelOptions,
getEsnextBabelOptions,
getModuleDirectories,
isPro,
} = require('./scripts/utils')

const BUNDLED_DEPS = ['rebound', 'symbol-tree']
const INPUT_EXTENSIONS = ['.ts', '.tsx', '.vue']
const moduleDirectory = getModuleDirectories()

module.exports = defineConfig(async () => {
const packageDirs = (await getPackages()).map((dir) => resolve(__dirname, dir))
return (
await Promise.all(
packageDirs.map(async (packageDir) => {
const packageName = `${basename(dirname(packageDir))}/${basename(packageDir)}`

const external = (id_, importer) => {
const id = id_.startsWith('.') ? resolve(dirname(importer), id_) : id_

// not external if it's a dependency that's intented to be bundled
if (BUNDLED_DEPS.some((dep) => id === dep || id.includes(`/node_modules/${dep}/`))) return false

// not external if the id is in the current package dir
if (
[packageName, packageDir].some(
(prefix) =>
id.startsWith(prefix) && (id.length === prefix.length || id.charAt(prefix.length) === '/'),
)
)
return false

return true
}

const entryFiles = await glob('**/*.{ts,tsx}', {
cwd: packageDir,
ignore: sourcesIgnoreGlobs,
strict: false,
nodir: true,
absolute: true,
})
const input = Object.fromEntries(
entryFiles.map((file) => [
relative(packageDir, file.slice(0, file.length - extname(file).length)),
file,
]),
)

return [
// dev unminified
{ env: { NODE_ENV: 'development' }, ext: '.js', minify: isPro },
// prod minified
{ env: { NODE_ENV: 'production' }, ext: '.prod.js', minify: true },
].map(({ env, ext, minify }) =>
defineConfig({
external,
input,
plugins: [
commonjs({ include: '**/node_modules/{rebound,symbol-tree}/**' }),
nodeResolve({
modulePaths: moduleDirectory,
extensions: INPUT_EXTENSIONS,
}),
babel(
extendBabelOptions(
{
babelrc: false,
configFile: false,
babelHelpers: 'bundled',
skipPreflightCheck: true,
extensions: INPUT_EXTENSIONS,
plugins: [
[
require.resolve('@babel/plugin-transform-runtime'),
{ helpers: false, regenerator: false },
],
],
},
getEsnextBabelOptions(),
),
),
replace({
preventAssignment: true,
values: Object.entries({
npm_package_version: process.env.npm_package_version,
IJS_BUNDLE: '',
...env,
}).reduce((acc, [key, value]) => {
acc[`process.env.${key}`] = JSON.stringify(value)
return acc
}, {}),
}),
],
context: 'window',
moduleContext: 'window',
preserveEntrySignatures: 'strict',
output: [
{
dir: packageDir,
entryFileNames: `[name]${ext}`,
format: 'es',
banner: minify ? headers?.min : headers?.raw,
inlineDynamicImports: false,
sourcemap: true,
plugins: [
{
name: '@interactjs/_dev:output-transforms',
async renderChunk(code, chunk, outputOptions) {
return await transformAsync(code, {
babelrc: false,
configFile: false,
inputSourceMap: chunk.map,
filename: `${packageDir}/${chunk.fileName}`,
plugins: [
[
require.resolve('./scripts/babel/relative-imports'),
{ extension: ext, moduleDirectory },
],
[require.resolve('@babel/plugin-transform-class-properties'), { loose: true }],
],
})
},
},
minify &&
terser({
module: false,
mangle: true,
compress: {
ecma: '2019',
unsafe: true,
unsafe_Function: true,
unsafe_arrows: false,
unsafe_methods: true,
},
format: {
preamble: headers?.min,
},
}),
],
},
],
}),
)
}),
)
).flat()
})
10 changes: 6 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,11 @@
"scripts": {
"bootstrap": "yarn install --pure-lockfile --prefer-offline --silent && bin/_link",
"start": "_add_plugin_indexes && vite serve",
"build:bundle": "_bundle_shims && NODE_ENV=${NODE_ENV:-production} _bundle",
"build": "yarn docs && yarn bundle && _add_plugin_indexes && _types && _esnext",
"build": "yarn build:docs && yarn build:bundle && _add_plugin_indexes && yarn build:types && yarn build:esnext",
"build:docs": "yarn typedoc",
"build:esnext": "_add_plugin_indexes && _esnext",
"build:bundle": "rollup -c bundle.rollup.config.cjs",
"build:types": "_types",
"build:esnext": "_add_plugin_indexes && rollup -c esnext.rollup.config.cjs",
"test": "jest",
"test:debug": "node --inspect node_modules/.bin/jest --no-cache --runInBand ",
"tsc_lint_test": "_add_plugin_indexes && tsc -b -f && _lint && yarn test",
Expand All @@ -24,11 +25,13 @@
"@babel/plugin-proposal-export-default-from": "^7.17.12",
"@babel/plugin-proposal-optional-catch-binding": "^7.16.7",
"@babel/plugin-proposal-optional-chaining": "^7.17.12",
"@babel/plugin-transform-class-properties": "^7.23.3",
"@babel/plugin-transform-runtime": "^7.18.2",
"@babel/preset-env": "^7.18.2",
"@babel/preset-typescript": "^7.17.12",
"@babel/runtime": "^7.18.3",
"@rollup/plugin-babel": "^6.0.4",
"@rollup/plugin-commonjs": "^25.0.7",
"@rollup/plugin-node-resolve": "^15.2.3",
"@rollup/plugin-replace": "^5.0.5",
"@rollup/plugin-terser": "^0.4.4",
Expand Down Expand Up @@ -88,7 +91,6 @@
"rebound": "^0.1.0",
"resolve": "^1.22.0",
"rollup": "3",
"rollup-plugin-cjs-es": "^3.0.0",
"semver": "^7.3.7",
"serve-index": "^1.9.1",
"shelljs": "^0.8.5",
Expand Down
3 changes: 2 additions & 1 deletion packages/@interactjs/dev-tools/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@
"@interactjs/utils": "1.10.25"
},
"optionalDependencies": {
"@interactjs/interact": "1.10.25"
"@interactjs/interact": "1.10.25",
"vue": "3"
},
"devDependencies": {
"vue": "next"
Expand Down
12 changes: 0 additions & 12 deletions packages/@interactjs/dev-tools/plugin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,23 +9,12 @@ import isNonNativeEvent from '@interactjs/utils/isNonNativeEvent'
import normalizeListeners from '@interactjs/utils/normalizeListeners'
import * as win from '@interactjs/utils/window'

/* eslint-disable import/no-duplicates -- for typescript module augmentations */
import './visualizer/plugin'
import visualizer from './visualizer/plugin'
/* eslint-enable import/no-duplicates */

declare module '@interactjs/core/scope' {
interface Scope {
logger: Logger
}
}

declare module '@interactjs/core/InteractStatic' {
export interface InteractStatic {
visializer: typeof visualizer
}
}

declare module '@interactjs/core/options' {
interface BaseDefaults {
devTools?: DevToolsOptions
Expand Down Expand Up @@ -112,7 +101,6 @@ function install(scope: Scope, { logger }: { logger?: Logger } = {}) {

return _onOff.call(this, method, normalizedListeners, options)
}
scope.usePlugin(visualizer)
}

const checks: Check[] = [
Expand Down
Loading

0 comments on commit 164ebe3

Please sign in to comment.