@genesislcap/ts-builder 14.424.1-alpha-cfc2887.0 → 14.425.0

package/dist/react-wrapper-generator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"react-wrapper-generator.d.ts","sourceRoot":"","sources":["../src/react-wrapper-generator.ts"],"names":[],"mappings":"AAyCA,KAAK,cAAc,GACf;IAAE,SAAS,EAAE,IAAI,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GACjC;IAAE,SAAS,EAAE,KAAK,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AAsuBzC,wBAAsB,qBAAqB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,cAAc,CAAC,CAqChF"}
+{"version":3,"file":"react-wrapper-generator.d.ts","sourceRoot":"","sources":["../src/react-wrapper-generator.ts"],"names":[],"mappings":"AAyCA,KAAK,cAAc,GACf;IAAE,SAAS,EAAE,IAAI,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GACjC;IAAE,SAAS,EAAE,KAAK,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AAqwBzC,wBAAsB,qBAAqB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,cAAc,CAAC,CAqChF"}

package/dist/react-wrapper-generator.js

@@ -383,7 +383,7 @@ function renderImportLines(usedImports) {
         .map(([spec, ids]) => `import type { ${[...ids].sort().join(', ')} } from '${spec}';`);
 }
 function generateReactWrapperJs(entries, format) {
-    const valid = entries.filter((e) => e.declaration.name && e.modulePath);
+    const valid = entries.filter((e) => e.declaration.name && e.declaration.tagName && e.modulePath);
     if (!valid.length)
         return '';
     const esm = format === 'esm';
@@ -397,10 +397,10 @@ function generateReactWrapperJs(entries, format) {
     if (!esm)
         lines.push("'use strict';", '');
     if (esm) {
-        lines.push("import { provideReactWrapper } from '@microsoft/fast-react-wrapper';", "import React from 'react';");
+        lines.push("import React from 'react';");
     }
     else {
-        lines.push("const { provideReactWrapper } = require('@microsoft/fast-react-wrapper');", "const React = require('react');");
+        lines.push("const React = require('react');");
     }
     for (const [modulePath, pathEntries] of [...groupEntriesByPath(valid).entries()].sort()) {
         const sorted = [...pathEntries].sort((a, b) => a.declaration.name.localeCompare(b.declaration.name));
@@ -412,22 +412,44 @@ function generateReactWrapperJs(entries, format) {
             lines.push(`const { ${sorted.map((e) => `${e.declaration.name}: ${e.declaration.name}WC`).join(', ')} } = require('${jsPath}');`);
         }
     }
-    lines.push('', 'const { wrap } = provideReactWrapper(React);', '');
+    const anyHasEvents = valid.some((e) => buildWrapperEventEntries(e.declaration).length > 0);
+    if (anyHasEvents) {
+        lines.push('', 'function _mergeRefs(...refs) {', '  return (value) => {', '    for (const ref of refs) {', "      if (typeof ref === 'function') ref(value);", '      else if (ref != null) ref.current = value;', '    }', '  };', '}');
+    }
+    lines.push('');
     for (const { declaration } of valid) {
         const name = declaration.name;
+        const tagName = declaration.tagName;
         const events = buildWrapperEventEntries(declaration);
         const prefix = esm ? 'export const' : 'const';
-        if (!events.length) {
-            lines.push(`${prefix} ${name} = wrap(${name}WC);`);
+        lines.push(`${prefix} ${name} = React.forwardRef(function ${name}(props, ref) {`);
+        if (events.length) {
+            lines.push(`  const { ${events.map((e) => e.handlerName).join(', ')}, children, ...rest } = props;`);
+            lines.push('  const _innerRef = React.useRef(null);');
+            for (const { handlerName } of events) {
+                lines.push(`  const _${handlerName}Ref = React.useRef(${handlerName});`);
+                lines.push(`  _${handlerName}Ref.current = ${handlerName};`);
+            }
+            lines.push('  React.useLayoutEffect(() => {');
+            lines.push('    const el = _innerRef.current;');
+            lines.push('    if (!el) return;');
+            for (const { handlerName, eventName } of events) {
+                lines.push(`    const _${handlerName}Fn = (e) => _${handlerName}Ref.current?.(e);`);
+                lines.push(`    el.addEventListener('${eventName}', _${handlerName}Fn);`);
+            }
+            lines.push('    return () => {');
+            for (const { handlerName, eventName } of events) {
+                lines.push(`      el.removeEventListener('${eventName}', _${handlerName}Fn);`);
+            }
+            lines.push('    };');
+            lines.push('  }, []);');
+            lines.push(`  return React.createElement(customElements.getName(${name}WC) ?? '${tagName}', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);`);
         }
         else {
-            lines.push(`${prefix} ${name} = wrap(${name}WC, {`);
-            lines.push('  events: {');
-            for (const { handlerName, eventName } of events)
-                lines.push(`    ${handlerName}: '${eventName}',`);
-            lines.push('  },');
-            lines.push('});');
+            lines.push('  const { children, ...rest } = props;');
+            lines.push(`  return React.createElement(customElements.getName(${name}WC) ?? '${tagName}', { ...rest, ref }, children);`);
         }
+        lines.push('});');
         lines.push('');
     }
     if (!esm) {
@@ -440,7 +462,7 @@ function generateReactWrapperJs(entries, format) {
 }
 function generateReactWrapperDts(entries, typeImportState) {
     var _a;
-    const valid = entries.filter((e) => e.declaration.name && e.modulePath);
+    const valid = entries.filter((e) => e.declaration.name && e.declaration.tagName && e.modulePath);
     if (!valid.length)
         return '';
     const wrapperTypeState = cloneTypeImportStateForWrapper(typeImportState);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/ts-builder",
   "description": "Typescript builder",
-  "version": "14.424.1-alpha-cfc2887.0",
+  "version": "14.425.0",
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "@custom-elements-manifest/analyzer": "^0.8.2",
-    "@genesislcap/build-kit": "14.424.1-alpha-cfc2887.0",
+    "@genesislcap/build-kit": "14.425.0",
     "consola": "^3.0.2",
     "copyfiles": "^2.4.1",
     "pkg-types": "^1.0.2"
@@ -30,5 +30,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0460a55fc4d9bde4d0e6e11db51125a371bf5b4d"
+  "gitHead": "c49bb94fbc3a74e84f18c7445398af116e1a58bb"
 }

package/src/react-wrapper-generator.ts

@@ -469,7 +469,7 @@ function renderImportLines(usedImports: Map<string, Set<string>>): string[] {
 }
 
 function generateReactWrapperJs(entries: CEMElementEntry[], format: 'esm' | 'cjs'): string {
-  const valid = entries.filter((e) => e.declaration.name && e.modulePath);
+  const valid = entries.filter((e) => e.declaration.name && e.declaration.tagName && e.modulePath);
   if (!valid.length) return '';
 
   const esm = format === 'esm';
@@ -484,15 +484,9 @@ function generateReactWrapperJs(entries: CEMElementEntry[], format: 'esm' | 'cjs
   if (!esm) lines.push("'use strict';", '');
 
   if (esm) {
-    lines.push(
-      "import { provideReactWrapper } from '@microsoft/fast-react-wrapper';",
-      "import React from 'react';",
-    );
+    lines.push("import React from 'react';");
   } else {
-    lines.push(
-      "const { provideReactWrapper } = require('@microsoft/fast-react-wrapper');",
-      "const React = require('react');",
-    );
+    lines.push("const React = require('react');");
   }
 
   for (const [modulePath, pathEntries] of [...groupEntriesByPath(valid).entries()].sort()) {
@@ -505,21 +499,58 @@ function generateReactWrapperJs(entries: CEMElementEntry[], format: 'esm' | 'cjs
     }
   }
 
-  lines.push('', 'const { wrap } = provideReactWrapper(React);', '');
+  const anyHasEvents = valid.some((e) => buildWrapperEventEntries(e.declaration).length > 0);
+  if (anyHasEvents) {
+    lines.push(
+      '',
+      'function _mergeRefs(...refs) {',
+      '  return (value) => {',
+      '    for (const ref of refs) {',
+      "      if (typeof ref === 'function') ref(value);",
+      '      else if (ref != null) ref.current = value;',
+      '    }',
+      '  };',
+      '}',
+    );
+  }
+
+  lines.push('');
 
   for (const { declaration } of valid) {
     const name = declaration.name!;
+    const tagName = declaration.tagName!;
     const events = buildWrapperEventEntries(declaration);
     const prefix = esm ? 'export const' : 'const';
-    if (!events.length) {
-      lines.push(`${prefix} ${name} = wrap(${name}WC);`);
+
+    lines.push(`${prefix} ${name} = React.forwardRef(function ${name}(props, ref) {`);
+
+    if (events.length) {
+      lines.push(`  const { ${events.map((e) => e.handlerName).join(', ')}, children, ...rest } = props;`);
+      lines.push('  const _innerRef = React.useRef(null);');
+      for (const { handlerName } of events) {
+        lines.push(`  const _${handlerName}Ref = React.useRef(${handlerName});`);
+        lines.push(`  _${handlerName}Ref.current = ${handlerName};`);
+      }
+      lines.push('  React.useLayoutEffect(() => {');
+      lines.push('    const el = _innerRef.current;');
+      lines.push('    if (!el) return;');
+      for (const { handlerName, eventName } of events) {
+        lines.push(`    const _${handlerName}Fn = (e) => _${handlerName}Ref.current?.(e);`);
+        lines.push(`    el.addEventListener('${eventName}', _${handlerName}Fn);`);
+      }
+      lines.push('    return () => {');
+      for (const { handlerName, eventName } of events) {
+        lines.push(`      el.removeEventListener('${eventName}', _${handlerName}Fn);`);
+      }
+      lines.push('    };');
+      lines.push('  }, []);');
+      lines.push(`  return React.createElement(customElements.getName(${name}WC) ?? '${tagName}', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);`);
     } else {
-      lines.push(`${prefix} ${name} = wrap(${name}WC, {`);
-      lines.push('  events: {');
-      for (const { handlerName, eventName } of events) lines.push(`    ${handlerName}: '${eventName}',`);
-      lines.push('  },');
-      lines.push('});');
+      lines.push('  const { children, ...rest } = props;');
+      lines.push(`  return React.createElement(customElements.getName(${name}WC) ?? '${tagName}', { ...rest, ref }, children);`);
     }
+
+    lines.push('});');
     lines.push('');
   }
 
@@ -533,7 +564,7 @@ function generateReactWrapperJs(entries: CEMElementEntry[], format: 'esm' | 'cjs
 }
 
 function generateReactWrapperDts(entries: CEMElementEntry[], typeImportState: TypeImportState): string {
-  const valid = entries.filter((e) => e.declaration.name && e.modulePath);
+  const valid = entries.filter((e) => e.declaration.name && e.declaration.tagName && e.modulePath);
   if (!valid.length) return '';
 
   const wrapperTypeState = cloneTypeImportStateForWrapper(typeImportState);