feat: extract attachment to component function

BREAKING CHANGE: previous behaviour was using pdf attachment by default. `react-pdf` growing the size of the bundles unnecessarily for renderer that dont need it, it wont be the case anymore. Default behaviour will provide no attachments support.

README.md

@@ -116,7 +116,7 @@ const action = {
 };
 ```
 
-- provide the name of a field on the document to obfuscate. The value must follow path property as handlded by [lodash#get](https://lodash.com/docs/4.17.15#get)
+- provide the name of a field on the document to obfuscate. The value must follow path property as handled by [lodash#get](https://lodash.com/docs/4.17.15#get)
   - type: "OBFUSCATE"
   - payload: (mandatory) path to the field
 
@@ -169,6 +169,10 @@ This component will establish a connection with a host embedding the application
   - id: a unique (withing the current array) identifier of the template
   - label: a string to represent what's the template is,
   - template: a `Template`, that is to say a react component that will render a document
+- `attachmentToComponent`: a function that map attachments to component depending on the attachment type. Currently the library exposes 2 functions:
+  - `noAttachmentRenderer`: which uses `UnsupportedRenderer` (basically it's doing nothing)
+  - `fullAttachmentRenderer`: which uses all the supported attachment type by the library (see the function).
+This property default to `noAttachmentRenderer`, to avoid bundles growing huge unnecessarily.
 
 `FramedDocumentRenderer` handle all the logic around the communication with the hosted application and the renderer:
 

package.json

@@ -4,6 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
+  "sideEffects": false,
   "main": "build/index.js",
   "types": "build/index.d.ts",
   "dependencies": {

src/components/renderer/AttachmentRenderer.tsx

@@ -4,14 +4,22 @@ import React from "react";
 import { Attachment } from "../../types";
 
 /**
- * Function returning the correct attachment renderer depending on the attachment type
+ * Function returning the correct attachment renderer depending on the attachment type. Currently supports:
+ * - application/pdf
  * @default use UnsupportedRenderer when no suitable renderer is found
  */
-export function attachmentRenderer<D extends Document>(attachment: Attachment): () => JSX.Element {
+export function fullAttachmentRenderer<D extends Document>(attachment: Attachment): React.FunctionComponent {
   if (attachment.type === "application/pdf") {
     // eslint-disable-next-line react/display-name
     return () => <PdfRenderer attachment={attachment} />;
   }
   // eslint-disable-next-line react/display-name
   return () => <UnsupportedRenderer attachment={attachment} />;
 }
+/**
+ * Function using unsupported renderer for all kind of attachments
+ */
+export function noAttachmentRenderer<D extends Document>(attachment: Attachment): React.FunctionComponent {
+  // eslint-disable-next-line react/display-name
+  return () => <UnsupportedRenderer attachment={attachment} />;
+}

src/components/renderer/FramedDocumentRenderer.tsx

@@ -1,20 +1,23 @@
 import React, { useCallback, useRef, useState } from "react";
-import { Document, SignedDocument, TemplateRegistry } from "../../types";
+import { Attachment, Document, SignedDocument, TemplateRegistry } from "../../types";
 import { documentTemplates, noop } from "../../utils";
 import { isActionOf } from "typesafe-actions";
 import { getLogger } from "../../logger";
 import { getTemplates, HostActions, renderDocument, selectTemplate, print } from "../frame/host.actions";
 import { FrameActions, obfuscateField, updateHeight, updateTemplates } from "../frame/frame.actions";
 import { HostConnector } from "../frame/HostConnector";
 import { DomListener } from "../common/DomListener";
+import { noAttachmentRenderer } from "./AttachmentRenderer";
 
 const { trace } = getLogger("FramedDocumentRenderer");
 
 interface FramedDocumentRendererProps<D extends Document> {
   templateRegistry: TemplateRegistry<D>;
+  attachmentToComponent?: (attachment: Attachment) => React.FunctionComponent;
 }
 export function FramedDocumentRenderer<D extends Document>({
-  templateRegistry
+  templateRegistry,
+  attachmentToComponent = noAttachmentRenderer
 }: FramedDocumentRendererProps<D>): JSX.Element {
   const [document, setDocument] = useState<D>();
   // used only to handle legacy setSelectTemplate function
@@ -25,7 +28,7 @@ export function FramedDocumentRenderer<D extends Document>({
   const [templateName, setTemplateName] = useState<string>();
   const toHost = useRef<(actions: FrameActions) => void>(noop);
 
-  const templates = document ? documentTemplates(document, templateRegistry) : [];
+  const templates = document ? documentTemplates(document, templateRegistry, attachmentToComponent) : [];
   const templateConfiguration = templates.find(template => template.id === templateName) || templates[0] || {};
   const Template = templateConfiguration.template;
 
@@ -45,7 +48,11 @@ export function FramedDocumentRenderer<D extends Document>({
         }
 
         const run = async (): Promise<void> => {
-          const templates = await documentTemplates(action.payload.document, templateRegistry).map(template => ({
+          const templates = await documentTemplates(
+            action.payload.document,
+            templateRegistry,
+            attachmentToComponent
+          ).map(template => ({
             id: template.id,
             label: template.label
           }));
@@ -54,13 +61,17 @@ export function FramedDocumentRenderer<D extends Document>({
         run();
       } else if (isActionOf(selectTemplate, action)) {
         if (typeof action.payload === "number") {
-          const templates = documentTemplates(documentForLegacyUsage.current as Document, templateRegistry);
+          const templates = documentTemplates(
+            documentForLegacyUsage.current as Document,
+            templateRegistry,
+            attachmentToComponent
+          );
           setTemplateName(templates[action.payload].id);
         } else {
           setTemplateName(action.payload);
         }
       } else if (isActionOf(getTemplates, action)) {
-        const templates = documentTemplates(action.payload, templateRegistry).map(template => ({
+        const templates = documentTemplates(action.payload, templateRegistry, attachmentToComponent).map(template => ({
           id: template.id,
           label: template.label
         }));
@@ -72,7 +83,7 @@ export function FramedDocumentRenderer<D extends Document>({
         throw new Error(`Action ${JSON.stringify(action)} is not handled`);
       }
     },
-    [templateRegistry]
+    [templateRegistry, attachmentToComponent]
   );
   window.openAttestation = dispatch; // expose different actions for direct injection
 

src/utils.ts

@@ -1,5 +1,5 @@
-import { Document, Template, TemplateRegistry } from "./types";
-import { attachmentRenderer } from "./components/renderer/AttachmentRenderer";
+import { Attachment, Document, Template, TemplateRegistry } from "./types";
+import React from "react";
 
 export const repeat = (times: number) => (callback: (index: number) => any) =>
   Array(times)
@@ -20,7 +20,8 @@ export const inIframe = (): boolean => {
 // TODO this function is weird, returns current template + templates for attachments
 export function documentTemplates<D extends Document>(
   document: Document,
-  templateRegistry: TemplateRegistry<D>
+  templateRegistry: TemplateRegistry<D>,
+  attachmentToComponent: (attachment: Attachment) => React.FunctionComponent
 ): Template<D>[] {
   if (!document) return [];
   // Find the template in the template registry or use a default template
@@ -31,7 +32,7 @@ export function documentTemplates<D extends Document>(
   const templatesFromAttachments = (document.attachments || []).map((attachment, index) => ({
     id: `attachment-${index}`,
     label: attachment.filename || "Unknown filename",
-    template: attachmentRenderer(attachment)
+    template: attachmentToComponent(attachment)
   }));
   return [...selectedTemplate, ...templatesFromAttachments];
 }