update HTML Modules to return a template

greenwood.config.js

@@ -15,8 +15,8 @@ class ImportHtmlResource extends ResourceInterface {
 
   async shouldServe(url, request) {
     const { pathname } = url;
-    console.log({ url, request });
-    console.log(request.headers);
+    // console.log({ url, request });
+    // console.log(request.headers);
 
     // TODO better way to test for import attributes via URL, e.g. force attributes as query params somehow?
     return pathname.endsWith(this.extensions[0]); // || (request.headers.get('Content-Type') || '').includes(this.contentType);
@@ -27,8 +27,15 @@ class ImportHtmlResource extends ResourceInterface {
     const contents = await fs.readFile(url, 'utf-8');
     // TODO do we need all these?
     // console.log({ contents })
-    const htmlInJsBody = `const html = \`${contents.replace(/\r?\n|\r/g, ' ').replace(/\\/g, '\\\\')}\`;\nexport default html;`;
-    console.log('url', { url });
+    // const htmlInJsBody = `const html = \`${contents.replace(/\r?\n|\r/g, ' ').replace(/\\/g, '\\\\')}\`;\nexport default html;`;
+    const htmlInJsBody = `
+      const template = document.createElement('template');
+
+      template.innerHTML = \`${contents.replace(/\r?\n|\r/g, ' ').replace(/\\/g, '\\\\')}\`;
+
+      export default template;
+    `;
+    // console.log('url', { url });
     // console.log({ htmlInJsBody });
     return new Response(htmlInJsBody, {
       headers: new Headers({

src/components/hero/hero.js

@@ -1,19 +1,19 @@
 // CSS Modules would also be really nice here!
 // might work better here for pure static content instead of needing a <style> tag
-// npte: we don't need a plugin for this in the browser (but likely will need to adapt this for NodeJS / bundling)
-import css from './hero.css' with { type: "css" };
-import html from "./hero.html" with { type: "html" };
+// note: we don't need a plugin for this in the browser (but likely will need to adapt this for NodeJS / bundling)
+import sheet from './hero.css' with { type: "css" };
+// making an assumption here that the standard would return a template element
+// this plus DOM Parts could provide a really nice templating solution
+import template from "./hero.html" with { type: "html" };
 
 export default class HeroBanner extends HTMLElement {
   connectedCallback() {
     if(!this.shadowRoot) {
-      console.log({ css, html });
-      const template = document.createElement('template');
-      template.innerHTML = html;
+      console.log({ sheet, template });
 
       this.attachShadow({ mode: 'open' });
       this.shadowRoot.appendChild(template.content.cloneNode(true));
-      this.shadowRoot.adoptedStyleSheets = [css];
+      this.shadowRoot.adoptedStyleSheets = [sheet];
     }
   }
 }