feat: use vite instead of esbuild and webpack (#587)

* feat: use vite instead of esbuild directly

* fix: compability building

* build: update shiroa

* dev: use vite instead of webpack

.github/workflows/gh_pages.yml

@@ -50,7 +50,7 @@ jobs:
         run: curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | bash
       - name: Download & install shiroa
         run: |
-          curl -L https://github.com/Myriad-Dreamin/shiroa/releases/download/v0.2.0-nightly1/shiroa-x86_64-unknown-linux-gnu.tar.gz | tar -xvz
+          curl -L https://github.com/Myriad-Dreamin/shiroa/releases/download/v0.2.0-nightly4/shiroa-x86_64-unknown-linux-gnu.tar.gz | tar -xvz
           chmod +x shiroa-x86_64-unknown-linux-gnu/bin/shiroa
           sudo cp shiroa-x86_64-unknown-linux-gnu/bin/shiroa /usr/bin/shiroa
       - name: Run sccache-cache

package.json

@@ -56,7 +56,8 @@
     "@types/node": "^20.6.3",
     "prettier": "^3.0.2",
     "vite": "^5.4.2",
-    "vite-plugin-singlefile": "^0.13.5",
+    "vite-plugin-banner": "^0.8.0",
+    "@vitejs/plugin-react": "^4.3.2",
     "eslint-plugin-html": "^7.1.0",
     "eslint": "^8.52.0",
     "eslint-config-prettier": "^9.0.0",
@@ -65,6 +66,7 @@
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "@eslint-community/eslint-plugin-eslint-comments": "^3.2.1",
     "@typescript-eslint/eslint-plugin": "^6.9.1",
     "@typescript-eslint/parser": "^6.9.1",
     "typescript": "=5.0.4"

packages/enhanced-typst-svg/package.json

@@ -10,24 +10,16 @@
     "renderer"
   ],
   "repository": "https://github.com/Myriad-Dreamin/typst.ts",
-  "main": "dist/index.cjs",
+  "main": "dist/index.js",
   "files": [
-    "index.cjs",
-    "lib/"
+    "dist/index.js",
+    "dist/index.min.js"
   ],
-  "directories": {
-    "lib": "./lib"
-  },
   "peerDependencies": {},
-  "devDependencies": {
-    "esbuild": "0.17.19"
-  },
   "scripts": {
-    "build": "npx tsc",
-    "debug": "node esbuild.debug.mjs",
-    "watch": "npx esbuild --watch ./src/index.ts --outfile=dist/index.min.js",
-    "watch:min": "npx esbuild --watch ./src/index.ts --minify --outfile=dist/index.min.js",
-    "build:min": "npx esbuild ./src/index.ts --minify --outfile=dist/index.min.js"
+    "build": "npx tsc && yarn build:max --minify",
+    "watch": "yarn build:max --watch",
+    "build:max": "npx vite build"
   },
   "engines": {
     "node": ">=12"

packages/enhanced-typst-svg/tsconfig.json

@@ -13,5 +13,7 @@
     "stripInternal": true,
 
     "lib": ["ES5", "ES6", "ES7", "ES2018"]
-  }
+  },
+  "include": ["src/**/*"],
+  "exclude": ["scripts", "vite.config.js"]
 }

packages/enhanced-typst-svg/vite.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  build: {
+    emptyOutDir: false,
+    lib: {
+      formats: ['cjs'],
+      entry: 'src/index.ts',
+      fileName: 'index.min',
+    },
+  },
+};

packages/tools/wasm-debundle.mjs

