zylaris 1.0.2

package/packages/plugins/src/transforms/index.ts

@@ -0,0 +1,407 @@
+/**
+ * Library Transformers
+ * Transform various library formats to work with Zylaris
+ */
+
+import type { LibraryFormat, ComponentAdapter } from '../types.js';
+import MagicString from 'magic-string';
+
+/** Transform UMD/IIFE to ESM */
+export function transformUMDToESM(code: string, globalName: string): string {
+  // Check if already ESM
+  if (code.includes('export ') || code.includes('import ')) {
+    return code;
+  }
+
+  const s = new MagicString(code);
+
+  // Detect UMD pattern
+  if (code.includes('typeof define') && code.includes('amd')) {
+    // AMD/UMD wrapper
+    s.append(`\nexport default ${globalName};`);
+    s.append(`\nexport { ${globalName} };`);
+  } else if (code.includes('module.exports')) {
+    // CommonJS
+    s.replace(/module\.exports\s*=\s*/, 'export default ');
+    s.replace(/exports\.(\w+)\s*=\s*/g, 'export const $1 = ');
+    s.replace(/require\(['"]([^'"]+)['"]\)/g, "import('$1')");
+  } else if (code.includes('(function (global')) {
+    // IIFE
+    s.append(`\nexport default ${globalName};`);
+  }
+
+  return s.toString();
+}
+
+/** Transform CJS to ESM */
+export function transformCJSToESM(code: string): string {
+  const s = new MagicString(code);
+
+  // Transform require() to import
+  const requireRegex = /(?:const|let|var)\s+(\{?[^}]+}?)\s*=\s*require\(['"]([^'"]+)['"]\);?/g;
+  
+  s.replace(requireRegex, (_match, bindings, source) => {
+    if (bindings.startsWith('{')) {
+      // Destructured: const { a, b } = require('x')
+      return `import ${bindings} from '${source}';`;
+    }
+    // Default: const x = require('x')
+    return `import ${bindings} from '${source}';`;
+  });
+
+  // Transform module.exports
+  s.replace(/module\.exports\s*=\s*/, 'export default ');
+  s.replace(/module\.exports\.(\w+)\s*=\s*/g, 'export const $1 = ');
+  
+  // Transform exports.x
+  s.replace(/exports\.(\w+)\s*=\s*/g, 'export const $1 = ');
+
+  // Transform __dirname and __filename
+  s.replace(/__dirname/g, "new URL('.', import.meta.url).pathname");
+  s.replace(/__filename/g, "new URL(import.meta.url).pathname");
+
+  return s.toString();
+}
+
+/** Transform AMD to ESM */
+export function transformAMDToESM(code: string): string {
+  const s = new MagicString(code);
+
+  // Detect define() calls
+  const defineRegex = /define\((?:\[[^\]]*\],\s*)?function\s*\([^)]*\)\s*\{/;
+  
+  if (defineRegex.test(code)) {
+    // Extract dependencies and factory
+    const depsMatch = code.match(/define\(\[([^\]]*)\]/);
+    const factoryMatch = code.match(/function\s*\(([^)]*)\)/);
+
+    if (depsMatch && factoryMatch) {
+      const deps = depsMatch[1].split(',').map(d => d.trim().replace(/['"]/g, ''));
+      const params = factoryMatch[1].split(',').map(p => p.trim());
+
+      // Generate imports
+      let imports = '';
+      deps.forEach((dep, i) => {
+        if (dep) {
+          const param = params[i] || `_${i}`;
+          imports += `import ${param} from '${dep}';\n`;
+        }
+      });
+
+      s.replace(/define\([^)]*\)\s*\{/, imports + 'export default (function() {');
+      s.append('})();');
+    }
+  }
+
+  return s.toString();
+}
+
+/** Transform SystemJS to ESM */
+export function transformSystemJSToESM(code: string): string {
+  const s = new MagicString(code);
+
+  // System.register pattern
+  s.replace(/System\.register\(\[[^\]]*\],\s*function\s*\([^)]*\)\s*\{/, 'export default (function() {');
+  
+  // Transform setters and execute
+  s.replace(/setters:\s*\[[^\]]*\],/, '');
+  s.replace(/execute:\s*function\(\)\s*\{/, '');
+
+  return s.toString();
+}
+
+/** Detect library format */
+export function detectFormat(code: string): LibraryFormat {
+  // Check for ESM
+  if (/^\s*(import|export)\s/m.test(code)) {
+    return 'esm';
+  }
+
+  // Check for CommonJS
+  if (code.includes('module.exports') || code.includes('require(')) {
+    return 'cjs';
+  }
+
+  // Check for AMD
+  if (code.includes('define(') && code.includes('function')) {
+    return 'amd';
+  }
+
+  // Check for SystemJS
+  if (code.includes('System.register')) {
+    return 'systemjs';
+  }
+
+  // Check for UMD (has factory function with global check)
+  if (code.includes('typeof exports') && code.includes('typeof define')) {
+    return 'umd';
+  }
+
+  // Check for IIFE
+  if (/\(function\s*\([^)]*\)\s*\{/.test(code)) {
+    return 'iife';
+  }
+
+  // Default to ESM
+  return 'esm';
+}
+
+/** Auto-transform to ESM */
+export function autoTransformToESM(code: string, globalName?: string): string {
+  const format = detectFormat(code);
+
+  switch (format) {
+    case 'cjs':
+      return transformCJSToESM(code);
+    case 'umd':
+      return transformUMDToESM(code, globalName || 'globalThis');
+    case 'amd':
+      return transformAMDToESM(code);
+    case 'systemjs':
+      return transformSystemJSToESM(code);
+    case 'iife':
+      return transformUMDToESM(code, globalName || 'globalThis');
+    default:
+      return code;
+  }
+}
+
+/** React component adapter */
+export const reactAdapter: ComponentAdapter = {
+  framework: 'react',
+  transform: (_component: string, from: string) => {
+    return `
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import Component from '${from}';
+
+export default function ZylarisReactWrapper(props) {
+  const containerRef = useRef(null);
+  
+  useEffect(() => {
+    if (containerRef.current) {
+      const root = ReactDOM.createRoot(containerRef.current);
+      root.render(<Component {...props} />);
+      return () => root.unmount();
+    }
+  }, [props]);
+
+  return <div ref={containerRef} />;
+}
+`;
+  },
+};
+
+/** Vue component adapter */
+export const vueAdapter: ComponentAdapter = {
+  framework: 'vue',
+  transform: (_component: string, from: string) => {
+    return `
+import { defineComponent, h, ref, onMounted, onUnmounted } from 'vue';
+import VueComponent from '${from}';
+import { createApp } from 'vue';
+
+export default defineComponent({
+  name: 'ZylarisVueWrapper',
+  props: VueComponent.props || {},
+  setup(props, { slots }) {
+    const container = ref(null);
+    let app = null;
+
+    onMounted(() => {
+      if (container.value) {
+        app = createApp({
+          render: () => h(VueComponent, props, slots)
+        });
+        app.mount(container.value);
+      }
+    });
+
+    onUnmounted(() => {
+      app?.unmount();
+    });
+
+    return () => h('div', { ref: container });
+  }
+});
+`;
+  },
+};
+
+/** Svelte component adapter */
+export const svelteAdapter: ComponentAdapter = {
+  framework: 'svelte',
+  transform: (_component: string, from: string) => {
+    return `
+import SvelteComponent from '${from}';
+import { signal, createEffect } from 'zylaris';
+
+export default function ZylarisSvelteWrapper(props) {
+  const container = signal(null);
+  let component = null;
+
+  createEffect(() => {
+    if (container()) {
+      component = new SvelteComponent({
+        target: container(),
+        props: props
+      });
+    }
+    
+    return () => {
+      component?.$destroy();
+    };
+  });
+
+  return <div ref={container} />;
+}
+`;
+  },
+};
+
+/** Web Component wrapper generator */
+export function generateWebComponentWrapper(
+  tagName: string,
+  path: string,
+  props: Record<string, string> = {}
+): string {
+  const propDefs = Object.entries(props)
+    .map(([key, type]) => `  ${key}?: ${type};`)
+    .join('\n');
+
+  return `
+import type { JSX } from 'zylaris';
+
+declare module 'zylaris' {
+  namespace JSX {
+    interface IntrinsicElements {
+      '${tagName}': {
+${propDefs}
+        children?: JSX.Element;
+      } & JSX.HTMLAttributes<HTMLElement>;
+    }
+  }
+}
+
+// Lazy load web component
+export async function load${toPascalCase(tagName)}() {
+  await import('${path}');
+}
+
+// Wrapper component
+export function ${toPascalCase(tagName)}(props: { 
+${propDefs}
+  children?: any 
+}) {
+  const Tag = '${tagName}' as any;
+  return <Tag {...props} />;
+}
+`;
+}
+
+/** Convert kebab-case to PascalCase */
+function toPascalCase(str: string): string {
+  return str
+    .split('-')
+    .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+    .join('');
+}
+
+/** Transform imports for tree-shaking */
+export function optimizeImports(
+  code: string,
+  library: string,
+  imports: string[]
+): string {
+  const s = new MagicString(code);
+
+  // Replace default import with named imports
+  const defaultImportRegex = new RegExp(
+    `import\\s+(\\w+)\\s+from\\s+['"]${library}['"];?`,
+    'g'
+  );
+
+  s.replace(defaultImportRegex, () => {
+    return `import { ${imports.join(', ')} } from '${library}';`;
+  });
+
+  // Replace usage of default import with named imports
+  imports.forEach(name => {
+    s.replace(new RegExp(`\\b${library}\\.${name}\\b`, 'g'), name);
+  });
+
+  return s.toString();
+}
+
+/** Remove dead code from library */
+export function treeShake(code: string, usedExports: string[]): string {
+  const s = new MagicString(code);
+
+  // Mark unused exports for removal
+  const exportRegex = /export\s+(?:const|let|var|function|class)\s+(\w+)/g;
+  let match;
+
+  while ((match = exportRegex.exec(code)) !== null) {
+    const exportName = match[1];
+    if (!usedExports.includes(exportName)) {
+      // Find and remove the export
+      const start = match.index;
+      const end = findStatementEnd(code, start);
+      s.remove(start, end);
+    }
+  }
+
+  return s.toString();
+}
+
+/** Find end of statement */
+function findStatementEnd(code: string, start: number): number {
+  let depth = 0;
+  let inString = false;
+  let stringChar = '';
+
+  for (let i = start; i < code.length; i++) {
+    const char = code[i];
+    const prev = code[i - 1];
+
+    if (inString) {
+      if (char === stringChar && prev !== '\\') {
+        inString = false;
+      }
+    } else {
+      if (char === '"' || char === "'" || char === '`') {
+        inString = true;
+        stringChar = char;
+      } else if (char === '{' || char === '(' || char === '[') {
+        depth++;
+      } else if (char === '}' || char === ')' || char === ']') {
+        depth--;
+      } else if (char === ';' && depth === 0) {
+        return i + 1;
+      } else if (char === '\n' && depth === 0) {
+        // Check if next line is not a continuation
+        const nextLine = code.slice(i + 1).trim();
+        if (!nextLine.startsWith('.') && !nextLine.startsWith('}')) {
+          return i + 1;
+        }
+      }
+    }
+  }
+
+  return code.length;
+}
+
+export default {
+  transformUMDToESM,
+  transformCJSToESM,
+  transformAMDToESM,
+  transformSystemJSToESM,
+  detectFormat,
+  autoTransformToESM,
+  reactAdapter,
+  vueAdapter,
+  svelteAdapter,
+  generateWebComponentWrapper,
+  optimizeImports,
+  treeShake,
+};

package/packages/plugins/src/types.ts

@@ -0,0 +1,296 @@
+/**
+ * Plugin System Types
+ * Supports: npm packages, CDN libraries, framework components, Web Components
+ */
+
+
+/** Library format types */
+export type LibraryFormat = 
+  | 'esm'      // ES Modules
+  | 'cjs'      // CommonJS
+  | 'umd'      // Universal Module Definition
+  | 'iife'     // Immediately Invoked Function Expression
+  | 'amd'      // Asynchronous Module Definition
+  | 'systemjs'; // SystemJS
+
+/** Source of library */
+export type LibrarySource =
+  | 'npm'      // npm registry
+  | 'cdn'      // CDN (esm.sh, unpkg, skypack, etc.)
+  | 'local'    // Local file
+  | 'github';  // GitHub raw
+
+/** Build options interface (subset of esbuild.BuildOptions) */
+export interface BuildOptions {
+  /** Entry points */
+  entryPoints?: string[];
+  /** Bundle output */
+  bundle?: boolean;
+  /** Output format */
+  format?: 'iife' | 'cjs' | 'esm';
+  /** Output file */
+  outfile?: string;
+  /** Platform */
+  platform?: 'browser' | 'node' | 'neutral';
+  /** Target */
+  target?: string;
+  /** Minify output */
+  minify?: boolean;
+  /** Generate sourcemap */
+  sourcemap?: boolean;
+  /** Metafile output */
+  metafile?: boolean;
+  /** External dependencies */
+  external?: string[];
+  /** Define replacements */
+  define?: Record<string, string>;
+  /** Plugins */
+  plugins?: unknown[];
+}
+
+/** CDN Provider */
+export type CDNProvider = 
+  | 'esm.sh'
+  | 'unpkg'
+  | 'skypack'
+  | 'jspm'
+  | 'jsdelivr'
+  | 'cdnjs';
+
+/** Plugin hook context */
+export interface PluginContext {
+  /** Root directory */
+  root: string;
+  /** Mode: development | production */
+  mode: 'development' | 'production';
+  /** Environment */
+  env: Record<string, string>;
+  /** Add external dependency */
+  addExternal: (id: string) => void;
+  /** Add alias */
+  addAlias: (from: string, to: string) => void;
+  /** Add transform */
+  addTransform: (transform: Transform) => void;
+}
+
+/** Transform function */
+export interface Transform {
+  /** Transform name */
+  name: string;
+  /** Test if file should be transformed */
+  test: (id: string) => boolean;
+  /** Transform handler */
+  handler: (code: string, id: string) => Promise<string> | string;
+  /** Execution order */
+  order?: 'pre' | 'post' | 'normal';
+}
+
+/** Library configuration */
+export interface LibraryConfig {
+  /** Library name */
+  name: string;
+  /** Source */
+  source?: LibrarySource;
+  /** CDN Provider (if source is cdn) */
+  cdn?: CDNProvider;
+  /** Version */
+  version?: string;
+  /** Global variable name (for UMD/IIFE) */
+  global?: string;
+  /** Entry point */
+  entry?: string;
+  /** Format */
+  format?: LibraryFormat;
+  /** Whether to bundle */
+  bundle?: boolean;
+  /** Side effects */
+  sideEffects?: boolean | string[];
+  /** CSS to include */
+  css?: string | string[];
+  /** Auto-import presets */
+  autoImport?: AutoImportConfig;
+}
+
+/** Auto-import configuration */
+export interface AutoImportConfig {
+  /** Package name */
+  from: string;
+  /** Named exports to auto-import */
+  imports?: string[];
+  /** Default export name */
+  defaultImport?: string;
+  /** Namespace import */
+  namespaceImport?: string;
+  /** File patterns to apply */
+  include?: string[];
+  /** File patterns to exclude */
+  exclude?: string[];
+}
+
+/** CDN Loader options */
+export interface CDNOptions {
+  /** Default CDN provider */
+  provider?: CDNProvider;
+  /** Version pinning */
+  version?: string;
+  /** Query parameters */
+  query?: Record<string, string>;
+  /** Dependencies to bundle */
+  deps?: string[];
+  /** Whether to minify */
+  minify?: boolean;
+  /** Target */
+  target?: string;
+  /** Whether to use bare imports */
+  bare?: boolean;
+}
+
+/** External dependency optimization */
+export interface ExternalConfig {
+  /** Dependencies to externalize */
+  external?: string[] | RegExp[];
+  /** Dependencies to pre-bundle */
+  prebundle?: string[];
+  /** Force include (don't externalize) */
+  forceInclude?: string[];
+  /** CDN URL for externals */
+  cdn?: CDNOptions;
+}
+
+/** Component library adapter */
+export interface ComponentAdapter {
+  /** Framework name */
+  framework: 'react' | 'vue' | 'svelte' | 'solid' | 'preact' | 'alpine';
+  /** Transform component to Zylaris format */
+  transform: (component: string, from: string) => string;
+  /** Wrap component for hydration */
+  wrap?: (component: string, props?: Record<string, unknown>) => string;
+}
+
+/** Web Component config */
+export interface WebComponentConfig {
+  /** Tag name */
+  tag: string;
+  /** Component path */
+  path: string;
+  /** Whether to lazy load */
+  lazy?: boolean;
+  /** Props mapping */
+  props?: Record<string, string>;
+  /** Slots mapping */
+  slots?: Record<string, string>;
+  /** CSS custom properties */
+  cssProperties?: Record<string, string>;
+}
+
+/** Plugin interface */
+export interface Plugin {
+  /** Plugin name */
+  name: string;
+  /** Plugin version */
+  version?: string;
+  /** Setup hook */
+  setup?: (ctx: PluginContext) => void | Promise<void>;
+  /** Transform hook */
+  transform?: Transform;
+  /** Configure build */
+  configureBuild?: (options: BuildOptions) => void;
+  /** Resolve ID */
+  resolveId?: (id: string, importer?: string) => string | null | Promise<string | null>;
+  /** Load module */
+  load?: (id: string) => string | null | Promise<string | null>;
+}
+
+/** Import map entry */
+export interface ImportMapEntry {
+  /** Module specifier */
+  specifier: string;
+  /** URL or path */
+  url: string;
+  /** Scope */
+  scope?: string;
+}
+
+/** Import map */
+export interface ImportMap {
+  imports: Record<string, string>;
+  scopes?: Record<string, Record<string, string>>;
+}
+
+/** Module resolution result */
+export interface ResolveResult {
+  /** Resolved ID */
+  id: string;
+  /** External flag */
+  external?: boolean;
+  /** Side effects */
+  sideEffects?: boolean;
+  /** Synthetic named exports */
+  syntheticNamedExports?: boolean;
+}
+
+/** Bundle analysis */
+export interface BundleAnalysis {
+  /** Original size */
+  original: number;
+  /** Bundled size */
+  bundled: number;
+  /** Gzipped size */
+  gzip: number;
+  /** Dependencies */
+  dependencies: string[];
+  /** Duplicated modules */
+  duplicates?: string[];
+}
+
+/** Plugin preset */
+export interface PluginPreset {
+  /** Preset name */
+  name: string;
+  /** Preset description */
+  description?: string;
+  /** Plugins */
+  plugins: Plugin[];
+  /** Default config */
+  defaults?: Record<string, unknown>;
+}
+
+/** Loader options */
+export interface LoaderOptions {
+  /** Library configs */
+  libraries?: LibraryConfig[];
+  /** CDN options */
+  cdn?: CDNOptions;
+  /** External config */
+  external?: ExternalConfig;
+  /** Auto-imports */
+  autoImports?: AutoImportConfig[];
+  /** Component adapters */
+  adapters?: ComponentAdapter[];
+  /** Web components */
+  webComponents?: WebComponentConfig[];
+  /** Import map */
+  importMap?: ImportMap;
+  /** Custom transforms */
+  transforms?: Transform[];
+}
+
+/** Registry search result */
+export interface RegistrySearchResult {
+  /** Package name */
+  name: string;
+  /** Description */
+  description?: string;
+  /** Version */
+  version?: string;
+  /** Homepage */
+  homepage?: string;
+  /** Repository */
+  repository?: string;
+  /** Weekly downloads */
+  downloads?: number;
+  /** Formats available */
+  formats?: LibraryFormat[];
+  /** Has types */
+  types?: boolean;
+}

package/packages/plugins/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "include": ["src/**/*"]
+}