Remove dependency on webpack
This commit is contained in:
Aria Minaei
parent
39a2645d65
commit
b13f1131c5
8 changed files with 75 additions and 2307 deletions
|
|
@ -1,32 +1,20 @@
|
||||||
import path from 'path'
|
import path from 'path'
|
||||||
import {
|
|
||||||
convertObjectToWebpackDefinePaths,
|
|
||||||
getEnvConfig,
|
|
||||||
} from './webpack/createWebpackConfig'
|
|
||||||
|
|
||||||
const playgroundDir = path.join(__dirname, '..')
|
for (const which of ['core', 'studio']) {
|
||||||
|
const pathToPackage = path.join(__dirname, '../', which)
|
||||||
const envConfig = getEnvConfig(true)
|
const esbuildConfig = {
|
||||||
|
entryPoints: [path.join(pathToPackage, 'src/index.ts')],
|
||||||
require('esbuild').serve(
|
|
||||||
{
|
|
||||||
port,
|
|
||||||
servedir: path.join(playgroundDir, 'src'),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
entryPoints: [path.join(playgroundDir, 'src/index.tsx')],
|
|
||||||
target: ['firefox88'],
|
target: ['firefox88'],
|
||||||
loader: {'.png': 'file'},
|
loader: {'.png': 'file'},
|
||||||
// outdir: '.',
|
outfile: path.join(pathToPackage, 'dist/index.js'),
|
||||||
// watch: true,
|
|
||||||
bundle: true,
|
bundle: true,
|
||||||
sourcemap: true,
|
sourcemap: true,
|
||||||
define: {
|
define: {
|
||||||
global: 'window',
|
global: 'window',
|
||||||
...convertObjectToWebpackDefinePaths({
|
'process.env.version': JSON.stringify(
|
||||||
process: {env: envConfig},
|
require('../studio/package.json').version,
|
||||||
'process.env': envConfig,
|
),
|
||||||
}),
|
|
||||||
},
|
},
|
||||||
},
|
}
|
||||||
)
|
require('esbuild').build(esbuildConfig)
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,257 +0,0 @@
|
||||||
import type {$FixMe, $IntentionalAny} from '@theatre/shared/utils/types'
|
|
||||||
import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin'
|
|
||||||
import * as fs from 'fs-extra'
|
|
||||||
import HtmlWebpackPlugin from 'html-webpack-plugin'
|
|
||||||
import {setAutoFreeze as setImmerAutoFreeze} from 'immer'
|
|
||||||
// eslint-disable-next-line no-restricted-imports
|
|
||||||
import {isPlainObject} from 'lodash'
|
|
||||||
import * as path from 'path'
|
|
||||||
import * as webpack from 'webpack'
|
|
||||||
import {ESBuildMinifyPlugin} from 'esbuild-loader'
|
|
||||||
// eslint-disable-next-line no-relative-imports
|
|
||||||
import {getAliasesFromTsConfigForWebpack} from '../../../devEnv/getAliasesFromTsConfig.js'
|
|
||||||
import esbuild from 'esbuild'
|
|
||||||
|
|
||||||
setImmerAutoFreeze(false)
|
|
||||||
|
|
||||||
export const privatePackageRoot = path.resolve(__dirname, '../..')
|
|
||||||
|
|
||||||
export default (type: 'playground' | 'development' | 'production') => {
|
|
||||||
const isDev = type === 'development' || type === 'playground'
|
|
||||||
|
|
||||||
const bundles: Array<'playground' | 'studio' | 'core'> =
|
|
||||||
type === 'playground' ? ['playground'] : ['core', 'studio']
|
|
||||||
|
|
||||||
return bundles.map((which) => {
|
|
||||||
const envConfig = getEnvConfig(isDev)
|
|
||||||
envConfig.version = require('../../package.json').version
|
|
||||||
const packageRoot = path.join(
|
|
||||||
privatePackageRoot,
|
|
||||||
which === 'playground' ? 'studio' : which,
|
|
||||||
)
|
|
||||||
|
|
||||||
const packageDevSpecificConfig = envConfig.devSpecific
|
|
||||||
|
|
||||||
const config: webpack.Configuration = {
|
|
||||||
entry:
|
|
||||||
which === 'playground'
|
|
||||||
? './src/playground/index.tsx'
|
|
||||||
: `./src/index.ts`,
|
|
||||||
output: {
|
|
||||||
libraryTarget: 'umd',
|
|
||||||
library: 'Theatre_' + which,
|
|
||||||
filename: `index.js`,
|
|
||||||
path: path.join(packageRoot, 'dist'),
|
|
||||||
// sourceMapFilename: '[file].map',
|
|
||||||
devtoolModuleFilenameTemplate: (info: {absoluteResourcePath: string}) =>
|
|
||||||
path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
|
|
||||||
},
|
|
||||||
context: packageRoot,
|
|
||||||
devtool: isDev
|
|
||||||
? type === 'playground'
|
|
||||||
? 'cheap-module-source-map'
|
|
||||||
: 'source-map'
|
|
||||||
: 'source-map',
|
|
||||||
mode: isDev ? 'development' : 'production',
|
|
||||||
node: {
|
|
||||||
global: true,
|
|
||||||
},
|
|
||||||
plugins: [new CaseSensitivePathsPlugin()],
|
|
||||||
resolve: {
|
|
||||||
alias: getAliasesFromTsConfigForWebpack(),
|
|
||||||
extensions: ['.tsx', '.ts', '.js', '.json', '.css'],
|
|
||||||
// @todo For some reason, importing react-window or react-functional-select fails
|
|
||||||
// if `main: module` is enabled.
|
|
||||||
mainFields: ['module', 'main'],
|
|
||||||
plugins: [],
|
|
||||||
},
|
|
||||||
module: {
|
|
||||||
rules: [
|
|
||||||
{
|
|
||||||
test: /\.tsx?$/,
|
|
||||||
exclude: /node_modules/,
|
|
||||||
use: [
|
|
||||||
// {
|
|
||||||
// loader: require.resolve('babel-loader'),
|
|
||||||
// options: {
|
|
||||||
// rootMode: 'upward',
|
|
||||||
// envName: envConfig.NODE_ENV,
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
{
|
|
||||||
loader: require.resolve('esbuild-loader'),
|
|
||||||
options: {
|
|
||||||
loader: 'tsx',
|
|
||||||
implementation: esbuild,
|
|
||||||
target: 'esnext',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
// Exclude `js` files to keep "css" loader working as it injects
|
|
||||||
// its runtime that would otherwise processed through "file" loader.
|
|
||||||
// Also exclude `html` and `json` extensions so they get processed
|
|
||||||
// by webpacks internal loaders.
|
|
||||||
exclude: [
|
|
||||||
/\.js$/,
|
|
||||||
/\.tsx?$/,
|
|
||||||
/\.html?$/,
|
|
||||||
/\.json$/,
|
|
||||||
/\.css$/,
|
|
||||||
/\.svg$/,
|
|
||||||
],
|
|
||||||
loader: require.resolve('file-loader'),
|
|
||||||
options: {
|
|
||||||
name: 'static/media/[name].[hash:8].[ext]',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
||||||
if (type === 'playground') {
|
|
||||||
const htmlPluginTemplateParameters = (
|
|
||||||
compilation: $FixMe,
|
|
||||||
assets: $FixMe,
|
|
||||||
options: $FixMe,
|
|
||||||
) => ({
|
|
||||||
onv: envConfig,
|
|
||||||
compilation: compilation,
|
|
||||||
webpack: compilation.getStats().toJson(),
|
|
||||||
webpackConfig: compilation.options,
|
|
||||||
htmlWebpackPlugin: {
|
|
||||||
files: assets,
|
|
||||||
options: options,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
config.plugins!.push(
|
|
||||||
new HtmlWebpackPlugin({
|
|
||||||
inject: false,
|
|
||||||
template: './src/playground/playground.html',
|
|
||||||
filename: 'index.html',
|
|
||||||
templateParameters: htmlPluginTemplateParameters,
|
|
||||||
}) as $FixMe,
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (type === 'playground') {
|
|
||||||
config.stats = 'errors-warnings'
|
|
||||||
config.plugins!.push(new webpack.HotModuleReplacementPlugin())
|
|
||||||
|
|
||||||
const sslConfig = envConfig.devSpecific.devServerSSL
|
|
||||||
const https: boolean = sslConfig && sslConfig.useSSL === true
|
|
||||||
|
|
||||||
// @ts-expect-error
|
|
||||||
config.devServer = {
|
|
||||||
publicPath: `${https ? 'https' : 'http'}://${
|
|
||||||
envConfig.devSpecific.devServerHost
|
|
||||||
}:${packageDevSpecificConfig.devServerPort}/`,
|
|
||||||
host: '0.0.0.0',
|
|
||||||
hot: true,
|
|
||||||
historyApiFallback: true,
|
|
||||||
public: `${https ? 'https://' : ''}${
|
|
||||||
envConfig.devSpecific.devServerHost
|
|
||||||
}:${packageDevSpecificConfig.devServerPort}`,
|
|
||||||
allowedHosts: [envConfig.devSpecific.devServerHost, '.localtunnel.me'],
|
|
||||||
noInfo: false,
|
|
||||||
// quiet: true,
|
|
||||||
stats: false,
|
|
||||||
headers: {
|
|
||||||
'Access-Control-Allow-Origin': '*',
|
|
||||||
'Access-Control-Expose-Headers': 'SourceMap,X-SourceMap',
|
|
||||||
},
|
|
||||||
port: packageDevSpecificConfig.devServerPort,
|
|
||||||
}
|
|
||||||
|
|
||||||
if (https) {
|
|
||||||
// @ts-ignore ignore
|
|
||||||
config.devServer.https = {
|
|
||||||
key: fs.readFileSync(sslConfig.pathToKey),
|
|
||||||
cert: fs.readFileSync(sslConfig.pathToCert),
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!isDev) {
|
|
||||||
config.stats = {
|
|
||||||
// @ts-ignore
|
|
||||||
optimizationBailout: true,
|
|
||||||
}
|
|
||||||
|
|
||||||
config.optimization = {
|
|
||||||
minimizer: [
|
|
||||||
new ESBuildMinifyPlugin({
|
|
||||||
target: 'esnext',
|
|
||||||
}),
|
|
||||||
],
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// defined process.env and process.env
|
|
||||||
config.plugins!.push(
|
|
||||||
new webpack.DefinePlugin(
|
|
||||||
convertObjectToWebpackDefinePaths({
|
|
||||||
process: {env: envConfig},
|
|
||||||
'process.env': envConfig,
|
|
||||||
}),
|
|
||||||
),
|
|
||||||
)
|
|
||||||
|
|
||||||
return config
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getEnvConfig(isDev: boolean) {
|
|
||||||
const which = isDev ? 'development' : 'production'
|
|
||||||
|
|
||||||
const filename = `${which}.env.json`
|
|
||||||
|
|
||||||
const pathtoEnvFile = path.join(privatePackageRoot, filename)
|
|
||||||
|
|
||||||
if (!fs.existsSync(pathtoEnvFile)) {
|
|
||||||
const sampleEnvFilename = 'sample.env.json'
|
|
||||||
const sampleEnvContent = JSON.parse(
|
|
||||||
fs.readFileSync(path.join(privatePackageRoot, sampleEnvFilename), {
|
|
||||||
encoding: 'utf-8',
|
|
||||||
}),
|
|
||||||
)
|
|
||||||
|
|
||||||
const newEnv = {...sampleEnvContent}
|
|
||||||
newEnv.NODE_ENV = which
|
|
||||||
if (!isDev) {
|
|
||||||
delete newEnv['devSpecific']
|
|
||||||
}
|
|
||||||
|
|
||||||
fs.writeFileSync(pathtoEnvFile, JSON.stringify(newEnv, undefined, 2), {
|
|
||||||
encoding: 'utf-8',
|
|
||||||
})
|
|
||||||
|
|
||||||
console.log(`\n${filename} was created from ${sampleEnvFilename}`)
|
|
||||||
}
|
|
||||||
|
|
||||||
return require(pathtoEnvFile)
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @example
|
|
||||||
* convertObjectToWebpackDefinePaths({foo: {bar: 'baz}}) // => {'foo.bar': 'baz'}
|
|
||||||
*/
|
|
||||||
export function convertObjectToWebpackDefinePaths(
|
|
||||||
obj: unknown,
|
|
||||||
): Record<string, string> {
|
|
||||||
const processed: Record<string, string> = {}
|
|
||||||
const process = (v: $IntentionalAny, ns: string[]) => {
|
|
||||||
if (ns.length > 0) {
|
|
||||||
processed[ns.join('.')] = JSON.stringify(v)
|
|
||||||
}
|
|
||||||
if (isPlainObject(v)) {
|
|
||||||
Object.keys(v).forEach((key) => {
|
|
||||||
process(v[key], [...ns, key])
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
process(obj, [])
|
|
||||||
return processed
|
|
||||||
}
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
require('ts-node').register({transpileOnly: true, skipProject: true})
|
|
||||||
|
|
||||||
const createWebpackConfigObject = require('./createWebpackConfig')
|
|
||||||
|
|
||||||
// @ts-ignore
|
|
||||||
module.exports = createWebpackConfigObject('development')
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
require('ts-node').register({transpileOnly: true, skipProject: true})
|
|
||||||
|
|
||||||
const createWebpackConfigObject = require('./createWebpackConfig')
|
|
||||||
|
|
||||||
// @ts-ignore
|
|
||||||
module.exports = createWebpackConfigObject('playground')
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
require('ts-node').register({transpileOnly: true, skipProject: true})
|
|
||||||
|
|
||||||
const createWebpackConfigObject = require('./createWebpackConfig')
|
|
||||||
|
|
||||||
module.exports = createWebpackConfigObject('production')
|
|
||||||
4
theatre/globals.d.ts
vendored
4
theatre/globals.d.ts
vendored
|
|
@ -13,6 +13,10 @@ interface ProcessEnv {
|
||||||
version: string
|
version: string
|
||||||
}
|
}
|
||||||
|
|
||||||
|
declare var process: {
|
||||||
|
env: ProcessEnv
|
||||||
|
}
|
||||||
|
|
||||||
declare module '*.svg' {
|
declare module '*.svg' {
|
||||||
var s: string
|
var s: string
|
||||||
export default s
|
export default s
|
||||||
|
|
|
||||||
|
|
@ -5,11 +5,9 @@
|
||||||
"./studio"
|
"./studio"
|
||||||
],
|
],
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "run-p _webpack:dev _build:declarations:watch",
|
|
||||||
"typecheck": "tsc --build",
|
"typecheck": "tsc --build",
|
||||||
"build": "run-s _build:clean _build:declarations _build:clean:temp _bundle:production",
|
"build": "run-s _build:clean _build:declarations _build:clean:temp _bundle:production",
|
||||||
"prepare": "run-s build",
|
"prepare": "run-s build",
|
||||||
"_webpack:dev": "webpack --progress --watch --config devEnv/webpack/development.js",
|
|
||||||
"_build:clean": "run-s _build:clean:temp _build:clean:dist",
|
"_build:clean": "run-s _build:clean:temp _build:clean:dist",
|
||||||
"_build:clean:temp": "rimraf .temp",
|
"_build:clean:temp": "rimraf .temp",
|
||||||
"_build:clean:dist": "rimraf .dist",
|
"_build:clean:dist": "rimraf .dist",
|
||||||
|
|
@ -19,7 +17,7 @@
|
||||||
"_build:declarations:emit:watch": "tsc --build tsconfig.json --watch --preserveWatchOutput",
|
"_build:declarations:emit:watch": "tsc --build tsconfig.json --watch --preserveWatchOutput",
|
||||||
"_build:declarations:bundle": "rollup -c devEnv/declarations-bundler/rollup.config.js",
|
"_build:declarations:bundle": "rollup -c devEnv/declarations-bundler/rollup.config.js",
|
||||||
"_build:declarations:bundle:watch": "rollup --watch --no-watch.clearScreen -c devEnv/declarations-bundler/rollup.config.js",
|
"_build:declarations:bundle:watch": "rollup --watch --no-watch.clearScreen -c devEnv/declarations-bundler/rollup.config.js",
|
||||||
"_bundle:production": "webpack --progress --config devEnv/webpack/production.js"
|
"_bundle:production": "node -r esbuild-register devEnv/build.ts"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/cli": "^7.14.3",
|
"@babel/cli": "^7.14.3",
|
||||||
|
|
@ -32,7 +30,6 @@
|
||||||
"@theatre/core": "workspace:*",
|
"@theatre/core": "workspace:*",
|
||||||
"@theatre/dataverse": "workspace:*",
|
"@theatre/dataverse": "workspace:*",
|
||||||
"@types/fs-extra": "^9.0.11",
|
"@types/fs-extra": "^9.0.11",
|
||||||
"@types/html-webpack-plugin": "^3.2.5",
|
|
||||||
"@types/jest": "^26.0.23",
|
"@types/jest": "^26.0.23",
|
||||||
"@types/lodash": "^4.14.170",
|
"@types/lodash": "^4.14.170",
|
||||||
"@types/lodash-es": "^4.17.4",
|
"@types/lodash-es": "^4.17.4",
|
||||||
|
|
@ -43,17 +40,12 @@
|
||||||
"@types/redux-actions": "^2.6.1",
|
"@types/redux-actions": "^2.6.1",
|
||||||
"@types/shallowequal": "^1.1.1",
|
"@types/shallowequal": "^1.1.1",
|
||||||
"@types/styled-components": "^5.1.9",
|
"@types/styled-components": "^5.1.9",
|
||||||
"@types/terser-webpack-plugin": "^5.0.3",
|
|
||||||
"@types/three": "^0.129.0",
|
"@types/three": "^0.129.0",
|
||||||
"@types/uuid": "^8.3.0",
|
"@types/uuid": "^8.3.0",
|
||||||
"@types/webpack": "^5.28.0",
|
|
||||||
"@types/webpack-env": "^1.16.0",
|
|
||||||
"babel-loader": "^8.2.2",
|
"babel-loader": "^8.2.2",
|
||||||
"babel-polyfill": "^6.26.0",
|
"babel-polyfill": "^6.26.0",
|
||||||
"babel-register": "^6.26.0",
|
"babel-register": "^6.26.0",
|
||||||
"case-sensitive-paths-webpack-plugin": "^2.4.0",
|
|
||||||
"circular-dependency-plugin": "^5.2.2",
|
"circular-dependency-plugin": "^5.2.2",
|
||||||
"clean-webpack-plugin": "^3.0.0",
|
|
||||||
"cross-env": "^7.0.3",
|
"cross-env": "^7.0.3",
|
||||||
"esbuild": "^0.12.5",
|
"esbuild": "^0.12.5",
|
||||||
"esbuild-loader": "^2.13.1",
|
"esbuild-loader": "^2.13.1",
|
||||||
|
|
@ -62,14 +54,12 @@
|
||||||
"file-loader": "^6.2.0",
|
"file-loader": "^6.2.0",
|
||||||
"fs-extra": "^10.0.0",
|
"fs-extra": "^10.0.0",
|
||||||
"html-loader": "^2.1.2",
|
"html-loader": "^2.1.2",
|
||||||
"html-webpack-plugin": "^5.3.1",
|
|
||||||
"identity-obj-proxy": "^3.0.0",
|
"identity-obj-proxy": "^3.0.0",
|
||||||
"immer": "^8.0.4",
|
"immer": "^8.0.4",
|
||||||
"jiff": "^0.7.3",
|
"jiff": "^0.7.3",
|
||||||
"json-touch-patch": "^0.11.2",
|
"json-touch-patch": "^0.11.2",
|
||||||
"lodash": "^4.17.21",
|
"lodash": "^4.17.21",
|
||||||
"lodash-es": "^4.17.21",
|
"lodash-es": "^4.17.21",
|
||||||
"lodash-webpack-plugin": "^0.11.6",
|
|
||||||
"microbundle": "^0.13.0",
|
"microbundle": "^0.13.0",
|
||||||
"nanoid": "^3.1.23",
|
"nanoid": "^3.1.23",
|
||||||
"npm-run-all": "^4.1.5",
|
"npm-run-all": "^4.1.5",
|
||||||
|
|
@ -93,16 +83,11 @@
|
||||||
"shallowequal": "^1.1.0",
|
"shallowequal": "^1.1.0",
|
||||||
"styled-components": "^5.3.0",
|
"styled-components": "^5.3.0",
|
||||||
"svg-inline-loader": "^0.8.2",
|
"svg-inline-loader": "^0.8.2",
|
||||||
"terser-webpack-plugin": "^5.1.1",
|
|
||||||
"timing-function": "^0.2.3",
|
"timing-function": "^0.2.3",
|
||||||
"ts-node": "^10.0.0",
|
"ts-node": "^10.0.0",
|
||||||
"tslib": "^2.2.0",
|
"tslib": "^2.2.0",
|
||||||
"typescript": "^4.3.2",
|
"typescript": "^4.3.2",
|
||||||
"unused-webpack-plugin": "^2.4.0",
|
|
||||||
"url-loader": "^4.1.1",
|
"url-loader": "^4.1.1",
|
||||||
"uuid": "^8.3.2",
|
"uuid": "^8.3.2"
|
||||||
"webpack": "^5.38.1",
|
|
||||||
"webpack-cli": "^4.7.0",
|
|
||||||
"webpack-dev-server": "^3.11.2"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue