@govtechsg/sgds-web-component 3.30.1-rc.2 → 3.30.1-rc.4

package/custom-elements.json

@@ -32036,7 +32036,7 @@
   "package": {
     "name": "@govtechsg/sgds-web-component",
     "description": "",
-    "version": "3.30.1-rc.2",
+    "version": "3.30.1-rc.4",
     "author": "GovTechSG",
     "license": "MIT"
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@govtechsg/sgds-web-component",
-  "version": "3.30.1-rc.2",
+  "version": "3.30.1-rc.4",
   "description": "",
   "main": "./index.umd.js",
   "module": "./index.js",

package/react/_ssr/index.d.ts

@@ -1 +1 @@
-export { setCSPNonce, getCSPNonce, registerSSRNonce } from '../../utils/ssr-nonce';
+export { setCSPNonce, getCSPNonce } from '../../utils/ssr-nonce';

package/react/_ssr/index.js

@@ -1,2 +1,2 @@
-import { getCSPNonce, registerSSRNonce, setCSPNonce } from "./utils/ssr-nonce.js";
-export { getCSPNonce, registerSSRNonce, setCSPNonce };
+import { getCSPNonce, setCSPNonce } from "./utils/ssr-nonce.js";
+export { getCSPNonce, setCSPNonce };

package/react/_ssr/utils/ssr-nonce.js

@@ -3,50 +3,13 @@ function getCSPNonce() {
 	return globalThis["litNonce"] ?? null;
 }
 /**
-* Patch LitElementRenderer.renderShadow() to inject CSP nonces into
-* DSD <style> tags. Call this ONCE at server startup from instrumentation.ts.
-*
-* This must run before any SSR request is handled. Next.js's
-* instrumentation.ts `register()` hook guarantees this.
-*/
-async function registerSSRNonce() {
-	if (typeof window !== "undefined") return;
-	try {
-		const { LitElementRenderer } = await import("@lit-labs/ssr/lib/lit-element-renderer.js");
-		if (LitElementRenderer._sgdsNoncePatched) return;
-		LitElementRenderer._sgdsNoncePatched = true;
-		const originalRenderShadow = LitElementRenderer.prototype.renderShadow;
-		LitElementRenderer.prototype.renderShadow = function(renderInfo) {
-			const result = originalRenderShadow.call(this, renderInfo);
-			if (!result) return result;
-			const litNonce = globalThis["litNonce"];
-			if (!litNonce) return result;
-			return result.map((item) => {
-				if (typeof item === "string" && item === "<style>") return `<style nonce="${litNonce}">`;
-				return item;
-			});
-		};
-	} catch {}
-}
-/**
 * CSP nonce for Declarative Shadow DOM (DSD) styles.
 *
-* Two functions:
-* - `registerSSRNonce()` — call ONCE at server startup (instrumentation.ts).
-*   Patches LitElementRenderer to respect globalThis.litNonce.
-* - `setCSPNonce()` — call per-request in layout.tsx.
-*   Sets globalThis.litNonce for the current request.
+* Sets globalThis.litNonce — the standard Lit mechanism for CSP nonces.
+* The ssr-nonce-patch.raw.js file reads this value at render time and
+* injects it into DSD <style> tags.
 *
 * @example
-* ```ts
-* // instrumentation.ts
-* import { registerSSRNonce } from '@govtechsg/sgds-web-component/react/ssr';
-*
-* export async function register() {
-*   await registerSSRNonce();
-* }
-* ```
-*
 * ```tsx
 * // app/layout.tsx (server component)
 * import { setCSPNonce } from '@govtechsg/sgds-web-component/react/ssr';
@@ -68,6 +31,6 @@ function setCSPNonce(nonce) {
 	globalThis["litNonce"] = nonce ?? void 0;
 }
 //#endregion
-export { getCSPNonce, registerSSRNonce, setCSPNonce };
+export { getCSPNonce, setCSPNonce };
 
 //# sourceMappingURL=ssr-nonce.js.map

package/react/_ssr/utils/ssr-nonce.js.map

@@ -1 +1 @@
-{"version":3,"file":"ssr-nonce.js","names":[],"sources":["../../../../src/utils/ssr-nonce.ts"],"sourcesContent":["export function getCSPNonce(): string | null {\n  return ((globalThis as Record<string, unknown>)[\"litNonce\"] as string) ?? null;\n}\n\n/**\n * Patch LitElementRenderer.renderShadow() to inject CSP nonces into\n * DSD <style> tags. Call this ONCE at server startup from instrumentation.ts.\n *\n * This must run before any SSR request is handled. Next.js's\n * instrumentation.ts `register()` hook guarantees this.\n */\nexport async function registerSSRNonce(): Promise<void> {\n  if (typeof window !== \"undefined\") return;\n\n  try {\n    const { LitElementRenderer } = await import(\"@lit-labs/ssr/lib/lit-element-renderer.js\");\n\n    // Guard against double-patching\n    if ((LitElementRenderer as unknown as Record<string, unknown>)._sgdsNoncePatched) {\n      return;\n    }\n    (LitElementRenderer as unknown as Record<string, unknown>)._sgdsNoncePatched = true;\n\n    const originalRenderShadow = LitElementRenderer.prototype.renderShadow;\n\n    LitElementRenderer.prototype.renderShadow = function (renderInfo: unknown) {\n      const result = originalRenderShadow.call(this, renderInfo);\n      if (!result) return result;\n\n      const litNonce = (globalThis as Record<string, unknown>)[\"litNonce\"];\n      if (!litNonce) return result;\n\n      return result.map((item: unknown) => {\n        if (typeof item === \"string\" && item === \"<style>\") {\n          return `<style nonce=\"${litNonce}\">`;\n        }\n        return item;\n      });\n    };\n  } catch {\n    // @lit-labs/ssr not available — nonce injection disabled\n  }\n}\n\n/**\n * CSP nonce for Declarative Shadow DOM (DSD) styles.\n *\n * Two functions:\n * - `registerSSRNonce()` — call ONCE at server startup (instrumentation.ts).\n *   Patches LitElementRenderer to respect globalThis.litNonce.\n * - `setCSPNonce()` — call per-request in layout.tsx.\n *   Sets globalThis.litNonce for the current request.\n *\n * @example\n * ```ts\n * // instrumentation.ts\n * import { registerSSRNonce } from '@govtechsg/sgds-web-component/react/ssr';\n *\n * export async function register() {\n *   await registerSSRNonce();\n * }\n * ```\n *\n * ```tsx\n * // app/layout.tsx (server component)\n * import { setCSPNonce } from '@govtechsg/sgds-web-component/react/ssr';\n * import { headers } from 'next/headers';\n *\n * export default async function Layout({ children }) {\n *   const nonce = (await headers()).get('x-nonce');\n *   if (nonce) setCSPNonce(nonce);\n *   return <html><body>{children}</body></html>;\n * }\n * ```\n */\n/**\n * Set the CSP nonce for the current request. Call this in your server\n * component (e.g. layout.tsx) before SGDS components render.\n * This is synchronous — no await needed.\n */\nexport function setCSPNonce(nonce: string | null): void {\n  (globalThis as Record<string, unknown>)[\"litNonce\"] = nonce ?? undefined;\n}\n"],"mappings":";AAAA,SAAgB,cAA6B;CAC3C,OAAS,WAAuC,eAA0B;AAC5E;;;;;;;;AASA,eAAsB,mBAAkC;CACtD,IAAI,OAAO,WAAW,aAAa;CAEnC,IAAI;EACF,MAAM,EAAE,uBAAuB,MAAM,OAAO;EAG5C,IAAK,mBAA0D,mBAC7D;EAEF,mBAA2D,oBAAoB;EAE/E,MAAM,uBAAuB,mBAAmB,UAAU;EAE1D,mBAAmB,UAAU,eAAe,SAAU,YAAqB;GACzE,MAAM,SAAS,qBAAqB,KAAK,MAAM,UAAU;GACzD,IAAI,CAAC,QAAQ,OAAO;GAEpB,MAAM,WAAY,WAAuC;GACzD,IAAI,CAAC,UAAU,OAAO;GAEtB,OAAO,OAAO,KAAK,SAAkB;IACnC,IAAI,OAAO,SAAS,YAAY,SAAS,WACvC,OAAO,iBAAiB,SAAS;IAEnC,OAAO;GACT,CAAC;EACH;CACF,QAAQ,CAER;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA,SAAgB,YAAY,OAA4B;CACtD,WAAwC,cAAc,SAAS,KAAA;AACjE"}
+{"version":3,"file":"ssr-nonce.js","names":[],"sources":["../../../../src/utils/ssr-nonce.ts"],"sourcesContent":["export function getCSPNonce(): string | null {\n  return ((globalThis as Record<string, unknown>)[\"litNonce\"] as string) ?? null;\n}\n\n/**\n * CSP nonce for Declarative Shadow DOM (DSD) styles.\n *\n * Sets globalThis.litNonce — the standard Lit mechanism for CSP nonces.\n * The ssr-nonce-patch.raw.js file reads this value at render time and\n * injects it into DSD <style> tags.\n *\n * @example\n * ```tsx\n * // app/layout.tsx (server component)\n * import { setCSPNonce } from '@govtechsg/sgds-web-component/react/ssr';\n * import { headers } from 'next/headers';\n *\n * export default async function Layout({ children }) {\n *   const nonce = (await headers()).get('x-nonce');\n *   if (nonce) setCSPNonce(nonce);\n *   return <html><body>{children}</body></html>;\n * }\n * ```\n */\n/**\n * Set the CSP nonce for the current request. Call this in your server\n * component (e.g. layout.tsx) before SGDS components render.\n * This is synchronous — no await needed.\n */\nexport function setCSPNonce(nonce: string | null): void {\n  (globalThis as Record<string, unknown>)[\"litNonce\"] = nonce ?? undefined;\n}\n"],"mappings":";AAAA,SAAgB,cAA6B;CAC3C,OAAS,WAAuC,eAA0B;AAC5E;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,SAAgB,YAAY,OAA4B;CACtD,WAAwC,cAAc,SAAS,KAAA;AACjE"}

package/react/utils/ssr-nonce-patch.cjs.js

@@ -1,32 +1 @@
 "use client";
-//#region src/utils/ssr-nonce-patch.ts
-/**
-* Patches @lit-labs/ssr's LitElementRenderer.renderShadow() to respect
-* globalThis.litNonce for CSP nonce injection.
-*
-* Uses new Function("return require")() to get a synchronous require
-* that is invisible to both Rolldown and webpack. Bundlers cannot
-* statically analyze new Function(), so they leave it alone.
-* At runtime in Node.js, it returns the real require function.
-*/
-if (typeof window === "undefined") try {
-	const mod = new Function("return require")()("@lit-labs/ssr/lib/lit-element-renderer.js");
-	const LitElementRenderer = mod.LitElementRenderer || mod.default?.LitElementRenderer;
-	if (LitElementRenderer && !LitElementRenderer._sgdsNoncePatched) {
-		LitElementRenderer._sgdsNoncePatched = true;
-		const originalRenderShadow = LitElementRenderer.prototype.renderShadow;
-		LitElementRenderer.prototype.renderShadow = function(renderInfo) {
-			const result = originalRenderShadow.call(this, renderInfo);
-			if (!result) return result;
-			const nonce = globalThis.litNonce;
-			if (!nonce) return result;
-			return result.map((item) => {
-				if (typeof item === "string" && item === "<style>") return `<style nonce="${nonce}">`;
-				return item;
-			});
-		};
-	}
-} catch {}
-//#endregion
-
-//# sourceMappingURL=ssr-nonce-patch.cjs.js.map

package/react/utils/ssr-nonce-patch.js

@@ -1,32 +1,39 @@
-"use client";
-//#region src/utils/ssr-nonce-patch.ts
 /**
-* Patches @lit-labs/ssr's LitElementRenderer.renderShadow() to respect
-* globalThis.litNonce for CSP nonce injection.
-*
-* Uses new Function("return require")() to get a synchronous require
-* that is invisible to both Rolldown and webpack. Bundlers cannot
-* statically analyze new Function(), so they leave it alone.
-* At runtime in Node.js, it returns the real require function.
-*/
-if (typeof window === "undefined") try {
-	const mod = new Function("return require")()("@lit-labs/ssr/lib/lit-element-renderer.js");
-	const LitElementRenderer = mod.LitElementRenderer || mod.default?.LitElementRenderer;
-	if (LitElementRenderer && !LitElementRenderer._sgdsNoncePatched) {
-		LitElementRenderer._sgdsNoncePatched = true;
-		const originalRenderShadow = LitElementRenderer.prototype.renderShadow;
-		LitElementRenderer.prototype.renderShadow = function(renderInfo) {
-			const result = originalRenderShadow.call(this, renderInfo);
-			if (!result) return result;
-			const nonce = globalThis.litNonce;
-			if (!nonce) return result;
-			return result.map((item) => {
-				if (typeof item === "string" && item === "<style>") return `<style nonce="${nonce}">`;
-				return item;
-			});
-		};
-	}
-} catch {}
-//#endregion
+ * Patches @lit-labs/ssr's LitElementRenderer.renderShadow() to respect
+ * globalThis.litNonce for CSP nonce injection.
+ *
+ * This file is NOT processed by Rolldown — it's copied as-is to lib/.
+ * The bare require() is preserved so webpack resolves it within its own
+ * module system, ensuring we patch the SAME LitElementRenderer instance
+ * that @lit-labs/ssr-react uses during rendering.
+ */
+if (typeof window === "undefined") {
+  try {
+    var mod = require("@lit-labs/ssr/lib/lit-element-renderer.js");
+    var LitElementRenderer =
+      mod.LitElementRenderer || (mod.default && mod.default.LitElementRenderer);
 
-//# sourceMappingURL=ssr-nonce-patch.js.map
+    if (LitElementRenderer && !LitElementRenderer._sgdsNoncePatched) {
+      LitElementRenderer._sgdsNoncePatched = true;
+
+      var originalRenderShadow = LitElementRenderer.prototype.renderShadow;
+
+      LitElementRenderer.prototype.renderShadow = function (renderInfo) {
+        var result = originalRenderShadow.call(this, renderInfo);
+        if (!result) return result;
+
+        var nonce = globalThis.litNonce;
+        if (!nonce) return result;
+
+        return result.map(function (item) {
+          if (typeof item === "string" && item === "<style>") {
+            return '<style nonce="' + nonce + '">';
+          }
+          return item;
+        });
+      };
+    }
+  } catch (e) {
+    // @lit-labs/ssr not available — nonce injection disabled
+  }
+}

package/utils/ssr-nonce-patch.d.ts

@@ -1,9 +1,9 @@
 /**
- * Patches @lit-labs/ssr's LitElementRenderer.renderShadow() to respect
- * globalThis.litNonce for CSP nonce injection.
+ * Placeholder — the actual ssr-nonce-patch is in ssr-nonce-patch.raw.js
+ * which is copied to lib/ by frankBuild.js, bypassing Rolldown.
+ * This preserves bare require() for webpack's module system.
  *
- * Uses new Function("return require")() to get a synchronous require
- * that is invisible to both Rolldown and webpack. Bundlers cannot
- * statically analyze new Function(), so they leave it alone.
- * At runtime in Node.js, it returns the real require function.
+ * The export below prevents Rolldown from tree-shaking this module
+ * when imported from _ssr-init.ts.
  */
+export declare const _ssrNoncePatchLoaded = true;

package/utils/ssr-nonce.d.ts

@@ -1,31 +1,12 @@
 export declare function getCSPNonce(): string | null;
-/**
- * Patch LitElementRenderer.renderShadow() to inject CSP nonces into
- * DSD <style> tags. Call this ONCE at server startup from instrumentation.ts.
- *
- * This must run before any SSR request is handled. Next.js's
- * instrumentation.ts `register()` hook guarantees this.
- */
-export declare function registerSSRNonce(): Promise<void>;
 /**
  * CSP nonce for Declarative Shadow DOM (DSD) styles.
  *
- * Two functions:
- * - `registerSSRNonce()` — call ONCE at server startup (instrumentation.ts).
- *   Patches LitElementRenderer to respect globalThis.litNonce.
- * - `setCSPNonce()` — call per-request in layout.tsx.
- *   Sets globalThis.litNonce for the current request.
+ * Sets globalThis.litNonce — the standard Lit mechanism for CSP nonces.
+ * The ssr-nonce-patch.raw.js file reads this value at render time and
+ * injects it into DSD <style> tags.
  *
  * @example
- * ```ts
- * // instrumentation.ts
- * import { registerSSRNonce } from '@govtechsg/sgds-web-component/react/ssr';
- *
- * export async function register() {
- *   await registerSSRNonce();
- * }
- * ```
- *
  * ```tsx
  * // app/layout.tsx (server component)
  * import { setCSPNonce } from '@govtechsg/sgds-web-component/react/ssr';

package/react/utils/ssr-nonce-patch.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ssr-nonce-patch.cjs.js","names":[],"sources":["../../../src/utils/ssr-nonce-patch.ts"],"sourcesContent":["/**\n * Patches @lit-labs/ssr's LitElementRenderer.renderShadow() to respect\n * globalThis.litNonce for CSP nonce injection.\n *\n * Uses new Function(\"return require\")() to get a synchronous require\n * that is invisible to both Rolldown and webpack. Bundlers cannot\n * statically analyze new Function(), so they leave it alone.\n * At runtime in Node.js, it returns the real require function.\n */\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\n\nif (typeof window === \"undefined\") {\n  try {\n    // new Function hides require from all bundlers — synchronous at runtime\n    const _require = new Function(\"return require\")() as (\n      id: string\n    ) => any;\n    const mod = _require(\"@lit-labs/ssr/lib/lit-element-renderer.js\");\n    const LitElementRenderer =\n      mod.LitElementRenderer || mod.default?.LitElementRenderer;\n\n    if (LitElementRenderer && !LitElementRenderer._sgdsNoncePatched) {\n      LitElementRenderer._sgdsNoncePatched = true;\n\n      const originalRenderShadow =\n        LitElementRenderer.prototype.renderShadow;\n\n      LitElementRenderer.prototype.renderShadow = function (\n        renderInfo: unknown\n      ) {\n        const result = originalRenderShadow.call(this, renderInfo);\n        if (!result) return result;\n\n        const nonce = (globalThis as any).litNonce;\n        if (!nonce) return result;\n\n        return result.map((item: unknown) => {\n          if (typeof item === \"string\" && item === \"<style>\") {\n            return `<style nonce=\"${nonce}\">`;\n          }\n          return item;\n        });\n      };\n    }\n  } catch {\n    // @lit-labs/ssr not available — nonce injection disabled\n  }\n}\n"],"mappings":";;;;;;;;;;;AAYA,IAAI,OAAO,WAAW,aACpB,IAAI;CAKF,MAAM,MAHW,IAAI,SAAS,gBAAgB,CAAC,CAG5B,CAAC,CAAC,2CAA2C;CAChE,MAAM,qBACJ,IAAI,sBAAsB,IAAI,SAAS;CAEzC,IAAI,sBAAsB,CAAC,mBAAmB,mBAAmB;EAC/D,mBAAmB,oBAAoB;EAEvC,MAAM,uBACJ,mBAAmB,UAAU;EAE/B,mBAAmB,UAAU,eAAe,SAC1C,YACA;GACA,MAAM,SAAS,qBAAqB,KAAK,MAAM,UAAU;GACzD,IAAI,CAAC,QAAQ,OAAO;GAEpB,MAAM,QAAS,WAAmB;GAClC,IAAI,CAAC,OAAO,OAAO;GAEnB,OAAO,OAAO,KAAK,SAAkB;IACnC,IAAI,OAAO,SAAS,YAAY,SAAS,WACvC,OAAO,iBAAiB,MAAM;IAEhC,OAAO;GACT,CAAC;EACH;CACF;AACF,QAAQ,CAER"}

