switch to vite

.gitignore

@@ -1,6 +1,5 @@
 node_modules
 packages/website/dist
-packages/website/tools/.fusebox
 packages/exporter/data/*
 !packages/exporter/data/output
 packages/exporter/data/output/metadata.json

package.json

@@ -6,8 +6,10 @@
     ],
     "scripts": {
         "start:website": "npm --workspace=@fbe/website run start",
+        "preview:website": "npm --workspace=@fbe/website run preview",
         "start:exporter": "cd ./packages/exporter && cargo run --release",
         "build:website": "npm --workspace=@fbe/website run build",
+        "type-check": "tsc",
         "lint": "eslint .",
         "lint:fix": "eslint . --fix",
         "format": "prettier . --check",
@@ -17,7 +19,7 @@
         "@eslint/js": "^9.16.0",
         "eslint": "^9.16.0",
         "prettier": "^3.4.2",
-        "typescript": "^4.5.4",
+        "typescript": "^5.7.2",
         "typescript-eslint": "^8.17.0"
     }
 }

packages/editor/package.json

@@ -10,6 +10,7 @@
     },
     "bugs": "https://github.com/Teoxoy/factorio-blueprint-editor/issues",
     "homepage": "https://github.com/Teoxoy/factorio-blueprint-editor",
+    "module": "./src/index.ts",
     "dependencies": {
         "@pixi/basis": "^6.2.0",
         "ajv": "^6.12.6",

packages/editor/src/Editor.ts

@@ -1,7 +1,7 @@
 import * as PIXI from 'pixi.js'
 import { BasisLoader } from '@pixi/basis'
-import basisTranscoderJS from './basis/transcoder.1.16.4.js'
-import basisTranscoderWASM from './basis/transcoder.1.16.4.wasm'
+import basisTranscoderJS from './basis/transcoder.1.16.4.js?url'
+import basisTranscoderWASM from './basis/transcoder.1.16.4.wasm?url'
 import { loadData } from './core/factorioData'
 import G from './common/globals'
 import { Entity } from './core/Entity'
@@ -16,7 +16,7 @@ import { IllegalFlipError } from './containers/PaintContainer'
 export class Editor {
     public async init(canvas: HTMLCanvasElement, showError: (msg: string) => void): Promise<void> {
         await Promise.all([
-            fetch('__STATIC_URL__/data.json')
+            fetch('/data/data.json')
                 .then(res => res.text())
                 .then(modules => loadData(modules)),
             BasisLoader.loadTranscoder(basisTranscoderJS, basisTranscoderWASM),

packages/editor/src/common/globals.ts

@@ -39,7 +39,7 @@ function getBT(path: string): Promise<PIXI.BaseTexture> {
 }
 
 function getTexture(path: string, x = 0, y = 0, w = 0, h = 0): PIXI.Texture {
-    const key = `__STATIC_URL__/${path.replace('.png', '.basis')}`
+    const key = `/data/${path.replace('.png', '.basis')}`
     const KK = `${key}-${x}-${y}-${w}-${h}`
     let t = textureCache.get(KK)
     if (t) return t

packages/editor/src/containers/BlueprintContainer.ts

@@ -21,7 +21,10 @@ import { PaintBlueprintContainer } from './PaintBlueprintContainer'
 import { OptimizedContainer } from './OptimizedContainer'
 import { GridData } from './GridData'
 
-export type GridPattern = 'checker' | 'grid'
+export enum GridPattern {
+    CHECKER = 'checker',
+    GRID = 'grid',
+}
 
 export enum EditorMode {
     /** Default */

packages/editor/src/containers/OptimizedContainer.ts

