@tmorrow/cre8-wc 2.0.4 → 2.0.5

package/lib/scripts/generate-react-manifest.js

@@ -0,0 +1,154 @@
+/**
+ * Generate React MCP Manifest from the Web Component MCP manifest.
+ *
+ * Reads mcp-manifest.json (generated by generate-mcp-manifest.ts) and
+ * transforms it into react-manifest.json, which the cre8-mcp server
+ * resolves via `@tmorrow/cre8-wc/react-manifest.json` when tools are
+ * called with `format: "react"`.
+ *
+ * Naming rules intentionally mirror scripts/generate-react-wrappers.ts
+ * and the cre8-mcp server's own web→react tag conversion:
+ *   - cre8-button        → Cre8Button
+ *   - kebab-case attrs   → camelCase props
+ *   - events             → on<EventName> callback props
+ *   - slots              → children?: React.ReactNode
+ *
+ * Run after build:mcp-manifest:
+ *   npx tsx scripts/generate-react-manifest.ts
+ */
+import { readFileSync, writeFileSync } from 'fs';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const ROOT = join(__dirname, '..');
+// ─── Naming helpers ──────────────────────────────────────────────────
+/** cre8-button → Cre8Button (same rule as generate-react-wrappers.ts) */
+function toPascalCase(tagName) {
+    return tagName
+        .split('-')
+        .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+        .join('');
+}
+/** full-width → fullWidth; already-camel names pass through */
+function toCamelCase(name) {
+    return name.includes('-')
+        ? name.replace(/-([a-z])/g, (_, c) => c.toUpperCase())
+        : name;
+}
+/** cre8.dropdown-close → onCre8DropdownClose (same rule as wrappers) */
+function toEventPropName(eventName) {
+    const valid = eventName
+        .split(/[.-]/)
+        .map((part, index) => index === 0 ? part : part.charAt(0).toUpperCase() + part.slice(1))
+        .join('');
+    return 'on' + valid.charAt(0).toUpperCase() + valid.slice(1);
+}
+// ─── HTML example → JSX ──────────────────────────────────────────────
+/**
+ * Best-effort conversion of a web-component HTML snippet to JSX:
+ *   - cre8-* tags → Cre8* component names
+ *   - kebab-case attributes → camelCase
+ *   - class → className
+ *   - HTML comments → JSX comments
+ *   - empty elements collapsed to self-closing form
+ */
+function htmlToJsx(html) {
+    let jsx = html;
+    // Tag names: <cre8-button ...> / </cre8-button>
+    jsx = jsx.replace(/<(\/?)(cre8-[a-z0-9-]+)/g, (_m, slash, tag) => {
+        return `<${slash}${toPascalCase(tag)}`;
+    });
+    // Attributes inside tags: kebab-case → camelCase, class → className.
+    // `slot` is left as-is (passed through to the underlying element).
+    jsx = jsx.replace(/<[^/!][^>]*>/g, (tagStr) => tagStr.replace(/\s([a-z][a-z0-9-]*)(=)?/g, (m, attr, eq) => {
+        if (attr === 'class')
+            return ` className${eq || ''}`;
+        if (attr.includes('-'))
+            return ` ${toCamelCase(attr)}${eq || ''}`;
+        return m;
+    }));
+    // HTML comments → JSX comments
+    jsx = jsx.replace(/<!--([\s\S]*?)-->/g, '{/*$1*/}');
+    // Collapse empty elements: <Cre8Button ... ></Cre8Button> → <Cre8Button ... />
+    jsx = jsx.replace(/<(Cre8[A-Za-z0-9]+)([^>]*)><\/\1>/g, '<$1$2 />');
+    return jsx;
+}
+// ─── Transform ───────────────────────────────────────────────────────
+function transformComponent(comp) {
+    const props = {};
+    // Attributes → camelCase props
+    for (const [attrName, attr] of Object.entries(comp.attributes || {})) {
+        props[toCamelCase(attrName)] = { ...attr };
+    }
+    // Properties are already camelCase; merge (attributes win on collision,
+    // since the wrapper exposes the attribute-backed prop)
+    for (const [propName, prop] of Object.entries(comp.properties || {})) {
+        if (!(propName in props)) {
+            props[propName] = { ...prop };
+        }
+    }
+    // Slots → children
+    if (Object.keys(comp.slots || {}).length > 0) {
+        const named = Object.keys(comp.slots).filter((s) => s !== 'default');
+        props.children = {
+            type: 'React.ReactNode',
+            description: named.length > 0
+                ? `Slotted content. Named slots (set slot="..." on the child): ${named.join(', ')}`
+                : 'Slotted content.',
+        };
+    }
+    // Events → on<EventName> callback props
+    for (const [eventName, event] of Object.entries(comp.events || {})) {
+        props[toEventPropName(eventName)] = {
+            type: '(event: CustomEvent) => void',
+            ...(event.description ? { description: event.description } : {}),
+        };
+    }
+    return {
+        name: toPascalCase(comp.name),
+        tagName: comp.name,
+        category: comp.category,
+        description: comp.description,
+        props,
+        examples: (comp.examples || []).map((ex) => ({
+            description: ex.description,
+            jsx: htmlToJsx(ex.html),
+        })),
+    };
+}
+// ─── Main ────────────────────────────────────────────────────────────
+function main() {
+    const inputPath = join(ROOT, 'mcp-manifest.json');
+    console.log(`Reading web manifest from: ${inputPath}`);
+    const webManifest = JSON.parse(readFileSync(inputPath, 'utf-8'));
+    const components = webManifest.components.map(transformComponent);
+    console.log(`Transformed ${components.length} components`);
+    const reactManifest = {
+        version: webManifest.version,
+        library: '@tmorrow/cre8-react',
+        componentPrefix: 'Cre8',
+        description: 'React wrappers for cre8 Web Components (@tmorrow/cre8-wc)',
+        framework: 'React 18+ via @lit/react',
+        components,
+        baseClasses: webManifest.baseClasses,
+        patterns: (webManifest.patterns || []).map((p) => ({
+            ...p,
+            template: htmlToJsx(p.template),
+        })),
+        designTokens: webManifest.designTokens,
+        accessibility: webManifest.accessibility,
+        dependencies: {
+            '@lit/react': webManifest.dependencies?.['@lit/react'] || '^1.0.8',
+            '@tmorrow/cre8-wc': `^${webManifest.version}`,
+            react: '>=18',
+            'react-dom': '>=18',
+        },
+    };
+    const outputPath = join(ROOT, 'react-manifest.json');
+    writeFileSync(outputPath, JSON.stringify(reactManifest, null, 2) + '\n');
+    console.log(`Wrote react manifest to: ${outputPath}`);
+    console.log(`Total components: ${components.length}`);
+}
+main();
+//# sourceMappingURL=generate-react-manifest.js.map

