@scania/tegel-react 1.49.2-modal-warn-fix-beta.0 → 1.50.0-dev-test-beta.0

package/dist/components/stencil-generated/components.js

@@ -82,7 +82,7 @@ import { TdsTextarea as TdsTextareaElement, defineCustomElement as defineTdsText
 import { TdsToast as TdsToastElement, defineCustomElement as defineTdsToast } from "@scania/tegel/dist/components/tds-toast.js";
 import { TdsToggle as TdsToggleElement, defineCustomElement as defineTdsToggle } from "@scania/tegel/dist/components/tds-toggle.js";
 import { TdsTooltip as TdsTooltipElement, defineCustomElement as defineTdsTooltip } from "@scania/tegel/dist/components/tds-tooltip.js";
-import { createComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from '../../runtime';
 import React from 'react';
 export const TdsAccordion = /*@__PURE__*/ createComponent({
     tagName: 'tds-accordion',

package/dist/runtime.js

@@ -0,0 +1,101 @@
+/**
+ * Custom runtime wrapper for @stencil/react-output-target.
+ *
+ * In JSDOM (vitest / jest), Stencil's lazy-loaded property-to-attribute
+ * reflection never fires, so props set as JS properties via @lit/react's
+ * createComponent are invisible to getAttribute(). This wrapper detects
+ * JSDOM and adds a useLayoutEffect that explicitly syncs primitive props
+ * to DOM attributes. In real browsers, the original component is returned
+ * unchanged — zero runtime cost.
+ */
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { createComponent as litCreateComponent } from '@lit/react';
+import React from 'react';
+// ---------- JSDOM detection ----------
+const isJsdom = typeof navigator !== 'undefined' && /jsdom/i.test(navigator.userAgent);
+// ---------- Attribute helpers ----------
+const reservedProps = new Set(['children', 'localName', 'ref', 'style', 'className']);
+function camelToDash(str) {
+    return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+}
+function syncAttribute(node, name, value) {
+    const attrName = camelToDash(name);
+    if (typeof value === 'string') {
+        node.setAttribute(attrName, value);
+    }
+    else if (typeof value === 'number') {
+        node.setAttribute(attrName, String(value));
+    }
+    else if (typeof value === 'boolean') {
+        if (value) {
+            node.setAttribute(attrName, '');
+        }
+        else {
+            node.removeAttribute(attrName);
+        }
+    }
+    else if (value === undefined || value === null) {
+        node.removeAttribute(attrName);
+    }
+    // Objects, arrays, functions — not serializable, skip.
+}
+export const createComponent = (_a) => {
+    var _b;
+    var { defineCustomElement, tagName, transformTag } = _a, rest = __rest(_a, ["defineCustomElement", "tagName", "transformTag"]);
+    if (defineCustomElement !== undefined) {
+        defineCustomElement();
+    }
+    const resolvedTagName = transformTag ? transformTag(tagName) : tagName;
+    const OriginalComponent = litCreateComponent(Object.assign(Object.assign({}, rest), { tagName: resolvedTagName }));
+    // In real browsers Stencil's proxy handles reflection — return as-is.
+    if (!isJsdom) {
+        return OriginalComponent;
+    }
+    // --- JSDOM wrapper ---
+    const { elementClass, events } = rest;
+    const eventKeys = new Set(Object.keys(events !== null && events !== void 0 ? events : {}));
+    const WrappedComponent = React.forwardRef((props, ref) => {
+        const innerRef = React.useRef(null);
+        // Sync primitive props as DOM attributes after every render.
+        React.useLayoutEffect(() => {
+            const el = innerRef.current;
+            if (!el)
+                return;
+            for (const [key, value] of Object.entries(props)) {
+                if (reservedProps.has(key))
+                    continue;
+                if (eventKeys.has(key))
+                    continue;
+                if (typeof value === 'function')
+                    continue;
+                // Only sync props that belong to the custom element, not generic
+                // HTML attributes (which React already handles).
+                if (key in elementClass.prototype && !(key in HTMLElement.prototype)) {
+                    syncAttribute(el, key, value);
+                }
+            }
+        });
+        const mergedRef = React.useCallback((node) => {
+            innerRef.current = node;
+            if (typeof ref === 'function') {
+                ref(node);
+            }
+            else if (ref) {
+                ref.current = node;
+            }
+        }, [ref]);
+        return React.createElement(OriginalComponent, Object.assign(Object.assign({}, props), { ref: mergedRef }));
+    });
+    WrappedComponent.displayName = (_b = OriginalComponent.displayName) !== null && _b !== void 0 ? _b : elementClass.name;
+    return WrappedComponent;
+};

package/dist/types/runtime.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Custom runtime wrapper for @stencil/react-output-target.
+ *
+ * In JSDOM (vitest / jest), Stencil's lazy-loaded property-to-attribute
+ * reflection never fires, so props set as JS properties via @lit/react's
+ * createComponent are invisible to getAttribute(). This wrapper detects
+ * JSDOM and adds a useLayoutEffect that explicitly syncs primitive props
+ * to DOM attributes. In real browsers, the original component is returned
+ * unchanged — zero runtime cost.
+ */
+import type { Options, EventName } from '@lit/react';
+export type { EventName } from '@lit/react';
+export type { StencilReactComponent } from '@stencil/react-output-target/runtime';
+type EventNames = Record<string, EventName | string>;
+export declare const createComponent: <I extends HTMLElement, E extends EventNames = {}>({ defineCustomElement, tagName, transformTag, ...rest }: Options<I, E> & {
+    defineCustomElement?: () => void;
+    transformTag?: (tag: string) => string;
+}) => any;

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@scania/tegel-react",
-  "version": "1.49.2-modal-warn-fix-beta.0",
+  "version": "1.50.0-dev-test-beta.0",
   "description": "React wrappers for Tegel package",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/types/index.d.ts",
   "scripts": {
     "test": "node ./__tests__/react-library.test.js",
-    "build": "npm run tsc",
+    "build": "node scripts/patch-imports.mjs && npm run tsc",
     "tsc": "tsc -p . --outDir ./dist"
   },
   "files": [
@@ -27,7 +27,7 @@
   },
   "homepage": "https://github.com/scania-digital-design-system/tegel#readme",
   "dependencies": {
-    "@scania/tegel": "1.49.2-modal-warn-fix-beta.0",
+    "@scania/tegel": "1.50.0-dev-test-beta.0",
     "@stencil/react-output-target": "1.3.0"
   },
   "devDependencies": {