@tinvar/renderer 0.4.2 → 0.4.5

package/package.json

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

package/src/dev-server.js

@@ -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. */
@@ -97,6 +98,7 @@ export async function createDevServer({
     clearScreen: false,
     ...(logLevel ? { logLevel } : {}),
     plugins: [
+      styleXDevStyles(DEV_BASE),
       ignoreReplayedChanges(watchedFrom),
       followRestarts(() => {
         const waiting = listened;

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/stylex-dev.js

@@ -0,0 +1,159 @@
+// 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 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',
+
+    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 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;
+    }
+  } catch {}
+}
+update();
+if (import.meta.hot) {
+  import.meta.hot.on('stylex:css-update', update);
+  import.meta.hot.on('vite:afterUpdate', () => setTimeout(update, 180));
+}
+`;
+}