package/react/utils/ssr-nonce-patch.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ssr-nonce-patch.js","names":[],"sources":["../../../src/utils/ssr-nonce-patch.ts"],"sourcesContent":["/**\n * Patches @lit-labs/ssr's LitElementRenderer.renderShadow() to respect\n * globalThis.litNonce for CSP nonce injection.\n *\n * Uses new Function(\"return require\")() to get a synchronous require\n * that is invisible to both Rolldown and webpack. Bundlers cannot\n * statically analyze new Function(), so they leave it alone.\n * At runtime in Node.js, it returns the real require function.\n */\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\n\nif (typeof window === \"undefined\") {\n  try {\n    // new Function hides require from all bundlers — synchronous at runtime\n    const _require = new Function(\"return require\")() as (\n      id: string\n    ) => any;\n    const mod = _require(\"@lit-labs/ssr/lib/lit-element-renderer.js\");\n    const LitElementRenderer =\n      mod.LitElementRenderer || mod.default?.LitElementRenderer;\n\n    if (LitElementRenderer && !LitElementRenderer._sgdsNoncePatched) {\n      LitElementRenderer._sgdsNoncePatched = true;\n\n      const originalRenderShadow =\n        LitElementRenderer.prototype.renderShadow;\n\n      LitElementRenderer.prototype.renderShadow = function (\n        renderInfo: unknown\n      ) {\n        const result = originalRenderShadow.call(this, renderInfo);\n        if (!result) return result;\n\n        const nonce = (globalThis as any).litNonce;\n        if (!nonce) return result;\n\n        return result.map((item: unknown) => {\n          if (typeof item === \"string\" && item === \"<style>\") {\n            return `<style nonce=\"${nonce}\">`;\n          }\n          return item;\n        });\n      };\n    }\n  } catch {\n    // @lit-labs/ssr not available — nonce injection disabled\n  }\n}\n"],"mappings":";;;;;;;;;;;AAYA,IAAI,OAAO,WAAW,aACpB,IAAI;CAKF,MAAM,MAHW,IAAI,SAAS,gBAAgB,CAAC,CAG5B,CAAC,CAAC,2CAA2C;CAChE,MAAM,qBACJ,IAAI,sBAAsB,IAAI,SAAS;CAEzC,IAAI,sBAAsB,CAAC,mBAAmB,mBAAmB;EAC/D,mBAAmB,oBAAoB;EAEvC,MAAM,uBACJ,mBAAmB,UAAU;EAE/B,mBAAmB,UAAU,eAAe,SAC1C,YACA;GACA,MAAM,SAAS,qBAAqB,KAAK,MAAM,UAAU;GACzD,IAAI,CAAC,QAAQ,OAAO;GAEpB,MAAM,QAAS,WAAmB;GAClC,IAAI,CAAC,OAAO,OAAO;GAEnB,OAAO,OAAO,KAAK,SAAkB;IACnC,IAAI,OAAO,SAAS,YAAY,SAAS,WACvC,OAAO,iBAAiB,MAAM;IAEhC,OAAO;GACT,CAAC;EACH;CACF;AACF,QAAQ,CAER"}