@plitzi/sdk-server 0.38.4 → 0.38.6

package/dist/modules/ssr/prepareRender.js

@@ -9,13 +9,14 @@ import { loadPluginComponents } from "./loadPluginComponents.js";
 import "../../core/previewToken.js";
 import { resolveActionEndpoint, resolveRscEndpoint } from "../../core/services/resolve.js";
 import { createOfflineDataLoader } from "../../helpers/offlineDataLoader.js";
+import { hydrationPayload, spaceDocument } from "../../helpers/hydrationPayload.js";
+import { publishSpaceDocument } from "./spaceDocument.js";
 import { registerExternalPlugins } from "./registerExternalPlugins.js";
 import { reportMissingPlugins } from "./reportMissingPlugins.js";
 import { resolvePageSeo } from "./resolvePageSeo.js";
 import { imagesPathOf } from "../../core/http/stages/images.js";
 import { sdkAssetVersion } from "../../core/sdkAssets.js";
 import { buildServerInfo } from "../../helpers/buildServerInfo.js";
-import { hydrationPayload } from "../../helpers/hydrationPayload.js";
 import { resolveDebugMode } from "../../helpers/resolveDebugMode.js";
 import { flagUserFromSSR, flagValues, resolveFlags } from "@plitzi/sdk-shared/flags";
 import { hasServerElements } from "@plitzi/sdk-shared/schema/serverElements";
@@ -23,6 +24,8 @@ import { debugCookieName } from "@plitzi/sdk-shared/devTools";
 import { themeFromCookies } from "@plitzi/sdk-shared/theme";
 import { paintedKeys, paintedStateFor } from "@plitzi/sdk-shared/state/paintedState";
 import { fontUrlResolver, fontsToHead } from "@plitzi/sdk-shared/style";
+import { pluginDeclarationOf, pluginTypesOf } from "@plitzi/sdk-shared/plugins/declaration";
+import { pageElementTypes } from "@plitzi/sdk-shared/schema/pageElements";
 //#region src/modules/ssr/prepareRender.tsx
 /** Last resort only: used for a page that declares no SEO title and a deployment that supplies none either. */
 var DEFAULT_TITLE = "Plitzi App";
@@ -36,6 +39,14 @@ var declaredTheme = (style) => {
 	const declared = style?.theme?.default;
 	return declared && declared !== "system" ? declared : void 0;
 };
