@blinkpage/component-builder

Shared component build pipeline used by:

• component-studio (Electron app) — the original filesystem-driven builder.
• @blinkpage/mcp (Task #11) — the in-memory TSX/HTML builder.

Public API

buildComponent({ tsx, scss? })

Compile an in-memory TSX string (plus optional SCSS) into a minified IIFE bundle.

Returns:

{
  bundle: string;       // base64
  styles?: string;      // base64, present when CSS was emitted
  name: string;
  propsSchema?: any[];  // currently always undefined in V1
}

buildFromHtml({ html, css?, name })

Convert raw HTML + CSS to a class component, then reuse buildComponent.

• class → className, for → htmlFor, onclick → onClick, etc.
• Inline style="..." → JSX object literal.
• Void tags self-closed.

Returns the same shape as buildComponent minus propsSchema (HTML mode has no props in V1).

ComponentBuilder

Verbatim extraction of component-studio's filesystem-driven builder. Takes (componentDir, componentRelativePath), spawns npx vite build inside the user's project so that @blinkpage/composer-tools resolves out of their node_modules. Use this for editor/desktop workflows; use buildComponent for headless / MCP server use.

Build output contract

• bundle: base64 of a minified IIFE that registers the component on window.__CUSTOM_COMPONENTS__[name] and exports it as default.
• styles: base64 of a single CSS file (CSS code splitting is disabled).
• Externals (mapped to globals): react → React, react-dom → ReactDOM, @blinkpage/composer-tools → ComposerTools.

Logging

All log lines are tagged [ComponentBuilder][<module>] and emitted to console.info / warn / error. The package does not use Blinkpage's runtime logger because it is consumed in node-only contexts (Electron main process, MCP stdio server).