@rocket/js 0.2.0 → 0.3.0

package/src/menus/RocketMenu.js

@@ -47,25 +47,31 @@ export class RocketMenu extends LitElement {
 
     return html`
       <li class=${classMap(itemClasses)}>
-        ${page.menuNoLink
-          ? html`<span class=${classMap(classes)}>${title}</span>`
-          : html`<a
-              href=${ifDefined(page.url)}
-              class=${classMap(classes)}
-              aria-current=${ifDefined(isCurrent ? 'page' : undefined)}
-              >${page.iconName
-                ? html`<rocket-icon
-                    class="nav-icon"
-                    name=${page.iconName}
-                    aria-hidden="true"
-                  ></rocket-icon>`
-                : ''}<span class="nav-text">${title}</span></a
-            >`}
-        ${page.children.length > 0
-          ? html`<ul>
-              ${page.children.map(child => this.list(child, depth + 1))}
-            </ul>`
-          : ''}
+        ${
+          page.menuNoLink
+            ? html`<span class=${classMap(classes)}>${title}</span>`
+            : html`<a
+                href=${ifDefined(page.url)}
+                class=${classMap(classes)}
+                aria-current=${ifDefined(isCurrent ? 'page' : undefined)}
+                >${
+                  page.iconName
+                    ? html`<rocket-icon
+                        class="nav-icon"
+                        name=${page.iconName}
+                        aria-hidden="true"
+                      ></rocket-icon>`
+                    : ''
+                }<span class="nav-text">${title}</span></a
+              >`
+        }
+        ${
+          page.children.length > 0
+            ? html`<ul>
+                ${page.children.map(child => this.list(child, depth + 1))}
+              </ul>`
+            : ''
+        }
       </li>
     `;
   }

package/src/menus/RocketToc.js

