mirror of
https://github.com/teoxoy/factorio-blueprint-editor.git
synced 2024-11-28 08:39:10 +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",
|
"version": "1.0.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "webpack-dev-server",
|
"start": "ts-node -T tools/fuse dev",
|
||||||
"build": "webpack --mode=production"
|
"build": "ts-node -T tools/fuse build"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fbe/editor": "*",
|
"@fbe/editor": "*",
|
||||||
@ -16,32 +16,11 @@
|
|||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/dat.gui": "^0.7.5",
|
"@types/dat.gui": "^0.7.5",
|
||||||
"@types/file-saver": "^2.0.1",
|
"@types/file-saver": "^2.0.1",
|
||||||
"@types/html-webpack-plugin": "^3.2.1",
|
"@types/node": "^14.0.1",
|
||||||
"@types/mini-css-extract-plugin": "^0.8.0",
|
"fuse-box": "4.0.0-next.430",
|
||||||
"@types/node": "^12.12.7",
|
"luamin": "^1.0.4",
|
||||||
"@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",
|
|
||||||
"stylus": "^0.54.7",
|
"stylus": "^0.54.7",
|
||||||
"stylus-loader": "^3.0.2",
|
"ts-node": "^8.10.1",
|
||||||
"svg-inline-loader": "^0.8.0",
|
"typescript": "^3.9.2"
|
||||||
"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"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -13,15 +13,16 @@
|
|||||||
|
|
||||||
<title>Factorio Blueprint Editor</title>
|
<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=Roboto:300,400,500" rel="stylesheet" />
|
||||||
<link href="https://fonts.googleapis.com/css?family=Cookie" rel="stylesheet" />
|
<link href="https://fonts.googleapis.com/css?family=Cookie" rel="stylesheet" />
|
||||||
|
$css
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body oncontextmenu="return false;">
|
<body oncontextmenu="return false;">
|
||||||
<div id="loadingScreen" class="active">
|
<div id="loadingScreen" class="active">
|
||||||
<img id="logo" src="assets/logo.svg" />
|
<img id="logo" src="$import('assets/logo.svg')" />
|
||||||
<img class="loadingWheel" src="assets/loadingWheel.svg" />
|
<img class="loadingWheel" src="$import('assets/loadingWheel.svg')" />
|
||||||
</div>
|
</div>
|
||||||
<div id="corner-panel">
|
<div id="corner-panel">
|
||||||
<!-- prettier-ignore -->
|
<!-- prettier-ignore -->
|
||||||
@ -89,5 +90,6 @@
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<canvas id="editor" tabindex="1"></canvas>
|
<canvas id="editor" tabindex="1"></canvas>
|
||||||
|
$bundles
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,3 +1,5 @@
|
|||||||
|
import './index.styl'
|
||||||
|
|
||||||
import { utils as pixiUtils } from 'pixi.js'
|
import { utils as pixiUtils } from 'pixi.js'
|
||||||
import EDITOR, { Blueprint, Book, TrainBlueprintError, ModdedBlueprintError } from '@fbe/editor'
|
import EDITOR, { Blueprint, Book, TrainBlueprintError, ModdedBlueprintError } from '@fbe/editor'
|
||||||
import FileSaver from 'file-saver'
|
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",
|
"extends": "../../tsconfig.json",
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"rootDir": ".",
|
"target": "ES2016",
|
||||||
"outDir": "dist",
|
"module": "CommonJS",
|
||||||
|
"lib": ["ES2016", "DOM"],
|
||||||
"target": "es5",
|
"esModuleInterop": true
|
||||||
"module": "commonjs",
|
},
|
||||||
"moduleResolution": "node",
|
"include": ["src"]
|
||||||
"lib": ["dom", "es6", "es2016.array.include"],
|
|
||||||
|
|
||||||
"esModuleInterop": true,
|
|
||||||
"allowSyntheticDefaultImports": true
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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": {
|
"compilerOptions": {
|
||||||
"pretty": true,
|
"pretty": true,
|
||||||
|
|
||||||
"sourceMap": true,
|
"sourceMap": true,
|
||||||
"alwaysStrict": true,
|
"alwaysStrict": true,
|
||||||
"removeComments": true,
|
"removeComments": true,
|
||||||
|
|
||||||
"noImplicitAny": true,
|
"noImplicitAny": true,
|
||||||
"noUnusedLocals": true,
|
"noUnusedLocals": true,
|
||||||
"noUnusedParameters": 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