@@ -17,7 +17,7 @@ const pkgStats = readdirSync('pkg').map((fileName) => {
     // input = new URL('typst_ts_renderer_bg.wasm', import.meta.url)
 
     let replaced = [];
-    const reg = /input = new URL\('(.+?)', import\.meta\.url\)/mg;
+    const reg = /module_or_path = new URL\('(.+?)', import\.meta\.url\)/mg;
     let exp;
     while ((exp = reg.exec(bundleJs))) {
         console.log(`Found wasm file name: ${exp[1]}`);
@@ -40,7 +40,7 @@ const pkgStats = readdirSync('pkg').map((fileName) => {
 
     for (let i = replaced.length - 1; i >= 0; i--) {
         const [index, length, wasmFN] = replaced[i];
-        bundleJs = bundleJs.substring(0, index) + `input = importWasmModule('${wasmFN}', import.meta.url)` + bundleJs.substring(index + length);
+        bundleJs = bundleJs.substring(0, index) + `module_or_path = importWasmModule('${wasmFN}', import.meta.url)` + bundleJs.substring(index + length);
     }
 
     bundleJs = `/// Processed by wasm-debundle.mjs

packages/typst.react/src/demo/App.tsx → packages/typst.react/demo/App.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { TypstDocument } from '../lib';
+import { TypstDocument } from '../src/lib';
 
 TypstDocument.setWasmModuleInitOptions({
   beforeBuild: [],

packages/typst.react/src/demo/index.html → packages/typst.react/demo/index.html

@@ -33,5 +33,6 @@
   </head>
   <body style="background: rgb(52 53 65)">
     <div id="root"></div>
+    <script type="module" src="index.tsx"></script>
   </body>
 </html>

packages/typst.react/demo/vite.config.mjs

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+});

packages/typst.react/package.json

@@ -30,8 +30,8 @@
     "dist/**/*.{mts,mjs,js,ts}"
   ],
   "scripts": {
-    "start": "webpack serve --config webpack/webpack.config.js --env env=dev",
-    "build": "tsc --outDir dist && webpack --config webpack/webpack.config.js --env env=prod",
+    "dev": "cd demo && vite dev -c vite.config.mjs",
+    "build": "tsc --outDir dist && vite build",
     "lint": "eslint --fix \"./src/**/*.{js,jsx,ts,tsx,json}\"",
     "format": "prettier --write \"./src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
     "test": "exit 0",
@@ -45,27 +45,9 @@
     "react-dom": "^17.0.1 || ^18.x"
   },
   "devDependencies": {
-    "@babel/core": "^7.21.8",
-    "@babel/plugin-transform-runtime": "^7.21.4",
-    "@babel/preset-env": "^7.21.5",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.21.5",
-    "@eslint-community/eslint-plugin-eslint-comments": "^3.2.1",
-    "@myriaddreamin/typst-ts-renderer": "*",
-    "@myriaddreamin/typst.ts": "*",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
-    "babel-loader": "^9.1.2",
-    "css-loader": "^6.7.4",
-    "html-webpack-plugin": "^5.5.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-refresh": "^0.14.0",
-    "style-loader": "^3.3.3",
-    "webpack": "^5.83.1",
-    "webpack-cli": "^5.1.1",
-    "webpack-dev-server": "^4.15.0",
-    "webpack-merge": "^5.8.0"
+    "react-dom": "^18.2.0"
   }
 }

packages/typst.react/vite.config.mjs

@@ -0,0 +1,20 @@
+import { defineConfig } from 'vite';
+import { resolve } from 'path';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    emptyOutDir: false,
+    lib: {
+      entry: resolve(__dirname, 'src/lib/index.tsx'),
+      formats: ['es', 'cjs'],
+    },
+    rollupOptions: {
+      output: {
+        inlineDynamicImports: true,
+      },
+      external: ['react', 'react/jsx-runtime'],
+    },
+  },
+});

packages/typst.ts/.eslintrc.js

@@ -1,6 +1,6 @@
 const tsRule = {
   files: ['*.ts'],
-  ignorePatterns: ['esbuild.config.mjs'],
+  ignorePatterns: ['vite.config.mjs'],
   extends: [
     'eslint:recommended',
     'plugin:@typescript-eslint/eslint-recommended',

packages/typst.ts/.npmignore

@@ -9,5 +9,5 @@ index.html
 *.pdf
 *.tsbuildinfo
 *.ts.map
-esbuild.*
+vite.*
 .eslint*