@se-studio/core-ui 1.24.2 → 1.24.4

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @se-studio/core-ui
 
+## 1.24.4
+
+### Patch Changes
+
+- 2c479e7: Wrap HtmlComponent customJs in an IIFE so `hcRoot` is per-instance. Two HtmlComponents with scripts on the same page no longer throw `Identifier 'hcRoot' has already been declared`.
+
+## 1.24.3
+
+### Patch Changes
+
+- Updated dependencies [f6a7b89]
+  - @se-studio/core-data-types@1.12.0
+  - @se-studio/contentful-rest-api@1.24.0
+
 ## 1.24.2
 
 ### Patch Changes

package/CMS_INFRASTRUCTURE.md

@@ -144,7 +144,7 @@ export function PageRenderer({ page }) {
 
 ### HtmlComponent entries
 
-Contentful **HTML component** entries (`type: 'HtmlComponent'`) render through `HtmlComponent` inside `CmsContent` and `CmsEmbeddedContent`. Optional config:
+Contentful **HTML component** entries (`type: 'HtmlComponent'`) render through `HtmlComponent` inside `CmsContent` and `CmsEmbeddedContent`. `customJs` runs inside an IIFE with a per-instance `hcRoot` (safe to place more than one scripted HtmlComponent on a page). Optional config:
 
 - **`htmlComponentFullWidthClassName`** — Tailwind (or other) classes applied when the entry has `fullWidth: true`. If unset, a built-in viewport-breakout default is used; override per project to match your grid.
 

package/dist/components/HtmlComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HtmlComponent.d.ts","sourceRoot":"","sources":["../../src/components/HtmlComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAKrE,0FAA0F;AAC1F,eAAO,MAAM,sCAAsC,8DACU,CAAC;AAE9D,MAAM,MAAM,kBAAkB,GAAG,kBAAkB,GAAG;IACpD,mHAAmH;IACnH,iBAAiB,EAAE,MAAM,CAAC;IAC1B,kFAAkF;IAClF,0BAA0B,CAAC,EAAE,MAAM,CAAC;CACrC,CAAC;AAEF;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,EAC5B,EAAE,EACF,OAAO,EACP,SAAS,EACT,QAAQ,EACR,SAAS,EACT,cAAc,EACd,cAAc,EACd,iBAAiB,EACjB,0BAA0B,GAC3B,EAAE,kBAAkB,+BAiCpB"}
+{"version":3,"file":"HtmlComponent.d.ts","sourceRoot":"","sources":["../../src/components/HtmlComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAMrE,0FAA0F;AAC1F,eAAO,MAAM,sCAAsC,8DACU,CAAC;AAE9D,MAAM,MAAM,kBAAkB,GAAG,kBAAkB,GAAG;IACpD,mHAAmH;IACnH,iBAAiB,EAAE,MAAM,CAAC;IAC1B,kFAAkF;IAClF,0BAA0B,CAAC,EAAE,MAAM,CAAC;CACrC,CAAC;AAEF;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,EAC5B,EAAE,EACF,OAAO,EACP,SAAS,EACT,QAAQ,EACR,SAAS,EACT,cAAc,EACd,cAAc,EACd,iBAAiB,EACjB,0BAA0B,GAC3B,EAAE,kBAAkB,+BA6BpB"}

package/dist/components/HtmlComponent.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '../utils/cn';
 import { scopeCss } from '../utils/scopeCss';
+import { wrapHtmlComponentJs } from '../utils/wrapHtmlComponentJs';
 import { HtmlComponentScript } from './HtmlComponentScript';
 /** Default Tailwind breakout when `fullWidth` is true and no renderer override is set. */
 export const defaultHtmlComponentFullWidthClassName = 'relative left-1/2 w-screen max-w-[100vw] -translate-x-1/2';
@@ -17,11 +18,7 @@ export const defaultHtmlComponentFullWidthClassName = 'relative left-1/2 w-scree
 export function HtmlComponent({ id, rawHtml, customCss, customJs, fullWidth, scriptStrategy, loadScriptOnce, flowPositionIndex, fullWidthBreakoutClassName, }) {
     const scopedCss = customCss ? scopeCss(customCss, id) : undefined;
     const scriptId = loadScriptOnce ? `hc-${id}` : `hc-${id}-${flowPositionIndex}`;
-    // Prepend a scoped root variable so authors can write `hcRoot.querySelector(...)` instead of
-    // `document.querySelector('[data-hc-id]')` which would match the first component on the page.
-    const scopedJs = customJs
-        ? `const hcRoot = document.querySelector('[data-hc-id="${id}"]');\n${customJs}`
-        : undefined;
+    const scopedJs = customJs ? wrapHtmlComponentJs(id, customJs) : undefined;
     let breakout;
     if (fullWidth) {
         if (fullWidthBreakoutClassName !== undefined) {

package/dist/components/HtmlComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"HtmlComponent.js","sourceRoot":"","sources":["../../src/components/HtmlComponent.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D,0FAA0F;AAC1F,MAAM,CAAC,MAAM,sCAAsC,GACjD,2DAA2D,CAAC;AAS9D;;;;;;;;;GASG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,EAAE,EACF,OAAO,EACP,SAAS,EACT,QAAQ,EACR,SAAS,EACT,cAAc,EACd,cAAc,EACd,iBAAiB,EACjB,0BAA0B,GACP;IACnB,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAClE,MAAM,QAAQ,GAAG,cAAc,CAAC,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,EAAE,IAAI,iBAAiB,EAAE,CAAC;IAC/E,6FAA6F;IAC7F,8FAA8F;IAC9F,MAAM,QAAQ,GAAG,QAAQ;QACvB,CAAC,CAAC,uDAAuD,EAAE,UAAU,QAAQ,EAAE;QAC/E,CAAC,CAAC,SAAS,CAAC;IAEd,IAAI,QAA4B,CAAC;IACjC,IAAI,SAAS,EAAE,CAAC;QACd,IAAI,0BAA0B,KAAK,SAAS,EAAE,CAAC;YAC7C,MAAM,CAAC,GAAG,0BAA0B,CAAC,IAAI,EAAE,CAAC;YAC5C,QAAQ,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,0BAA0B,CAAC;QAC/D,CAAC;aAAM,CAAC;YACN,QAAQ,GAAG,sCAAsC,CAAC;QACpD,CAAC;IACH,CAAC;IAED,OAAO,CACL,6BAAiB,EAAE,uBAAqB,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,SAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,aACxF,SAAS,IAAI,0BAAQ,SAAS,GAAS,EAExC,cAAK,uBAAuB,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,GAAI,EACpD,QAAQ,IAAI,CACX,KAAC,mBAAmB,IAClB,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,QAAQ,EAAE,QAAQ,GAClB,CACH,IACG,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"HtmlComponent.js","sourceRoot":"","sources":["../../src/components/HtmlComponent.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D,0FAA0F;AAC1F,MAAM,CAAC,MAAM,sCAAsC,GACjD,2DAA2D,CAAC;AAS9D;;;;;;;;;GASG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,EAAE,EACF,OAAO,EACP,SAAS,EACT,QAAQ,EACR,SAAS,EACT,cAAc,EACd,cAAc,EACd,iBAAiB,EACjB,0BAA0B,GACP;IACnB,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAClE,MAAM,QAAQ,GAAG,cAAc,CAAC,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,EAAE,IAAI,iBAAiB,EAAE,CAAC;IAC/E,MAAM,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAE1E,IAAI,QAA4B,CAAC;IACjC,IAAI,SAAS,EAAE,CAAC;QACd,IAAI,0BAA0B,KAAK,SAAS,EAAE,CAAC;YAC7C,MAAM,CAAC,GAAG,0BAA0B,CAAC,IAAI,EAAE,CAAC;YAC5C,QAAQ,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,0BAA0B,CAAC;QAC/D,CAAC;aAAM,CAAC;YACN,QAAQ,GAAG,sCAAsC,CAAC;QACpD,CAAC;IACH,CAAC;IAED,OAAO,CACL,6BAAiB,EAAE,uBAAqB,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,SAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,aACxF,SAAS,IAAI,0BAAQ,SAAS,GAAS,EAExC,cAAK,uBAAuB,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,GAAI,EACpD,QAAQ,IAAI,CACX,KAAC,mBAAmB,IAClB,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,QAAQ,EAAE,QAAQ,GAClB,CACH,IACG,CACP,CAAC;AACJ,CAAC"}

package/dist/utils/wrapHtmlComponentJs.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Wraps HtmlComponent `customJs` so `hcRoot` is function-scoped.
+ *
+ * `@se-studio/core-ui` prepends `const hcRoot = …` so authors can query this
+ * instance. Inline `next/script` payloads on one page share a JS realm, so a
+ * second top-level `const hcRoot` throws and the later script never runs.
+ * An IIFE keeps the documented `hcRoot` name without colliding.
+ */
+export declare function wrapHtmlComponentJs(id: string, customJs: string): string;
+//# sourceMappingURL=wrapHtmlComponentJs.d.ts.map

package/dist/utils/wrapHtmlComponentJs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wrapHtmlComponentJs.d.ts","sourceRoot":"","sources":["../../src/utils/wrapHtmlComponentJs.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAExE"}

package/dist/utils/wrapHtmlComponentJs.js

@@ -0,0 +1,12 @@
+/**
+ * Wraps HtmlComponent `customJs` so `hcRoot` is function-scoped.
+ *
+ * `@se-studio/core-ui` prepends `const hcRoot = …` so authors can query this
+ * instance. Inline `next/script` payloads on one page share a JS realm, so a
+ * second top-level `const hcRoot` throws and the later script never runs.
+ * An IIFE keeps the documented `hcRoot` name without colliding.
+ */
+export function wrapHtmlComponentJs(id, customJs) {
+    return `(function () {\n  const hcRoot = document.querySelector('[data-hc-id="' + ${JSON.stringify(id)} + '"]');\n${customJs}\n})();`;
+}
+//# sourceMappingURL=wrapHtmlComponentJs.js.map

package/dist/utils/wrapHtmlComponentJs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wrapHtmlComponentJs.js","sourceRoot":"","sources":["../../src/utils/wrapHtmlComponentJs.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,MAAM,UAAU,mBAAmB,CAAC,EAAU,EAAE,QAAgB;IAC9D,OAAO,6EAA6E,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,cAAc,QAAQ,SAAS,CAAC;AACxI,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@se-studio/core-ui",
-  "version": "1.24.2",
+  "version": "1.24.4",
   "description": "Shared React UI component library with Tailwind CSS v4 for SE Studio applications",
   "repository": {
     "type": "git",
@@ -84,8 +84,8 @@
     "mustache": "4.2.0",
     "server-only": "0.0.1",
     "tailwind-merge": "^3.6.0",
-    "@se-studio/contentful-rest-api": "1.23.0",
-    "@se-studio/core-data-types": "1.11.0"
+    "@se-studio/contentful-rest-api": "1.24.0",
+    "@se-studio/core-data-types": "1.12.0"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.5.5",