checkpoint

dfinity · Sep 3, 2024 · 48fe363 · 48fe363
1 parent e9fb08c
commit 48fe363
Show file tree

Hide file tree

Showing 10 changed files with 4,671 additions and 23,386 deletions.
diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -12,7 +12,7 @@
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <title>Motoko Playground - DFINITY</title>
-  </head>
+  <script type="module" src="src/index"></script></head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,35 +24,41 @@
     "web-vitals": "^1.0.1"
   },
   "devDependencies": {
-    "@craco/craco": "^6.0.0",
+    "@svgr/core": "^8.1.0",
+    "@svgr/plugin-jsx": "^8.1.0",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "@types/jest": "^26.0.19",
-    "comlink-loader": "^2.0.0",
+    "@types/node": "^20.14.2",
+    "@vitejs/plugin-react": "^4.3.1",
+    "comlink": "^4.4.1",
     "concurrently": "^7.6.0",
-    "craco-babel-loader": "^1.0.3",
     "http-proxy-middleware": "^2.0.6",
     "husky": "^7.0.1",
     "lint-staged": "^11.1.2",
     "mo-dev": "^0.13.0",
     "prettier": "^2.7.1",
-    "react-scripts": "4.0.3",
+    "vite": "^5.2.13",
+    "vite-plugin-top-level-await": "^1.4.4",
+    "vite-plugin-wasm": "^3.3.0",
+    "vite-tsconfig-paths": "^4.3.2",
     "wasm-loader": "^1.3.0"
   },
   "scripts": {
-    "start": "concurrently -p '|' npm:frontend npm:service",
+    "start": "vite",
     "frontend": "craco start",
     "service": "mo-dev --deploy",
-    "build": "craco build",
+    "build": "vite build",
     "test": "craco test -- --config=config/jest.config.js",
     "eject": "craco eject",
     "deploy": "dfx deploy",
     "clean": "dfx stop && dfx start --clean --background",
     "prestart": "dfx start --background; [ -f .dfx/local/canister_ids.json ] || dfx deploy",
     "predeploy": "npm run prestart",
     "prepare": "husky install",
-    "postinstall": "mops install"
+    "postinstall": "mops install",
+    "dev": "vite"
   },
   "eslintConfig": {
     "extends": [

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,9 +1,7 @@
 import { useCallback, useEffect, useReducer, useState } from "react";
 import styled, { createGlobalStyle } from "styled-components";
 
-// @ts-ignore
-// eslint-disable-next-line import/no-webpack-loader-syntax
-import MocWorker from "comlink-loader!./workers/moc";
+import { wrap } from "comlink";
 
 import { CandidUI } from "./components/CandidUI";
 import { Editor } from "./components/Editor";
@@ -63,7 +61,9 @@ const AppContainer = styled.div<{ candidWidth: string; consoleHeight: string }>`
   --consoleHeight: ${(props) => props.consoleHeight ?? 0};
 `;
 
-const worker = new MocWorker();
+const worker = wrap(
+  new Worker(new URL("./workers/moc.ts", import.meta.url), { type: "module" })
+);
 const urlParams = new URLSearchParams(window.location.search);
 const hasUrlParams = !!(
   urlParams.get("git") ||

diff --git a/src/config/actor.js → src/config/actor.tsx b/src/config/actor.js → src/config/actor.tsx
@@ -7,12 +7,14 @@ import {
 import { Principal } from "@dfinity/principal";
 import { IDL } from "@dfinity/candid";
 import { idlFactory, canisterId } from "../declarations/backend";
+import { _SERVICE as BackendService } from "../declarations/backend/backend.did";
 import {
   idlFactory as savedIdlFactory,
   canisterId as savedCanisterId,
 } from "../declarations/saved";
+import { _SERVICE as SavedService } from "../declarations/saved/saved.did";
 
-import { idlFactory as didjs_idl } from "../didjs.did";
+import { idlFactory as didjs_idl } from "./didjs.did";
 
 const LOCAL_PORT = 4943;
 
@@ -26,25 +28,26 @@ export const agent = new HttpAgent({
 if (local) {
   agent.fetchRootKey();
 }
-/**
- * @type {import("@dfinity/agent").ActorSubclass<import("../declarations/backend/backend.did.js")._SERVICE>}
- */
-export const backend = Actor.createActor(idlFactory, { agent, canisterId });
-/**
- * @type {import("@dfinity/agent").ActorSubclass<import("../declarations/saved/saved.did.js")._SERVICE>}
- */
-export const saved = Actor.createActor(savedIdlFactory, {
-  agent,
-  canisterId: savedCanisterId,
-});
+
+export const backend: ActorSubclass<BackendService> = Actor.createActor(
+  idlFactory,
+  { agent, canisterId }
+);
+export const saved: ActorSubclass<SavedService> = Actor.createActor(
+  savedIdlFactory,
+  {
+    agent,
+    canisterId: savedCanisterId,
+  }
+);
 
 const uiCanisterId =
   process.env.__CANDID_UI_CANISTER_ID ||
   (local ? "bnz7o-iuaaa-aaaaa-qaaaa-cai" : "a4gq6-oaaaa-aaaab-qaa4q-cai");
 export const uiCanisterUrl = local
   ? `http://${uiCanisterId}.localhost:${LOCAL_PORT}`
   : `https://${uiCanisterId}.raw.icp0.io`;
-export const didjs = Actor.createActor(didjs_idl, {
+export const didjs: ActorSubclass<any> = Actor.createActor(didjs_idl, {
   agent,
   canisterId: Principal.fromText(uiCanisterId),
 });
@@ -58,7 +61,7 @@ async function getDidFromMetadata(
     paths: ["candid"],
   });
   const did = status.get("candid");
-  return did;
+  return did as any;
 }
 
 async function getDidFromTmpHack(canisterId: Principal) {
@@ -81,9 +84,9 @@ export async function fetchCandidInterface(canisterId: Principal) {
   return await getDidFromTmpHack(canisterId);
 }
 
-export async function didToJs(source) {
-  const js = await didjs.did_to_js(source);
-  if (js === []) {
+export async function didToJs(source: string) {
+  const js = (await didjs.did_to_js(source)) as any;
+  if (Array.isArray(js) && js.length === 0) {
     return undefined;
   }
   const dataUri =

diff --git a/src/didjs.did.js → src/config/didjs.did.js b/src/didjs.did.js → src/config/didjs.did.js
diff --git a/src/index.js → src/index.jsx b/src/index.js → src/index.jsx
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
@@ -1 +1,66 @@
-/// <reference types="react-scripts" />
+/// <reference types="vite/client" />
+
+/// <reference types="node" />
+/// <reference types="react" />
+/// <reference types="react-dom" />
+
+declare module "*.avif" {
+  const src: string;
+  export default src;
+}
+
+declare module "*.bmp" {
+  const src: string;
+  export default src;
+}
+
+declare module "*.gif" {
+  const src: string;
+  export default src;
+}
+
+declare module "*.jpg" {
+  const src: string;
+  export default src;
+}
+
+declare module "*.jpeg" {
+  const src: string;
+  export default src;
+}
+
+declare module "*.png" {
+  const src: string;
+  export default src;
+}
+
+declare module "*.webp" {
+  const src: string;
+  export default src;
+}
+
+declare module "*.svg" {
+  import * as React from "react";
+
+  export const ReactComponent: React.FunctionComponent<
+    React.SVGProps<SVGSVGElement> & { title?: string }
+  >;
+
+  const src: string;
+  export default src;
+}
+
+declare module "*.module.css" {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module "*.module.scss" {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module "*.module.sass" {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
diff --git a/src/workers/moc.ts b/src/workers/moc.ts
@@ -1,6 +1,7 @@
 // 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");
@@ -56,3 +57,4 @@ export function Moc(action: MocAction) {
 }
 
 Motoko.saveFile("Main.mo", "");
+Comlink.expose(Moc);