@farm.js/core 0.1.0-beta.22 → 0.1.0-beta.23

package/dist/plugin.cjs

@@ -4152,6 +4152,52 @@ var init_config = __esm({
   }
 });
 
+// src/theme/config.ts
+function resolveFarmThemeConfig(config, basePath = "/") {
+  if (config && "enabled" in config) {
+    return config;
+  }
+  if (!config) {
+    return {
+      enabled: false,
+      default: "system",
+      storageKey: DEFAULT_FARM_THEME_STORAGE_KEY,
+      cookiePath: normalizeCookiePath(basePath)
+    };
+  }
+  const storageKey = config.storageKey?.trim() || DEFAULT_FARM_THEME_STORAGE_KEY;
+  if (!STORAGE_KEY_PATTERN.test(storageKey)) {
+    throw new Error(
+      "theme.storageKey may only contain letters, numbers, dots, underscores, and hyphens."
+    );
+  }
+  const defaultTheme = config.default ?? "system";
+  if (defaultTheme !== "light" && defaultTheme !== "dark" && defaultTheme !== "system") {
+    throw new Error('theme.default must be "light", "dark", or "system".');
+  }
+  return {
+    enabled: true,
+    default: defaultTheme,
+    storageKey,
+    cookiePath: normalizeCookiePath(basePath)
+  };
+}
+function normalizeCookiePath(basePath) {
+  const normalized = `/${basePath}`.replace(/\/{2,}/g, "/");
+  if (normalized === "/") return normalized;
+  return normalized.replace(/\/$/, "");
+}
+var DEFAULT_FARM_THEME_STORAGE_KEY, STORAGE_KEY_PATTERN;
+var init_config2 = __esm({
+  "src/theme/config.ts"() {
+    "use strict";
+    DEFAULT_FARM_THEME_STORAGE_KEY = "farm-theme";
+    STORAGE_KEY_PATTERN = /^[A-Za-z0-9._-]+$/;
+    __name(resolveFarmThemeConfig, "resolveFarmThemeConfig");
+    __name(normalizeCookiePath, "normalizeCookiePath");
+  }
+});
+
 // src/devtools-config.ts
 function resolveFarmDevtoolsConfig(config, mode = "development") {
   if (mode !== "development" || config === false) {
@@ -8934,7 +8980,7 @@ async function resolveDocsConfig(userDocs, options = {}) {
   };
 }
 var import_path9, DOCS_CONFIG_FILENAMES;
-var init_config2 = __esm({
+var init_config3 = __esm({
   "src/config.ts"() {
     "use strict";
     init_integrations();
@@ -8955,6 +9001,7 @@ var init_config2 = __esm({
     init_auth_config();
     init_preload();
     init_security();
+    init_config2();
     init_config_entry();
     __name(getDeployTargetForPreset, "getDeployTargetForPreset");
     DOCS_CONFIG_FILENAMES = [
@@ -9449,7 +9496,7 @@ var init_api = __esm({
   "src/docs/api.ts"() {
     "use strict";
     import_docs2 = require("@farming-labs/docs");
-    init_config2();
+    init_config3();
     init_handler();
     __name(isRecord4, "isRecord");
     __name(isResolvedDocsConfig2, "isResolvedDocsConfig");
@@ -10434,7 +10481,7 @@ var init_devtools = __esm({
   "src/devtools.ts"() {
     "use strict";
     import_node_path14 = __toESM(require("path"));
-    init_config2();
+    init_config3();
     init_cron();
     init_route_runtime();
     __name(normalizePath, "normalizePath");
@@ -16105,6 +16152,16 @@ async function _runWithCurrentRequest(request, fn) {
   return requestStore.run(request, fn);
 }
 __name(_runWithCurrentRequest, "_runWithCurrentRequest");
+function getCurrentRequest() {
+  const request = requestStore.getStore();
+  if (!request) {
+    throw new Error(
+      "No current request is available. getCurrentRequest() can only be used during server rendering."
+    );
+  }
+  return request;
+}
+__name(getCurrentRequest, "getCurrentRequest");
 
 // src/client/router.ts
 var import_react3 = require("react");
@@ -18511,6 +18568,125 @@ function DefaultNotFoundPage(_props) {
 }
 __name(DefaultNotFoundPage, "DefaultNotFoundPage");
 
+// src/theme/server-runtime.ts
+init_config2();
+var THEME_SCRIPT_ID = "farm-theme-script";
+var THEME_STYLE_ID = "farm-theme-style";
+function createFarmThemeDocumentParts(input, basePath = "/", serverTheme) {
+  const config = resolveFarmThemeConfig(input, basePath);
+  if (!config.enabled) return { attributes: "", head: "" };
+  const hydrationTheme = serverTheme ?? config.default;
+  const initialTheme = hydrationTheme === "system" ? "light" : hydrationTheme;
+  const script = createFarmThemeBootstrapScript(config, hydrationTheme);
+  return {
+    attributes: ` data-theme="${initialTheme}"`,
+    head: `<style id="${THEME_STYLE_ID}">:root[data-theme="light"]{color-scheme:light}:root[data-theme="dark"]{color-scheme:dark}</style><script id="${THEME_SCRIPT_ID}">${script}</script>`
+  };
+}
+__name(createFarmThemeDocumentParts, "createFarmThemeDocumentParts");
+function createFarmThemeBootstrapScript(config, serverTheme = config.default) {
+  return `(function(config,serverTheme){
+var isTheme=function(value){return value==="light"||value==="dark"||value==="system";};
+var decode=function(value){try{return decodeURIComponent(value);}catch(_error){return value;}};
+var readCookie=function(){var entries=document.cookie.split(";");for(var index=0;index<entries.length;index++){var entry=entries[index];var separator=entry.indexOf("=");if(separator<0)continue;if(decode(entry.slice(0,separator).trim())===config.storageKey)return decode(entry.slice(separator+1).trim());}};
+var media=window.matchMedia("(prefers-color-scheme: dark)");
+var resolveTheme=function(theme){return theme==="system"?(media.matches?"dark":"light"):theme;};
+var storedTheme=readCookie();
+var preference=isTheme(storedTheme)?storedTheme:config.default;
+var serverSnapshot={theme:serverTheme,resolvedTheme:serverTheme==="system"?undefined:serverTheme,mounted:false};
+var apply=function(){var resolvedTheme=resolveTheme(preference);document.documentElement.dataset.theme=resolvedTheme;var snapshot={theme:preference,resolvedTheme:resolvedTheme,mounted:true};if(window.__FARM_THEME__)window.__FARM_THEME__.snapshot=snapshot;return snapshot;};
+var emit=function(){var snapshot=apply();window.dispatchEvent(new CustomEvent("farm:themechange",{detail:snapshot}));};
+var persist=function(theme){var secure=window.location.protocol==="https:"?"; Secure":"";document.cookie=encodeURIComponent(config.storageKey)+"="+encodeURIComponent(theme)+"; Path="+config.cookiePath+"; Max-Age=31536000; SameSite=Lax"+secure;try{localStorage.setItem(config.storageKey,theme);}catch(_error){}};
+var setTheme=function(theme){if(!isTheme(theme))throw new TypeError("Unknown FARMJS theme: "+String(theme));preference=theme;persist(theme);emit();};
+var initialSnapshot={theme:preference,resolvedTheme:resolveTheme(preference),mounted:true};
+window.__FARM_THEME__={config:config,serverSnapshot:serverSnapshot,snapshot:initialSnapshot,setTheme:setTheme};
+document.documentElement.dataset.theme=initialSnapshot.resolvedTheme;
+var handleSystemChange=function(){if(preference==="system")emit();};
+if(typeof media.addEventListener==="function")media.addEventListener("change",handleSystemChange);else if(typeof media.addListener==="function")media.addListener(handleSystemChange);
+window.addEventListener("storage",function(event){if(event.key!==config.storageKey||!isTheme(event.newValue))return;preference=event.newValue;persist(preference);emit();});
+})(${serializeInlineValue(config)},${serializeInlineValue(serverTheme)});`;
+}
+__name(createFarmThemeBootstrapScript, "createFarmThemeBootstrapScript");
+function serializeInlineValue(value) {
+  return JSON.stringify(value).replace(/</g, "\\u003c").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
+}
+__name(serializeInlineValue, "serializeInlineValue");
+
+// src/theme/bridge.ts
+var FALLBACK_SERVER_SNAPSHOT = Object.freeze({
+  theme: "system",
+  resolvedTheme: void 0,
+  mounted: false
+});
+var FARM_THEME_SERVER_SNAPSHOT_RESOLVER = /* @__PURE__ */ Symbol.for("farm.js.theme.server-snapshot-resolver");
+function _setFarmThemeServerSnapshotResolver(resolver) {
+  globalThis[FARM_THEME_SERVER_SNAPSHOT_RESOLVER] = resolver;
+}
+__name(_setFarmThemeServerSnapshotResolver, "_setFarmThemeServerSnapshotResolver");
+
+// src/theme/server.ts
+init_config2();
+var defaultThemeConfig = resolveFarmThemeConfig(void 0);
+function _setDefaultFarmThemeConfig(config, basePath = "/") {
+  defaultThemeConfig = resolveFarmThemeConfig(config, basePath);
+}
+__name(_setDefaultFarmThemeConfig, "_setDefaultFarmThemeConfig");
+function getTheme(request = getCurrentRequest()) {
+  return readFarmThemePreference(request, defaultThemeConfig);
+}
+__name(getTheme, "getTheme");
+function getThemeSnapshot(request = getCurrentRequest()) {
+  const theme = readFarmThemePreference(request, defaultThemeConfig);
+  return {
+    theme,
+    resolvedTheme: theme === "system" ? void 0 : theme,
+    mounted: false
+  };
+}
+__name(getThemeSnapshot, "getThemeSnapshot");
+function readFarmThemePreference(request, config) {
+  if (!config.enabled) return config.default;
+  const stored = readCookie3(request.headers.get("cookie"), config.storageKey);
+  return isFarmThemePreference(stored) ? stored : config.default;
+}
+__name(readFarmThemePreference, "readFarmThemePreference");
+function readCookie3(cookieHeader, name) {
+  if (!cookieHeader) return void 0;
+  for (const entry of cookieHeader.split(";")) {
+    const separator = entry.indexOf("=");
+    if (separator < 0) continue;
+    const key = decodeCookieValue(entry.slice(0, separator).trim());
+    if (key !== name) continue;
+    return decodeCookieValue(entry.slice(separator + 1).trim());
+  }
+  return void 0;
+}
+__name(readCookie3, "readCookie");
+function decodeCookieValue(value) {
+  try {
+    return decodeURIComponent(value);
+  } catch {
+    return value;
+  }
+}
+__name(decodeCookieValue, "decodeCookieValue");
+function isFarmThemePreference(value) {
+  return value === "light" || value === "dark" || value === "system";
+}
+__name(isFarmThemePreference, "isFarmThemePreference");
+_setFarmThemeServerSnapshotResolver(() => {
+  try {
+    return getThemeSnapshot();
+  } catch {
+    const theme = defaultThemeConfig.default;
+    return {
+      theme,
+      resolvedTheme: theme === "system" ? void 0 : theme,
+      mounted: false
+    };
+  }
+});
+
 // src/server/renderer.ts
 var cachedClerkProvider = null;
 var importRuntimeModule = new Function("specifier", "return import(specifier);");
@@ -18519,10 +18695,10 @@ function hasRequestHeader(req, name) {
   return Array.isArray(value) ? value.length > 0 : Boolean(value);
 }
 __name(hasRequestHeader, "hasRequestHeader");
-function serializeInlineValue(value) {
+function serializeInlineValue2(value) {
   return JSON.stringify(value).replace(/</g, "\\u003c").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
 }
-__name(serializeInlineValue, "serializeInlineValue");
+__name(serializeInlineValue2, "serializeInlineValue");
 function escapeHtmlAttribute2(value) {
   return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
@@ -18616,7 +18792,7 @@ function createDocumentFooter(options) {
 __name(createDocumentFooter, "createDocumentFooter");
 function createDeferredHydrationScript(records) {
   if (records.length === 0) return "";
-  return `<script>window.__FARM_DEFERRED_DATA__=${serializeInlineValue(
+  return `<script>window.__FARM_DEFERRED_DATA__=${serializeInlineValue2(
     snapshotDeferredData(records)
   )};</script>`;
 }
@@ -19757,9 +19933,9 @@ var _ServerRenderer = class _ServerRenderer {
         slots: routeSlotPayload
       });
       const propsScript = `<script>
-window.__FARM_PROPS__ = ${serializeInlineValue(deferredProps.data.page)};
-window.__FARM_ROUTE_SLOTS__ = ${serializeInlineValue(deferredProps.data.slots)};
-window.__FARM_DEPLOYMENT_ID__ = ${serializeInlineValue(deploymentId)};
+window.__FARM_PROPS__ = ${serializeInlineValue2(deferredProps.data.page)};
+window.__FARM_ROUTE_SLOTS__ = ${serializeInlineValue2(deferredProps.data.slots)};
+window.__FARM_DEPLOYMENT_ID__ = ${serializeInlineValue2(deploymentId)};
 window.__FARM_PATH__ = ${JSON.stringify(req.__FARM_ROUTE__ || req.url || "/")};
 window.__FARM_IS_CLIENT__ = ${JSON.stringify(isClientComponent)};
 window.__FARM_PAGE_SHOULD_HYDRATE__ = ${JSON.stringify(
@@ -19777,7 +19953,7 @@ window.__FARM_LOADING_MODULE__ = ${JSON.stringify(
       )};
 window.__FARM_MANIFEST__ = ${JSON.stringify(clientManifest)};
 window.__FARM_INTEGRATION_API_MANIFEST__ = ${JSON.stringify(getRegisteredIntegrationAPIManifest())};
-${getFarmI18nClientSnapshot() ? `window.__FARM_I18N__ = ${serializeInlineValue(getFarmI18nClientSnapshot())};` : ""}
+${getFarmI18nClientSnapshot() ? `window.__FARM_I18N__ = ${serializeInlineValue2(getFarmI18nClientSnapshot())};` : ""}
 </script>`;
       const hydrationClickQueueScript = isClientComponent || req.__FARM_SHOULD_HYDRATE__ === true || req.__FARM_HAS_HYDRATABLE_ROUTE_SLOTS__ === true ? createPreHydrationClickQueueScript() : "";
       const {
@@ -19788,6 +19964,11 @@ ${getFarmI18nClientSnapshot() ? `window.__FARM_I18N__ = ${serializeInlineValue(g
       const i18nSnapshot = getFarmI18nClientSnapshot();
       const i18nAlternateTags = i18nSnapshot ? renderI18nAlternateLinks(req.__FARM_ROUTE__ || req.url || "/", i18nSnapshot) : "";
       const fontHead = renderFarmFontDevHead(this.config.root || process.cwd());
+      const themeDocument = createFarmThemeDocumentParts(
+        this.config.theme,
+        this.config.basePath,
+        getTheme()
+      );
       const streamRoot = import_react5.default.createElement("div", { style: { display: "contents" } }, element);
       const { pipe } = (0, import_server2.renderToPipeableStream)(streamRoot, {
         onShellReady() {
@@ -19801,8 +19982,9 @@ ${getFarmI18nClientSnapshot() ? `window.__FARM_I18N__ = ${serializeInlineValue(g
             console.log(`[FARM STREAM] onShellReady at ${shellReadyMs}ms`);
           }
           const shell = `<!DOCTYPE html>
-<html lang="${escapeHtmlAttribute2(i18nSnapshot?.locale || "en")}"${i18nSnapshot ? ` dir="${i18nSnapshot.direction}"` : ""}>
+<html lang="${escapeHtmlAttribute2(i18nSnapshot?.locale || "en")}"${i18nSnapshot ? ` dir="${i18nSnapshot.direction}"` : ""}${themeDocument.attributes}>
 <head>
+  ${themeDocument.head}
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="farm-deployment-id" content="${escapeHtmlAttribute2(deploymentId)}">
@@ -20004,15 +20186,21 @@ ${getFarmI18nClientSnapshot() ? `window.__FARM_I18N__ = ${serializeInlineValue(g
     const i18nSnapshot = getFarmI18nClientSnapshot();
     const clientScript = isClientComponent ? `  <script type="module" src="/@farm/client.js"></script>` : "";
     const integrationManifestScript = `<script>
-window.__FARM_DEPLOYMENT_ID__ = ${serializeInlineValue(this.getDeploymentId())};
+window.__FARM_DEPLOYMENT_ID__ = ${serializeInlineValue2(this.getDeploymentId())};
 window.__FARM_INTEGRATION_API_MANIFEST__ = ${JSON.stringify(getRegisteredIntegrationAPIManifest())};
-${i18nSnapshot ? `window.__FARM_I18N__ = ${serializeInlineValue(i18nSnapshot)};` : ""}
+${i18nSnapshot ? `window.__FARM_I18N__ = ${serializeInlineValue2(i18nSnapshot)};` : ""}
 </script>`;
     const alternateLinks = i18nSnapshot ? renderI18nAlternateLinks(requestPath, i18nSnapshot) : "";
     const fontHead = renderFarmFontDevHead(this.config.root || process.cwd());
+    const themeDocument = createFarmThemeDocumentParts(
+      this.config.theme,
+      this.config.basePath,
+      getTheme()
+    );
     return `<!DOCTYPE html>
-<html lang="${escapeHtmlAttribute2(i18nSnapshot?.locale || "en")}"${i18nSnapshot ? ` dir="${i18nSnapshot.direction}"` : ""}>
+<html lang="${escapeHtmlAttribute2(i18nSnapshot?.locale || "en")}"${i18nSnapshot ? ` dir="${i18nSnapshot.direction}"` : ""}${themeDocument.attributes}>
 <head>
+  ${themeDocument.head}
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="farm-deployment-id" content="${escapeHtmlAttribute2(this.getDeploymentId())}">
@@ -20059,6 +20247,7 @@ init_config();
 init_auth_config();
 init_preload();
 init_security();
+init_config2();
 var defaultDocsConfig = {
   enabled: false,
   entry: "/docs",
@@ -20072,6 +20261,7 @@ var _FarmApp = class _FarmApp {
   constructor(config = {}, viteServer) {
     this.config = this.normalizeConfig(config);
     configureFarmObservability(this.config.observability);
+    _setDefaultFarmThemeConfig(this.config.theme);
     this.i18nRuntime = createFarmI18nRuntime(this.config.i18n);
     _setDefaultFarmI18nRuntime(this.i18nRuntime);
     this.viteServer = viteServer;
@@ -20130,6 +20320,7 @@ var _FarmApp = class _FarmApp {
       security: resolveFarmSecurityConfig(config.security),
       images: resolveFarmImageConfig(config.images),
       performance: resolveFarmPerformanceConfig(config.performance),
+      theme: resolveFarmThemeConfig(config.theme, config.basePath || "/"),
       i18n: isResolvedI18nConfig(config.i18n) ? config.i18n : resolveFarmI18nConfig(config.i18n, {
         root,
         mode: process.env.NODE_ENV === "production" ? "production" : "development"
@@ -22590,6 +22781,11 @@ var import_node_path9 = __toESM(require("path"));
 // src/vite.ts
 init_fonts();
 init_server_http();
+
+// src/theme/vite.ts
+init_config2();
+
+// src/vite.ts
 var ALL_TYPE_ARTIFACTS = {
   routes: true,
   api: true,
@@ -25958,14 +26154,22 @@ async function renderPage(pageData) {
     if (!doc.documentElement || !doc.body) return false;
 
     resetReactRoots();
+    const activeFarmTheme =
+      window.__FARM_THEME__?.snapshot?.resolvedTheme ||
+      document.documentElement.getAttribute('data-theme');
     Array.from(document.documentElement.attributes).forEach(function(attr) {
+      if (attr.name === 'data-theme') return;
       if (!doc.documentElement.hasAttribute(attr.name)) {
         document.documentElement.removeAttribute(attr.name);
       }
     });
     Array.from(doc.documentElement.attributes).forEach(function(attr) {
+      if (attr.name === 'data-theme') return;
       document.documentElement.setAttribute(attr.name, attr.value);
     });
+    if (activeFarmTheme) {
+      document.documentElement.setAttribute('data-theme', activeFarmTheme);
+    }
 
     document.head.innerHTML = doc.head ? doc.head.innerHTML : '';
     document.body.innerHTML = doc.body.innerHTML;
@@ -25974,6 +26178,7 @@ async function renderPage(pageData) {
 
     setTimeout(function() {
       Array.from(document.querySelectorAll('script')).forEach(function(script) {
+        if (script.id === 'farm-theme-script') return;
         const freshScript = document.createElement('script');
         Array.from(script.attributes).forEach(function(attr) {
           freshScript.setAttribute(attr.name, attr.value);