mirror of
https://github.com/teoxoy/factorio-blueprint-editor.git
synced 2024-11-24 08:22:16 +02:00
replace webpack with fuse-box
This commit is contained in:
Teoxoy
parent
25b7bcb60f
commit
9fb3c9ddcc
@ -1,4 +0,0 @@
|
||||
> 1%
|
||||
last 2 versions
|
||||
Firefox ESR
|
||||
not dead
|
||||
@ -1,2 +0,0 @@
|
||||
plugins:
|
||||
postcss-preset-env: {}
|
||||
@ -3,8 +3,8 @@
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"start": "webpack-dev-server",
|
||||
"build": "webpack --mode=production"
|
||||
"start": "ts-node -T tools/fuse dev",
|
||||
"build": "ts-node -T tools/fuse build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fbe/editor": "*",
|
||||
@ -16,32 +16,11 @@
|
||||
"devDependencies": {
|
||||
"@types/dat.gui": "^0.7.5",
|
||||
"@types/file-saver": "^2.0.1",
|
||||
"@types/html-webpack-plugin": "^3.2.1",
|
||||
"@types/mini-css-extract-plugin": "^0.8.0",
|
||||
"@types/node": "^12.12.7",
|
||||
"@types/optimize-css-assets-webpack-plugin": "^5.0.1",
|
||||
"@types/terser-webpack-plugin": "^1.2.1",
|
||||
"@types/webpack": "^4.41.0",
|
||||
"@types/webpack-dev-server": "^3.4.0",
|
||||
"clean-webpack-plugin": "^3.0.0",
|
||||
"css-loader": "^3.2.0",
|
||||
"extract-loader": "^3.1.0",
|
||||
"file-loader": "^4.2.0",
|
||||
"html-loader": "^0.5.5",
|
||||
"html-webpack-plugin": "^3.2.0",
|
||||
"mini-css-extract-plugin": "^0.8.0",
|
||||
"optimize-css-assets-webpack-plugin": "^5.0.3",
|
||||
"postcss-loader": "^3.0.0",
|
||||
"postcss-preset-env": "^6.7.0",
|
||||
"@types/node": "^14.0.1",
|
||||
"fuse-box": "4.0.0-next.430",
|
||||
"luamin": "^1.0.4",
|
||||
"stylus": "^0.54.7",
|
||||
"stylus-loader": "^3.0.2",
|
||||
"svg-inline-loader": "^0.8.0",
|
||||
"terser-webpack-plugin": "^2.2.1",
|
||||
"ts-loader": "^6.2.0",
|
||||
"ts-node": "^8.4.1",
|
||||
"typescript": "^3.6.4",
|
||||
"webpack": "^4.41.2",
|
||||
"webpack-cli": "^3.3.9",
|
||||
"webpack-dev-server": "^3.9.0"
|
||||
"ts-node": "^8.10.1",
|
||||
"typescript": "^3.9.2"
|
||||
}
|
||||
}
|
||||
|
||||
@ -13,15 +13,16 @@
|
||||
|
||||
<title>Factorio Blueprint Editor</title>
|
||||
|
||||
<link rel="icon" href="assets/favicon.png" />
|
||||
<link rel="icon" href="$import('assets/favicon.png')" />
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
|
||||
<link href="https://fonts.googleapis.com/css?family=Cookie" rel="stylesheet" />
|
||||
$css
|
||||
</head>
|
||||
|
||||
<body oncontextmenu="return false;">
|
||||
<div id="loadingScreen" class="active">
|
||||
<img id="logo" src="assets/logo.svg" />
|
||||
<img class="loadingWheel" src="assets/loadingWheel.svg" />
|
||||
<img id="logo" src="$import('assets/logo.svg')" />
|
||||
<img class="loadingWheel" src="$import('assets/loadingWheel.svg')" />
|
||||
</div>
|
||||
<div id="corner-panel">
|
||||
<!-- prettier-ignore -->
|
||||
@ -89,5 +90,6 @@
|
||||
</p>
|
||||
</div>
|
||||
<canvas id="editor" tabindex="1"></canvas>
|
||||
$bundles
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
import './index.styl'
|
||||
|
||||
import { utils as pixiUtils } from 'pixi.js'
|
||||
import EDITOR, { Blueprint, Book, TrainBlueprintError, ModdedBlueprintError } from '@fbe/editor'
|
||||
import FileSaver from 'file-saver'
|
||||
|
||||
102
packages/website/tools/fuse.ts
Normal file
102
packages/website/tools/fuse.ts
Normal file
@ -0,0 +1,102 @@
|
||||
import { join } from 'path'
|
||||
import { fusebox, sparky } from 'fuse-box'
|
||||
import { IDevServerProps } from 'fuse-box/devServer/devServerProps'
|
||||
import { Context as FuseBoxContext } from 'fuse-box/core/context'
|
||||
import { wrapContents } from 'fuse-box/plugins/pluginStrings'
|
||||
import { minify as luamin } from 'luamin'
|
||||
import { IPublicConfig } from 'fuse-box/config/IConfig'
|
||||
import { IRunResponse } from 'fuse-box/core/IRunResponse'
|
||||
import { IRunProps } from 'fuse-box/config/IRunProps'
|
||||
|
||||
const port = Number(process.env.PORT) || 8080
|
||||
|
||||
const p = (p: string): string => join(__dirname, p)
|
||||
|
||||
class Context {
|
||||
public readonly paths = {
|
||||
cache: p('.fusebox'),
|
||||
dist: p('../dist')
|
||||
}
|
||||
public runDev(runProps?: IRunProps): Promise<IRunResponse> {
|
||||
return fusebox(this.getConfig(true)).runDev(runProps)
|
||||
}
|
||||
public runProd(runProps?: IRunProps): Promise<IRunResponse> {
|
||||
return fusebox(this.getConfig()).runProd(runProps)
|
||||
}
|
||||
private getConfig(runServer = false): IPublicConfig {
|
||||
return {
|
||||
compilerOptions: {
|
||||
tsConfig: p('../tsconfig.json')
|
||||
},
|
||||
entry: p('../src/index.ts'),
|
||||
target: 'browser',
|
||||
webIndex: { template: p('../src/index.html') },
|
||||
devServer: runServer && this.getServerConfig(),
|
||||
plugins: [this.luaPlugin],
|
||||
cache: { root: this.paths.cache },
|
||||
hmr: { plugin: p('./hmr.ts') },
|
||||
// sourceMap: { sourceRoot: '' },
|
||||
watcher: {
|
||||
root: [p('../src'), p('../../editor/src'), p('../../factorio-data/src'), p('../../lua-runtime/dist')]
|
||||
}
|
||||
}
|
||||
}
|
||||
private getServerConfig(): IDevServerProps {
|
||||
return {
|
||||
httpServer: { port },
|
||||
hmrServer: { port },
|
||||
proxy: [
|
||||
{
|
||||
path: '/api',
|
||||
options: {
|
||||
target: `http://localhost:8888`
|
||||
// pathRewrite: { '^/api': '' },
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
private readonly luaPlugin = (ctx: FuseBoxContext): void => {
|
||||
ctx.ict.on('bundle_resolve_module', props => {
|
||||
const m = props.module
|
||||
if (!m.captured && m.extension === '.lua') {
|
||||
m.captured = true
|
||||
m.read()
|
||||
m.contents = wrapContents(`\`${luamin(m.contents)}\``, true)
|
||||
}
|
||||
return props
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const { exec, rm, src, task } = sparky(Context)
|
||||
|
||||
task('copy-wasm', async ctx => {
|
||||
rm(join(ctx.paths.dist, 'main.wasm'))
|
||||
// rm(join(ctx.paths.dist, 'main.wasm.map'))
|
||||
await src(join(p('../../lua-runtime/dist'), 'main.wasm')) // 'main.wasm?(.map)'
|
||||
.dest(ctx.paths.dist, 'dist')
|
||||
.exec()
|
||||
})
|
||||
|
||||
task('dev', async ctx => {
|
||||
rm(ctx.paths.cache)
|
||||
await exec('copy-wasm')
|
||||
await ctx.runDev({
|
||||
bundles: {
|
||||
distRoot: ctx.paths.dist,
|
||||
app: 'app.js'
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
task('build', async ctx => {
|
||||
rm(ctx.paths.dist)
|
||||
await exec('copy-wasm')
|
||||
await ctx.runProd({
|
||||
bundles: {
|
||||
distRoot: ctx.paths.dist,
|
||||
app: 'app.js'
|
||||
}
|
||||
})
|
||||
})
|
||||
20
packages/website/tools/hmr.ts
Normal file
20
packages/website/tools/hmr.ts
Normal file
@ -0,0 +1,20 @@
|
||||
// import { HMRHelper, HMRPayload } from 'fuse-box/types/hmr'
|
||||
|
||||
// export default function (payload: HMRPayload, helper: HMRHelper): void {
|
||||
// const { updates } = payload
|
||||
// console.log('__HMR__', payload, helper)
|
||||
// if (helper.isStylesheeetUpdate) {
|
||||
// helper.flushModules(updates)
|
||||
// helper.updateModules()
|
||||
// helper.callModules(updates)
|
||||
// } else {
|
||||
// helper.flushAll()
|
||||
// helper.updateModules()
|
||||
// helper.callEntries()
|
||||
// }
|
||||
// }
|
||||
|
||||
export default function (): void {
|
||||
// @ts-ignore
|
||||
window.location.reload()
|
||||
}
|
||||
10
packages/website/tools/tsconfig.json
Normal file
10
packages/website/tools/tsconfig.json
Normal file
@ -0,0 +1,10 @@
|
||||
{
|
||||
"extends": "../../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"target": "ES2016",
|
||||
"module": "CommonJS",
|
||||
"lib": ["ES2016"],
|
||||
"esModuleInterop": true
|
||||
},
|
||||
"include": ["*.ts"]
|
||||
}
|
||||
@ -1,15 +1,10 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"rootDir": ".",
|
||||
"outDir": "dist",
|
||||
|
||||
"target": "es5",
|
||||
"module": "commonjs",
|
||||
"moduleResolution": "node",
|
||||
"lib": ["dom", "es6", "es2016.array.include"],
|
||||
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true
|
||||
}
|
||||
"target": "ES2016",
|
||||
"module": "CommonJS",
|
||||
"lib": ["ES2016", "DOM"],
|
||||
"esModuleInterop": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
|
||||
@ -1,164 +0,0 @@
|
||||
import path from 'path'
|
||||
import webpack from 'webpack'
|
||||
import { CleanWebpackPlugin } from 'clean-webpack-plugin'
|
||||
import HtmlWebpackPlugin from 'html-webpack-plugin'
|
||||
import MiniCssExtractPlugin from 'mini-css-extract-plugin'
|
||||
import TerserJSPlugin from 'terser-webpack-plugin'
|
||||
import OptimizeCSSAssetsPlugin from 'optimize-css-assets-webpack-plugin'
|
||||
import WebpackDevServer from 'webpack-dev-server'
|
||||
|
||||
const config = (_: unknown, { mode }: { mode: 'production' | 'development' }): webpack.Configuration => {
|
||||
const DEV = mode !== 'production'
|
||||
const sourceMapType = DEV ? 'inline-source-map' : 'source-map'
|
||||
const sourceMap = !!sourceMapType
|
||||
// hmr only works for css in the current config
|
||||
const hmr = true
|
||||
|
||||
return {
|
||||
target: 'web',
|
||||
mode: DEV ? 'development' : 'production',
|
||||
devtool: sourceMapType,
|
||||
devServer: {
|
||||
contentBase: './dist',
|
||||
hot: hmr,
|
||||
before(_, server) {
|
||||
devServer = server
|
||||
}
|
||||
},
|
||||
stats: DEV ? 'minimal' : 'normal',
|
||||
entry: ['./src/index.ts', './src/index.styl'],
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.ts$/,
|
||||
exclude: /node_modules/,
|
||||
use: {
|
||||
loader: 'ts-loader',
|
||||
options: {
|
||||
transpileOnly: true,
|
||||
experimentalWatchApi: true
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.styl$/,
|
||||
use: [
|
||||
{
|
||||
loader: MiniCssExtractPlugin.loader,
|
||||
options: {
|
||||
hmr: DEV,
|
||||
sourceMap
|
||||
}
|
||||
},
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
sourceMap
|
||||
}
|
||||
},
|
||||
{
|
||||
loader: 'postcss-loader',
|
||||
options: {
|
||||
sourceMap
|
||||
}
|
||||
},
|
||||
{
|
||||
loader: 'stylus-loader',
|
||||
options: {
|
||||
sourceMap
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.(jpg|png|svg)$/,
|
||||
use: {
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: DEV ? '[name].[ext]' : '[name].[contenthash:10].[ext]'
|
||||
}
|
||||
}
|
||||
},
|
||||
// {
|
||||
// test: /\.svg$/,
|
||||
// loader: 'svg-inline-loader'
|
||||
// }
|
||||
{
|
||||
test: /\.html$/,
|
||||
use: {
|
||||
loader: 'html-loader',
|
||||
options: {
|
||||
minimize: !DEV,
|
||||
attrs: ['img:src', 'link:href']
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
new CleanWebpackPlugin(),
|
||||
new HtmlWebpackPlugin({
|
||||
template: './src/index.html'
|
||||
}),
|
||||
reloadHtml,
|
||||
new MiniCssExtractPlugin({
|
||||
filename: DEV ? '[name].css' : '[name].[contenthash:10].css'
|
||||
})
|
||||
],
|
||||
optimization: {
|
||||
moduleIds: 'hashed',
|
||||
runtimeChunk: 'single',
|
||||
splitChunks: {
|
||||
chunks: 'all',
|
||||
cacheGroups: {
|
||||
factorio_data: {
|
||||
priority: 1,
|
||||
test: /[\\/]node_modules[\\/]factorio-data[\\/]/,
|
||||
name: 'factorio_data'
|
||||
},
|
||||
vendor: {
|
||||
test: /[\\/]node_modules[\\/]/,
|
||||
name: 'vendor'
|
||||
}
|
||||
}
|
||||
},
|
||||
minimizer: [
|
||||
new TerserJSPlugin({ sourceMap }),
|
||||
new OptimizeCSSAssetsPlugin({ cssProcessorOptions: { map: sourceMap } })
|
||||
]
|
||||
},
|
||||
resolve: {
|
||||
extensions: ['.js', '.ts', '.styl', '.html']
|
||||
},
|
||||
output: {
|
||||
path: path.resolve(__dirname, 'dist'),
|
||||
filename: DEV ? '[name].js' : '[name].[contenthash:10].js'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Reload devServer when HTML changes (this doesn't happen automatically because we use HtmlWebpackPlugin)
|
||||
From https://github.com/jantimon/html-webpack-plugin/issues/100#issuecomment-368303060
|
||||
*/
|
||||
let devServer: WebpackDevServer
|
||||
function reloadHtml(): void {
|
||||
const cache: Record<string, string> = {}
|
||||
const plugin = { name: 'CustomHtmlReloadPlugin' }
|
||||
// @ts-ignore
|
||||
this.hooks.compilation.tap(plugin, compilation => {
|
||||
// @ts-ignore
|
||||
compilation.hooks.htmlWebpackPluginAfterEmit.tap(plugin, data => {
|
||||
const orig = cache[data.outputName]
|
||||
const html = data.html.source()
|
||||
// plugin seems to emit on any unrelated change?
|
||||
if (orig && orig !== html) {
|
||||
// @ts-ignore
|
||||
devServer.sockWrite(devServer.sockets, 'content-changed')
|
||||
}
|
||||
cache[data.outputName] = html
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
export default config
|
||||
@ -1,15 +1,20 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"pretty": true,
|
||||
|
||||
"sourceMap": true,
|
||||
"alwaysStrict": true,
|
||||
"removeComments": true,
|
||||
|
||||
"noImplicitAny": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"preserveConstEnums": true,
|
||||
|
||||
"preserveConstEnums": true
|
||||
"rootDir": ".",
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@fbe/*": ["packages/*/src/index.ts"]
|
||||
},
|
||||
|
||||
"typeRoots": ["./node_modules/@types", "./typings"]
|
||||
}
|
||||
}
|
||||
|
||||
3
typings/luamin/index.d.ts
vendored
Normal file
3
typings/luamin/index.d.ts
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
declare module 'luamin' {
|
||||
export function minify(src: string): string
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user