@tinvar/renderer 0.4.2 → 0.4.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tinvar/renderer",
-  "version": "0.4.2",
+  "version": "0.4.6",
   "license": "MIT",
   "files": [
     "src",

package/src/dev-app.js

@@ -15,6 +15,24 @@ export function useDevEntry(loader) {
   load = loader;
 }
 
+/** @type {() => string} */
+let head = () => '';
+
+/** Sets what the dev server adds to every document's head (ADR 0179). */
+export function useDevHead(markup) {
+  head = markup;
+}
+
+/**
+ * What the renderer adds before each document's `</head>` in dev: the link
+ * to StyleX's dev stylesheet, so a page is styled from its first paint
+ * rather than once its script has run. Asked at each render, since a
+ * restarted dev server may have StyleX where it had none.
+ */
+export function tinvarDevHead() {
+  return head();
+}
+
 async function entry() {
   if (load === null) throw new Error('The dev entry was imported before the dev server started.');
   return load();

package/src/dev-server.js

@@ -19,7 +19,7 @@
 import { createRequire } from 'node:module';
 import { existsSync, mkdirSync, renameSync, statSync, writeFileSync } from 'node:fs';
 import path from 'node:path';
-import { useDevEntry } from './dev-app.js';
+import { useDevEntry, useDevHead } from './dev-app.js';
 import { assertDevelopment, DevServerRefused } from './dev-guard.js';
 import {
   actionsOf,
@@ -32,6 +32,7 @@ import {
   viewsOf,
 } from './vite.js';
 
+import { styleXDevStyles } from './stylex-dev.js';
 export { assertDevelopment, DevServerRefused, PRODUCTION_MARKERS } from './dev-guard.js';
 
 /** Where the dev server's modules are served from, behind PHP's server. */
@@ -88,6 +89,9 @@ export async function createDevServer({
   let listened = null;
   const restartListening = () => (listened ??= Promise.withResolvers()).promise;
 
+  // StyleX's rules for pages in dev (ADR 0179): served under the base,
+  // taken in by the client entry, and linked from each document's head.
+  const styles = styleXDevStyles(DEV_BASE);
   const vite = await createServer({
     root: appRoot,
     configFile: configFileOf(appRoot),
@@ -97,6 +101,7 @@ export async function createDevServer({
     clearScreen: false,
     ...(logLevel ? { logLevel } : {}),
     plugins: [
+      styles,
       ignoreReplayedChanges(watchedFrom),
       followRestarts(() => {
         const waiting = listened;
@@ -196,6 +201,7 @@ export async function createDevServer({
     throw error;
   }
   useDevEntry(load);
+  useDevHead(() => styles.api.link());
 
   // Loaded once now, so a broken entry fails the start rather than the
   // first page, and the module graph the deferred manifest is read from

package/src/head.js

@@ -448,6 +448,18 @@ export function modulePreloads(document) {
   return [...new Set(out)];
 }
 
+/**
+ * $document, which ends with `</head>`, with $extra just before it.
+ *
+ * @param {string} document
+ * @param {string} extra
+ */
+function withExtra(document, extra) {
+  if (extra === '') return document;
+  const close = asciiLower(document).lastIndexOf('</head>');
+  return close === -1 ? document : document.slice(0, close) + extra + document.slice(close);
+}
+
 /**
  * The HTML stream with its head resolved: held until `</head>` arrives,
  * then sent with the fallbacks written and the duplicates dropped, and
@@ -457,9 +469,11 @@ export function modulePreloads(document) {
  * @param {unknown} head the render frame's `head`
  * @param {(resolved: { preload: string[] }) => void} [onResolved] told, once,
  *        what the resolved head preloads -- for PHP's Link header
+ * @param {string} [extra] markup the renderer adds before `</head>`, its own
+ *        and never a frame's: in dev, the link to StyleX's stylesheet (ADR 0179)
  * @returns {ReadableStream<Uint8Array>}
  */
-export function withHead(html, head, onResolved) {
+export function withHead(html, head, onResolved, extra = '') {
   const fallbacks = fallbackTags(head);
   // What is held, as it came: joined once, when `</head>` is found, and
   // searched only where the newest chunk could finish it -- copying and
@@ -510,7 +524,7 @@ export function withHead(html, head, onResolved) {
 
         const bytes = join();
         const end = windowStart + found;
-        const resolvedHead = resolveHead(decoder.decode(bytes.subarray(0, end)), fallbacks);
+        const resolvedHead = withExtra(resolveHead(decoder.decode(bytes.subarray(0, end)), fallbacks), extra);
         onResolved?.({ preload: modulePreloads(resolvedHead) });
         controller.enqueue(encoder.encode(resolvedHead));
         if (end < bytes.length) controller.enqueue(bytes.subarray(end));

package/src/panel-styles.js

@@ -24,8 +24,9 @@
 // one of nothing, put a page's queries in two frames instead of one, React
 // scheduling its render around the stylesheet. A panel's page links its
 // sheet through `virtual:tinvar/styles`, read from the RSC plugin's assets
-// manifest, which the client build fills in; in dev StyleX hands the browser
-// its CSS itself, and the component renders nothing.
+// manifest, which the client build fills in; in dev the client entry takes
+// what StyleX has compiled into the page (stylex-dev.js), and the component
+// renders nothing.
 
 import { createRequire } from 'node:module';
 import { join } from 'node:path';

package/src/render-session.js

@@ -351,9 +351,17 @@ export class RenderSession {
       // among them until a component's replace them. What the head preloads
       // goes to PHP as a `meta` frame -- the page's client references, for its
       // Link header -- before the first byte of the document does.
-      htmlStream = withHead(htmlStream, frame.head, ({ preload }) => {
-        if (preload.length > 0) this.#send({ t: FRAME.META, preload });
-      });
+      // The dev renderer's app adds its own to the head -- the link to
+      // StyleX's dev stylesheet (ADR 0179); a built app's entry, nothing.
+      const devHead = typeof this.#app.tinvarDevHead === 'function' ? String(this.#app.tinvarDevHead()) : '';
+      htmlStream = withHead(
+        htmlStream,
+        frame.head,
+        ({ preload }) => {
+          if (preload.length > 0) this.#send({ t: FRAME.META, preload });
+        },
+        devHead,
+      );
       return injectRscPayload(htmlStream, rscStream, frame.nonce, frame.page);
     } catch (error) {
       // Both renders are running by now, and neither has a reader: left

package/src/stylex-dev.js

@@ -0,0 +1,171 @@
+// StyleX's rules in a page rendered in dev (ADR 0179).
+//
+// StyleX's Vite plugin compiles each stylex.create() as Vite transforms the
+// module, and in dev hands the browser what it has compiled in two ways:
+// a stylesheet link and a runtime script, both added through Vite's
+// transformIndexHtml. A page here is rendered by the app's rsc and ssr
+// entries, for PHP, and never goes through index.html, so neither was ever
+// added. And the plugin serves that stylesheet at /virtual:stylex.css, off
+// Vite's base, where PHP answers. So no page had a rule of the kit's or the
+// app's in dev, though every element carried its classes.
+//
+// This serves what StyleX has compiled under the dev server's base, which
+// the dev Caddyfile already passes to Vite, and adds to the client entry a
+// module that puts it in a <style> of its own and fetches it again after
+// every update Vite applies, as StyleX's runtime would. The page's policy
+// governs scripts alone, so the element is allowed.
+
+import path from 'node:path';
+import { normalizePath } from 'vite';
+
+/** Where the compiled rules are served, under the dev server's base. */
+export const STYLEX_DEV_CSS = '__tinvar/stylex.css';
+
+/** The attribute that marks the head's link, which the runtime disables once it has the rules. */
+export const STYLEX_DEV_LINK = 'data-tinvar-stylex-dev';
+
+/** The module the client entry imports to take the rules into the page. */
+export const STYLEX_DEV_MODULE = 'virtual:tinvar/stylex-dev';
+
+const RESOLVED = `\0${STYLEX_DEV_MODULE}`;
+
+/**
+ * The plugin the dev server adds to the app's own.
+ *
+ * @param {string} base the dev server's base, `/_vite/`
+ * @returns {import('vite').Plugin}
+ */
+export function styleXDevStyles(base) {
+  /** @type {null | (() => string)} */
+  let collect = null;
+  /** @type {string[]} the client build's inputs, as its config names them */
+  let inputs = [];
+  /** @type {string} */
+  let root = '';
+  /** @type {Promise<Set<string>> | null} the ids Vite resolves them to, once asked */
+  let entries = null;
+
+  return {
+    name: 'tinvar:stylex-dev',
+    apply: 'serve',
+    api: {
+      /** The link that styles a page from its first paint, for its head (ADR 0179). */
+      link: () =>
+        collect === null ? '' : `<link rel="stylesheet" href="${base}${STYLEX_DEV_CSS}" ${STYLEX_DEV_LINK}>`,
+    },
+
+    configResolved(config) {
+      // The app's StyleX plugin: the one that can say what it compiled.
+      const styleX = config.plugins.find(
+        (plugin) => typeof (/** @type {any} */ (plugin).__stylexCollectCss) === 'function',
+      );
+      collect = styleX ? () => /** @type {any} */ (styleX).__stylexCollectCss() ?? '' : null;
+      inputs = clientInputs(config);
+      root = config.root;
+      entries = null;
+    },
+
+    configureServer(server) {
+      if (collect === null) return;
+      const served = `${base}${STYLEX_DEV_CSS}`;
+      server.middlewares.use((req, res, next) => {
+        const url = (req.url ?? '').replace(/[?#].*$/, '');
+        if (url !== served) return next();
+        res.statusCode = 200;
+        res.setHeader('Content-Type', 'text/css; charset=utf-8');
+        res.setHeader('Cache-Control', 'no-store');
+        res.end(collect?.() ?? '');
+      });
+    },
+
+    resolveId(id) {
+      return collect !== null && id === STYLEX_DEV_MODULE ? RESOLVED : null;
+    },
+
+    load(id) {
+      if (id !== RESOLVED) return null;
+      return styleXDevRuntime(`${base}${STYLEX_DEV_CSS}`);
+    },
+
+    async transform(code, id) {
+      if (collect === null || this.environment?.name !== 'client') return null;
+      // Which modules the entries are is Vite's to say: an input may name
+      // one without its extension, or through an alias. Resolved once, as
+      // an import from the app's root would be.
+      const importer = path.join(root, 'index.html');
+      entries ??= Promise.all(inputs.map((input) => this.resolve(input, importer))).then(
+        (resolved) =>
+          new Set(resolved.filter((r) => r != null).map((r) => normalizePath(r.id.replace(/[?#].*$/, '')))),
+      );
+      if (!(await entries).has(normalizePath(id.replace(/[?#].*$/, '')))) return null;
+      // On the entry's first line: its source map's lines stay where they were.
+      return { code: `import ${JSON.stringify(STYLEX_DEV_MODULE)};${code}`, map: null };
+    },
+  };
+}
+
+/**
+ * The client environment's entries, as its build's rollup input names them.
+ *
+ * @param {import('vite').ResolvedConfig} config
+ * @returns {string[]}
+ */
+function clientInputs(config) {
+  const input = /** @type {any} */ (config).environments?.client?.build?.rollupOptions?.input;
+  const named =
+    typeof input === 'string'
+      ? [input]
+      : Array.isArray(input)
+        ? input
+        : input && typeof input === 'object'
+          ? Object.values(input)
+          : [];
+  return named.filter((file) => typeof file === 'string');
+}
+
+/**
+ * The module the browser runs: the rules in a <style> of their own, fetched
+ * again after every update Vite applies, since an edit compiles new ones.
+ * Only the newest request's answer is shown: one edit sets off more than
+ * one fetch, and an older answer arriving last would put back rules from
+ * before it.
+ *
+ * @param {string} url
+ */
+export function styleXDevRuntime(url) {
+  return `const URL = ${JSON.stringify(url)};
+const LINK = ${JSON.stringify(STYLEX_DEV_LINK)};
+const ID = 'tinvar-stylex-dev';
+let last = null;
+let asked = 0;
+function element() {
+  let el = document.getElementById(ID);
+  if (!el) {
+    el = document.createElement('style');
+    el.id = ID;
+    document.head.appendChild(el);
+  }
+  return el;
+}
+async function update() {
+  const request = ++asked;
+  try {
+    const response = await fetch(URL + '?t=' + Date.now(), { cache: 'no-store' });
+    if (!response.ok || request !== asked) return;
+    const css = await response.text();
+    if (request === asked && css !== last) {
+      element().textContent = css;
+      last = css;
+      // The head's link styled the first paint; from here the <style> is
+      // current, and the link would keep rules an edit took out.
+      for (const link of document.querySelectorAll('link[' + LINK + ']')) link.disabled = true;
+    }
+  } catch {}
+}
+update();
+if (import.meta.hot) {
+  import.meta.hot.on('stylex:css-update', update);
+  import.meta.hot.on('vite:afterUpdate', () => setTimeout(update, 180));
+}
+`;
+}