zylaris 1.0.2

package/packages/dev-server/src/index.ts

@@ -0,0 +1,306 @@
+// Zylaris Dev Server with JIT Compilation
+
+import { createServer as createViteServer } from 'vite';
+import { createServer as createHttpServer, Server } from 'http';
+import connect from 'connect';
+import { WebSocketServer, WebSocket } from 'ws';
+import chokidar from 'chokidar';
+import path from 'path';
+import { jitCompile, invalidateCache } from '@zylaris/compiler';
+import fs from 'fs/promises';
+import net from 'net';
+
+interface DevServerOptions {
+  port?: number;
+  host?: string;
+  turbo?: boolean;
+  root?: string;
+}
+
+interface HMRMessage {
+  type: 'full-reload' | 'update' | 'error';
+  path?: string;
+  updates?: ModuleUpdate[];
+  error?: string;
+}
+
+interface ModuleUpdate {
+  id: string;
+  code: string;
+  accepted: boolean;
+}
+
+// In-memory module cache for ultra-fast HMR
+const moduleCache = new Map<string, { code: string; etag: string }>();
+
+// Check if port is available
+function isPortAvailable(port: number, host: string): Promise<boolean> {
+  return new Promise((resolve) => {
+    const tester = net.createServer()
+      .once('error', () => resolve(false))
+      .once('listening', () => {
+        tester.close();
+        resolve(true);
+      })
+      .listen(port, host);
+  });
+}
+
+// Find available port
+async function findAvailablePort(startPort: number, host: string): Promise<number> {
+  let port = startPort;
+  while (port < startPort + 100) {
+    if (await isPortAvailable(port, host)) {
+      return port;
+    }
+    port++;
+  }
+  throw new Error(`No available port found between ${startPort} and ${startPort + 100}`);
+}
+
+// Silent Vite logger
+const silentLogger = {
+  info: () => {},
+  warn: () => {},
+  error: () => {},
+};
+
+export async function createServer(options: DevServerOptions = {}): Promise<Server> {
+  const preferredPort = options.port || 2727;
+  const host = options.host || 'localhost';
+  const root = options.root || process.cwd();
+
+  // Find available port
+  const port = await findAvailablePort(preferredPort, host);
+
+  // Create connect app
+  const app = connect();
+
+  // JIT Compilation Middleware
+  app.use(async (req, res, next) => {
+    const url = req.url || '';
+    
+    // Handle TypeScript/TSX files with JIT compilation
+    if (url.match(/\.(ts|tsx|js|jsx)$/)) {
+      const filePath = path.join(root, 'src', url.replace(/^\//, ''));
+      
+      try {
+        // Check if file exists
+        const stats = await fs.stat(filePath).catch(() => null);
+        if (!stats) return next();
+
+        // Read and compile
+        const source = await fs.readFile(filePath, 'utf-8');
+        
+        const startTime = performance.now();
+        const result = await jitCompile(source, filePath, {
+          target: 'es2022',
+          sourceMap: true,
+        });
+        const compileTime = performance.now() - startTime;
+
+        // Cache the result
+        const etag = `"${stats.mtime.getTime().toString(36)}"`;
+        moduleCache.set(url, { code: result.code, etag });
+
+        // Set response headers
+        res.setHeader('Content-Type', 'application/javascript');
+        res.setHeader('ETag', etag);
+        res.setHeader('X-Compile-Time', `${compileTime.toFixed(2)}ms`);
+        res.setHeader('X-JIT-Compiler', 'esbuild');
+        
+        // Check if client has fresh content
+        if (req.headers['if-none-match'] === etag) {
+          res.statusCode = 304;
+          res.end();
+          return;
+        }
+
+        res.end(result.code);
+        return;
+      } catch (error) {
+        console.error(`[JIT Error] ${filePath}:`, error);
+        res.statusCode = 500;
+        res.setHeader('Content-Type', 'application/javascript');
+        res.end(`console.error("[Compile Error]", ${JSON.stringify(String(error))});`);
+        return;
+      }
+    }
+    
+    next();
+  });
+
+  // Create Vite dev server for static assets and HMR (silent mode)
+  const vite = await createViteServer({
+    root,
+    server: {
+      middlewareMode: true,
+    },
+    appType: 'custom',
+    customLogger: silentLogger as any,
+    optimizeDeps: {
+      force: true,
+      esbuildOptions: {
+        target: 'es2022',
+      },
+    },
+    esbuild: {
+      target: 'es2022',
+      jsx: 'automatic',
+      jsxImportSource: 'zylaris',
+    },
+  });
+
+  // Use Vite middlewares
+  app.use(vite.middlewares);
+
+  // SPA fallback - serve index.html for all routes
+  app.use(async (req, res, next) => {
+    const url = req.url || '';
+    
+    // Skip API routes and file requests
+    if (url.startsWith('/api/') || url.includes('.')) {
+      return next();
+    }
+    
+    try {
+      // Try to serve index.html
+      const indexPath = path.join(root, 'index.html');
+      const content = await fs.readFile(indexPath, 'utf-8');
+      res.setHeader('Content-Type', 'text/html');
+      res.end(content);
+    } catch {
+      // No index.html found
+      res.statusCode = 404;
+      res.setHeader('Content-Type', 'text/plain');
+      res.end('Cannot GET ' + url);
+    }
+  });
+
+  // Create HTTP server
+  const server = createHttpServer(app);
+
+  // Create WebSocket server for HMR on a different port
+  let wsPort: number;
+  let wss: WebSocketServer;
+  
+  try {
+    wsPort = await findAvailablePort(port + 1, host);
+    wss = new WebSocketServer({ port: wsPort, host });
+  } catch (error) {
+    // Fallback: try ports up to port + 100
+    wsPort = await findAvailablePort(port + 10, host);
+    wss = new WebSocketServer({ port: wsPort, host });
+  }
+
+  const clients = new Set<WebSocket>();
+
+  wss.on('connection', (ws) => {
+    clients.add(ws);
+    ws.send(JSON.stringify({ type: 'connected' }));
+
+    ws.on('close', () => {
+      clients.delete(ws);
+    });
+
+    ws.on('message', (data) => {
+      try {
+        const message = JSON.parse(data.toString());
+        handleHMRMessage(message, ws);
+      } catch {
+        // Ignore invalid messages
+      }
+    });
+  });
+
+  // File watcher with debouncing
+  const watcher = chokidar.watch(path.join(root, 'src'), {
+    ignored: /node_modules|\.git/,
+    persistent: true,
+    ignoreInitial: true,
+  });
+
+  let debounceTimer: NodeJS.Timeout | null = null;
+
+  watcher.on('change', (filePath) => {
+    // Invalidate cache
+    invalidateCache(filePath);
+    
+    // Debounce HMR updates
+    if (debounceTimer) clearTimeout(debounceTimer);
+    debounceTimer = setTimeout(() => {
+      const relativePath = '/' + path.relative(path.join(root, 'src'), filePath);
+      moduleCache.delete(relativePath);
+      
+      broadcast({
+        type: 'update',
+        path: relativePath,
+      });
+    }, 50);
+  });
+
+  watcher.on('add', (filePath) => {
+    broadcast({
+      type: 'full-reload',
+      path: filePath,
+    });
+  });
+
+  watcher.on('unlink', (filePath) => {
+    invalidateCache(filePath);
+    broadcast({
+      type: 'full-reload',
+    });
+  });
+
+  // Start server
+  await new Promise<void>((resolve, reject) => {
+    server.listen(port, host, () => {
+      resolve();
+    });
+    server.once('error', reject);
+  });
+
+  // Broadcast to all clients
+  function broadcast(message: HMRMessage) {
+    const data = JSON.stringify(message);
+    clients.forEach((client) => {
+      if (client.readyState === WebSocket.OPEN) {
+        client.send(data);
+      }
+    });
+  }
+
+  function handleHMRMessage(_message: any, _ws: WebSocket) {
+    // Handle HMR messages from client
+  }
+
+  // Warm up cache for common files
+  const commonFiles = [
+    path.join(root, 'src', 'app', 'layout.tsx'),
+    path.join(root, 'src', 'app', 'page.tsx'),
+  ];
+
+  for (const file of commonFiles) {
+    try {
+      const source = await fs.readFile(file, 'utf-8');
+      await jitCompile(source, file);
+    } catch {
+      // File might not exist
+    }
+  }
+
+  // Return server with close method
+  return Object.assign(server, {
+    close: (callback?: () => void) => {
+      watcher.close();
+      wss.close();
+      vite.close();
+      server.close(callback);
+      moduleCache.clear();
+    },
+  });
+}
+
+// Export JIT utilities
+export { invalidateCache, moduleCache };

package/packages/dev-server/src/jit-middleware.ts

@@ -0,0 +1,78 @@
+// JIT Middleware for Dev Server
+// Handles on-demand compilation with caching
+
+import { jitCompile, invalidateCache } from '@zylaris/compiler';
+import path from 'path';
+import fs from 'fs/promises';
+import type { IncomingMessage, ServerResponse } from 'http';
+
+type Request = IncomingMessage;
+type Response = ServerResponse;
+type NextFunction = () => void;
+
+interface JITMiddlewareOptions {
+  root: string;
+  cacheDir?: string;
+}
+
+/**
+ * Create JIT middleware for connect/express
+ */
+export function createJITMiddleware(options: JITMiddlewareOptions) {
+  const { root } = options;
+
+  return async (req: Request, res: Response, next: NextFunction) => {
+    // Only handle JS/TS files
+    const url = req.url || '';
+    
+    if (!url.match(/\.(ts|tsx|js|jsx)$/)) {
+      return next();
+    }
+
+    const filePath = path.join(root, url.replace(/^\//, ''));
+
+    try {
+      // Read file
+      const source = await fs.readFile(filePath, 'utf-8');
+
+      // JIT Compile
+      const startTime = performance.now();
+      const result = await jitCompile(source, filePath, {
+        target: 'es2022',
+        sourceMap: true,
+      });
+      const compileTime = performance.now() - startTime;
+
+      // Set headers
+      res.setHeader('Content-Type', 'application/javascript');
+      res.setHeader('X-Compile-Time', `${compileTime.toFixed(2)}ms`);
+      res.setHeader('X-Compiled-By', 'zylaris-jit');
+      res.setHeader('Cache-Control', 'no-cache');
+
+      // Send compiled code
+      res.end(result.code);
+    } catch (error) {
+      // Return error as JavaScript that throws
+      const errorMessage = error instanceof Error ? error.message : 'Compilation failed';
+      res.statusCode = 500;
+      res.setHeader('Content-Type', 'application/javascript');
+      res.end(`
+        console.error('[Zylaris JIT Error]', ${JSON.stringify(errorMessage)});
+        throw new Error(${JSON.stringify(errorMessage)});
+      `);
+    }
+  };
+}
+
+/**
+ * Create file watcher that invalidates cache on changes
+ */
+export function createCacheInvalidator(watcher: any) {
+  watcher.on('change', (filePath: string) => {
+    invalidateCache(filePath);
+  });
+
+  watcher.on('unlink', (filePath: string) => {
+    invalidateCache(filePath);
+  });
+}

package/packages/dev-server/tsconfig.json

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

package/packages/plugins/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@zylaris/plugins",
+  "version": "0.1.0",
+  "description": "Plugin system for Zylaris - Use any JS library with ease",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./auto-import": {
+      "import": "./dist/loaders/auto-import.js",
+      "types": "./dist/loaders/auto-import.d.ts"
+    },
+    "./cdn": {
+      "import": "./dist/cdn/loader.js",
+      "types": "./dist/cdn/loader.d.ts"
+    },
+    "./transforms": {
+      "import": "./dist/transforms/index.js",
+      "types": "./dist/transforms/index.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "test": "vitest"
+  },
+  "dependencies": {
+    "@zylaris/compiler": "workspace:*",
+    "esbuild": "^0.19.0",
+    "magic-string": "^0.30.0",
+    "unimport": "^3.7.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "typescript": "^5.3.0"
+  },
+  "peerDependencies": {
+    "zylaris": "workspace:*"
+  }
+}

package/packages/plugins/src/cdn/loader.ts

@@ -0,0 +1,275 @@
+/**
+ * CDN Loader
+ * Load libraries from CDN (esm.sh, unpkg, skypack, etc.)
+ */
+
+import type { CDNOptions, CDNProvider, LibraryConfig } from '../types.js';
+
+/** Default CDN URLs */
+const CDN_URLS: Record<CDNProvider, string> = {
+  'esm.sh': 'https://esm.sh',
+  'unpkg': 'https://unpkg.com',
+  'skypack': 'https://cdn.skypack.dev',
+  'jspm': 'https://jspm.dev',
+  'jsdelivr': 'https://cdn.jsdelivr.net/npm',
+  'cdnjs': 'https://cdnjs.cloudflare.com/ajax/libs',
+};
+
+/** Generate CDN URL */
+export function generateCDNUrl(
+  packageName: string,
+  options: CDNOptions = {}
+): string {
+  const {
+    provider = 'esm.sh',
+    version,
+    query = {},
+    deps = [],
+    minify = true,
+    target = 'es2022',
+    bare = false,
+  } = options;
+
+  const baseUrl = CDN_URLS[provider];
+  const versionTag = version ? `@${version}` : '';
+
+  switch (provider) {
+    case 'esm.sh':
+      return buildEsmShUrl(baseUrl, packageName, versionTag, { query, deps, minify, target });
+    
+    case 'unpkg':
+      return `${baseUrl}/${packageName}${versionTag}`;
+    
+    case 'skypack':
+      return `${baseUrl}/${packageName}${versionTag}${minify ? '?min' : ''}`;
+    
+    case 'jspm':
+      return `${baseUrl}/${packageName}${versionTag}`;
+    
+    case 'jsdelivr':
+      return `${baseUrl}/${packageName}${versionTag}${bare ? '' : '/+esm'}`;
+    
+    case 'cdnjs':
+      // cdnjs uses different path format
+      return `${baseUrl}/${packageName}/${version || 'latest'}`;
+    
+    default:
+      return `${baseUrl}/${packageName}${versionTag}`;
+  }
+}
+
+/** Build esm.sh URL with options */
+function buildEsmShUrl(
+  base: string,
+  pkg: string,
+  version: string,
+  opts: {
+    query: Record<string, string>;
+    deps: string[];
+    minify: boolean;
+    target: string;
+  }
+): string {
+  const params = new URLSearchParams();
+  
+  if (opts.target) params.set('target', opts.target);
+  if (!opts.minify) params.set('minify', 'false');
+  if (opts.deps.length > 0) params.set('deps', opts.deps.join(','));
+  
+  // Add custom query params
+  for (const [key, value] of Object.entries(opts.query)) {
+    params.set(key, value);
+  }
+
+  const queryString = params.toString();
+  return `${base}/${pkg}${version}${queryString ? '?' + queryString : ''}`;
+}
+
+/** Create import map from libraries */
+export function createImportMap(
+  libraries: LibraryConfig[],
+  cdnOptions: CDNOptions = {}
+): Record<string, string> {
+  const imports: Record<string, string> = {};
+
+  for (const lib of libraries) {
+    if (lib.source === 'cdn' || !lib.source) {
+      const url = generateCDNUrl(lib.name, {
+        ...cdnOptions,
+        provider: lib.cdn || cdnOptions.provider,
+        version: lib.version,
+      });
+      imports[lib.name] = url;
+    }
+  }
+
+  return imports;
+}
+
+/** Generate script tag for CDN */
+export function generateScriptTag(
+  packageName: string,
+  options: CDNOptions = {}
+): string {
+  const url = generateCDNUrl(packageName, options);
+  return `<script type="module" src="${url}"></script>`;
+}
+
+/** Generate import map script */
+export function generateImportMapScript(
+  libraries: LibraryConfig[],
+  cdnOptions: CDNOptions = {}
+): string {
+  const imports = createImportMap(libraries, cdnOptions);
+  
+  return `<script type="importmap">
+${JSON.stringify({ imports }, null, 2)}
+</script>`;
+}
+
+/** Resolve module from CDN with fallback */
+export async function resolveFromCDN(
+  packageName: string,
+  providers: CDNProvider[] = ['esm.sh', 'unpkg', 'jsdelivr']
+): Promise<{ url: string; provider: CDNProvider } | null> {
+  for (const provider of providers) {
+    const url = generateCDNUrl(packageName, { provider });
+    
+    try {
+      const response = await fetch(url, { method: 'HEAD' });
+      if (response.ok) {
+        return { url, provider };
+      }
+    } catch {
+      // Continue to next provider
+    }
+  }
+
+  return null;
+}
+
+/** CDN Cache manager */
+export class CDNCache {
+  private cache = new Map<string, string>();
+  private maxSize: number;
+
+  constructor(maxSize = 100) {
+    this.maxSize = maxSize;
+  }
+
+  get(key: string): string | undefined {
+    return this.cache.get(key);
+  }
+
+  set(key: string, value: string): void {
+    if (this.cache.size >= this.maxSize) {
+      // Remove oldest entry
+      const firstKey = this.cache.keys().next().value;
+      if (firstKey) this.cache.delete(firstKey);
+    }
+    this.cache.set(key, value);
+  }
+
+  has(key: string): boolean {
+    return this.cache.has(key);
+  }
+
+  clear(): void {
+    this.cache.clear();
+  }
+}
+
+/** Fetch and cache module content */
+export async function fetchModule(
+  url: string,
+  cache?: CDNCache
+): Promise<string> {
+  const cached = cache?.get(url);
+  if (cached) return cached;
+
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch ${url}: ${response.status}`);
+  }
+
+  const content = await response.text();
+  cache?.set(url, content);
+  
+  return content;
+}
+
+/** Transform imports to CDN URLs */
+export function transformImportsToCDN(
+  code: string,
+  importMap: Record<string, string>
+): string {
+  // Replace bare imports with CDN URLs
+  const importRegex = /from\s+['"]([^'"]+)['"]|import\s+['"]([^'"]+)['"]/g;
+  
+  return code.replace(importRegex, (match, fromPath, importPath) => {
+    const path = fromPath || importPath;
+    const cdnUrl = importMap[path];
+    
+    if (cdnUrl) {
+      return match.replace(path, cdnUrl);
+    }
+    
+    return match;
+  });
+}
+
+/** Detect package format from CDN */
+export async function detectFormat(url: string): Promise<string> {
+  try {
+    const response = await fetch(url, { method: 'HEAD' });
+    const contentType = response.headers.get('content-type') || '';
+    
+    if (contentType.includes('javascript')) {
+      // Try to detect ESM vs CJS
+      const content = await fetch(url).then(r => r.text());
+      if (content.includes('export ') || content.includes('import ')) {
+        return 'esm';
+      }
+      if (content.includes('module.exports') || content.includes('require(')) {
+        return 'cjs';
+      }
+    }
+    
+    return 'unknown';
+  } catch {
+    return 'unknown';
+  }
+}
+
+/** CDN plugin for esbuild */
+export function cdnPlugin(
+  libraries: LibraryConfig[],
+  options: CDNOptions = {}
+) {
+  const importMap = createImportMap(libraries, options);
+
+  return {
+    name: 'cdn-loader',
+    setup(build: { onResolve: (args: { filter: RegExp }, callback: (args: { path: string }) => { path: string; external: boolean } | null) => void }) {
+      build.onResolve({ filter: /.*/ }, (args: { path: string }) => {
+        const cdnUrl = importMap[args.path];
+        if (cdnUrl) {
+          return { path: cdnUrl, external: true };
+        }
+        return null;
+      });
+    },
+  };
+}
+
+export default {
+  generateCDNUrl,
+  createImportMap,
+  generateScriptTag,
+  generateImportMapScript,
+  resolveFromCDN,
+  CDNCache,
+  fetchModule,
+  transformImportsToCDN,
+  cdnPlugin,
+};