reintroducing webpack

ProvableHQ · Jun 30, 2023 · ce571fc · ce571fc
1 parent 229ecb4
commit ce571fc
Show file tree

Hide file tree

Showing 10 changed files with 109 additions and 22 deletions.
diff --git a/website/.babelrc b/website/.babelrc
@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ]
+}
diff --git a/website/index.html b/website/index.html
@@ -2,15 +2,15 @@
 <html lang="en">
 <head>
   <meta charset="utf-8" />
-  <link rel="icon" href="favicon.ico" />
+  <link rel="icon" href="public/favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="theme-color" content="#000000" />
   <meta
           name="description"
           content="A Software Development Kit (SDK) for Zero-Knowledge Transactions"
   />
-  <link rel="apple-touch-icon" href="logo129.png" />
-  <link rel="manifest" href="manifest.json" />
+  <link rel="apple-touch-icon" href="public/logo129.png" />
+  <link rel="manifest" href="public/manifest.json" />
   <title>Aleo SDK</title>
 </head>
 <body>

diff --git a/website/package.json b/website/package.json
@@ -6,10 +6,11 @@
   "scripts": {
     "preinstall": "cd ../wasm && export RUSTFLAGS='-C target-feature=+atomics,+bulk-memory,+mutable-globals -C link-arg=--max-memory=4294967296' && rustup run nightly-2023-05-24 wasm-pack build --release --target web --out-dir pkg-parallel -- --features \"parallel, browser\" --no-default-features -Z build-std=panic_abort,std",
     "dev": "vite",
-    "build": "vite build",
+    "build": "webpack --config webpack.config.js",
+    "build:vite": "vite build",
     "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
-    "preview:netlify": "vite build && netlify dev --dir=dist"
+    "preview:netlify": "netlify dev --dir=dist"
   },
   "dependencies": {
     "@aleohq/ui": "^0.0.9",
@@ -25,14 +26,24 @@
     "web-vitals": "^0.2.4"
   },
   "devDependencies": {
+    "@babel/core": "^7.17.2",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-react": "^7.16.7",
     "@types/react": "^18.0.37",
     "@types/react-dom": "^18.0.11",
     "@vitejs/plugin-react-swc": "^3.0.0",
     "eslint": "^8.38.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.3.4",
-    "vite": "^4.3.9"
+    "vite": "^4.3.9",
+    "webpack": "^5.76.0",
+    "webpack-cli": "^5.1.4",
+    "html-webpack-plugin": "^5.5.0",
+    "css-loader": "^6.6.0",
+    "mini-css-extract-plugin": "^2.5.3",
+    "style-loader": "^3.3.1",
+    "copy-webpack-plugin": "^11.0.0"
   },
   "homepage": "https://aleo.tools"
 }
