refactor: use fdd.js library for sandbox rendering

Author: Corey B

lib/fdd-js/src/fdd.js

@@ -48,28 +48,31 @@ class OpenFDDContainer {
     const context = { ...this.vcData, ...this.mutableData };
     let html = this.template.innerHTML;
 
+    const getVal = (obj, path) => {
+        try { return path.split('.').reduce((o, i) => o[i], obj) ?? ''; } catch { return ''; }
+    };
+
     html = html.replace(/\{\{#each\s+(.*?)\}\}([\s\S]*?)\{\{\/each\}\}/g, (match, param, body) => {
-        const key = param.trim();
-        const arr = context[key];
+        const arr = getVal(context, param.trim());
         if (!arr || !Array.isArray(arr)) return '';
         let out = "";
         for (let i = 0; i < arr.length; i++) {
-            let itemBody = body;
-            itemBody = itemBody.replace(/\{\{\s*@index\s*\}\}/g, i);
-            Object.keys(arr[i]).forEach(k => {
-                const val = arr[i][k] !== null && arr[i][k] !== undefined ? arr[i][k] : '';
-                itemBody = itemBody.replace(new RegExp(`\\{\\{\\s*${k}\\s*\\}\\}`, 'g'), val);
+            let itemBody = body.replace(/\{\{\s*@index\s*\}\}/g, i);
+            const matches = itemBody.match(/\{\{\s*(.*?)\s*\}\}/g) || [];
+            matches.forEach(m => {
+                const path = m.replace(/[\{\}\s]/g, '');
+                if (path === '@index') return;
+                itemBody = itemBody.replace(m, getVal(arr[i], path));
             });
             out += itemBody;
         }
         return out;
     });
 
-    Object.keys(context).forEach(k => {
-        if (typeof context[k] !== 'object') {
-            const val = context[k] !== null && context[k] !== undefined ? context[k] : '';
-            html = html.replace(new RegExp(`\\{\\{\\s*${k}\\s*\\}\\}`, 'g'), val);
-        }
+    const topMatches = html.match(/\{\{\s*(.*?)\s*\}\}/g) || [];
+    topMatches.forEach(m => {
+        const path = m.replace(/[\{\}\s]/g, '');
+        html = html.replace(m, getVal(context, path));
     });
     html = html.replace(/\{\{(.*?)\}\}/g, '');
 
@@ -92,8 +95,12 @@ class OpenFDDContainer {
    */
   async resolveIssuer(issuerUri, verificationMethodId) {
     try {
-      const domain = issuerUri.replace('did:web:', '').replace(/:/g, '/');
-      const didUrl = `https://${domain}/.well-known/did.json`;
+      const parts = issuerUri.replace('did:web:', '').split(':');
+      const domain = parts[0];
+      const path = parts.slice(1).join('/');
+      const didUrl = path 
+        ? `https://${domain}/${path}/did.json`
+        : `https://${domain}/.well-known/did.json`;
       const res = await fetch(didUrl);
       if (!res.ok) throw new Error(`HTTP ${res.status}`);
       const didDoc = await res.json();
@@ -139,11 +146,11 @@ class OpenFDDContainer {
     }
 
     try {
-      // Reconstruct the exact payload that was signed server-side
+      // Reconstruct deterministic payload (trim template to match library standard)
       const vcWithoutProof = JSON.parse(JSON.stringify(this.vcRaw));
       delete vcWithoutProof.proof;
 
-      const templateContent = this.template?.innerHTML || '';
+      const templateContent = (this.template?.innerHTML || '').trim();
       const payloadStr = JSON.stringify(vcWithoutProof) + '\n---template---\n' + templateContent;
       const payloadBuffer = new TextEncoder().encode(payloadStr);
 

site/sw.js

@@ -1,4 +1,4 @@
-const CACHE = 'openfdd-sandbox-v6';
+const CACHE = 'openfdd-sandbox-v7';
 const ASSETS = [
   './sandbox.html',
   './index.html',