@govtechsg/sgds-web-component 3.30.1-rc.3 → 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.3",
+    "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.3",
+  "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/_ssr-init.cjs.js

@@ -1,2 +1,3 @@
 "use client";
+require("./utils/ssr-nonce-patch.cjs.js");
 require("@lit-labs/ssr-react/enable-lit-ssr.js");

package/react/_ssr-init.js

@@ -1,2 +1,3 @@
 "use client";
+import "./utils/ssr-nonce-patch.js";
 import "@lit-labs/ssr-react/enable-lit-ssr.js";

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

@@ -0,0 +1 @@
+"use client";

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

@@ -2,4 +2,8 @@
  * 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.
+ *
+ * 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';