diff --git a/website/src/tabs/develop/Deploy.jsx b/website/src/tabs/develop/Deploy.jsx
@@ -19,9 +19,9 @@ export const Deploy = () => {
     const [worker, setWorker] = useState(null);
     function spawnWorker() {
         let worker = new Worker(
-  new URL('../../workers/worker.js', import.meta.url),
-  {type: 'module'}
-);
+            new URL('../../workers/worker.js', import.meta.url),
+            {type: 'module'}
+        );
         worker.addEventListener("message", ev => {
             if (ev.data.type == 'DEPLOY_TRANSACTION_COMPLETED') {
                 let [deployTransaction, url] = ev.data.deployTransaction;

diff --git a/website/src/tabs/develop/Execute.jsx b/website/src/tabs/develop/Execute.jsx
@@ -50,9 +50,9 @@ export const Execute = () => {
 
     function spawnWorker() {
         let worker = new Worker(
-  new URL('../../workers/worker.js', import.meta.url),
-  {type: 'module'}
-);
+            new URL('../../workers/worker.js', import.meta.url),
+            {type: 'module'}
+        );
         worker.addEventListener("message", ev => {
             if (ev.data.type == 'OFFLINE_EXECUTION_COMPLETED') {
                 setLoading(false);

diff --git a/website/src/tabs/develop/Join.jsx b/website/src/tabs/develop/Join.jsx
@@ -17,9 +17,9 @@ export const Join = () => {
 
     function spawnWorker() {
         let worker = new Worker(
-  new URL('../../workers/worker.js', import.meta.url),
-  {type: 'module'}
-);
+            new URL('../../workers/worker.js', import.meta.url),
+            {type: 'module'}
+        );
         worker.addEventListener("message", ev => {
             if (ev.data.type == 'JOIN_TRANSACTION_COMPLETED') {
                 let [transaction, url] = ev.data.joinTransaction

diff --git a/website/src/tabs/develop/Split.jsx b/website/src/tabs/develop/Split.jsx
@@ -15,9 +15,9 @@ export const Split = () => {
 
     function spawnWorker() {
         let worker = new Worker(
-  new URL('../../workers/worker.js', import.meta.url),
-  {type: 'module'}
-);
+            new URL('../../workers/worker.js', import.meta.url),
+            {type: 'module'}
+        );
         worker.addEventListener("message", ev => {
             if (ev.data.type == 'SPLIT_TRANSACTION_COMPLETED') {
                 let [transaction, url] = ev.data.splitTransaction;

diff --git a/website/src/tabs/develop/Transfer.jsx b/website/src/tabs/develop/Transfer.jsx
@@ -19,9 +19,9 @@ export const Transfer = () => {
 
     function spawnWorker() {
         let worker = new Worker(
-  new URL('../../workers/worker.js', import.meta.url),
-  {type: 'module'}
-);
+            new URL('../../workers/worker.js', import.meta.url),
+            {type: 'module'}
+        );
         worker.addEventListener("message", ev => {
             if (ev.data.type == 'TRANSFER_TRANSACTION_COMPLETED') {
                 let [transaction, url] = ev.data.transferTransaction

diff --git a/website/src/workers/worker.js b/website/src/workers/worker.js
@@ -2,7 +2,7 @@ import init, * as aleo from '@aleohq/wasm';
 import { FEE_PROVER_URL, FEE_VERIFIER_URL, JOIN_PROVER_URL, JOIN_VERIFIER_URL, SPLIT_PROVER_URL, SPLIT_VERIFIER_URL,
     TRANSFER_PRIVATE_PROVER_URL, TRANSFER_PRIVATE_VERIFIER_URL, TRANSFER_PRIVATE_TO_PUBLIC_PROVER_URL,
 TRANSFER_PRIVATE_TO_PUBLIC_VERIFIER_URL, TRANSFER_PUBLIC_PROVER_URL, TRANSFER_PUBLIC_VERIFIER_URL,
-    TRANSFER_PUBLIC_TO_PRIVATE_PROVER_URL, TRANSFER_PUBLIC_TO_PRIVATE_VERIFIER_URL} from './keys';
+    TRANSFER_PUBLIC_TO_PRIVATE_PROVER_URL, TRANSFER_PUBLIC_TO_PRIVATE_VERIFIER_URL} from './keys.js';
 
 let feeProvingKey = null;
 let feeVerifyingKey = null;

diff --git a/website/webpack.config.js b/website/webpack.config.js
@@ -0,0 +1,70 @@
+import CopyPlugin from "copy-webpack-plugin";
+
+import HtmlWebpackPlugin from "html-webpack-plugin";
+
+import path from "path";
+
+const appConfig = {
+    mode: 'production',
+    entry: {
+        index: './src/index.jsx'
+    },
+    output: {
+        path: path.resolve('dist'),
+        filename: '[name].bundle.js'
+    },
+    resolve: {
+        extensions: [".js", ".wasm", ".jsx"]
+    },
+    devServer: {
+        port: 3000,
+        headers: {
+            'Cross-Origin-Opener-Policy': 'same-origin',
+            'Cross-Origin-Embedder-Policy': 'require-corp'
+        },
+        client: {
+            overlay: false
+        }
+    },
+    module: {
+        rules: [
+            {
+                test: /\.(js|jsx)$/,
+                exclude: /nodeModules/,
+                use: {
+                    loader: 'babel-loader'
+                }
+            },
+            {
+                test: /\.css$/,
+                use: ['style-loader', 'css-loader']
+            }
+        ]
+    },
+    plugins: [
+        new CopyPlugin({
+            patterns: [
+                { from: "public", to: "public" }
+            ]
+        }),
+        new HtmlWebpackPlugin(
+            {
+                template: './index.html'
+            }),
+    ],
+    performance: {
+        hints: false,
+        maxAssetSize: 13 * 1024 * 1024, // 12 MiB
+        maxEntrypointSize: 13 * 1024 * 1024, // 12 MiB
+    },
+    stats: {
+        warnings: false,
+    },
+    experiments: {
+        asyncWebAssembly: true,
+        topLevelAwait: true
+    },
+    devtool: 'source-map',
+}
+
+export default [appConfig];