Fix CHAPI example

Close #309
spruceid · Oct 25, 2022 · e7fe0e9 · e7fe0e9
1 parent 62c55ef
commit e7fe0e9
Show file tree

Hide file tree

Showing 19 changed files with 2,152 additions and 8,518 deletions.
diff --git a/examples/svelte-chapi-wallet/README.md b/examples/svelte-chapi-wallet/README.md
@@ -12,7 +12,7 @@ need Node.js/NPM.
 
 ### `DIDKit`
 
-In short, you need to install the `wasm-unknown-unknown` Rust target and
+In short, you need to install the `wasm32-unknown-unknown` Rust target and
 `wasm-pack`, which can be done with the following command on the root of
 `DIDKit`:
 
@@ -25,7 +25,8 @@ $ make -C lib install-wasm-pack
 Then, you have to build the WASM target of `DIDKit`:
 
 ```bash
-$ make -C lib ../target/test/wasm.stamp
+$ cd lib/web
+$ wasm-pack build --target web --out-dir pkg-web
 ```
 
 If everything succeeds, you can proceed to the next step.

diff --git a/examples/svelte-chapi-wallet/package-lock.json b/examples/svelte-chapi-wallet/package-lock.json
diff --git a/examples/svelte-chapi-wallet/package.json b/examples/svelte-chapi-wallet/package.json
@@ -3,36 +3,40 @@
   "author": "Spruce Systems, Inc.",
   "version": "1.0.0",
   "scripts": {
-    "build": "rollup -c",
-    "dev": "rollup -c -w",
+    "build": "rollup --bundleConfigAsCjs -c",
+    "dev": "rollup --bundleConfigAsCjs -c -w",
     "start": "sirv public --single"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^16.0.0",
-    "@rollup/plugin-node-resolve": "^10.0.0",
-    "@rollup/plugin-typescript": "^8.1.0",
-    "@rollup/plugin-wasm": "^5.1.2",
-    "@tsconfig/svelte": "^1.0.10",
+    "@rollup/plugin-commonjs": "^23.0.2",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-typescript": "^9.0.2",
+    "@rollup/plugin-wasm": "^6.0.1",
+    "@tsconfig/svelte": "^3.0.0",
     "@types/jest": "^26.0.20",
     "@typescript-eslint/eslint-plugin": "^4.12.0",
     "@typescript-eslint/parser": "^4.12.0",
     "autoprefixer": "^10.2.1",
     "crypto-es": "^1.2.6",
     "date-fns": "^2.16.1",
-    "eslint": "^7.17.0",
-    "eslint-config-prettier": "^7.1.0",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-svelte3": "^3.0.0",
+    "didkit-wasm": "file:../../lib/web/pkg-web",
+    "eslint": "^8.26.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-svelte3": "^4.0.0",
     "jest": "^26.6.3",
     "postcss": "^8.2.4",
-    "postcss-import": "^14.0.0",
-    "postcss-load-config": "^3.0.0",
+    "postcss-import": "^15.0.0",
+    "postcss-load-config": "^4.0.1",
     "prettier": "^2.2.1",
     "prettier-plugin-svelte": "^2.0.3",
     "query-string": "^6.13.8",
-    "rollup": "^2.3.4",
-    "rollup-plugin-css-only": "^3.1.0",
+    "rollup": "^3.2.3",
+    "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-css-only": "^4.1.1",
     "rollup-plugin-livereload": "^2.0.0",
+    "rollup-plugin-polyfill-node": "^0.10.2",
+    "rollup-plugin-styles": "^4.0.0",
     "rollup-plugin-svelte": "^7.0.0",
     "rollup-plugin-terser": "^7.0.0",
     "rollup-wasm-pack-import": "^2.0.0",
@@ -41,11 +45,10 @@
     "svelte-check": "^1.1.27",
     "svelte-navigator": "^3.1.5",
     "svelte-preprocess": "^4.6.1",
-    "tailwindcss": "^2.0.2",
+    "tailwindcss": "^3.2.1",
     "tslib": "^2.1.0",
     "typescript": "^4.1.3",
     "uuid": "^8.3.2",
-    "wasm-loader": "^1.3.0",
     "web-credential-handler": "^1.0.0"
   },
   "dependencies": {

diff --git a/examples/svelte-chapi-wallet/public/didkit/didkit-loader.min.js b/examples/svelte-chapi-wallet/public/didkit/didkit-loader.min.js
diff --git a/examples/svelte-chapi-wallet/public/didkit/didkit-loader.min.js.LICENSE.txt b/examples/svelte-chapi-wallet/public/didkit/didkit-loader.min.js.LICENSE.txt
diff --git a/examples/svelte-chapi-wallet/public/didkit/didkit-loader.min.js.map b/examples/svelte-chapi-wallet/public/didkit/didkit-loader.min.js.map
diff --git a/examples/svelte-chapi-wallet/public/didkit/didkit_wasm_bg.wasm b/examples/svelte-chapi-wallet/public/didkit/didkit_wasm_bg.wasm
diff --git a/examples/svelte-chapi-wallet/public/index.html b/examples/svelte-chapi-wallet/public/index.html
@@ -8,11 +8,10 @@
 
 	<link rel="icon" type="image/x-icon" href="/favicon.ico">
 	<link rel="stylesheet" href="/global.css">
-	<link rel="stylesheet" href="/build/bundle.css">
+	<!-- <link rel="stylesheet" href="/build/bundle.css"> -->
 
   <script src="https://unpkg.com/[email protected]/dist/credential-handler-polyfill.min.js"></script>
-  <script src="/didkit/didkit-loader.min.js"></script>
-	<script defer src="/build/bundle.js"></script>
+	<script defer type="module" src="/build/bundle.js"></script>
 </head>
 
 <body>

diff --git a/examples/svelte-chapi-wallet/rollup.config.js b/examples/svelte-chapi-wallet/rollup.config.js
@@ -1,11 +1,14 @@
 import svelte from "rollup-plugin-svelte";
 import commonjs from "@rollup/plugin-commonjs";
-import resolve from "@rollup/plugin-node-resolve";
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import copy from 'rollup-plugin-copy';
 import typescript from "@rollup/plugin-typescript";
 import livereload from "rollup-plugin-livereload";
 import { terser } from "rollup-plugin-terser";
-import css from "rollup-plugin-css-only";
 import sveltePreprocess from "svelte-preprocess";
+import { wasm } from '@rollup/plugin-wasm';
+import styles from "rollup-plugin-styles";
+import nodePolyfills from 'rollup-plugin-polyfill-node';
 
 const production = !process.env.ROLLUP_WATCH;
 
@@ -34,7 +37,6 @@ export default {
   input: "src/main.ts",
   output: {
     sourcemap: !production,
-    format: "iife",
     name: "app",
     file: "public/build/bundle.js"
   },
@@ -52,16 +54,23 @@ export default {
         dev: !production
       }
     }),