@@ -68,11 +68,13 @@ export class RocketToc extends LitElement {
         >
           ${headline.text}
         </a>
-        ${headline.children.length > 0
-          ? html`<ol>
-              ${headline.children.map(child => this.list(child, depth + 1))}
-            </ol>`
-          : html``}
+        ${
+          headline.children.length > 0
+            ? html`<ol>
+                ${headline.children.map(child => this.list(child, depth + 1))}
+              </ol>`
+            : html``
+        }
       </li>
     `;
   }

package/src/menus/pageNavigation.js

@@ -50,20 +50,34 @@ export function renderPageNavigationCard(page, direction) {
   const isNext = direction === 'next';
   const label = isNext ? 'Next Page' : 'Previous Page';
   const icon = html`<span class="page-card-icon" aria-hidden="true">
-    ${isNext
-      ? html`<svg class="page-card-arrow" viewBox="0 0 36 16" focusable="false" aria-hidden="true">
-          <path d="M5 8h25m-7-6 7 6-7 6" />
-        </svg>`
-      : html`<svg class="page-card-arrow" viewBox="0 0 36 16" focusable="false" aria-hidden="true">
-          <path d="M31 8H6m7-6-7 6 7 6" />
-        </svg>`}
+    ${
+      isNext
+        ? html`<svg
+            class="page-card-arrow"
+            viewBox="0 0 36 16"
+            focusable="false"
+            aria-hidden="true"
+          >
+            <path d="M5 8h25m-7-6 7 6-7 6" />
+          </svg>`
+        : html`<svg
+            class="page-card-arrow"
+            viewBox="0 0 36 16"
+            focusable="false"
+            aria-hidden="true"
+          >
+            <path d="M31 8H6m7-6-7 6 7 6" />
+          </svg>`
+    }
   </span>`;
   const text = html`<span class="page-card-text">
     <span class="page-card-label">${label}</span>
     <strong class="page-card-title">${page.linkText}</strong>
-    ${page.sectionLabel
-      ? html`<span class="page-card-section">${page.sectionLabel}</span>`
-      : nothing}
+    ${
+      page.sectionLabel
+        ? html`<span class="page-card-section">${page.sectionLabel}</span>`
+        : nothing
+    }
   </span>`;
 
   return html`<a

package/src/prefer-project-packages-plugin.js

@@ -0,0 +1,31 @@
+import { resolveProjectBrowserPackage } from './project-package-resolution.js';
+import { resolve } from './resolve.js';
+
+/**
+ * Keeps browser packages shared between a Site Author project and a linked Rocket checkout.
+ * Packages absent from the project are left to normal Node resolution, which falls back to
+ * Rocket's dependency.
+ *
+ * @returns {import('@web/dev-server-core').Plugin}
+ */
+export function preferProjectPackagesPlugin() {
+  /** @type {Map<string, string | undefined>} */
+  const resolvedImports = new Map();
+
+  return {
+    name: 'rocket-prefer-project-packages',
+    resolveImport({ source }) {
+      if (resolvedImports.has(source)) {
+        return resolvedImports.get(source);
+      }
+      let resolved;
+      try {
+        resolved = resolveProjectBrowserPackage(source) ? resolve(source, import.meta) : undefined;
+      } catch {
+        resolved = undefined;
+      }
+      resolvedImports.set(source, resolved);
+      return resolved;
+    },
+  };
+}

package/src/project-package-resolution.js

@@ -0,0 +1,36 @@
+import { moduleResolve } from 'import-meta-resolve';
+import path from 'node:path';
+import { pathToFileURL } from 'node:url';
+
+const browserImportConditions = new Set(['browser', 'import', 'module']);
+
+/**
+ * Resolve a bare package import from the Site Author project using browser ESM conditions.
+ * Built-in modules and packages absent from the project are left to another resolver.
+ *
+ * @param {string} specifier
+ */
+export function resolveProjectBrowserPackage(specifier) {
+  if (!isPackageSpecifier(specifier)) {
+    return undefined;
+  }
+  try {
+    const projectParent = pathToFileURL(path.join(process.cwd(), 'package.json'));
+    const resolved = moduleResolve(specifier, projectParent, browserImportConditions, false);
+    return resolved.protocol === 'file:' ? resolved.href : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+/**
+ * @param {string} specifier
+ */
+function isPackageSpecifier(specifier) {
+  return (
+    !specifier.startsWith('.') &&
+    !specifier.startsWith('/') &&
+    !specifier.startsWith('#') &&
+    !URL.canParse(specifier)
+  );
+}

package/src/publicAssets.js

@@ -5,6 +5,12 @@ import { paginatedArchivePaths } from './page-pagination.js';
 import { normalizeDocumentPath, standaloneDemoPaths } from './standalone-demo-url.js';
 import { needsDefaultSocialPreviewImage, publicSocialPreviewPages } from './socialPreviewImages.js';
 
+/** Adapters that write `_redirects` into the build output, by adapter name. */
+const REDIRECTS_FILE_HOSTS = new Map([
+  ['netlify', 'Netlify'],
+  ['cloudflare', 'Cloudflare'],
+]);
+
 export const PUBLIC_ASSETS_DIR = 'public';
 
 /**
@@ -237,8 +243,9 @@ function generatedOutputClaims({ pages, generatedPages, config, emitRedirectFall
   if (config.siteDiscoverability?.robots === true) {
     claims.set('/robots.txt', 'generated Robots File');
   }
-  if (config.adapter?.name === 'netlify' && config.urlLifecycle?.redirects?.length) {
-    claims.set('/_redirects', 'Netlify Redirect output');
+  const redirectsFileHost = REDIRECTS_FILE_HOSTS.get(config.adapter?.name ?? '');
+  if (redirectsFileHost && config.urlLifecycle?.redirects?.length) {
+    claims.set('/_redirects', `${redirectsFileHost} Redirect output`);
   }
 
   return claims;

package/src/resolve.js

@@ -1,5 +1,6 @@
 import path from 'path';
 import { fileURLToPath } from 'url';
+import { resolveProjectBrowserPackage } from './project-package-resolution.js';
 
 /**
  * @param {string} url
@@ -9,7 +10,36 @@ import { fileURLToPath } from 'url';
 export function resolve(url, meta) {
   // get current directory
   const outputFilePath = process.cwd();
-  const resolvedPath = meta.resolve(url);
+  const resolvedPath = resolveProjectBrowserPackage(url) ?? meta.resolve(url);
   const rel = path.relative(outputFilePath, fileURLToPath(resolvedPath));
-  return (process.env.ENVIRONMENT === 'BUILD' ? '/../' : '/') + rel.split(path.sep).join('/');
+  if (process.env.ENVIRONMENT === 'BUILD') {
+    return `/../${toBrowserPath(rel)}`;
+  }
+  return developmentBrowserPath(rel);
+}
+
+/**
+ * Web Dev Server represents files outside its root with a path that records how many parent
+ * directories to traverse. Browsers normalize ordinary `/../` segments before making a request,
+ * so linked packages need this explicit form.
+ *
+ * @param {string} relativePath
+ */
+function developmentBrowserPath(relativePath) {
+  const parts = relativePath.split(path.sep);
+  let outsideRootDepth = 0;
+  while (parts[outsideRootDepth] === '..') {
+    outsideRootDepth += 1;
+  }
+  const browserPath = parts.slice(outsideRootDepth).join('/');
+  return outsideRootDepth
+    ? `/__wds-outside-root__/${outsideRootDepth}/${browserPath}`
+    : `/${browserPath}`;
+}
+
+/**
+ * @param {string} filePath
+ */
+function toBrowserPath(filePath) {
+  return filePath.split(path.sep).join('/');
 }

package/src/ssr.js

@@ -1,6 +1,9 @@
 /** Runs on: imported-js */
 import { render } from '@lit-labs/ssr';
 import { collectResult } from '@lit-labs/ssr/lib/render-result.js';
+import { html } from 'lit';
+
+export { html, render };
 
 /**
  * @param {string | import('lit').TemplateResult} template

package/src/transform.js

@@ -90,10 +90,11 @@ export async function mdToJsSingleDemo(md, demo) {
 
   const code = /** @type {{client: string; server: string}} */ (result.data.code);
 
-  const litImport = hasTopLevelHtmlBinding(code.server) ? '' : "import { html } from 'lit'";
+  const runtimeImport = hasTopLevelHtmlBinding(code.server)
+    ? "import { render } from '@rocket/js/ssr.js';"
+    : "import { html, render } from '@rocket/js/ssr.js';";
   const moduleCode = `
-import {render} from '@lit-labs/ssr';
-${litImport}
+${runtimeImport}
 ${code.server}
 export function contentFn(data, layout) {
   data._clientCode = \`${code.client
@@ -117,12 +118,11 @@ export function contentFn(data, layout) {
  */
 async function makeJsFile(serverCode, clientCode, markdown, headlines) {
   const normalizedServerCode = normalizeLayoutExportBindings(serverCode);
-  const litImport = hasTopLevelHtmlBinding(normalizedServerCode)
-    ? ''
-    : "import { html } from 'lit'";
+  const runtimeImport = hasTopLevelHtmlBinding(normalizedServerCode)
+    ? "import { render } from '@rocket/js/ssr.js';"
+    : "import { html, render } from '@rocket/js/ssr.js';";
   return `
-import {render} from '@lit-labs/ssr';
-${litImport}
+${runtimeImport}
 ${normalizedServerCode}
 export function contentFn(data, defaultLayout) {
   let renderLayout = defaultLayout;
@@ -412,7 +412,13 @@ export function isDemoCodeNode(node) {
  */
 function demoExportName(code) {
   const [, moduleExports] = parseExports(code);
-  const name = moduleExports[0] && (moduleExports[0].ln || moduleExports[0].n);
+  const first = moduleExports[0];
+  const name =
+    first?.type === 'direct'
+      ? first.localName || first.name
+      : first?.type === 'reexport'
+        ? first.name
+        : undefined;
   if (!name) {
     throw new Error(
       'A ```js demo code block must export the demo function, ' +

package/src/wds-plugin.js

@@ -129,7 +129,8 @@ export default (include, exclude, resolverPort, options = {}) => {
           type: rocketIconRuntime.type,
         };
       }
-      const iconAsset = iconAssetStore.get(context.path);
+      const iconAsset =
+        iconAssetStore.get(context.path) ?? (await iconAssetStore.getWebAwesomeIcon(context.path));
       if (iconAsset) {
         return {
           body: iconAsset.svg,