feat: implement renderer 2024 provider

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

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

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

@@ -32,8 +32,16 @@ export type IRendererContext = IAgentContext<
  * Result of rendering a verifiable credential.
  * @beta
  */
+export interface IRenderDocument{
+  type: string;
+  renderedTemplate: string;
+  id: string | undefined;
+  name: string | undefined;
+  mediaType: string | undefined;
+
+}
 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
@@ -15,7 +17,22 @@ 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 url - The url to the svg template to render.
+   * @param digestMultibase - The digest multibase of the svg template to verify.
    * @returns A promise that resolves to the rendered document.
    */
-  renderCredential(template: string, document: RenderDocument): Promise<string>;
+  renderCredential({
+    template,
+    document,
+    url,
+    digestMultibase,
+    context,
+  }: {
+    template?: string;
+    document?: RenderDocument;
+    url?: string;
+    digestMultibase?: string;
+    context?: IRendererContext;
+  }): Promise<string>;
 }
+

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,
+  WebRenderingTemplate2024,
+} 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'
@@ -28,12 +32,20 @@ interface CredentialRenderProps {
   hash: string
 }
 
+interface IRenderDocument{
+  type: string;
+  renderedTemplate: string;
+  id: string | undefined;
+  name: string | undefined;
+  mediaType: string | undefined;
+
+}
 const CredentialRender: React.FC<CredentialRenderProps> = ({
   credential,
   hash,
 }) => {
   const { agent } = useVeramo()
-  const [documents, setDocuments] = useState<string[]>([])
+  const [documents, setDocuments] = useState<IRenderDocument[]>([])
   const [qrCodeValue, setQrCodeValue] = useState<string>('')
   const [isLoading, setIsLoading] = useState<boolean>(false)
   const encryptedEndpoint = process.env.REACT_APP_ENCRYPTED_ENDPOINT
@@ -60,15 +72,21 @@ const CredentialRender: React.FC<CredentialRenderProps> = ({
       const renderer = new Renderer({
         providers: {
           WebRenderingTemplate2022: new WebRenderingTemplate2022(),
+          WebRenderingTemplate2024: new WebRenderingTemplate2024(),
         },
         defaultProvider: 'WebRenderingTemplate2022',
       })
 
-      let { documents }: { documents: string[] } =
+      let { documents }: { documents: IRenderDocument[] } =
         await renderer.renderCredential({
           credential,
         })
-      documents = documents.map((doc) => convertBase64ToString(doc))
+      documents = documents.map((doc) => {
+        return {
+          ...doc,
+          renderedTemplate: convertBase64ToString(doc.renderedTemplate),
+        }
+      })
       setDocuments(documents)
     } catch (e) {}
     setIsLoading(false)
@@ -113,29 +131,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/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:

packages/renderer/__tests__/providers/web-rendering-template-2022.test.ts

@@ -12,10 +12,10 @@ describe('WebRenderingTemplate2022', () => {
       const template = '<p>{{name}}</p>';
       const document = { name: 'John Doe' };
 
-      const renderedContent = await renderer.renderCredential(
+      const renderedContent = await renderer.renderCredential({
         template,
-        document
-      );
+        document,
+      });
 
       expect(renderedContent).toBe('<p>John Doe</p>');
     });
@@ -24,10 +24,10 @@ describe('WebRenderingTemplate2022', () => {
       const template = '';
       const document = { name: 'John Doe' };
 
-      const renderedContent = await renderer.renderCredential(
+      const renderedContent = await renderer.renderCredential({
         template,
-        document
-      );
+        document,
+      });
 
       expect(renderedContent).toBe('');
     });
@@ -36,10 +36,10 @@ describe('WebRenderingTemplate2022', () => {
       const template = 'Some random text';
       const document = { name: 'John Doe' };
 
-      const renderedContent = await renderer.renderCredential(
+      const renderedContent = await renderer.renderCredential({
         template,
-        document
-      );
+        document,
+      });
 
       expect(renderedContent).toBe(template);
     });
@@ -48,10 +48,10 @@ describe('WebRenderingTemplate2022', () => {
       const template = '    \t\n   ';
       const document = { name: 'John Doe' };
 
-      const renderedContent = await renderer.renderCredential(
+      const renderedContent = await renderer.renderCredential({
         template,
-        document
-      );
+        document,
+      });
 
       expect(renderedContent).toBe('');
     });

packages/renderer/__tests__/providers/web-rendering-template-2024.test.ts

@@ -0,0 +1,46 @@
+import { WebRenderingTemplate2024 } from '/Users/ducpm/GoSource/projects/project_vckit/project-vckit/packages/renderer/src/providers/web-rendering-template-2024';
+
+describe('WebRenderingTemplate2024', () => {
+  let renderer: WebRenderingTemplate2024;
+
+  beforeEach(() => {
+    renderer = new WebRenderingTemplate2024();
+  });
+
+  it('should return an p tag with error message if the template is not provided', async () => {
+    const result = await renderer.renderCredential({});
+
+    expect(result).toBe(
+      '<p style="color: red">Error: Failed to fetch template or no template provided</p>',
+    );
+  });
+
+  it('should render the template with the credential data', async () => {
+    const template = '<p>{{name}}</p>';
+    const document = { name: 'John Doe' };
+
+    const renderedContent = await renderer.renderCredential({
+      template,
+      document,
+    });
+
+    expect(renderedContent).toBe('<p>John Doe</p>');
+  });
+
+  it('should return an p tag with error message if the template and the digestMultibase are not the same', async () => {
+    const template = '<p>{{name}}</p>';
+    const document = { name: 'John Doe' };
+    const digestMultibase = '123';
+    const result = await renderer.renderCredential({
+        template,
+        document,
+        digestMultibase,
+    });
+
+    expect(result).toBe(
+      '<p style="color: red">Error: Template hash does not match the provided digest</p>',
+    );
+  });
+
+  // Add more tests here for different scenarios
+});

packages/renderer/__tests__/renderer.test.ts

@@ -11,7 +11,7 @@ import universityDegreeCredential from '../fixtures/university-degree-credential
 describe('Renderer', () => {
   // Mock renderer provider
   const MockWebRenderingTemplate2022: IRendererProvider = {
-    async renderCredential(template: string, document: any): Promise<string> {
+    async renderCredential({template: string, document: any}): Promise<string> {
       // Mock implementation
       return 'Rendered credential successfully';
     },

packages/renderer/src/index.ts

@@ -1,5 +1,6 @@
 import { Renderer } from './renderer.js';
 import { WebRenderingTemplate2022 } from './providers/web-rendering-template-2022.js';
+import { WebRenderingTemplate2024 } from './providers/web-rendering-template-2024.js';
 
-export { Renderer, WebRenderingTemplate2022 };
+export { Renderer, WebRenderingTemplate2022, WebRenderingTemplate2024 };
 export { RenderDefaultContexts } from './render-default-contexts.js';

packages/renderer/src/providers/web-rendering-template-2022.ts

@@ -7,14 +7,18 @@ import handlebars from 'handlebars';
  */
 export class WebRenderingTemplate2022 implements IRendererProvider {
   async renderCredential(
-    template: string,
-    document: RenderDocument
+    {
+      template,
+      document,
+    }: {
+      template?: string;
+      document?: RenderDocument;
+    }
   ): Promise<string> {
     // Check if the template is empty or contains only whitespace
-    if (!template.trim()) {
+    if (!template?.trim()) {
       return '';
     }
-
     const compiledTemplate = handlebars.compile(template);
 
     // Render the template with the document data