@rocket/js 0.2.0 → 0.2.1

package/dist-types/exports/ssr.d.ts

@@ -1,2 +1,2 @@
-export { ssrRender } from "../src/ssr.js";
+export { html, render, ssrRender } from "../src/ssr.js";
 //# sourceMappingURL=ssr.d.ts.map

package/dist-types/src/prefer-project-packages-plugin.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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(): import("@web/dev-server-core").Plugin;
+//# sourceMappingURL=prefer-project-packages-plugin.d.ts.map

package/dist-types/src/prefer-project-packages-plugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"prefer-project-packages-plugin.d.ts","sourceRoot":"","sources":["../../src/prefer-project-packages-plugin.js"],"names":[],"mappings":"AAGA;;;;;;GAMG;AACH,+CAFa,OAAO,sBAAsB,EAAE,MAAM,CAsBjD"}

package/dist-types/src/project-package-resolution.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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: string): string | undefined;
+//# sourceMappingURL=project-package-resolution.d.ts.map

package/dist-types/src/project-package-resolution.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"project-package-resolution.d.ts","sourceRoot":"","sources":["../../src/project-package-resolution.js"],"names":[],"mappings":"AAMA;;;;;GAKG;AACH,wDAFW,MAAM,sBAahB"}

package/dist-types/src/resolve.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"resolve.d.ts","sourceRoot":"","sources":["../../src/resolve.js"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,6BAJW,MAAM,QACN,UAAU,GACR,MAAM,CAQlB"}
+{"version":3,"file":"resolve.d.ts","sourceRoot":"","sources":["../../src/resolve.js"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,6BAJW,MAAM,QACN,UAAU,GACR,MAAM,CAWlB"}

package/dist-types/src/ssr.d.ts

@@ -3,4 +3,7 @@
  * @returns {Promise<string>}
  */
 export function ssrRender(template: string | import("lit").TemplateResult): Promise<string>;
+import { html } from 'lit';
+import { render } from '@lit-labs/ssr';
+export { html, render };
 //# sourceMappingURL=ssr.d.ts.map

package/dist-types/src/ssr.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ssr.d.ts","sourceRoot":"","sources":["../../src/ssr.js"],"names":[],"mappings":"AAIA;;;GAGG;AACH,oCAHW,MAAM,GAAG,OAAO,KAAK,EAAE,cAAc,GACnC,OAAO,CAAC,MAAM,CAAC,CAO3B"}
+{"version":3,"file":"ssr.d.ts","sourceRoot":"","sources":["../../src/ssr.js"],"names":[],"mappings":"AAOA;;;GAGG;AACH,oCAHW,MAAM,GAAG,OAAO,KAAK,EAAE,cAAc,GACnC,OAAO,CAAC,MAAM,CAAC,CAO3B;qBAboB,KAAK;uBAFH,eAAe"}

package/dist-types/src/transform.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"transform.d.ts","sourceRoot":"","sources":["../../src/transform.js"],"names":[],"mappings":"AA8BA;;GAEG;AACH,2BAFW,MAAM,mBAoChB;AAED;;;GAGG;AACH,qCAHW,MAAM,QACN,MAAM,mBAqChB;AAqSD;;GAEG;AACH,qCAFW,OAAO,OAAO,EAAE,IAAI,WAI9B"}
+{"version":3,"file":"transform.d.ts","sourceRoot":"","sources":["../../src/transform.js"],"names":[],"mappings":"AA8BA;;GAEG;AACH,2BAFW,MAAM,mBAoChB;AAED;;;GAGG;AACH,qCAHW,MAAM,QACN,MAAM,mBAsChB;AAoSD;;GAEG;AACH,qCAFW,OAAO,OAAO,EAAE,IAAI,WAI9B"}

package/exports/ssr.js

@@ -1 +1 @@
-export { ssrRender } from '../src/ssr.js';
+export { html, render, ssrRender } from '../src/ssr.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocket/js",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "HTML-first static-site metaframework for content sites and Web Component docs.",
   "license": "MIT",
   "type": "module",
@@ -77,6 +77,7 @@
     "bootstrap-icons": "^1.13.1",
     "commander": "^15.0.0",
     "es-module-lexer": "^2.1.0",
+    "import-meta-resolve": "^4.2.0",
     "lit": "^3.3.3",
     "parse5": "^8.0.1",
     "puppeteer-core": "^25.1.0",

package/src/RocketJsDemo.js

@@ -250,7 +250,6 @@ export class RocketJsDemo extends LitElement {
         background-color: #eee;
         width: 100%;
         overflow: hidden;
-        z-index: 0;
       }
 
       #resize {
@@ -280,6 +279,7 @@ export class RocketJsDemo extends LitElement {
         max-width: 100%;
         min-width: min-content;
         background: white;
+        z-index: 0;
       }
 
       #bottom {

package/src/icons.js

@@ -723,7 +723,11 @@ async function iconSourceFiles(source) {
  */
 function packageRoot(packageName) {
   try {
-    return path.dirname(require.resolve(`${packageName}/package.json`, { paths: [process.cwd()] }));
+    return path.dirname(
+      require.resolve(`${packageName}/package.json`, {
+        paths: [process.cwd(), import.meta.dirname],
+      }),
+    );
   } catch (error) {
     throw new Error(`Could not resolve Icon package ${JSON.stringify(packageName)}.`, {
       cause: error,

package/src/main.js

@@ -5,6 +5,7 @@ import customRocketPlugin from './wds-plugin.js';
 import { MessageChannel } from 'node:worker_threads';
 import { customElements } from '@lit-labs/ssr-dom-shim';
 import { readConfig } from './config.js';
+import { preferProjectPackagesPlugin } from './prefer-project-packages-plugin.js';
 
 const configFilePath = process.argv[2] || undefined;
 const startOptions = readStartOptions(process.argv[3]);
@@ -40,6 +41,7 @@ let devServerConfig = {
       defaultIconLibrary: config.defaultIconLibrary,
       watch: startOptions.watch,
     }),
+    preferProjectPackagesPlugin(),
   ],
   open: startOptions.open ?? true,
   nodeResolve: { exportConditions: ['browser'] },

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/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;