demo/home page with prototype of HTML / CSS modules (separation of technologies)

[thescientist13]

Overview

Trying to play around with a naive attempt at HTML Modules + Constructable Stylesheets (separation of technologies workflow). In its final form I'm sure HTML Modules will return a document.createElement('fragment') or something, but for now just testing new import assertions for the sake of import assertions

:host {
  text-align: center;
  margin-bottom: 40px;
}

:host h2 {
  font-size: 3em;
}

:host h2 i {
  color: var(--color-accent);
}

/* ... */

// hero.html
<div class="hero">
  <h2>The full-stack web is <u><i>here</i></u></h2>
  <p>Greenwood is your workbench for the web, embracing web standards from the ground up to empower your stack from front to back, allowing you to run anywhere the web can run.</p>
  <br/>
  <a href="#">
    <button>Get Started</button>
  </a>
  <a href="#">
    <button>View in Stackblitz</button>
  </a>
  <br/>
  <div class="code">
    $ npx @greenwood/init
  </div>
</div>

// CSS Modules would also be really nice here!
// might work better here for pure static content instead of needing a <style> tag
// note: 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" };

export default class HeroBanner extends HTMLElement {
  connectedCallback() {
    if(!this.shadowRoot) {
     // TODO would be cool explore DOM Parts as a way to do templating with `<template>`s
      const template = document.createElement('template');
      template.innerHTML = html;

      this.attachShadow({ mode: 'open' });
      this.shadowRoot.appendChild(template.content.cloneNode(true));
      this.shadowRoot.adoptedStyleSheets = [css];
    }
  }
}

customElements.define('app-hero', HeroBanner)

---

This will currently break when running the build task because the version of Rollup / Acorn we're using needs to be upgrade

    SyntaxError [Error]: Unexpected token (2:31)
        at pp$4.raise (file:///Users/owenbuckley/Workspace/project-evergreen/www.greenwoodjs.dev/node_modules/acorn/dist/acorn.mjs:3554:13)
        at pp$9.unexpected (file:///Users/owenbuckley/Workspace/project-evergreen/www.greenwoodjs.dev/node_modules/acorn/dist/acorn.mjs:762:8)
        at pp$9.semicolon (file:///Users/owenbuckley/Workspace/project-evergreen/www.greenwoodjs.dev/node_modules/acorn/dist/acorn.mjs:739:66)
        at pp$8.parseImport (file:///Users/owenbuckley/Workspace/project-evergreen/www.greenwoodjs.dev/node_modules/acorn/dist/acorn.mjs:1837:8)
        at pp$8.parseStatement (file:///Users/owenbuckley/Workspace/project-evergreen/www.greenwoodjs.dev/node_modules/acorn/dist/acorn.mjs:938:49)
        at pp$8.parseTopLevel (file:///Users/owenbuckley/Workspace/project-evergreen/www.greenwoodjs.dev/node_modules/acorn/dist/acorn.mjs:819:21)
        at Parser.parse (file:///Users/owenbuckley/Workspace/project-evergreen/www.greenwoodjs.dev/node_modules/acorn/dist/acorn.mjs:591:15)
        at Function.parse (file:///Users/owenbuckley/Workspace/project-evergreen/www.greenwoodjs.dev/node_modules/acorn/dist/acorn.mjs:641:35)
        at Module.parse (file:///Users/owenbuckley/Workspace/project-evergreen/www.greenwoodjs.dev/node_modules/acorn/dist/acorn.mjs:5943:17)
        at registerDependencies (file:///Users/owenbuckley/Workspace/project-evergreen/www.greenwoodjs.dev/node_modules/wc-compiler/src/wcc.js:69:22) {
      pos: 76,
      loc: { line: 2, column: 31 },
      raisedAt: 80
    }
  

Upstreams

1. I think this is point we have to do import attributes, as there is basically no way to use a query param in NodeJS custom loaders so this will never work in an isomorphic fashion, e.g. requiring the ?type=html, and so the enforcement of this in Greenwood is inconsistent and non-isomorphic. Basically, the "surest" stack way is actually without the ?type=xxx but obviously that's not as explicit. This would require:
   • upgrade Rollup and all plugins to 3.x greenwood#1087
   • import attributes for standard module formats; CSS and JSON  greenwood#923
2. We should also consider a less aggresive stance on NodeJS version in the CLI's package.json

   npm WARN EBADENGINE Unsupported engine {
   npm WARN EBADENGINE   package: 'www.greenwoodjs.dev@0.0.1',
   npm WARN EBADENGINE   required: { node: '^18.12.1' },
   npm WARN EBADENGINE   current: { node: 'v21.0.0', npm: '10.2.0' }
   npm WARN EBADENGINE }

3. prerender support in development would be nice here - Rendering Strategies (prerender vs SSR vs CSR) greenwood#951

[netlify]

❌ Deploy Preview for super-tapioca-5987ce failed.

Name	Link
🔨 Latest commit	ca8fb61
🔍 Latest deploy log	https://app.netlify.com/sites/super-tapioca-5987ce/deploys/65d63f601a507400088a9ec3

[thescientist13]

closing as we've landed on our #7 and I have a personal repo for demo-ing this instead
https://github.com/thescientist13/greenwood-full-stack-web-modules