handle moc

package.json

@@ -40,6 +40,8 @@
     "mo-dev": "^0.13.0",
     "prettier": "^2.7.1",
     "vite": "^5.2.13",
+    "dotenv": "^16.3.1",
+    "vite-plugin-environment": "^1.1.3",
     "vite-plugin-top-level-await": "^1.4.4",
     "vite-plugin-wasm": "^3.3.0",
     "vite-tsconfig-paths": "^4.3.2",

src/config/monacoConfig.js

@@ -1,7 +1,8 @@
 import { configure } from "motoko/contrib/monaco";
 import prettier from "prettier";
 
-const errorCodes = require("motoko/contrib/generated/errorCodes.json");
+import errorCodes from "motoko/contrib/generated/errorCodes.json";
+//const errorCodes = require("motoko/contrib/generated/errorCodes.json");
 
 export const configureMonaco = (monaco) => {
   configure(monaco, {

src/workers/moc.ts

@@ -1,15 +1,17 @@
-// Polyfill for development environment (https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/24)
-(global as any).$RefreshReg$ = () => {};
-(global as any).$RefreshSig$$ = () => () => {};
 import * as Comlink from "comlink";
 
-// @ts-ignore
-importScripts("./moc.js");
+declare global {
+  var Motoko: any;
+}
+const loadMoc = async () => {
+  const MotokoModule = await import("./mocShim.js");
+  return MotokoModule.default;
+};
 
 export * from "./pow";
 export * from "./file";
 
-declare var Motoko: any;
+//declare var Motoko: any;
 
 export type MocAction =
   | { type: "save"; file: string; content: string }
@@ -56,5 +58,7 @@ export function Moc(action: MocAction) {
   }
 }
 
-Motoko.saveFile("Main.mo", "");
-Comlink.expose(Moc);
+loadMoc().then((Motoko) => {
+  Motoko.saveFile("Main.mo", "");
+  Comlink.expose(Moc);
+});

src/workers/mocShim.js

@@ -0,0 +1,20 @@
+const loadMoc = async () => {
+  if (typeof self.Motoko === "undefined") {
+    const scriptUrl = new URL("/moc.js", self.location.origin);
+    const response = await fetch(scriptUrl);
+    const scriptContent = await response.text();
+
+    // Create a blob with the script content
+    const blob = new Blob([scriptContent], { type: "application/javascript" });
+    const blobUrl = URL.createObjectURL(blob);
+
+    // Import the blob as a module
+    await import(blobUrl);
+
+    // Clean up the blob URL
+    URL.revokeObjectURL(blobUrl);
+  }
+  return self.Motoko;
+};
+
+export default await loadMoc();

vite.config.ts

@@ -1,3 +1,4 @@
+import { fileURLToPath, URL } from 'url';
 import { resolve } from "node:path";
 import { readFileSync, existsSync } from "node:fs";
 import { defineConfig, loadEnv, Plugin, createFilter, transformWithEsbuild } from "vite";
@@ -6,13 +7,27 @@ import tsconfigPaths from "vite-tsconfig-paths";
 import setupProxy from "./src/setupProxy";
 import wasm from "vite-plugin-wasm";
 import topLevelAwait from "vite-plugin-top-level-await";
+import environment from 'vite-plugin-environment';
+import dotenv from 'dotenv';
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
   setEnv(mode);
   return {
+	build: {
+		emptyOutDir: true,
+		rollupOptions: {
+			input: {
+			  main: resolve(__dirname, 'index.html'),
+			  moc: resolve(__dirname, 'src/workers/moc.ts'),
+			},
+			external: ["/moc.js"],
+		},		
+	},
     plugins: [
       react(),
+	  environment("all", { prefix: "CANISTER_" }),
+	  environment("all", { prefix: "DFX_" }),
       wasm(),
       topLevelAwait(),	  
       tsconfigPaths(),
@@ -30,9 +45,25 @@ export default defineConfig(({ mode }) => {
 	worker: {
 		format: "es",
 	},
+	publicDir: 'public',
     optimizeDeps: {
-		exclude: ["prettier-plugin-motoko"],
-	},	
+		esbuildOptions: {
+			define: {
+			  global: "globalThis",
+			},
+		},		
+		exclude: ["prettier-plugin-motoko", "src/workers/moc.ts", "src/workers/mocShim.js"],
+	},
+	resolve: {
+		alias: [
+		  {
+			find: "declarations",
+			replacement: fileURLToPath(
+			  new URL("./src/declarations", import.meta.url)
+			),
+		  },
+		],
+	},
   };
 });