pnpm shoelace hackathon

.npmrc

@@ -1 +1,2 @@
-legacy-peer-deps=true
+legacy-peer-deps=true
+# shamefully-hoist=true

.nvmrc

@@ -1 +1 @@
-18.12.1
+18.20.2

package.json

@@ -24,15 +24,19 @@
     "dev": "greenwood develop",
     "build": "greenwood build",
     "serve": "npm run clean && greenwood build && greenwood serve",
-    "start": "npm run serve"
+    "start": "npm run serve",
+    "postinstall": "patch-package"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.6.0",
+    "@shoelace-style/shoelace": "^2.17.1",
     "lit": "^3.1.0"
   },
   "devDependencies": {
-    "@greenwood/cli": "~0.30.0-alpha.1",
-    "@greenwood/plugin-adapter-vercel": "~0.30.0-alpha.1",
-    "@greenwood/plugin-renderer-lit": "~0.30.0-alpha.1",
+    "@greenwood/cli": "~0.30.0-alpha.7",
+    "@greenwood/plugin-adapter-vercel": "~0.30.0-alpha.7",
+    "@greenwood/plugin-renderer-lit": "~0.30.0-alpha.7",
+    "patch-package": "^8.0.0",
     "rimraf": "^5.0.0"
   }
 }

patches/@greenwood+cli+0.30.0-alpha.7.patch

