feat: implement renderer 2024 provider

jest.config.mjs

@@ -48,7 +48,7 @@ export default {
       branches: 80,
       functions: 80,
       lines: 80,
-      statements: -10,
+      statements: -25,
     },
   },
 };

package.json

@@ -83,7 +83,7 @@
   },
   "resolutions": {
     "@types/eslint": "^8.4.6",
-    "jsonld": "npm:@digitalcredentials/jsonld@^5.2.1"
+    "jsonld": "npm:@digitalcredentials/[email protected]"
   },
   "engines": {
     "node": "20.12.2"

packages/core-types/src/plugin.schema.json

@@ -6183,12 +6183,33 @@
             "documents": {
               "type": "array",
               "items": {
-                "type": "string"
+                "$ref": "#/components/schemas/IRenderDocument"
               }
             }
           },
           "required": [
             "documents"
+          ]
+        },
+        "IRenderDocument": {
+          "type": "object",
+          "properties": {
+            "type": {
+              "type": "string"
+            },
+            "renderedTemplate": {
+              "type": "string"
+            },
+            "name": {
+              "type": "string"
+            },
+            "id": {
+              "type": "string"
+            }
+          },
+          "required": [
+            "type",
+            "renderedTemplate"
           ],
           "description": "Result of rendering a verifiable credential."
         }

packages/core-types/src/types/IRender.ts

@@ -32,8 +32,14 @@ export type IRendererContext = IAgentContext<
  * Result of rendering a verifiable credential.
  * @beta
  */
+export interface IRenderDocument{
+  type: string;
+  renderedTemplate: string;
+  name?: string;
+  id?: string;
+}
 export interface IRenderResult {
-  documents: string[];
+  documents: IRenderDocument[];
 }
 
 /**

packages/core-types/src/types/IRendererProvider.ts

@@ -1,3 +1,5 @@
+import { IRendererContext } from "./IRender";
+
 /**
  * The document to render.
  * @public
@@ -13,9 +15,28 @@ export type RenderDocument = {
 export interface IRendererProvider {
   /**
    * Render a verifiable credential using the specified render methods.
-   * @param template - The template to render.
-   * @param document - The document to render.
+   * @param data - The render method data.
+   * @param context - The context.
    * @returns A promise that resolves to the rendered document.
    */
-  renderCredential(template: string, document: RenderDocument): Promise<string>;
+  renderCredential({
+    data,
+    context, 
+    document
+  }: {
+    data: any;
+    context?: IRendererContext;
+    document: RenderDocument;
+  }): Promise<IRenderedResult>;
+}
+/**
+ * The result of rendering
+ * @public
+ */
+export interface IRenderedResult {
+  id?: string;
+  name?: string;
+  renderedTemplate?: string;
+  errorMessages?: string;
 }
+

packages/core-types/src/types/vc-data-model.ts