package/lib/scripts/generate-react-manifest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generate-react-manifest.js","sourceRoot":"","sources":["../../scripts/generate-react-manifest.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Generate React MCP Manifest from the Web Component MCP manifest.\n *\n * Reads mcp-manifest.json (generated by generate-mcp-manifest.ts) and\n * transforms it into react-manifest.json, which the cre8-mcp server\n * resolves via `@tmorrow/cre8-wc/react-manifest.json` when tools are\n * called with `format: \"react\"`.\n *\n * Naming rules intentionally mirror scripts/generate-react-wrappers.ts\n * and the cre8-mcp server's own web→react tag conversion:\n *   - cre8-button        → Cre8Button\n *   - kebab-case attrs   → camelCase props\n *   - events             → on<EventName> callback props\n *   - slots              → children?: React.ReactNode\n *\n * Run after build:mcp-manifest:\n *   npx tsx scripts/generate-react-manifest.ts\n */\n\nimport { readFileSync, writeFileSync } from 'fs';\nimport { join, dirname } from 'path';\nimport { fileURLToPath } from 'url';\n\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = dirname(__filename);\nconst ROOT = join(__dirname, '..');\n\n// ─── Types (input: mcp-manifest.json) ────────────────────────────────\ninterface McpAttribute {\n  type: string;\n  values?: string[];\n  default?: string | boolean | number;\n  description?: string;\n}\n\ninterface McpComponent {\n  name: string;\n  category: string;\n  description: string;\n  attributes: Record<string, McpAttribute>;\n  properties: Record<string, McpAttribute>;\n  slots: Record<string, { description?: string }>;\n  events: Record<string, { detail?: Record<string, unknown>; description?: string }>;\n  cssProperties: Record<string, { description?: string }>;\n  examples: Array<{ description: string; html: string }>;\n}\n\ninterface McpManifest {\n  version: string;\n  library: string;\n  tagPrefix: string;\n  description: string;\n  framework: string;\n  components: McpComponent[];\n  baseClasses: unknown;\n  patterns: Array<{ name: string; description: string; template: string }>;\n  designTokens: unknown;\n  accessibility: unknown;\n  dependencies: Record<string, string>;\n}\n\n// ─── Types (output: react-manifest.json) ─────────────────────────────\ninterface ReactProp {\n  type: string;\n  values?: string[];\n  default?: string | boolean | number;\n  description?: string;\n}\n\ninterface ReactComponent {\n  name: string;\n  tagName: string;\n  category: string;\n  description: string;\n  props: Record<string, ReactProp>;\n  examples: Array<{ description: string; jsx: string }>;\n}\n\n// ─── Naming helpers ──────────────────────────────────────────────────\n\n/** cre8-button → Cre8Button (same rule as generate-react-wrappers.ts) */\nfunction toPascalCase(tagName: string): string {\n  return tagName\n    .split('-')\n    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))\n    .join('');\n}\n\n/** full-width → fullWidth; already-camel names pass through */\nfunction toCamelCase(name: string): string {\n  return name.includes('-')\n    ? name.replace(/-([a-z])/g, (_, c: string) => c.toUpperCase())\n    : name;\n}\n\n/** cre8.dropdown-close → onCre8DropdownClose (same rule as wrappers) */\nfunction toEventPropName(eventName: string): string {\n  const valid = eventName\n    .split(/[.-]/)\n    .map((part, index) =>\n      index === 0 ? part : part.charAt(0).toUpperCase() + part.slice(1),\n    )\n    .join('');\n  return 'on' + valid.charAt(0).toUpperCase() + valid.slice(1);\n}\n\n// ─── HTML example → JSX ──────────────────────────────────────────────\n\n/**\n * Best-effort conversion of a web-component HTML snippet to JSX:\n *   - cre8-* tags → Cre8* component names\n *   - kebab-case attributes → camelCase\n *   - class → className\n *   - HTML comments → JSX comments\n *   - empty elements collapsed to self-closing form\n */\nfunction htmlToJsx(html: string): string {\n  let jsx = html;\n\n  // Tag names: <cre8-button ...> / </cre8-button>\n  jsx = jsx.replace(/<(\\/?)(cre8-[a-z0-9-]+)/g, (_m, slash: string, tag: string) => {\n    return `<${slash}${toPascalCase(tag)}`;\n  });\n\n  // Attributes inside tags: kebab-case → camelCase, class → className.\n  // `slot` is left as-is (passed through to the underlying element).\n  jsx = jsx.replace(/<[^/!][^>]*>/g, (tagStr) =>\n    tagStr.replace(/\\s([a-z][a-z0-9-]*)(=)?/g, (m, attr: string, eq?: string) => {\n      if (attr === 'class') return ` className${eq || ''}`;\n      if (attr.includes('-')) return ` ${toCamelCase(attr)}${eq || ''}`;\n      return m;\n    }),\n  );\n\n  // HTML comments → JSX comments\n  jsx = jsx.replace(/<!--([\\s\\S]*?)-->/g, '{/*$1*/}');\n\n  // Collapse empty elements: <Cre8Button ... ></Cre8Button> → <Cre8Button ... />\n  jsx = jsx.replace(/<(Cre8[A-Za-z0-9]+)([^>]*)><\\/\\1>/g, '<$1$2 />');\n\n  return jsx;\n}\n\n// ─── Transform ───────────────────────────────────────────────────────\n\nfunction transformComponent(comp: McpComponent): ReactComponent {\n  const props: Record<string, ReactProp> = {};\n\n  // Attributes → camelCase props\n  for (const [attrName, attr] of Object.entries(comp.attributes || {})) {\n    props[toCamelCase(attrName)] = { ...attr };\n  }\n\n  // Properties are already camelCase; merge (attributes win on collision,\n  // since the wrapper exposes the attribute-backed prop)\n  for (const [propName, prop] of Object.entries(comp.properties || {})) {\n    if (!(propName in props)) {\n      props[propName] = { ...prop };\n    }\n  }\n\n  // Slots → children\n  if (Object.keys(comp.slots || {}).length > 0) {\n    const named = Object.keys(comp.slots).filter((s) => s !== 'default');\n    props.children = {\n      type: 'React.ReactNode',\n      description:\n        named.length > 0\n          ? `Slotted content. Named slots (set slot=\"...\" on the child): ${named.join(', ')}`\n          : 'Slotted content.',\n    };\n  }\n\n  // Events → on<EventName> callback props\n  for (const [eventName, event] of Object.entries(comp.events || {})) {\n    props[toEventPropName(eventName)] = {\n      type: '(event: CustomEvent) => void',\n      ...(event.description ? { description: event.description } : {}),\n    };\n  }\n\n  return {\n    name: toPascalCase(comp.name),\n    tagName: comp.name,\n    category: comp.category,\n    description: comp.description,\n    props,\n    examples: (comp.examples || []).map((ex) => ({\n      description: ex.description,\n      jsx: htmlToJsx(ex.html),\n    })),\n  };\n}\n\n// ─── Main ────────────────────────────────────────────────────────────\n\nfunction main() {\n  const inputPath = join(ROOT, 'mcp-manifest.json');\n  console.log(`Reading web manifest from: ${inputPath}`);\n\n  const webManifest: McpManifest = JSON.parse(readFileSync(inputPath, 'utf-8'));\n\n  const components = webManifest.components.map(transformComponent);\n  console.log(`Transformed ${components.length} components`);\n\n  const reactManifest = {\n    version: webManifest.version,\n    library: '@tmorrow/cre8-react',\n    componentPrefix: 'Cre8',\n    description: 'React wrappers for cre8 Web Components (@tmorrow/cre8-wc)',\n    framework: 'React 18+ via @lit/react',\n    components,\n    baseClasses: webManifest.baseClasses,\n    patterns: (webManifest.patterns || []).map((p) => ({\n      ...p,\n      template: htmlToJsx(p.template),\n    })),\n    designTokens: webManifest.designTokens,\n    accessibility: webManifest.accessibility,\n    dependencies: {\n      '@lit/react': webManifest.dependencies?.['@lit/react'] || '^1.0.8',\n      '@tmorrow/cre8-wc': `^${webManifest.version}`,\n      react: '>=18',\n      'react-dom': '>=18',\n    },\n  };\n\n  const outputPath = join(ROOT, 'react-manifest.json');\n  writeFileSync(outputPath, JSON.stringify(reactManifest, null, 2) + '\\n');\n  console.log(`Wrote react manifest to: ${outputPath}`);\n  console.log(`Total components: ${components.length}`);\n}\n\nmain();\n"]}