@@ -0,0 +1,36 @@
+diff --git a/node_modules/@greenwood/cli/src/lib/walker-package-ranger.js b/node_modules/@greenwood/cli/src/lib/walker-package-ranger.js
+index a92bb3d..96e7870 100644
+--- a/node_modules/@greenwood/cli/src/lib/walker-package-ranger.js
++++ b/node_modules/@greenwood/cli/src/lib/walker-package-ranger.js
+@@ -173,7 +173,8 @@ async function walkPackageJson(packageJson = {}) {
+
+             // use the dependency itself as an entry in the importMap
+             if (entry === '.') {
+-              updateImportMap(dependency, `/node_modules/${path.join(dependency, packageExport)}`);
++              // console.log(dependency, packageExport)
++              updateImportMap(dependency, `/node_modules/${path.join(dependency, packageExport.default ?? packageExport)}`);
+             }
+           } else if (exportMapEntry.endsWith && (exportMapEntry.endsWith('.js') || exportMapEntry.endsWith('.mjs')) && exportMapEntry.indexOf('*') < 0) {
+             // is probably a file, so _not_ an export array, package.json, or wildcard export
+@@ -181,15 +182,16 @@ async function walkPackageJson(packageJson = {}) {
+           }
+
+           if (packageExport) {
+-            const packageExportLocation = path.resolve(absoluteNodeModulesLocation, packageExport);
+-
+-            if (packageExport.endsWith('js')) {
+-              updateImportMap(path.join(dependency, entry), `/node_modules/${path.join(dependency, packageExport)}`);
++            const exp = packageExport.default ?? packageExport;
++            const packageExportLocation = path.resolve(absoluteNodeModulesLocation, packageExport.default ?? exp);
++            // console.log({ exp, packageExportLocation });
++            if (exp.endsWith('js')) {
++              updateImportMap(path.join(dependency, entry), `/node_modules/${path.join(dependency, exp)}`);
+             } else if (fs.lstatSync(packageExportLocation).isDirectory()) {
+               fs.readdirSync(packageExportLocation)
+                 .filter(file => file.endsWith('.js') || file.endsWith('.mjs'))
+                 .forEach((file) => {
+-                  updateImportMap(path.join(dependency, packageExport, file), `/node_modules/${path.join(dependency, packageExport, file)}`);
++                  updateImportMap(path.join(dependency, exp, file), `/node_modules/${path.join(dependency, exp, file)}`);
+                 });
+             } else {
+               console.warn('Warning, not able to handle export', path.join(dependency, packageExport));

src/components/card.js

@@ -1,5 +1,8 @@
 import { LitElement, html, css } from 'lit';
 
+// https://github.com/shoelace-style/shoelace/discussions/1641
+// import '@shoelace-style/shoelace/dist/components/button/button.js';
+
 export class Card extends LitElement {
   static properties = {
     title: '',
@@ -76,7 +79,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>
     `;
   }

src/components/modal.js

@@ -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/templates/app.html → src/layouts/app.html

@@ -8,8 +8,13 @@
     <link rel="shortcut icon" href="/favicon.ico"/>
     <link rel="icon" href="/favicon.ico"/>
 
+    <!-- https://github.com/csstree/csstree/issues/179#issuecomment-2436323890 -->
+    <link rel="stylesheet" href="/node_modules/@fortawesome/fontawesome-free/css/fontawesome.css"/>
+    <link rel="stylesheet" href="/node_modules/@shoelace-style/shoelace/dist/themes/light.css" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro">
     <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>

src/api/fragment.js → src/pages/api/fragment.js

@@ -2,8 +2,8 @@ import { render } from '@lit-labs/ssr';
 import { collectResult } from '@lit-labs/ssr/lib/render-result.js'
 import { html } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import { getProducts } from '../services/products.js';
-import '../components/card.js';
+import { getProducts } from '../../services/products.js';
+import '../../components/card.js';
 
 export const isolation = true;
 

src/api/search.js → src/pages/api/search.js

@@ -2,8 +2,8 @@ import { render } from '@lit-labs/ssr';
 import { collectResult } from '@lit-labs/ssr/lib/render-result.js'
 import { html } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import { getProducts } from '../services/products.js';
-import '../components/card.js';
+import { getProducts } from '../../services/products.js';
+import '../../components/card.js';
 
 export const isolation = true;
 

src/pages/index.html

@@ -41,17 +41,18 @@ <h2>JSON API</h2>
       <p>This is an example of a Greenwood API Route returning JSON when fetched on-submit of the form to display a message on the page.  You can see it fire in the network tab as <i>/api/greeting</i></p>
       <form>
         <label>
-          <input type="text" name="name" placeholder="your name..." required/>
+          <sl-input type="text" name="name" placeholder="your name..." required></sl-input>
         </label>
-        <button type="submit">Click me for a greeting!</button>
+        <i class="fa-solid fa-arrow-right-from-bracket"></i>
+        <sl-button variant="neutral" type="submit">Click me for a greeting!</sl-button>
       </form>
       <h2 id="greeting-output"></h2>
     </article>
     <article>
       <h2>Fragments API (w/ Lit+SSR)</h2>
       <p>This is an example of a Greenwood API route returning an HTML response that is generated by server-rendering a Web Component (with Declarative Shadow DOM).  This same component is loaded on the client-side too, so that when you click the <i>Product Details</i> button, state and interactivity can still be resumed. You can see it fire in the network tab as <i>/api/fragment</i></p>
       <div id="load-products-output" class="products-cards-container" aria-live="polite"></div>
-      <button id="load-products">Load More Products</button>
+      <sl-button id="load-products" variant="neutral">Load More Products</sl-button>
     </article>
   </body>
 </html>

src/pages/search.html

@@ -31,9 +31,9 @@ <h2>Search API (w/ Lit+SSR)</h2>
       <p>This is an example of a Greenwood API leveraging the FormData API and returning an HTML response that is generated by server-rendering a Web Component (with Declarative Shadow DOM).  This same component is loaded on the client-side too, so that when you click the <i>Item Details</i> button, state and interactivity can still be resumed. You can see it fire in the network tab as <i>/api/search</i></p>
       <form id="search">
         <label for="term">
-          <input type="search" name="term" placeholder="a product..." required/>
+          <sl-input size="small" type="search" name="term" placeholder="a product..." required></sl-input>
         </label>
-        <button type="submit">Search</button>
+        <sl-button type="submit" variant="neutral">Search</sl-button>
       </form>
       <div id="search-products-output" class="products-cards-container" aria-live="polite"></div>
     </article>

src/styles/main.css

@@ -60,20 +60,21 @@ h2 {
   text-decoration: underline;
 }
 
-button {
+/* button {
   background: var(--color-accent);
   color: var(--color-white);
   padding: 1rem 2rem;
   border: 0;
   font-size: 1rem;
   border-radius: 5px;
   cursor: pointer;
-}
+} */
 
-input {
+sl-input {
   padding: 1rem;
   margin: 0 10px;
   font-size: 16px;
+  display: inline-block;
 }
 
 label {