fix(react): use property mapping from component meta

packages/react-output-target/package.json

@@ -16,7 +16,7 @@
     "prepublishOnly": "pnpm run build",
     "build": "vite build && pnpm run build:dts",
     "build:dts": "tsc -p tsconfig.json",
-    "build:tsup": "tsup",
+    "dev": "vite build --watch",
     "version": "pnpm run build",
     "prettier": "prettier \"./src/**/*.{html,ts,tsx,js,jsx}\" --write",
     "release": "np",
@@ -51,7 +51,6 @@
   "gitHead": "a3588e905186a0e86e7f88418fd5b2f9531b55e0",
   "dependencies": {
     "@lit/react": "^1.0.4",
-    "decamelize": "^6.0.0",
     "html-react-parser": "^5.1.10",
     "react-dom": "^18.3.1",
     "ts-morph": "^22.0.0"

packages/react-output-target/src/react-output-target/create-component-wrappers.test.ts

@@ -11,6 +11,7 @@ describe('createComponentWrappers', () => {
         {
           tagName: 'my-component',
           componentClassName: 'MyComponent',
+          properties: [],
           events: [
             {
               originalName: 'my-event',
@@ -62,6 +63,7 @@ export const MyComponent: StencilReactComponent<MyComponentElement, MyComponentE
         {
           tagName: 'my-component',
           componentClassName: 'MyComponent',
+          properties: [],
           events: [
             {
               originalName: 'my-event',
@@ -115,6 +117,7 @@ export default MyComponent;
       components: [
         {
           tagName: 'my-component',
+          properties: [],
           internal: true,
         } as any,
       ],
@@ -162,6 +165,7 @@ export default MyComponent;
         {
           tagName: 'my-component',
           componentClassName: 'MyComponent',
+          properties: [],
           events: [
             {
               originalName: 'my-event',
@@ -226,6 +230,12 @@ export const MyComponent: StencilReactComponent<MyComponentElement, MyComponentE
         {
           tagName: 'my-component',
           componentClassName: 'MyComponent',
+          properties: [{
+            name: 'hasMaxLength',
+            attribute: 'max-length'
+          }, {
+            name: 'links'
+          }],
           events: [
             {
               originalName: 'my-event',
@@ -273,6 +283,7 @@ export const MyComponent: StencilReactComponent<MyComponentElement, MyComponentE
     })
     : /*@__PURE__*/ createSSRComponent<MyComponentElement, MyComponentEvents>({
         tagName: 'my-component',
+        properties: { hasMaxLength: 'max-length' },
         hydrateModule: import('my-package/hydrate')
     });
 

packages/react-output-target/src/react-output-target/create-stencil-react-components.ts

@@ -151,6 +151,15 @@ import type { EventName, StencilReactComponent } from '@stencil/react-output-tar
   })`;
     const serverComponentCall = `/*@__PURE__*/ createSSRComponent<${componentElement}, ${componentEventNamesType}>({
     tagName: '${tagName}',
+    properties: {${component.properties
+      /**
+       * Filter out properties that don't have an attribute.
+       * These are properties with complex types and can't be serialized.
+       */
+      .filter((prop) => Boolean(prop.attribute))
+      .map((e) => `${e.name}: '${e.attribute}'`)
+      .join(',\n')
+    }},
     hydrateModule: import('${hydrateModule}')
   })`;
 

packages/react-output-target/src/react/create-component.ts

@@ -27,9 +27,11 @@ export const createComponent = <I extends HTMLElement, E extends EventNames = {}
  */
 export const createSSRComponent = <I extends HTMLElement, E extends EventNames = {}>({
   hydrateModule,
+  properties,
   tagName,
 }: {
   hydrateModule: Promise<{ renderToString: RenderToString }>;
+  properties: Record<string, string>;
   tagName: string;
 }): ReactWebComponent<I, E> => {
   /**
@@ -43,6 +45,7 @@ export const createSSRComponent = <I extends HTMLElement, E extends EventNames =
     const { createComponentForServerSideRendering } = await import('./ssr');
     return createComponentForServerSideRendering<I, E>({
       tagName,
+      properties,
       renderToString: (await hydrateModule).renderToString,
     })(props as any);
   }) as unknown as ReactWebComponent<I, E>;

packages/react-output-target/src/react/ssr.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import ReactDOMServer from 'react-dom/server';
-import decamelize from 'decamelize';
 import type { EventName, ReactWebComponent, WebComponentProps } from '@lit/react';
 
 import { possibleStandardNames } from './constants';
 
+const LOG_PREFIX = '[react-output-target]';
+
 // A key value map matching React prop names to event names.
 type EventNames = Record<string, EventName | string>;
 
@@ -19,6 +20,7 @@ interface RenderToStringOptions {
 export type RenderToString = (html: string, options: RenderToStringOptions) => Promise<{ html: string | null }>;
 interface CreateComponentForServerSideRenderingOptions {
   tagName: string;
+  properties: Record<string, string>;
   renderToString: RenderToString;
 }
 
@@ -59,8 +61,15 @@ export const createComponentForServerSideRendering = <I extends HTMLElement, E e
         continue;
       }
 
-      const propName =
-        possibleStandardNames[key as keyof typeof possibleStandardNames] || decamelize(key, { separator: '-' });
+      let propName = possibleStandardNames[key as keyof typeof possibleStandardNames] || options.properties[key];
+      if (!propName) {
+        console.warn(
+          `${LOG_PREFIX} ignore component property "${key}" for ${options.tagName} ` +
+          '- property type is unknown or not a primitive and can\'t be serialized'
+        );
+        continue;
+      }
+
       stringProps += ` ${propName}=${propValue}`;
     }
 
@@ -71,8 +80,8 @@ export const createComponentForServerSideRendering = <I extends HTMLElement, E e
       serializedChildren = ReactDOMServer.renderToString(awaitedChildren);
     } catch (err: unknown) {
       const error = err instanceof Error ? err : new Error('Unknown error');
-      console.log(
-        `Failed to serialize light DOM for ${toSerialize.slice(0, -1)} />: ${
+      console.warn(
+        `${LOG_PREFIX} Failed to serialize light DOM for ${toSerialize.slice(0, -1)} />: ${
           error.message
         } - this may impact the hydration of the component`
       );