+var declarations = /* @__PURE__ */ new WeakMap();
+var declarationOf = (component) => {
+	const known = declarations.get(component);
+	if (known) return known;
+	const declaration = pluginDeclarationOf(component);
+	declarations.set(component, declaration);
+	return declaration;
+};
 var prepareRender = async (req, config, spaceId, environment, revision, pluginManager, offlineDataCache, metrics, offlineDataOverride) => {
 	const m = (name, fn) => metrics ? metrics.measure(name, fn) : Promise.resolve(fn());
 	const offlineCacheKey = environment !== "main" ? buildOfflineDataCacheKey(spaceId, environment, revision, req.ctx.spaceDeployment?.flagsVersion) : void 0;
@@ -84,6 +95,7 @@ var prepareRender = async (req, config, spaceId, environment, revision, pluginMa
 	const version = config.assetVersion ?? sdkAssetVersion();
 	const v = version ? `?v=${version}` : "";
 	const sdkDevToolsStylePath = `/sdk-assets/plitzi-sdk-devtools.css${v}`;
+	const sdkIconsStylePath = `/sdk-assets/plitzi-sdk-icons.css${v}`;
 	/**
 	* Two facts, and they have to leave this server separately.
 	*
@@ -147,12 +159,20 @@ var prepareRender = async (req, config, spaceId, environment, revision, pluginMa
 	* page, so it hydrates with the flags it was drawn with.
 	*/
 	const { server: serverFlags, qa: forcedFlags } = flagOverrides;
+	/**
+	* The space travels beside the page rather than in it, fetched while the scripts are — see `spaceDocument`.
+	*
+	* Not for a draft, which no other process could produce when the fetch reaches it, and not for a deployment's own
+	* template, which was written for the space inline; a page with no script needs no space at all.
+	*/
+	const spaceDocumentPath = offlineData !== void 0 && offlineDataOverride === void 0 && config.templateFn === void 0 && config.ssrOnly !== true ? publishSpaceDocument(spaceId, environment, spaceDocument(offlineData)) : void 0;
 	const offlineDataStr = hydrationPayload(offlineData, {
 		offlineMode: true,
 		environment,
 		renderMode: "raw",
 		server,
 		sdkDevToolsStylePath,
+		sdkIconsStylePath,
 		...theme ? { theme } : {},
 		...paintedState ? { state: paintedState } : {},
 		...clientAnalytics ? { analytics: clientAnalytics } : {},
@@ -160,7 +180,7 @@ var prepareRender = async (req, config, spaceId, environment, revision, pluginMa
 		...actionRuns ? { actionRuns } : {},
 		...serverFlags ? { serverFlags } : {},
 		...forcedFlags ? { forcedFlags } : {}
-	});
+	}, { apart: spaceDocumentPath !== void 0 });
 	const pluginNames = req.ctx.spaceDeployment?.pluginNames ?? [];
 	const pluginSources = req.ctx.spaceDeployment?.pluginSources;
 	const pluginBaseNames = new Set(pluginNames.map((n) => n.replace(/@[^@]*$/, "")));
@@ -178,10 +198,29 @@ var prepareRender = async (req, config, spaceId, environment, revision, pluginMa
 	const entries = allPluginNames.length > 0 ? await pluginManager.getEntries(allPluginNames) : [];
 	const pluginComponents = await m("plugins", () => loadPluginComponents(entries, pluginManager.getComponents()));
 	reportMissingPlugins(spaceId, schema, /* @__PURE__ */ new Set([...Object.keys(pluginComponents), ...entries.map((entry) => entry.keyName)]));
-	const templatePlugins = (entries.length > 0 ? entries : req.ctx.spaceDeployment?.templateProps?.plugins)?.map((entry) => ({
-		...entry,
-		ssr: entry.keyName in pluginComponents
-	}));
+	const templateEntries = entries.length > 0 ? entries : req.ctx.spaceDeployment?.templateProps?.plugins;
+	/**
+	* The plugins this page draws none of: the browser is sent what they declare, and loads one when a page that draws
+	* it is opened. Their code is what the first paint waited on — a page of the website downloaded the builder's.
+	*
+	* Only one the server holds the component of can wait, since its declaration is read from it; a page matched to
+	* nothing, which cannot say what it draws, waits for none.
+	*/
+	const pageTypes = schema !== void 0 && pageMatch !== void 0 ? pageElementTypes(schema, pageMatch.pageId) : void 0;
+	const deferredOf = (entry) => {
+		const plugin = pageTypes && entry.js ? pluginComponents[entry.keyName] : void 0;
+		if (!plugin) return;
+		const declaration = declarationOf(plugin.component);
+		return pluginTypesOf(entry.keyName, declaration).some((type) => pageTypes?.has(type)) ? void 0 : declaration;
+	};
+	const templatePlugins = templateEntries?.map((entry) => {
+		const deferred = deferredOf(entry);
+		return {
+			...entry,
+			ssr: entry.keyName in pluginComponents,
+			...deferred ? { deferred } : {}
+		};
+	});
 	const vendorJs = (debugAuthorized ? "/sdk-assets/plitzi-sdk-dev-vendor.js" : "/sdk-assets/plitzi-sdk-vendor.js") + v;
 	return {
 		componentProps: {
@@ -191,6 +230,7 @@ var prepareRender = async (req, config, spaceId, environment, revision, pluginMa
 			environment: req.ctx.spaceDeployment?.environment ?? environment,
 			debugMode: debugRendered,
 			sdkDevToolsStylePath,
+			sdkIconsStylePath,
 			overQuota,
 			theme,
 			...paintedState ? { state: paintedState } : {},
@@ -202,6 +242,8 @@ var prepareRender = async (req, config, spaceId, environment, revision, pluginMa
 			title: DEFAULT_TITLE,
 			jsPath: `/sdk-assets/plitzi-sdk.js${v}`,
 			cssPath: `/sdk-assets/plitzi-sdk.css${v}`,
+			iconsCssPath: sdkIconsStylePath,
+			spaceDocumentPath,
 			react: vendorJs,
 			reactJsx: vendorJs,
 			reactDom: vendorJs,

package/dist/modules/ssr/spaceDocument.d.ts

@@ -0,0 +1,25 @@
+import { TtlCache } from '../../helpers/cache';
+import { SpaceDocument } from '../../helpers/hydrationPayload';
+import { Environment, SSRPageServerConfig, SSRRequest, SSRResponseHelpers } from '@plitzi/sdk-shared';
+/**
+ * The whole space as a resource of its own, beside the page rather than inside it.
+ *
+ * Embedded, it was most of every document — megabytes of a big space, before the first word of the page — and it was
+ * downloaded again on every page and every visit. Apart, the page arrives at the size of what it shows, and the space
+ * is fetched while the scripts are, once: its address is its content's hash, so it is kept until it changes.
+ *
+ * It is still the whole space: the server draws the first page, and every page after it is the browser's, with no
+ * server to ask.
+ */
+export declare const SPACE_DOCUMENT_PATH = "/_plitzi/space/";
+/** Where the page fetches `document` from — and the promise that this process can answer it. */
+export declare const publishSpaceDocument: (spaceId: number, environment: Environment, document: SpaceDocument) => string;
+/**
+ * Answers `/_plitzi/space/<hash>.json` for the space this host serves, behind the same gates as its pages.
+ *
+ * Every page of a space already carried all of it, so whoever may open one page may read this. A hash this process
+ * did not just publish is looked up from the space as it is now: the same text when another process published it,
+ * or the space as it changed since — answered all the same, since it is what the page will find on its next load,
+ * but not to be kept under a name that is not its own.
+ */
+export declare const handleSpaceDocument: (req: SSRRequest, res: SSRResponseHelpers, config: SSRPageServerConfig, offlineDataCache?: TtlCache<string>) => Promise<void>;

package/dist/modules/ssr/spaceDocument.js

@@ -0,0 +1,72 @@
+import { buildOfflineDataCacheKey } from "../../helpers/cache/keys.js";
+import { spaceDocument } from "../../helpers/hydrationPayload.js";
+//#region src/modules/ssr/spaceDocument.ts
+/**
+* The whole space as a resource of its own, beside the page rather than inside it.
+*
+* Embedded, it was most of every document — megabytes of a big space, before the first word of the page — and it was
+* downloaded again on every page and every visit. Apart, the page arrives at the size of what it shows, and the space
+* is fetched while the scripts are, once: its address is its content's hash, so it is kept until it changes.
+*
+* It is still the whole space: the server draws the first page, and every page after it is the browser's, with no
+* server to ask.
+*/
+var SPACE_DOCUMENT_PATH = "/_plitzi/space/";
+var DOCUMENT_PATH = /^\/_plitzi\/space\/([\w-]{1,64})\.json$/;
+/**
+* The documents this process just put in a page, so the request that follows is answered without reading the space
+* again. Bounded: a document is megabytes, and only the latest of each space is ever asked for twice.
+*/
+var RECENT = 8;
+var recent = /* @__PURE__ */ new Map();
+var recentKey = (spaceId, environment, hash) => `${String(spaceId)}|${environment}|${hash}`;
+/** Where the page fetches `document` from — and the promise that this process can answer it. */
+var publishSpaceDocument = (spaceId, environment, document) => {
+	const key = recentKey(spaceId, environment, document.hash);
+	recent.delete(key);
+	recent.set(key, document.json);
+	for (const oldest of recent.keys()) {
+		if (recent.size <= RECENT) break;
+		recent.delete(oldest);
+	}
+	return `${SPACE_DOCUMENT_PATH}${document.hash}.json`;
+};
+/**
+* Answers `/_plitzi/space/<hash>.json` for the space this host serves, behind the same gates as its pages.
+*
+* Every page of a space already carried all of it, so whoever may open one page may read this. A hash this process
+* did not just publish is looked up from the space as it is now: the same text when another process published it,
+* or the space as it changed since — answered all the same, since it is what the page will find on its next load,
+* but not to be kept under a name that is not its own.
+*/
+var handleSpaceDocument = async (req, res, config, offlineDataCache) => {
+	const hash = DOCUMENT_PATH.exec(req.path)?.[1];
+	const { environment = "main", revision = 0, flagsVersion } = req.ctx.spaceDeployment ?? {};
+	const spaceId = req.ctx.spaceDeployment?.spaceId ?? 1;
+	if (!hash) {
+		res.setStatus(404);
+		res.end();
+		return;
+	}
+	let json = recent.get(recentKey(spaceId, environment, hash));
+	let current = json !== void 0;
+	if (json === void 0) {
+		const cacheKey = environment !== "main" ? buildOfflineDataCacheKey(spaceId, environment, revision, flagsVersion) : void 0;
+		const cached = cacheKey ? offlineDataCache?.get(cacheKey) : void 0;
+		const offlineData = cached ? JSON.parse(cached) : await config.adapters.getOfflineData(spaceId, environment, revision);
+		if (!offlineData) {
+			res.setStatus(404);
+			res.end();
+			return;
+		}
+		const document = spaceDocument(offlineData);
+		publishSpaceDocument(spaceId, environment, document);
+		json = document.json;
+		current = document.hash === hash;
+	}
+	res.setHeader("Content-Type", "application/json; charset=utf-8");
+	res.setHeader("Cache-Control", current ? `${req.ctx.user ? "private" : "public"}, max-age=31536000, immutable` : "no-store");
+	res.send(json);
+};
+//#endregion
+export { SPACE_DOCUMENT_PATH, handleSpaceDocument, publishSpaceDocument };

package/dist/modules/ssr/spaceDocument.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/modules/ssr/testing/offlineData.d.ts

@@ -0,0 +1,5 @@
+import { OfflineDataRaw, Schema } from '@plitzi/sdk-shared';
+/** A space of one empty page at `/` — what a test's page server renders when the page is not what it tests. */
+export declare const oneEmptyPage: Schema;
+/** The documents a page server is started with: `schema`, unstyled. */
+export declare const offlineDataOf: (schema?: Schema) => OfflineDataRaw;

package/dist/modules/ssr/views/template.ejs

@@ -34,10 +34,10 @@
 
     <%
       /*
-        Two origins the document reaches for whatever the space declares: the icon font below, and the favicon.
-        Named here so the space's own fonts can skip whichever of them it would otherwise ask for twice.
+        The one origin the document reaches for whatever the space declares: the favicon's. Named here so the space's
+        own fonts can skip it rather than ask for it twice. A font host is preconnected only when the space uses one.
       */
-      const staticOrigins = ['https://fonts.googleapis.com', 'https://fonts.gstatic.com', 'https://cdn.plitzi.com'];
+      const staticOrigins = ['https://cdn.plitzi.com'];
     %>
     <% for (const origin of staticOrigins) { %>
     <link rel="preconnect" href="<%= origin %>" crossorigin />
@@ -94,26 +94,25 @@
     </script>
     <% } %>
 
-    <link
-      rel="preload"
-      href="https://fonts.googleapis.com/icon?family=Material+Icons"
-      as="style"
-      onload="this.onload=null;this.rel='stylesheet';"
-    />
-    <noscript>
-      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
-    </noscript>
-
+    <%# The space, fetched beside the page while the scripts load, rather than carried in it. %>
+    <% if (locals.spaceDocumentPath) { %>
+    <link id="plitzi-space" href="<%= locals.spaceDocumentPath %>" rel="preload" as="fetch" crossorigin="anonymous" />
+    <% } %>
     <link href="<%= locals.cssPath || '' %>" rel="preload" as="style" />
     <link href="<%= locals.cssPath || '' %>" rel="stylesheet" />
+    <%# The icons are a sheet of their own, after the SDK's: their fonts are files fetched only for a style a page uses. %>
+    <% if (locals.iconsCssPath) { %>
+    <link href="<%= locals.iconsCssPath %>" rel="stylesheet" />
+    <% } %>
     <% if (locals.builderCssPath) { %>
     <link href="<%= locals.builderCssPath %>" rel="preload" as="style" />
     <link href="<%= locals.builderCssPath %>" rel="stylesheet" />
     <% } %>
     <% if (locals.plugins && locals.plugins.length > 0) { %>
-    <% for (const plugin of locals.plugins) { if (plugin.css) { %>
+    <%# A deferred plugin's stylesheet is loaded with its code, by the page that draws it. %>
+    <% for (const plugin of locals.plugins) { if (plugin.css && !plugin.deferred) { %>
     <link href="<%= plugin.css %>" rel="preload" as="style" />
-    <link href="<%= plugin.css %>" rel="stylesheet" />
+    <link href="<%= plugin.css %>" rel="stylesheet" data-plitzi-plugin="<%= plugin.keyName %>" />
     <% } } %>
     <% } %>
   </head>
@@ -121,6 +120,59 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="plitzi" class="plitzi-root-container"><%- locals.html || '' %></div>
+    <%# An arrival that waits to be seen (`motion: { on: 'view' }`) is held at its start until the SDK sees it — after
+        its scripts, the space and hydration. One on screen as the page arrives would be content nobody can see until
+        then: seen here instead, as soon as it is parsed. Named by where it is rather than by `data-id`, which every
+        instance of a component shares; and in a sheet of its own rather than the element's `data-motion-seen`, which
+        React would hydrate as markup the server never drew. The sheet goes once the SDK has seen what it showed. %>
+    <script>
+      (() => {
+        const root = document.getElementById('plitzi');
+        const held = root.querySelectorAll('[data-motion-on="view"]:not([data-motion-seen])');
+        if (held.length === 0 || typeof IntersectionObserver !== 'function') {
+          return;
+        }
+
+        const sheet = document.head.appendChild(document.createElement('style'));
+        const shown = [];
+        const pathOf = element => {
+          const steps = [];
+          for (let node = element; node !== root; node = node.parentElement) {
+            steps.unshift(`:nth-child(${[...node.parentElement.children].indexOf(node) + 1})`);
+          }
+
+          return `#plitzi > ${steps.join(' > ')}:not([data-motion-seen])`;
+        };
+        const seen = new IntersectionObserver(entries => {
+          for (const { isIntersecting, target } of entries) {
+            if (isIntersecting) {
+              seen.unobserve(target);
+              shown.push(target);
+              const at = pathOf(target);
+              sheet.append(`${at}[data-motion-enter], ${at}[data-motion-stagger] > * { animation-play-state: running, paused; }\n`);
+            }
+          }
+        });
+        held.forEach(element => seen.observe(element));
+        const offScreen = element => {
+          const { top, bottom } = element.getBoundingClientRect();
+
+          return bottom <= 0 || top >= innerHeight;
+        };
+        const live = new MutationObserver(() => {
+          if (!root.querySelector('[data-hydrated]')) {
+            return;
+          }
+
+          seen.disconnect();
+          if (shown.every(element => !element.isConnected || element.hasAttribute('data-motion-seen') || offScreen(element))) {
+            sheet.remove();
+            live.disconnect();
+          }
+        });
+        live.observe(root, { attributes: true, subtree: true, attributeFilter: ['data-hydrated', 'data-motion-seen'] });
+      })();
+    </script>
     <% if (!locals.ssrOnly) { %>
     <%# The payload is data, so it travels as JSON: parsing it as a JavaScript literal cost the browser several times
         what JSON.parse does, on megabytes of it. Escaped by the server — no `<` reaches this block. %>
@@ -128,21 +180,71 @@
     <script type="module">
       import { render } from '<%= locals.jsPath || '' %>';
       <% const activePlugins = (locals.plugins || []).filter(p => p.js); %>
-      <% for (const plugin of activePlugins) { %>
+      <% const json = value => JSON.stringify(value ?? null).replace(/</g, '\\u003c'); %>
+      <% for (const plugin of activePlugins) { if (!plugin.deferred) { %>
       import { default as <%= plugin.varName %> } from '<%= plugin.js %>';
-      <% } %>
-      const __plitziPlugins = { <%- activePlugins.map(p => `'${p.keyName}': {component: ${p.varName}, props: ${JSON.stringify(p.props)}, clientOnly: ${p.ssr === false}}`).join(', ') %> };
+      <% } } %>
+      <%# What the page draws, imported before it hydrates; the rest declared, and imported when a page draws it. %>
+      const __plitziPlugins = { <%- activePlugins.map(p => p.deferred
+        ? `'${p.keyName}': {load: () => import('${p.js}'), css: ${json(p.css)}, declaration: ${json(p.deferred)}, props: ${json(p.props)}, clientOnly: ${p.ssr === false}}`
+        : `'${p.keyName}': {component: ${p.varName}, props: ${json(p.props)}, clientOnly: ${p.ssr === false}}`).join(', ') %> };
       const __plitziData = document.getElementById('plitzi-ssr-data');
       const __plitziParams = JSON.parse(__plitziData.textContent);
       // Read once: the page would otherwise hold the space twice, as this text and as what it was parsed into.
       __plitziData.remove();
+      const __plitziSpace = document.getElementById('plitzi-space');
+      if (__plitziSpace) {
+        const response = await fetch(__plitziSpace.href);
+        if (!response.ok) {
+          throw new Error(`[plitzi] The space could not be loaded (${response.status}): the page stays as the server drew it.`);
+        }
+
+        __plitziParams.offlineData = await response.json();
+      }
+      <% if (locals.devReload) { %>
+      const __plitziApp = render('plitzi', __plitziParams, __plitziPlugins, <%= locals.debugMode ? true : false %>, true, { hotPlugins: true });
+      // A plugin the server built again: its new bundle swapped in where it is drawn and its stylesheet pointed at the
+      // new one — the rest of the page stays as it is. One that cannot be swapped in place loads the page again.
+      window.__plitziDevEvents?.addEventListener('plugin', async event => {
+        const { key, js, css } = JSON.parse(event.data);
+        const sheet = css && [...document.querySelectorAll('link[data-plitzi-plugin]')].find(link => link.dataset.plitziPlugin === key);
+        if (sheet) {
+          sheet.href = css;
+        }
+
+        try {
+          const { default: component } = await import(js);
+          if (!__plitziApp?.replacePlugin(key, component)) {
+            location.reload();
+          }
+        } catch (error) {
+          console.error(`[plitzi] plugin "${key}" could not be loaded again`, error);
+        }
+      });
+      <% } else { %>
       render('plitzi', __plitziParams, __plitziPlugins, <%= locals.debugMode ? true : false %>, true);
+      <% } %>
     </script>
     <% } %>
     <% if (locals.devReload) { %>
-    <%# Development only: the server says the space changed (re-authored, `reloadPages`), and the page loads again. %>
+    <%# Development only: the server says the space changed (re-authored, `reloadPages`), and the page loads again — and
+        so does a page that reconnects to a server that restarted (a different `boot`): its code changed under it. %>
     <script>
-      new EventSource('/__plitzi/reload').addEventListener('reload', () => location.reload());
+      (() => {
+        const events = new EventSource('/__plitzi/reload');
+        // The page's module script listens here too, for a plugin built again (`plugin`).
+        window.__plitziDevEvents = events;
+        let boot;
+        events.addEventListener('hello', event => {
+          const next = JSON.parse(event.data).boot;
+          if (boot && boot !== next) {
+            location.reload();
+          }
+
+          boot = next;
+        });
+        events.addEventListener('reload', () => location.reload());
+      })();
     </script>
     <% } %>
   </body>

package/dist/plugins/compile.js

@@ -2,6 +2,8 @@ import { writeFileAtomic } from "../helpers/atomicFile.js";
 import path from "node:path";
 import esbuild from "esbuild";
 import fs from "node:fs/promises";
+import { pluginAssetLoaders, pluginImportQueries } from "@plitzi/sdk-shared/plugins/bundle";
+import { inPluginLayer } from "@plitzi/sdk-shared/style/cssLayers";
 //#region src/plugins/compile.ts
 var EXTERNAL = [
 	"react",
@@ -12,24 +14,6 @@ var EXTERNAL = [
 	"@plitzi/sdk-shared"
 ];
 /**
-* Assets a stylesheet drags in with it, inlined.
-*
-* A plugin that imports a library's CSS — a map, a date picker, an editor — imports its images too, and without a
-* loader for them the build fails on a file the author never wrote. Inlined as data URIs rather than emitted
-* beside the bundle, because the plugin is served as exactly two files and a third that nothing routes to would
-* be a stylesheet with broken references in it.
-*/
-var ASSET_LOADERS = {
-	".png": "dataurl",
-	".jpg": "dataurl",
-	".jpeg": "dataurl",
-	".gif": "dataurl",
-	".svg": "dataurl",
-	".webp": "dataurl",
-	".woff": "dataurl",
-	".woff2": "dataurl"
-};
-/**
 * Everything that went into the bundle, so a server can tell when any of it has moved on: a dev server as it is
 * edited, and any server — a deployment — when it finds a bundle built from something else (its content digest).
 *
@@ -40,14 +24,15 @@ var ASSET_LOADERS = {
 * Dependencies are left out. They change when something is installed, which is not an edit anybody is waiting to see,
 * and stat'ing a few thousand files on every cache miss to find that out is a real cost for no answer.
 */
-var sourceInputs = (metafile) => metafile ? Object.keys(metafile.inputs).filter((input) => !input.includes("node_modules")).map((input) => path.resolve(input)) : [];
+var sourceInputs = (metafile) => metafile ? Object.keys(metafile.inputs).filter((input) => !input.includes("node_modules")).map((input) => path.resolve(input.replace(/^plitzi-(raw|inline):/, ""))) : [];
 var compilePlugin = async (jsPath, outDir, devMode = false) => {
 	const result = await esbuild.build({
 		entryPoints: [jsPath],
 		bundle: true,
 		format: "esm",
 		external: EXTERNAL,
-		loader: ASSET_LOADERS,
+		loader: pluginAssetLoaders(),
+		plugins: [pluginImportQueries()],
 		outdir: outDir,
 		entryNames: "index",
 		jsx: "automatic",
@@ -58,7 +43,7 @@ var compilePlugin = async (jsPath, outDir, devMode = false) => {
 		write: false
 	});
 	await fs.mkdir(outDir, { recursive: true });
-	await Promise.all(result.outputFiles.map((output) => writeFileAtomic(output.path, output.contents)));
+	await Promise.all(result.outputFiles.map((output) => writeFileAtomic(output.path, output.path.endsWith(".css") ? inPluginLayer(output.text) : output.contents)));
 	return {
 		hasCSS: result.outputFiles.some((output) => path.basename(output.path) === "index.css"),
 		inputs: sourceInputs(result.metafile)

package/dist/plugins/compile.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/plugins/copy.d.ts

@@ -1 +1,6 @@
 export declare const copyPlugin: (src: string, destDir: string, filename: string) => Promise<void>;
+/**
+ * A plugin's stylesheet, copied or downloaded into the cache in the plugins' cascade layer — below the space's styles,
+ * as a compiled one is — whatever the file it came from says.
+ */
+export declare const copyPluginStylesheet: (src: string, destDir: string) => Promise<void>;

package/dist/plugins/copy.js

@@ -1,5 +1,7 @@
 import { copyFileAtomic, writeFileAtomic } from "../helpers/atomicFile.js";
 import path from "node:path";
+import fs from "node:fs/promises";
+import { inPluginLayer } from "@plitzi/sdk-shared/style/cssLayers";
 //#region src/plugins/copy.ts
 var copyPlugin = async (src, destDir, filename) => {
 	const dest = path.join(destDir, filename);
@@ -9,5 +11,18 @@ var copyPlugin = async (src, destDir, filename) => {
 		await writeFileAtomic(dest, await res.text());
 	} else await copyFileAtomic(src, dest);
 };
+/**
+* A plugin's stylesheet, copied or downloaded into the cache in the plugins' cascade layer — below the space's styles,
+* as a compiled one is — whatever the file it came from says.
+*/
+var copyPluginStylesheet = async (src, destDir) => {
+	let css;
+	if (src.startsWith("http://") || src.startsWith("https://")) {
+		const res = await fetch(src);
+		if (!res.ok) throw new Error(`[SSR] Plugin stylesheet fetch failed ${src}: ${res.status}`);
+		css = await res.text();
+	} else css = await fs.readFile(src, "utf8");
+	await writeFileAtomic(path.join(destDir, "index.css"), inPluginLayer(css));
+};
 //#endregion
-export { copyPlugin };
+export { copyPlugin, copyPluginStylesheet };

package/dist/plugins/copy.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/plugins/manager.d.ts

@@ -10,7 +10,20 @@ export declare class PluginManager {
     /** Maps base plugin name → most recently registered effective key (may include @version) */
     private readonly nameIndex;
     private readonly devMode;
+    /** Who is told what each built plugin was built from — a dev server's watcher (`watchPluginSources`). */
+    private readonly sourceListeners;
     constructor(plugins: Record<string, PluginSource>, cacheDir?: string, ttlMs?: number, devMode?: boolean);
+    /**
+     * Tells `listener` the files every built plugin was built from — those built so far, at once, and each one built or
+     * found built from now on. Only a compiled plugin has any: a copied or downloaded one is not this server's source.
+     */
+    onSources(listener: (key: string, inputs: readonly string[]) => void): () => void;
+    /**
+     * Builds a plugin again because its source changed — and again after a build that failed, which `prepare` otherwise
+     * never retries: the edit that fixes a syntax error is exactly the one a dev server must not ignore.
+     */
+    rebuild(name: string): Promise<PluginEntry | null>;
+    private remember;
     hasPlugin(name: string): boolean;
     register(name: string, source: PluginSource): void;
     /**

package/dist/plugins/manager.js

@@ -1,7 +1,7 @@
 import { serverLog } from "../helpers/serverLog.js";
 import { writeFileAtomic } from "../helpers/atomicFile.js";
 import { compilePlugin } from "./compile.js";
-import { copyPlugin } from "./copy.js";
+import { copyPlugin, copyPluginStylesheet } from "./copy.js";
 import { detectAction, isComponentSource } from "./detect.js";
 import { assertPluginSources } from "./validate.js";
 import { createHash } from "node:crypto";
@@ -47,6 +47,8 @@ var PluginManager = class {
 	/** Maps base plugin name → most recently registered effective key (may include @version) */
 	nameIndex = /* @__PURE__ */ new Map();
 	devMode = false;
+	/** Who is told what each built plugin was built from — a dev server's watcher (`watchPluginSources`). */
+	sourceListeners = /* @__PURE__ */ new Set();
 	constructor(plugins, cacheDir, ttlMs, devMode = false) {
 		assertPluginSources(plugins);
 		this.plugins = plugins;
@@ -58,6 +60,36 @@ var PluginManager = class {
 			this.nameIndex.set(baseName, key);
 		}
 	}
+	/**
+	* Tells `listener` the files every built plugin was built from — those built so far, at once, and each one built or
+	* found built from now on. Only a compiled plugin has any: a copied or downloaded one is not this server's source.
+	*/
+	onSources(listener) {
+		this.sourceListeners.add(listener);
+		this.mem.forEach((cached, key) => {
+			if (cached.inputs?.length) listener(key, cached.inputs);
+		});
+		return () => {
+			this.sourceListeners.delete(listener);
+		};
+	}
+	/**
+	* Builds a plugin again because its source changed — and again after a build that failed, which `prepare` otherwise
+	* never retries: the edit that fixes a syntax error is exactly the one a dev server must not ignore.
+	*/
+	async rebuild(name) {
+		const key = this.resolveKey(name) ?? name;
+		this.mem.delete(key);
+		this.failed.delete(key);
+		return this.prepare(key);
+	}
+	remember(key, cached) {
+		this.mem.set(key, cached);
+		const { inputs } = cached;
+		if (inputs?.length) this.sourceListeners.forEach((listener) => {
+			listener(key, inputs);
+		});
+	}
 	hasPlugin(name) {
 		return this.resolveKey(name) !== null;
 	}
@@ -272,7 +304,7 @@ var PluginManager = class {
 					if (await this.fileExists(path.join(this.pluginDir(key), "index.css"))) cssUrl = this.assetUrl(key, "index.css", meta.compiledAt);
 					else if (sourceCss && this.isWebUrl(sourceCss)) cssUrl = sourceCss;
 					const entry = this.toEntry(key, true, cssUrl, source.props, meta.compiledAt);
-					this.mem.set(key, {
+					this.remember(key, {
 						compiledAt: meta.compiledAt,
 						entry,
 						inputs: meta.inputs
@@ -303,7 +335,7 @@ var PluginManager = class {
 				else if (cssPath) {
 					if (this.isWebUrl(cssPath)) cssUrl = cssPath;
 					else {
-						await copyPlugin(cssPath, dir, "index.css");
+						await copyPluginStylesheet(cssPath, dir);
 						cssUrl = `${this.urlPrefix}/${name}/index.css`;
 					}
 				}
@@ -312,12 +344,9 @@ var PluginManager = class {
 				if (!jsRes.ok) throw new Error(`HTTP ${jsRes.status} downloading ${jsPath}`);
 				await writeFileAtomic(path.join(dir, "index.js"), await jsRes.text());
 				if (cssPath) {
-					if (cssPath.startsWith("http://") || cssPath.startsWith("https://")) {
-						const cssRes = await fetch(cssPath);
-						if (!cssRes.ok) throw new Error(`HTTP ${cssRes.status} downloading ${cssPath}`);
-						await writeFileAtomic(path.join(dir, "index.css"), await cssRes.text());
-					} else if (this.isWebUrl(cssPath)) cssUrl = cssPath;
-					else await copyPlugin(cssPath, dir, "index.css");
+					if (cssPath.startsWith("http://") || cssPath.startsWith("https://")) await copyPluginStylesheet(cssPath, dir);
+					else if (this.isWebUrl(cssPath)) cssUrl = cssPath;
+					else await copyPluginStylesheet(cssPath, dir);
 					cssUrl = `${this.urlPrefix}/${name}/index.css`;
 				}
 			} else {
@@ -325,7 +354,7 @@ var PluginManager = class {
 				if (cssPath) {
 					if (this.isWebUrl(cssPath)) cssUrl = cssPath;
 					else {
-						await copyPlugin(cssPath, dir, "index.css");
+						await copyPluginStylesheet(cssPath, dir);
 						cssUrl = `${this.urlPrefix}/${name}/index.css`;
 					}
 				}
@@ -340,7 +369,7 @@ var PluginManager = class {
 			});
 			if (cssUrl?.startsWith(this.urlPrefix)) cssUrl = this.assetUrl(name, "index.css", compiledAt);
 			const entry = this.toEntry(name, true, cssUrl, source.props, compiledAt);
-			this.mem.set(name, {
+			this.remember(name, {
 				compiledAt,
 				entry,
 				inputs: buildInputs