-    css({ output: "bundle.css" }),
-    resolve({
-      browser: true,
-      dedupe: ["svelte"]
-    }),
-    commonjs(),
     typescript({
       sourceMap: !production,
       inlineSources: !production
     }),
+    copy({
+      targets: [{
+        src: 'node_modules/didkit-wasm/didkit_wasm_bg.wasm',
+        dest: 'public/build',
+        rename: 'didkit_wasm_bg.wasm'
+      }]
+    }),
+    wasm(),
+    commonjs(),
+    nodePolyfills(),
+    nodeResolve({
+    }),
+    styles(),
     !production && serve(),
     !production && livereload("public"),
     production && terser()

diff --git a/examples/svelte-chapi-wallet/src/App.svelte b/examples/svelte-chapi-wallet/src/App.svelte
@@ -1,28 +1,38 @@
 <script>
+  import { onMount } from 'svelte';
   import { Router } from "svelte-navigator";
 
   import { Body, Footer, Header } from "./ui/container";
   import { minimalState } from "./store.ts";
 
+  import init from "didkit-wasm";
+  let appInitialized = false;
+  onMount(async () => {
+      await init();
+      appInitialized = true
+      });
+
   let minimal;
   minimalState.subscribe((value) => {
     minimal = value;
   });
 </script>
 
 <Router>
