Better error handling (hooks)

j3lte · May 14, 2024 · e273f19 · e273f19
1 parent ead43e6
commit e273f19
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 32 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-mustache-template-component",
-  "version": "2.1.4",
+  "version": "2.1.5",
   "description": "Mustache Template Component for React",
   "author": {
     "name": "J.W. Lagendijk",

diff --git a/src/TemplateComponent/index.test.tsx b/src/TemplateComponent/index.test.tsx
@@ -101,7 +101,7 @@ describe("TemplateComponent", () => {
     );
 
     expect(el).toBeNull();
-    expect(mocked).toHaveBeenCalled();
+    expect(mocked).toHaveBeenCalledWith(expect.any(Error));
 
     console.error = originalError;
   });

diff --git a/src/TemplateComponent/index.tsx b/src/TemplateComponent/index.tsx
@@ -69,44 +69,58 @@ export interface TemplateComponentProps extends HTMLAttributes<HTMLElement> {
 const TemplateComponentInternal: FunctionComponent<TemplateComponentProps> =
   forwardRef<ComponentType, TemplateComponentProps>(
     ({ template, sanitize, sanitizeOptions, data, type, ...args }, ref) => {
-      try {
-        const sanitizer = dompurify.sanitize;
-        const compiled = useMemo(
-          () =>
-            typeof template === "string"
-              ? Mustache.render(template, data)
-              : null,
-          [template, data],
-        );
-        const shouldSanitize = typeof sanitize === "boolean" ? sanitize : true;
-        const innerType = type || "div";
+      const sanitizer = dompurify.sanitize;
+      const shouldSanitize = typeof sanitize === "boolean" ? sanitize : true;
+      const innerType = type || "div";
 
+      const compiled = useMemo(() => {
+        if (typeof template === "string") {
+          try {
+            return Mustache.render(template, data);
+          } catch (error) {
+            // eslint-disable-next-line no-console
+            console.error(error);
+            return null;
+          }
+        }
+        return null;
+      }, [template, data]);
+
+      const html = useMemo(() => {
         if (compiled === null) {
           return null;
         }
+        try {
+          return (
+            shouldSanitize
+              ? typeof sanitizeOptions !== "undefined"
+                ? sanitizer(compiled, sanitizeOptions)
+                : sanitizer(compiled)
+              : compiled
+          ) as string;
+        } catch (error) {
+          // eslint-disable-next-line no-console
+          console.error(error);
+          return null;
+        }
+      }, [compiled]);
 
-        const html = (
-          shouldSanitize
-            ? typeof sanitizeOptions !== "undefined"
-              ? sanitizer(compiled, sanitizeOptions)
-              : sanitizer(compiled)
-            : compiled
-        ) as string;
-
-        const htmlOpts = useMemo(
-          () => ({
-            ...args,
-            dangerouslySetInnerHTML: { __html: html },
-          }),
-          [html],
-        );
+      const htmlOpts = useMemo(
+        () =>
+          html
+            ? {
+                ...args,
+                dangerouslySetInnerHTML: { __html: html },
+              }
+            : args,
+        [html],
+      );
 
-        return createElement(innerType, { ...htmlOpts, ref }, null);
-      } catch (error) {
-        // eslint-disable-next-line no-console
-        console.error(error);
+      if (!html) {
         return null;
       }
+
+      return createElement(innerType, { ...htmlOpts, ref }, null);
     },
   );