@@ -5,7 +5,6 @@ import { BlueprintContainer } from './BlueprintContainer'
 
 export class OptimizedContainer extends PIXI.Container {
     private bpc: BlueprintContainer
-    public children: EntitySprite[]
 
     public constructor(bpc: BlueprintContainer) {
         super()

packages/editor/src/containers/PaintBlueprintContainer.ts

@@ -8,7 +8,6 @@ import { BlueprintContainer } from './BlueprintContainer'
 export class PaintBlueprintContainer extends PaintContainer {
     private readonly bp: Blueprint
     private readonly entities = new Map<Entity, PaintBlueprintEntityContainer>()
-    public children: EntitySprite[]
 
     public constructor(bpc: BlueprintContainer, entities: Entity[]) {
         super(bpc, 'blueprint')

packages/editor/src/containers/PaintWireContainer.ts

@@ -9,7 +9,7 @@ import { BlueprintContainer } from './BlueprintContainer'
 
 export class PaintWireContainer extends PaintContainer {
     private color?: string
-    private cp?: IConnectionPoint? = undefined
+    private cp?: IConnectionPoint = undefined
     /** This is only a reference */
     private cursorBox: PIXI.Container
 

packages/editor/src/core/bpString.ts

@@ -170,7 +170,7 @@ function getBlueprintOrBookFromSource(source: string): Promise<Blueprint | Book>
             const pathParts = url.pathname.slice(1).split('/')
 
             const fetchData = (url: string): Promise<Response> =>
-                fetch(`__CORS_PROXY_URL__${encodeURIComponent(url)}`).then(response => {
+                fetch(`/corsproxy?url=${encodeURIComponent(url)}`).then(response => {
                     if (response.ok) return response
                     throw new Error('Network response was not ok.')
                 })

packages/editor/tsconfig.json

@@ -1,10 +1,7 @@
 {
     "extends": "../../tsconfig.json",
     "compilerOptions": {
-        "target": "ES2016",
-        "module": "CommonJS",
-        "lib": ["ES2019", "DOM", "DOM.Iterable"],
-        "esModuleInterop": true
+        "lib": ["ESNext", "DOM", "DOM.Iterable"]
     },
     "include": ["src/**/*.ts", "src/**/*.json"]
 }

packages/website/index.html

@@ -13,17 +13,16 @@
 
         <title>Factorio Blueprint Editor</title>
 
-        <link rel="icon" href="$import('../assets/favicon.png')" />
-        $css
+        <link rel="icon" href="/favicon.png" />
     </head>
 
     <body>
         <div id="loadingScreen" class="active">
-            <img id="logo" src="$import('../assets/logo.svg')" alt />
-            <img class="loadingWheel" src="$import('../assets/loadingWheel.svg')" alt />
+            <img id="logo" src="/logo.svg" alt />
+            <img class="loadingWheel" src="/loadingWheel.svg" alt />
         </div>
         <div id="corner-panel">
-            <img src="$import('../assets/logo-small.svg')" alt />
+            <img src="/logo-small.svg" alt />
             <span>Press I for info</span>
         </div>
         <div id="buttons">
@@ -34,7 +33,7 @@
                 rel="noopener"
             >
                 <span>Discord</span>
-                <img src="$import('../assets/discord.svg')" alt />
+                <img src="/discord.svg" alt />
             </a>
             <a
                 class="github-button"
@@ -43,7 +42,7 @@
                 rel="noopener"
             >
                 <span>Github</span>
-                <img src="$import('../assets/github.svg')" alt />
+                <img src="/github.svg" alt />
             </a>
         </div>
         <div id="info-panel">
@@ -93,6 +92,6 @@
             </p>
         </div>
         <canvas id="editor" tabindex="1"></canvas>
-        $bundles
+        <script type="module" src="/src/index.ts"></script>
     </body>
 </html>

packages/website/package.json

@@ -3,8 +3,9 @@
     "version": "1.0.0",
     "private": true,
     "scripts": {
-        "start": "ts-node -T tools/fuse dev",
-        "build": "ts-node -T tools/fuse build"
+        "start": "vite",
+        "build": "vite build",
+        "preview": "vite preview"
     },
     "dependencies": {
         "@fbe/editor": "*",
@@ -15,10 +16,8 @@
     "devDependencies": {
         "@types/dat.gui": "^0.7.7",
         "@types/file-saver": "^2.0.4",
-        "@types/node": "^14.18.0",
-        "fuse-box": "^4.0.1-next.8",
-        "stylus": "^0.55.0",
-        "ts-node": "^10.4.0",
-        "typescript": "^4.5.4"
+        "stylus": "^0.64.0",
+        "vite": "^6.0.3",
+        "vite-plugin-static-copy": "^2.2.0"
     }
 }

packages/website/src/index.styl

@@ -6,8 +6,8 @@
   font-style: normal
   font-weight: 300
   src: local('Roboto Light'), local('Roboto-Light'),
-       url('./../assets/fonts/roboto-v20-latin/300.woff2') format('woff2'),
-       url('./../assets/fonts/roboto-v20-latin/300.woff') format('woff')
+       url('/fonts/roboto-v20-latin/300.woff2') format('woff2'),
+       url('/fonts/roboto-v20-latin/300.woff') format('woff')
 
 // roboto-400 - latin
 @font-face
@@ -15,8 +15,8 @@
   font-style: normal
   font-weight: 400
   src: local('Roboto'), local('Roboto-Regular'),
-       url('./../assets/fonts/roboto-v20-latin/400.woff2') format('woff2'),
-       url('./../assets/fonts/roboto-v20-latin/400.woff') format('woff')
+       url('/fonts/roboto-v20-latin/400.woff2') format('woff2'),
+       url('/fonts/roboto-v20-latin/400.woff') format('woff')
 
 // roboto-500 - latin
 @font-face
@@ -24,8 +24,8 @@
   font-style: normal
   font-weight: 500
   src: local('Roboto Medium'), local('Roboto-Medium'),
-       url('./../assets/fonts/roboto-v20-latin/500.woff2') format('woff2'),
-       url('./../assets/fonts/roboto-v20-latin/500.woff') format('woff')
+       url('/fonts/roboto-v20-latin/500.woff2') format('woff2'),
+       url('/fonts/roboto-v20-latin/500.woff') format('woff')
 
 // titillium-web-400 - latin
 @font-face
@@ -33,8 +33,8 @@
   font-style: normal
   font-weight: 400
   src: local('Titillium Web Regular'), local('TitilliumWeb-Regular'),
-       url('./../assets/fonts/titillium-web-v8-latin/400.woff2') format('woff2'),
-       url('./../assets/fonts/titillium-web-v8-latin/400.woff') format('woff')
+       url('/fonts/titillium-web-v8-latin/400.woff2') format('woff2'),
+       url('/fonts/titillium-web-v8-latin/400.woff') format('woff')
 
 
 // Normalize
@@ -128,6 +128,7 @@ html
 
 #editor
     position: fixed
+    outline: none
 
 #doorbell
     &-submit-button

packages/website/tools/fuse.ts

@@ -1,98 +0,0 @@
-import { join } from 'path'
-import { fusebox, sparky, pluginLink, pluginReplace } from 'fuse-box'
-import { IDevServerProps } from 'fuse-box/devServer/devServerProps'
-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)
-
-const HEADERS_FILE = p('../src/_headers')
-const EXPORTER_DATA = p('../../exporter/data/output')
-
-class Context {
-    public readonly paths = {
-        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(),
-            resources: {
-                resourcePublicRoot: '/assets',
-            },
-            plugins: [
-                pluginLink(/transcoder\.(.+?)\.(js|wasm)$/, { useDefault: true }),
-                pluginReplace({
-                    __CORS_PROXY_URL__: runServer
-                        ? 'https://api.allorigins.win/raw?url='
-                        : '/corsproxy?url=',
-                    __STATIC_URL__: '/data',
-                }),
-            ],
-            cache: { enabled: runServer, strategy: 'memory' },
-            hmr: { plugin: p('./hmr.ts') },
-            sourceMap: {
-                css: !runServer,
-                project: true,
-                vendor: false,
-            },
-            watcher: {
-                root: [p('../src'), p('../../editor/src')],
-            },
-        }
-    }
-    private getServerConfig(): IDevServerProps {
-        return {
-            httpServer: { port },
-            hmrServer: { port },
-            proxy: [
-                {
-                    path: '/data',
-                    options: {
-                        target: `http://127.0.0.1:8081`,
-                        pathRewrite: { '^/data': '' },
-                    },
-                },
-            ],
-        }
-    }
-}
-
-const { src, rm, task } = sparky(Context)
-
-task('dev', async ctx => {
-    rm(ctx.paths.dist)
-    await ctx.runDev({
-        bundles: { distRoot: ctx.paths.dist },
-    })
-})
-
-task('build', async ctx => {
-    rm(ctx.paths.dist)
-    await ctx.runProd({
-        bundles: {
-            distRoot: ctx.paths.dist,
-            app: 'js/app.$hash.js',
-            vendor: 'js/vendor.$hash.js',
-            styles: 'css/styles.$hash.css',
-        },
-    })
-
-    await src(HEADERS_FILE).dest(ctx.paths.dist, 'src/').exec()
-
-    await src(`${EXPORTER_DATA}/**/**.*`).dest(`${ctx.paths.dist}/data`, 'output/').exec()
-})

packages/website/tools/hmr.ts

@@ -1,20 +0,0 @@
-// 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()
-}

packages/website/tools/tsconfig.json

@@ -1,10 +0,0 @@
-{
-    "extends": "../../../tsconfig.json",
-    "compilerOptions": {
-        "target": "ES2016",
-        "module": "CommonJS",
-        "lib": ["ES2016"],
-        "esModuleInterop": true
-    },
-    "include": ["*.ts"]
-}

packages/website/tsconfig.json

@@ -1,10 +1,8 @@
 {
     "extends": "../../tsconfig.json",
     "compilerOptions": {
-        "target": "ES2016",
-        "module": "CommonJS",
-        "lib": ["ES2016", "DOM"],
-        "esModuleInterop": true
+        "lib": ["ESNext", "DOM"],
+        "types": ["vite/client"]
     },
-    "include": ["src"]
+    "include": ["src", "../editor/src/global.d.ts"]
 }

packages/website/vite.config.js

@@ -0,0 +1,45 @@
+import { defineConfig } from 'vite'
+import { viteStaticCopy } from 'vite-plugin-static-copy'
+
+const fullReloadAlways = {
+    name: 'full-reload',
+    handleHotUpdate({ server }) {
+        server.ws.send({ type: 'full-reload' })
+        return []
+    },
+}
+
+export default defineConfig(({ command, mode }) => {
+    const proxy = {
+        '/corsproxy': {
+            target: 'https://fbe.teoxoy.com',
+            changeOrigin: true,
+        },
+    }
+    if (mode !== 'production') {
+        proxy['/data'] = {
+            target: 'http://127.0.0.1:8081',
+            rewrite: path => path.replace(/^\/data/, ''),
+        }
+    }
+    return {
+        build: { sourcemap: true },
+        preview: { port: 8080 },
+        server: {
+            port: 8080,
+            proxy,
+        },
+        plugins: [
+            command === 'build'
+                ? viteStaticCopy({
+                      targets: [
+                          {
+                              src: '../exporter/data/output/*',
+                              dest: 'data',
+                          },
+                      ],
+                  })
+                : fullReloadAlways,
+        ],
+    }
+})

tsconfig.json

@@ -1,19 +1,22 @@
 {
     "compilerOptions": {
-        "pretty": true,
-        "sourceMap": true,
-        "alwaysStrict": true,
-        "removeComments": true,
-        "noImplicitAny": true,
-        "noUnusedLocals": true,
-        "noUnusedParameters": true,
-        "preserveConstEnums": true,
+        "target": "ESNext",
+        "module": "ES6",
+        "skipLibCheck": true,
+
+        /* Bundler mode */
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "isolatedModules": true,
+        "moduleDetection": "force",
+        "noEmit": true,
+
+        // "strict": true, // TODO: enable
 
         "rootDir": ".",
         "baseUrl": ".",
         "paths": {
-            "@fbe/*": ["packages/*/src/index.ts"],
-            "mini-signals": ["node_modules/resource-loader/typings/mini-signals.d.ts"]
+            "@fbe/*": ["packages/*/src/index.ts"]
         },
 
         "typeRoots": ["./node_modules/@types"]