-  {#if minimal}
-    <main
-      class="flex flex-col w-full h-full justify-center items-center p-2 bg-white"
-    >
-      <Body />
-    </main>
-  {:else}
-    <Header />
-    <main class="h-full">
-      <Body />
-    </main>
-    <Footer />
+  {#if appInitialized}
+    {#if minimal}
+      <main
+        class="flex flex-col w-full h-full justify-center items-center p-2 bg-white"
+      >
+        <Body />
+      </main>
+    {:else}
+      <Header />
+      <main class="h-full">
+        <Body />
+      </main>
+      <Footer />
+    {/if}
   {/if}
 </Router>
 

diff --git a/examples/svelte-chapi-wallet/src/ui/component/LogoutLink.svelte b/examples/svelte-chapi-wallet/src/ui/component/LogoutLink.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { NavItem } from "../component";
+  import NavItem from "./NavItem.svelte";
   import { walletState } from "../../store.ts";
   import { navigate } from "svelte-navigator";
 

diff --git a/examples/svelte-chapi-wallet/src/ui/component/WalletItem.svelte b/examples/svelte-chapi-wallet/src/ui/component/WalletItem.svelte
@@ -6,11 +6,9 @@
   export let remove = undefined;
   export let buttons = ["copy", "share"];
 
-  import {
-    UnknownItem,
-    VerifiableCredential,
-    VerifiablePresentation,
-  } from "../component";
+  import UnknownItem from "./UnknownItem.svelte";
+  import VerifiableCredential from "./VerifiableCredential.svelte";
+  import VerifiablePresentation from "./VerifiablePresentation.svelte";
 </script>
 
 <div

diff --git a/examples/svelte-chapi-wallet/src/ui/view/Home.svelte b/examples/svelte-chapi-wallet/src/ui/view/Home.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { Link } from "svelte-navigator";
   import { installHandler } from "web-credential-handler";
+  import { getVersion } from "didkit-wasm";
 
   import Config from "../../config.ts";
 
@@ -31,11 +32,7 @@
     "border border-gray-300 rounded " +
     "w-full px-4 py-2 my-1";
 
-  let version = "";
-  DIDKitLoader.loadDIDKit().then(({ getVersion }) => {
-    console.log("Loaded DIDKit v" + getVersion());
-    version = getVersion();
-  });
+  let version = getVersion();
 </script>
 
 <div

diff --git a/examples/svelte-chapi-wallet/src/ui/view/Wallet.svelte b/examples/svelte-chapi-wallet/src/ui/view/Wallet.svelte
@@ -2,23 +2,20 @@
   import { walletState } from "../../store.ts";
   import { WalletItem } from "../component";
   import { copyToClipboard, enumerateItems } from "../../utils.ts";
+  import { keyToDID } from "didkit-wasm";
 
   let wstate;
   walletState.subscribe((value) => {
     wstate = value;
   });
 
   let counter = 0;
-  let didKey = "";
+  let didKey = keyToDID("key", JSON.stringify(wstate.storage.getItem("key")));
   let copyDID = (event) => {
     event.preventDefault();
     copyToClipboard(didKey);
   };
 
-  DIDKitLoader.loadDIDKit().then(({ keyToDID }) => {
-    didKey = keyToDID("key", JSON.stringify(wstate.storage.getItem("key")));
-  });
-
   const reload = () => (counter += 1);
 </script>
 

diff --git a/examples/svelte-chapi-wallet/src/ui/wallet/WalletGet.svelte b/examples/svelte-chapi-wallet/src/ui/wallet/WalletGet.svelte
@@ -2,6 +2,7 @@
   import { navigate } from "svelte-navigator";
   import { receiveCredentialEvent } from "web-credential-handler";
   import { v4 as uuid } from "uuid";
+  import { keyToDID, keyToVerificationMethod, issuePresentation } from "didkit-wasm";
 
   import { WalletItem } from "../component";
 
@@ -31,7 +32,6 @@
       return;
     }
 
-    await DIDKitLoader.loadDIDKit();
     const event = await receiveCredentialEvent();
     origin = event.credentialRequestOrigin;
 
@@ -48,7 +48,6 @@
     reason = query.credentialQuery.reason;
 
     present = (data) => async () => {
-      const { keyToDID, keyToVerificationMethod, issuePresentation } = DIDKit;
       const key = wstate.storage.getItem("key");
       const keyStr = JSON.stringify(key);
       const didKey = keyToDID("key", keyStr);

diff --git a/examples/svelte-chapi-wallet/src/ui/wallet/WalletStore.svelte b/examples/svelte-chapi-wallet/src/ui/wallet/WalletStore.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { navigate } from "svelte-navigator";
   import { receiveCredentialEvent } from "web-credential-handler";
+  import { verifyCredential } from "didkit-wasm";
 
   import Config from "../../config.ts";
   import { walletState, minimalState } from "../../store.ts";
@@ -28,7 +29,6 @@
       return;
     }
 
-    await DIDKitLoader.loadDIDKit();
     const event = await receiveCredentialEvent();
     const { credential } = event;
     const { data, dataType } = credential;
@@ -52,7 +52,6 @@
     }
 
     accept = async () => {
-      const { verifyCredential } = DIDKit;
       const options = JSON.stringify({
         /*proofPurpose: "assertionMethod",*/
       });

diff --git a/examples/svelte-chapi-wallet/src/ui/wallet/WalletWorker.svelte b/examples/svelte-chapi-wallet/src/ui/wallet/WalletWorker.svelte
@@ -9,7 +9,6 @@
   const activateWalletEventHandler = async () => {
     try {
       await credentialHandlerPolyfill.loadOnce(Config.MEDIATOR);
-      await DIDKitLoader.loadDIDKit();
     } catch (e) {
       console.error("Error in loadOnce:", e);
     }

diff --git a/examples/svelte-chapi-wallet/tailwind.config.js b/examples/svelte-chapi-wallet/tailwind.config.js
@@ -5,10 +5,9 @@ module.exports = {
     purgeLayersByDefault: true,
     removeDeprecatedGapUtilities: true,
   },
-  purge: {
-    content: ["./src/**/*.svelte"],
-    enabled: production,
-  },
+  content: [
+    "./src/**/*.svelte"
+  ],
   theme: {
     extend: {},
   },