ProjectEvergreen / wcc

Experimental native Web Components compiler.
https://merry-caramel-524e61.netlify.app
80 stars 6 forks source link

top level attributes returning as undefined #165

Open thescientist13 opened 1 day ago

thescientist13 commented 1 day ago

Summary

Noticed in https://github.com/ProjectEvergreen/www.greenwoodjs.dev/pull/94 that something simple when pre-rendering

<app-side-nav
  route="/guides/"
  heading="Guides"
></app-side-nav>
import { getContentByRoute } from "@greenwood/cli/src/data/queries.js";
import styles from "./side-nav.module.css";

export default class SideNav extends HTMLElement {
  async connectedCallback() {
    const heading = this.getAttribute("heading");
    const route = this.getAttribute("route");
    const currentRoute = this.getAttribute("current-route");

    // route gets used somewhere down here...
  }
}

customElements.define("app-side-nav", SideNav);

Will result in an error because route is undefined

{ route: undefined, heading: undefined }
TypeError [Error]: Cannot read properties of undefined (reading 'data')
    at file:///Users/owenbuckley/Workspace/project-evergreen/www.greenwoodjs.dev/src/components/side-nav/side-nav.js:20:28
    at Array.forEach (<anonymous>)
    at SideNav.connectedCallback (file:///Users/owenbuckley/Workspace/project-evergreen/www.greenwoodjs.dev/src/components/side-nav/side-nav.js:13:13)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async initializeCustomElement (file:///Users/owenbuckley/Workspace/project-evergreen/www.greenwoodjs.dev/node_modules/wc-compiler/src/wcc.js:218:5)
    at async renderFromHTML (file:///Users/owenbuckley/Workspace/project-evergreen/www.greenwoodjs.dev/node_modules/wc-compiler/src/wcc.js:259:5)
    at async executeRouteModule (file:///Users/owenbuckley/Workspace/project-evergreen/www.greenwoodjs.dev/node_modules/@greenwood/cli/src/lib/execute-route-module.js:13:22)
    at async executeModule (file:///Users/owenbuckley/Workspace/project-evergreen/www.greenwoodjs.dev/node_modules/@greenwood/cli/src/lib/ssr-route-worker.js:6:16)
    at async MessagePort.<anonymous> (file:///Users/owenbuckley/Workspace/project-evergreen/www.greenwoodjs.dev/node_modules/@greenwood/cli/src/lib/ssr-route-worker.js:12:3)

Details

It actually looks like for renderFromHTML that we are double instantiating dependencies through initializeCustomElement which calls connectedCallback, when all we really need is to just trigger calling customElements.define, as the real rendering happens in renderComponentRoots.