@@ -212,8 +212,6 @@ export enum RenderingType {
  * @beta This API may change without prior notice.
  */
 export interface RenderMethodPayload {
-  '@id'?: string;
-  '@type': RenderingType;
-
-  [x: string]: any; // Additional properties can be added dynamically
+  type: string;
+  data: any;
 }

packages/demo-explorer/package.json

@@ -13,6 +13,7 @@
     "agent-explore": "./bin/bin.js"
   },
   "scripts": {
+    "postinstall": "pnpm add --ignore-scripts ../../.tmp_npm/veramo/packages/credential-w3c/",
     "dev": "craco start",
     "build": "pnpm run build:explorer",
     "build:explorer": "craco build",

packages/demo-explorer/src/components/CredentialRender.tsx

@@ -1,9 +1,13 @@
 import { ProCard } from '@ant-design/pro-components'
 import { QrCodeDocumentWrapper } from '@vckit/react-components'
-import { Renderer, WebRenderingTemplate2022 } from '@vckit/renderer'
+import {
+  Renderer,
+  WebRenderingTemplate2022,
+  RenderTemplate2024,
+} from '@vckit/renderer'
 import { useVeramo } from '@veramo-community/veramo-react'
 import { VerifiableCredential } from '@veramo/core'
-import { Button, Spin } from 'antd'
+import { Button, Spin, Tabs } from 'antd'
 import html2canvas from 'html2canvas'
 import { CSSProperties, useCallback, useEffect, useState } from 'react'
 import { useQuery } from 'react-query'
@@ -33,7 +37,7 @@ const CredentialRender: React.FC<CredentialRenderProps> = ({
   hash,
 }) => {
   const { agent } = useVeramo()
-  const [documents, setDocuments] = useState<string[]>([])
+  const [documents, setDocuments] = useState<Array<any>>([])
   const [qrCodeValue, setQrCodeValue] = useState<string>('')
   const [isLoading, setIsLoading] = useState<boolean>(false)
   const encryptedEndpoint = process.env.REACT_APP_ENCRYPTED_ENDPOINT
@@ -60,18 +64,14 @@ const CredentialRender: React.FC<CredentialRenderProps> = ({
   const renderCredential = useCallback(async () => {
     setIsLoading(true)
     try {
-      const renderer = new Renderer({
-        providers: {
-          WebRenderingTemplate2022: new WebRenderingTemplate2022(),
-        },
-        defaultProvider: 'WebRenderingTemplate2022',
+      let documents = await agent?.renderCredential({credential})
+
+      documents = documents.documents.map((doc: any) => {
+        return {
+          ...doc,
+          renderedTemplate: convertBase64ToString(doc.renderedTemplate),
+        }
       })
-
-      let { documents }: { documents: string[] } =
-        await renderer.renderCredential({
-          credential,
-        })
-      documents = documents.map((doc) => convertBase64ToString(doc))
       setDocuments(documents)
     } catch (e) {}
     setIsLoading(false)
@@ -116,29 +116,33 @@ const CredentialRender: React.FC<CredentialRenderProps> = ({
 
   return (
     <Spin tip="Loading..." spinning={isLoading || credentialLoading}>
-      <ProCard
-        style={proCardStyle}
-        title={<IdentifierProfile did={getIssuerDID(credential)} />}
-      >
-        <div id="render">
-          <QrCodeDocumentWrapper qrCodeValue={qrCodeValue}>
-            {!isLoading && !credentialLoading ? (
-              documents.length !== 0 ? (
-                documents.map((doc, i) => (
-                  <div key={i} dangerouslySetInnerHTML={{ __html: doc }}></div>
-                ))
-              ) : (
-                <pre style={jsonStyle}>
-                  {JSON.stringify(credential, null, 2)}
-                </pre>
-              )
-            ) : (
-              <></>
-            )}
-          </QrCodeDocumentWrapper>
-        </div>
-        <Button onClick={printdiv}>Print</Button>
-      </ProCard>
+      {!isLoading && !credentialLoading ? (
+        documents.length !== 0 ? (
+          <Tabs
+            items={documents.map((doc, i) => ({
+              key: i.toString(),
+              label: `${doc.type}`,
+              children: (
+                <ProCard
+                  style={proCardStyle}
+                  title={<IdentifierProfile did={getIssuerDID(credential)} />}
+                >
+                  <QrCodeDocumentWrapper qrCodeValue={qrCodeValue}>
+                    <div
+                      key={i}
+                      dangerouslySetInnerHTML={{ __html: doc.renderedTemplate }}
+                    ></div>
+                  </QrCodeDocumentWrapper>
+                </ProCard>
+              ),
+            }))}
+          />
+        ) : (
+          <pre style={jsonStyle}>{JSON.stringify(credential, null, 2)}</pre>
+        )
+      ) : (
+        <></>
+      )}
     </Spin>
   )
 }

packages/example-documents/src/examples/UniversityDegreeCredentialNewRenderer.json

@@ -0,0 +1,34 @@
+{
+  "@context": [
+    "https://www.w3.org/ns/credentials/v2",
+    "https://www.w3.org/ns/credentials/examples/v2",
+    "https://vckit-contexts.s3.ap-southeast-2.amazonaws.com/render-template-context-2024.json"
+  ],
+  "id": "http://example.edu/credentials/3732",
+  "type": ["VerifiableCredential", "UniversityDegreeCredential"],
+  "issuer": "did:web:7703-42-119-80-19.ap.ngrok.io",
+  "issuanceDate": "2010-01-01T00:00:00Z",
+  "credentialSubject": {
+    "id": "did:example:ebfeb1f712ebc6f1c276e12ec21",
+    "name": "John Doe",
+    "degree": {
+      "type": "BachelorDegree",
+      "name": "Bachelor of Computer Science",
+      "degreeSchool": "Example University"
+    }
+  },
+  "renderMethod": [
+    {
+      "template": "<div style=\"width:300px; height:300px; border: 2px solid black; text-align:center\">  \n\t<h2>Certificate</h2>\n    <p>Of Completion</p>\n  <div>    This is to certify that  </div>  \n  <strong style=\"font-size: 16px\">   {{credentialSubject.name}}  </strong>\n  <div>has completed the {{credentialSubject.degree.name}}</div>\n  <div>    by {{credentialSubject.degree.degreeSchool}}.  </div>\n</div>",
+      "@type": "RenderTemplate2024",
+      "mediaQuery": "@media (min-width: 1024px) {\n  .title {\n    font-weight: bold;\n    color: #223675;\n  }\n}",
+      "mediaType": "text/html",
+      "url": "", 
+      "digestMultibase": "zQmXPqSNrf6ZR2R5VVdYRpPxQREDCW1i3h98NAHLdAwLBxx"
+    },
+{
+    "template": "<div style=\"width:300px; height:100px; border: 2px solid black; text-align:center\">\n  <div>\n    This {{credentialSubject.degree.name}} is conferred to\n  </div>\n  <strong style=\"font-size: 16px\">\n    {{credentialSubject.name}}\n  </strong>\n  <div>\n    by {{credentialSubject.degree.degreeSchool}}.\n  </div>\n</div>",
+    "@type": "WebRenderingTemplate2022"
+  }
+  ]
+}

packages/example-documents/src/examples/index.ts

@@ -61,6 +61,7 @@ import VerifiableBusinessCard from './VerifiableBusinessCard.json' assert { type
 import VerifiablePostmanCollection from './VerifiablePostmanCollection.json' assert { type: 'json' };
 import VerifiableScorecard from './VerifiableScorecard.json' assert { type: 'json' };
 import UniversityDegreeCredential from './UniversityDegreeCredential.json' assert { type: 'json' };
+import UniversityDegreeCredentialNewRenderer from './UniversityDegreeCredentialNewRenderer.json' assert { type: 'json' };
 
 import TradeTrustInvoice from './TradeTrustInvoice.json' assert { type: 'json' };
 
@@ -758,4 +759,15 @@ export const credentialsIssueExamples = {
       2
     ),
   },
+  UniversityDegreeCredentialNewRenderer: {
+    description: 'UniversityDegreeCredentialNewRenderer',
+    value: JSON.stringify(
+      {
+        credential: UniversityDegreeCredentialNewRenderer,
+        proofFormat: 'lds',
+      },
+      null,
+      2
+    ),
+  },
 };

packages/renderer/README.md

@@ -10,7 +10,13 @@ To implement a new render provider, follow these steps:
 
 2. Save the provider file in the `packages/renderer/src/providers` folder, using a name that corresponds to the render type. For example, if you want to implement a provider for `WebRenderingTemplate2022`, name the provider file as `web-rendering-template-2022.ts`.
 
-3. Add the provider to the agent.yml file, as shown in the following example:
+3. Delete  `tsconfig.tsbuildinfo` and run build the plugin by running this command 
+```bash
+pnpm build
+```
+To test it locally, you need to restart your vckit server.
+
+4. Add the provider to the agent.yml file, as shown in the following example:
 
 ```yaml
 renderer: