ProjectEvergreen / wcc

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

top level attributes returning as undefined #165

Closed thescientist13 closed 1 month ago

thescientist13 commented 1 month 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.