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`