WIP shoelace integration

Author: thescientist13

package-lock.json

@@ -27,6 +27,7 @@
     "start": "pnpm run serve"
   },
   "dependencies": {
+    "@shoelace-style/shoelace": "^2.18.0",
     "lit": "^3.1.0"
   },
   "devDependencies": {

package.json

@@ -405,3 +405,99 @@ index a92bb3d29496a453f1714e5cd32d1800c94844be..ded1034c929edc462ab547dc9b16ca8c
 -  walkModule
 +  mergeImportMap
  };
+diff --git a/src/config/rollup.config.js b/src/config/rollup.config.js
+index b0bad6bfd8f9331812ded9c266d51ea8bb2584f1..08ff1eb71aaf338075b66e55f008fbafc25b4b85 100644
+--- a/src/config/rollup.config.js
++++ b/src/config/rollup.config.js
+@@ -141,6 +141,7 @@ function greenwoodSyncPageResourceBundlesPlugin(compilation) {
+             }
+           }
+ 
++          console.log({ resourceKey, facadeModuleId });
+           if (resourceKey === facadeModuleId) {
+             const { fileName } = bundles[bundle];
+             const { rawAttributes, contents } = resource;
+@@ -587,6 +588,7 @@ function greenwoodSyncImportAttributes(compilation) {
+ 
+ const getRollupConfigForBrowserScripts = async (compilation) => {
+   const { outputDir } = compilation.context;
++  console.log('?????', compilation.resources.values())
+   const input = [...compilation.resources.values()]
+     .filter(resource => resource.type === 'script')
+     .map(resource => normalizePathnameForWindows(resource.sourcePathURL));
+diff --git a/src/lib/resource-utils.js b/src/lib/resource-utils.js
+index 6a78e464785b6dc11e909acf64f66db975e77909..d4c5ac967a4dcf126b4cf9c85d5d3615ebde03d8 100644
+--- a/src/lib/resource-utils.js
++++ b/src/lib/resource-utils.js
+@@ -2,17 +2,39 @@ import fs from 'fs/promises';
+ import { hashString } from './hashing-utils.js';
+ import htmlparser from 'node-html-parser';
+ 
++function getPackageNameFromSrc(src) {
++  const s = src.replace('/node_modules/', '');
++  const pieces = s.split('/');
++  let name;
++
++  console.log({ pieces });
++  if (s.startsWith('@')) {
++    name = `${pieces[0]}/${pieces[1]}`;
++  } else {
++    name = pieces[0];
++  }
++
++  console.log({ name });
++
++  return name;
++}
+ async function modelResource(context, type, src = undefined, contents = undefined, optimizationAttr = undefined, rawAttributes = undefined) {
+   const { projectDirectory, scratchDir, userWorkspace } = context;
+   const extension = type === 'script' ? 'js' : 'css';
+   let sourcePathURL;
+ 
+   if (src) {
+-    sourcePathURL = src.startsWith('/node_modules')
+-      ? new URL(`.${src}`, projectDirectory)
+-      : src.startsWith('/')
++    if (src.startsWith('/node_modules')) {
++      const name = getPackageNameFromSrc(src);
++      const resolved = import.meta.resolve(name);
++      
++      sourcePathURL = new URL(resolved);
++      console.log('modelResource', { name, resolved, sourcePathURL });
++    } else {
++      sourcePathURL = src.startsWith('/')
+         ? new URL(`.${src}`, userWorkspace)
+         : new URL(`./${src.replace(/\.\.\//g, '').replace('./', '')}`, userWorkspace);
++    }
+ 
+     contents = await fs.readFile(sourcePathURL, 'utf-8');
+   } else {
+@@ -112,6 +134,7 @@ async function resolveForRelativeUrl(url, rootUrl) {
+ }
+ 
+ async function trackResourcesForRoute(html, compilation, route) {
++  console.log('trackResourcesForRoute', { route });
+   const { context } = compilation;
+   const root = htmlparser.parse(html, {
+     script: true,
+@@ -163,6 +186,7 @@ async function trackResourcesForRoute(html, compilation, route) {
+ 
+   compilation.graph.find(page => page.route === route).resources = resources.map(resource => resource.sourcePathURL.pathname);
+ 
++  console.log('$$$', { resources });
+   return resources;
+ }
+ 
+diff --git a/src/lifecycles/bundle.js b/src/lifecycles/bundle.js
+index 814d1b9462c02530f81a7bec1d393f6609c5a9b9..992f239c76643748119d53cef7b809b22623de8b 100644
+--- a/src/lifecycles/bundle.js
++++ b/src/lifecycles/bundle.js
+@@ -332,6 +332,8 @@ async function bundleScriptResources(compilation) {
+   // https://rollupjs.org/guide/en/#differences-to-the-javascript-api
+   const [rollupConfig] = await getRollupConfigForBrowserScripts(compilation);
+ 
++  console.log({ rollupConfig });
++
+   if (rollupConfig.input.length !== 0) {
+     const bundle = await rollup(rollupConfig);
+     await bundle.write(rollupConfig.output);

patches/@greenwood__cli.patch

@@ -76,7 +76,7 @@ export class Card extends LitElement {
       <div>
         <h3>${title}</h3>
         <img src="${thumbnail}" alt="${title}" loading="lazy" width="100%">
-        <button @click="${this.selectItem}">View Item Details</button>
+        <sl-button variant="neutral" @click="${this.selectItem}">View Item Details</sl-button>
       </div>
     `;
   }

pnpm-lock.yaml

@@ -56,7 +56,7 @@ export class Modal extends LitElement {
   }
 
   firstUpdated() {
-    const button = this.shadowRoot.querySelector('button')
+    const button = this.shadowRoot.querySelector('sl-button')
     const dialog = this.shadowRoot.querySelector('dialog');
 
     button.addEventListener("click", () => dialog.close());
@@ -68,7 +68,7 @@ export class Modal extends LitElement {
     return html`
       <dialog>
         <h3 id="content">${content}</h3>
-        <button autofocus>Close</button>
+        <sl-button variant="neutral" autofocus>Close</sl-button>
       </dialog>
     `;
   }

src/components/card.js

@@ -8,8 +8,11 @@
     <link rel="shortcut icon" href="/favicon.ico"/>
     <link rel="icon" href="/favicon.ico"/>
 
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro">
-    <link rel="stylesheet" href="../styles/main.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro"/>
+    <link rel="stylesheet" href="/node_modules/@shoelace-style/shoelace/dist/themes/light.css" />
+    <link rel="stylesheet" href="../styles/main.css"/>
+
+    <script type="module" src="/node_modules/@shoelace-style/shoelace/dist/shoelace.js"></script>
     <script type="module" src="../components/card.js"></script>
     <script type="module" src="../components/modal.js"></script>
   </head>