Add error handling for vanilla templates

Author: CompuIves

packages/app/src/sandbox/eval/presets/parcel/transpilers/html-worker.js

@@ -2,6 +2,7 @@ import parse from 'posthtml-parser';
 import api from 'posthtml/lib/api';
 
 import isUrl from './is-url';
+import { buildWorkerError } from '../../../transpilers/utils/worker-error-handler';
 
 // A list of all attributes that may produce a dependency
 // Based on https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes
@@ -57,114 +58,119 @@ const META = {
 };
 
 self.addEventListener('message', async event => {
-  const { code } = event.data;
+  try {
+    const { code } = event.data;
 
-  const resources = [];
+    const resources = [];
 
-  function addDependency(depPath: string) {
-    if (!isUrl(depPath)) {
-      let assetPath = decodeURIComponent(depPath);
-      if (/^\w/.test(assetPath)) {
-        assetPath = `./${assetPath}`;
-      }
+    function addDependency(depPath: string) {
+      if (!isUrl(depPath)) {
+        let assetPath = decodeURIComponent(depPath);
+        if (/^\w/.test(assetPath)) {
+          assetPath = `./${assetPath}`;
+        }
 
-      self.postMessage({
-        type: 'add-dependency',
-        path: assetPath,
-        isEntry: true,
-      });
+        self.postMessage({
+          type: 'add-dependency',
+          path: assetPath,
+          isEntry: true,
+        });
 
-      resources.push(assetPath);
+        resources.push(assetPath);
 
-      return assetPath;
+        return assetPath;
+      }
+      return false;
     }
-    return false;
-  }
 
-  function addSrcSetDependencies(srcset: string) {
-    const newSources = [];
+    function addSrcSetDependencies(srcset: string) {
+      const newSources = [];
 
-    srcset.split(',').forEach(source => {
-      const pair = source.trim().split(' ');
-      if (pair.length === 0) return;
-      pair[0] = addDependency(pair[0]);
-      newSources.push(pair.join(' '));
-    });
-    return newSources.join(',');
-  }
+      srcset.split(',').forEach(source => {
+        const pair = source.trim().split(' ');
+        if (pair.length === 0) return;
+        pair[0] = addDependency(pair[0]);
+        newSources.push(pair.join(' '));
+      });
+      return newSources.join(',');
+    }
 
-  const res = parse(code, { lowerCaseAttributeNames: true });
-  res.walk = api.walk;
-  res.match = api.match;
-
-  res.walk(node => {
-    if (node.attrs) {
-      if (node.tag === 'meta') {
-        if (
-          !Object.keys(node.attrs).some(attr => {
-            const values = META[attr];
-            return values && values.includes(node.attrs[attr]);
-          })
-        ) {
-          return node;
-        }
+    const res = parse(code, { lowerCaseAttributeNames: true });
+    res.walk = api.walk;
+    res.match = api.match;
+
+    res.walk(node => {
+      if (node == null) {
+        return node;
       }
 
-      /* eslint-disable no-param-reassign no-continue */
-      // eslint-disable-next-line no-restricted-syntax
-      for (const attr in node.attrs) {
-        if (node.tag === 'img' && attr === 'srcset') {
-          node.attrs[attr] = addSrcSetDependencies(node.attrs[attr]);
-          continue;
-        }
-        const elements = ATTRS[attr];
-        // Check for virtual paths
-        if (
-          (node.tag === 'a' && node.attrs[attr].lastIndexOf('.') < 1) ||
-          node.attrs[attr].endsWith('.html')
-        ) {
-          continue;
+      if (node.attrs) {
+        if (node.tag === 'meta') {
+          if (
+            !Object.keys(node.attrs).some(attr => {
+              const values = META[attr];
+              return values && values.includes(node.attrs[attr]);
+            })
+          ) {
+            return node;
+          }
         }
 
-        if (
-          node.tag === 'html' &&
-          node.attrs[attr].endsWith('.html') &&
-          attr === 'href'
-        ) {
-          // Another HTML file, we'll compile it when the user goes to it
-          continue;
-        }
+        /* eslint-disable no-param-reassign no-continue */
+        // eslint-disable-next-line no-restricted-syntax
+        for (const attr in node.attrs) {
+          if (node.tag === 'img' && attr === 'srcset') {
+            node.attrs[attr] = addSrcSetDependencies(node.attrs[attr]);
+            continue;
+          }
+          const elements = ATTRS[attr];
+          // Check for virtual paths
+          if (
+            (node.tag === 'a' && node.attrs[attr].lastIndexOf('.') < 1) ||
+            node.attrs[attr].endsWith('.html')
+          ) {
+            continue;
+          }
+
+          if (
+            node.tag === 'html' &&
+            node.attrs[attr].endsWith('.html') &&
+            attr === 'href'
+          ) {
+            // Another HTML file, we'll compile it when the user goes to it
+            continue;
+          }
 
-        if (elements && elements.includes(node.tag)) {
-          const result = addDependency(node.attrs[attr]);
+          if (elements && elements.includes(node.tag)) {
+            const result = addDependency(node.attrs[attr]);
 
-          if (result) {
-            if (node.tag === 'link' || node.tag === 'script') {
-              node.tag = false;
-              node.content = [];
-            } else {
-              node.attrs[attr] = result;
+            if (result) {
+              if (node.tag === 'link' || node.tag === 'script') {
+                node.tag = false;
+                node.content = [];
+              } else {
+                node.attrs[attr] = result;
+              }
             }
           }
         }
       }
-    }
 
-    return node;
-  });
+      return node;
+    });
 
-  let compiledCode = ``;
+    let compiledCode = ``;
 
-  compiledCode += '\n';
-  compiledCode += 'function loadResources() {';
-  resources.forEach(resource => {
-    const resourcePath = JSON.stringify(resource);
-    compiledCode += `\n`;
-    compiledCode += `\trequire(${resourcePath});\n`;
-  });
-  compiledCode += '\n}';
+    compiledCode += '\n';
+    compiledCode += 'function loadResources() {';
+    resources.forEach(resource => {
+      const resourcePath = JSON.stringify(resource);
+      compiledCode += `\n`;
+      compiledCode += `\trequire(${resourcePath});\n`;
+    });
+    compiledCode += '\n}';
 
-  compiledCode += `
+    compiledCode += `
 if (document.readyState !== 'complete') {
   window.addEventListener('load', function() { loadResources() });
 } else {
@@ -173,8 +179,14 @@ if (document.readyState !== 'complete') {
 
 `;
 
-  self.postMessage({
-    type: 'result',
-    transpiledCode: compiledCode,
-  });
+    self.postMessage({
+      type: 'result',
+      transpiledCode: compiledCode,
+    });
+  } catch (e) {
+    self.postMessage({
+      type: 'error',
+      error: buildWorkerError(e),
+    });
+  }
 });