Dynamic Imports

client-tauri/package.json

@@ -35,6 +35,7 @@
     "@types/react-router-bootstrap": "^0.26.5",
     "@vitejs/plugin-react": "^4.0.3",
     "typescript": "^5.0.2",
-    "vite": "^4.4.4"
+    "vite": "^4.4.4",
+    "vite-plugin-dynamic-import": "^1.5.0"
   }
 }

client-tauri/src/App.tsx

@@ -67,6 +67,7 @@ export default function App() {
 
 function Layout() {
     const { t } = useTranslation();
+    console.log(t("inputs.pdffile.name"));
     return (
         <div lang-direction={t("language.direction")}>
             <NavBar/>

client-tauri/src/pages/Dynamic.tsx

@@ -1,18 +1,14 @@
 import { Link } from "react-router-dom";
 
-import { listOperatorNames } from "@stirling-pdf/shared-operations/src/workflow/getOperatorByName"
-import { Impose } from "@stirling-pdf/shared-operations/src/functions/impose"
 import { BaseSyntheticEvent } from "react";
 
 function Dynamic() {
-    console.log(listOperatorNames());
-    
-    const operators = listOperatorNames();
+    const operators = ["impose"]; // TODO: Make this dynamic
     
     function selectionChanged(s: BaseSyntheticEvent) {
         const selectedValue = s.target.value;
         if(selectedValue == "none") return;
-        const LoadedOperator = import(`../shared-operations/src/functions/${selectedValue}`);
+        const LoadedOperator = import(`@stirling-pdf/shared-operations/src/functions/${selectedValue}`);
         LoadedOperator.then(console.log);
     }
 
@@ -28,9 +24,9 @@ function Dynamic() {
             <br />
             <select id="pdfOptions" onChange={selectionChanged}>
                 <option value="none">none</option>
-                {operators.map((operator, i) => { 
+                { operators.map((operator, i) => { 
                     return (<option value={operator}>{operator}</option>) 
-                })}
+                }) }
             </select>
             <button id="loadButton">Load</button>
             <br />

client-tauri/vite.config.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import topLevelAwait from "vite-plugin-top-level-await";
+import dynamicImport from 'vite-plugin-dynamic-import'
 
 // https://vitejs.dev/config/
 export default defineConfig(async () => ({
@@ -12,6 +13,7 @@ export default defineConfig(async () => ({
             // The function to generate import names of top-level await promise in each chunk module
             promiseImportName: i => `__tla_${i}`
         }),
+        dynamicImport(),
     ],
 
     // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`

package-lock.json

@@ -49,7 +49,8 @@
         "@types/react-router-bootstrap": "^0.26.5",
         "@vitejs/plugin-react": "^4.0.3",
         "typescript": "^5.0.2",
-        "vite": "^4.4.4"
+        "vite": "^4.4.4",
+        "vite-plugin-dynamic-import": "^1.5.0"
       }
     },
     "client-tauri/node_modules/react-i18next": {
@@ -4306,6 +4307,12 @@
         "once": "^1.4.0"
       }
     },
+    "node_modules/es-module-lexer": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.4.1.tgz",
+      "integrity": "sha512-cXLGjP0c4T3flZJKQSuziYoq7MlT+rnvfZjfp7h+I7K9BNX54kP9nyWvdbwjQ4u1iWbOL4u96fgeZLToQlZC7w==",
+      "dev": true
+    },
     "node_modules/esbuild": {
       "version": "0.18.20",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz",
@@ -8903,6 +8910,18 @@
         }
       }
     },
+    "node_modules/vite-plugin-dynamic-import": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/vite-plugin-dynamic-import/-/vite-plugin-dynamic-import-1.5.0.tgz",
+      "integrity": "sha512-Qp85c+AVJmLa8MLni74U4BDiWpUeFNx7NJqbGZyR2XJOU7mgW0cb7nwlAMucFyM4arEd92Nfxp4j44xPi6Fu7g==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^8.8.2",
+        "es-module-lexer": "^1.2.1",
+        "fast-glob": "^3.2.12",
+        "magic-string": "^0.30.1"
+      }
+    },
     "node_modules/vite-plugin-node-polyfills": {
       "version": "0.19.0",
       "resolved": "https://registry.npmjs.org/vite-plugin-node-polyfills/-/vite-plugin-node-polyfills-0.19.0.tgz",