zylaris 1.0.2

package/packages/compiler/src/jit.ts

@@ -0,0 +1,187 @@
+// JIT Compiler for Development
+// Ultra-fast compilation with in-memory caching
+
+import { transform as esbuildTransform, TransformOptions } from 'esbuild';
+import { createHash } from 'crypto';
+
+interface JITCacheEntry {
+  code: string;
+  map: string;
+  timestamp: number;
+  dependencies: Set<string>;
+}
+
+interface JITOptions {
+  target?: 'es2020' | 'es2022' | 'esnext';
+  jsx?: 'transform' | 'preserve';
+  jsxImportSource?: string;
+  sourceMap?: boolean;
+  cacheTimeout?: number; // Cache timeout in ms (default: 5 minutes)
+}
+
+// In-memory cache for compiled modules
+const moduleCache = new Map<string, JITCacheEntry>();
+const fileTimestamps = new Map<string, number>();
+
+// Default options
+const defaultOptions: JITOptions = {
+  target: 'es2022',
+  jsx: 'transform',
+  jsxImportSource: 'zylaris',
+  sourceMap: true,
+  cacheTimeout: 5 * 60 * 1000, // 5 minutes
+};
+
+/**
+ * Generate cache key from content and options
+ */
+function generateCacheKey(source: string, filename: string, options: JITOptions): string {
+  const content = `${source}::${filename}::${JSON.stringify(options)}`;
+  return createHash('md5').update(content).digest('hex');
+}
+
+/**
+ * Check if cache entry is valid
+ */
+function isCacheValid(entry: JITCacheEntry, cacheTimeout: number): boolean {
+  const now = Date.now();
+  return (now - entry.timestamp) < cacheTimeout;
+}
+
+/**
+ * JIT Compile TypeScript/TSX/JSX file
+ * Uses esbuild for maximum speed with in-memory caching
+ */
+export async function jitCompile(
+  source: string,
+  filename: string,
+  options: JITOptions = {}
+): Promise<{ code: string; map: string }> {
+  const opts = { ...defaultOptions, ...options };
+  const cacheKey = generateCacheKey(source, filename, opts);
+
+  // Check cache first
+  const cached = moduleCache.get(cacheKey);
+  if (cached && isCacheValid(cached, opts.cacheTimeout!)) {
+    return { code: cached.code, map: cached.map };
+  }
+
+  // Determine loader based on extension
+  const ext = filename.split('.').pop()?.toLowerCase();
+  let loader: TransformOptions['loader'] = 'ts';
+  
+  if (ext === 'tsx' || (ext === 'ts' && filename.includes('jsx'))) {
+    loader = 'tsx';
+  } else if (ext === 'jsx') {
+    loader = 'jsx';
+  }
+
+  // Compile with esbuild (faster than SWC for single-file transforms)
+  const result = await esbuildTransform(source, {
+    loader,
+    target: opts.target,
+    format: 'esm',
+    platform: 'neutral',
+    jsx: opts.jsx === 'transform' ? 'automatic' : 'preserve',
+    jsxImportSource: opts.jsxImportSource,
+    sourcemap: opts.sourceMap ? 'inline' : false,
+    sourcesContent: false,
+    // Development optimizations
+    minifyWhitespace: false,
+    minifyIdentifiers: false,
+    minifySyntax: false,
+    // Keep names for debugging
+    keepNames: true,
+    // Fastest tree shaking
+    treeShaking: true,
+    // Preserve import.meta
+    define: {
+      'import.meta.env.DEV': 'true',
+      'import.meta.env.PROD': 'false',
+    },
+  });
+
+  const output = {
+    code: result.code,
+    map: result.map || '',
+  };
+
+  // Store in cache
+  moduleCache.set(cacheKey, {
+    code: output.code,
+    map: output.map,
+    timestamp: Date.now(),
+    dependencies: extractDependencies(source),
+  });
+
+  return output;
+}
+
+/**
+ * Extract import dependencies from source
+ */
+function extractDependencies(source: string): Set<string> {
+  const deps = new Set<string>();
+  const importRegex = /import\s+(?:{[^}]*}|[^'"]*)\s*from\s*['"]([^'"]+)['"]|import\s*['"]([^'"]+)['"]/g;
+  
+  let match;
+  while ((match = importRegex.exec(source)) !== null) {
+    deps.add(match[1] || match[2]);
+  }
+  
+  return deps;
+}
+
+/**
+ * Invalidate cache for a specific file
+ */
+export function invalidateCache(filename: string): void {
+  // Find and remove cache entries that depend on this file
+  for (const [key, entry] of moduleCache.entries()) {
+    if (entry.dependencies.has(filename)) {
+      moduleCache.delete(key);
+    }
+  }
+}
+
+/**
+ * Clear all cache
+ */
+export function clearCache(): void {
+  moduleCache.clear();
+  fileTimestamps.clear();
+}
+
+/**
+ * Get cache stats
+ */
+export function getCacheStats(): {
+  size: number;
+  entries: number;
+  hitRate: number;
+} {
+  return {
+    size: moduleCache.size,
+    entries: moduleCache.size,
+    hitRate: 0, // Would need to track hits/misses
+  };
+}
+
+/**
+ * Warm up cache for commonly used files
+ */
+export async function warmupCache(
+  files: Array<{ source: string; filename: string }>,
+  options?: JITOptions
+): Promise<void> {
+  await Promise.all(
+    files.map(({ source, filename }) =>
+      jitCompile(source, filename, options).catch(() => {
+        // Silently ignore errors during warmup
+      })
+    )
+  );
+}
+
+// Export for monitoring
+export { moduleCache };

package/packages/compiler/tsconfig.json

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

package/packages/core/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "zylaris",
+  "version": "1.0.0",
+  "description": "Zylaris - The Universal Web Framework",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./server": {
+      "types": "./dist/server/index.d.ts",
+      "import": "./dist/server/index.js"
+    },
+    "./jsx-runtime": {
+      "types": "./dist/jsx-runtime.d.ts",
+      "import": "./dist/jsx-runtime.js"
+    },
+    "./jsx-dev-runtime": {
+      "types": "./dist/jsx-runtime.d.ts",
+      "import": "./dist/jsx-runtime.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "test": "vitest run --passWithNoTests",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  },
+  "dependencies": {
+    "@zylaris/reactivity": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "typescript": "^5.3.3",
+    "vitest": "^1.2.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0"
+  },
+  "keywords": [
+    "framework",
+    "web",
+    "jsx",
+    "zylaris"
+  ],
+  "license": "MIT"
+}

package/packages/core/src/components.test.ts

@@ -0,0 +1,125 @@
+import { describe, it, expect } from 'vitest';
+import { Show, For, Switch, Match } from './components.js';
+import { signal } from '@zylaris/reactivity';
+
+describe('Show', () => {
+  it('should render children when condition is true', () => {
+    const result = Show({
+      when: true,
+      children: 'Content' as any
+    });
+    expect(result).toBe('Content');
+  });
+
+  it('should render fallback when condition is false', () => {
+    const result = Show({
+      when: false,
+      fallback: 'Fallback' as any,
+      children: 'Content' as any
+    });
+    expect(result).toBe('Fallback');
+  });
+
+  it('should render null when no fallback and condition is false', () => {
+    const result = Show({
+      when: false,
+      children: 'Content' as any
+    });
+    expect(result).toBeNull();
+  });
+
+  it('should work with signal', () => {
+    const s = signal(true);
+    const result = Show({
+      when: s,
+      children: 'Content' as any
+    });
+    expect(result).toBe('Content');
+  });
+
+  it('should call children as function with value', () => {
+    const result = Show({
+      when: 'hello',
+      children: ((value: string) => `Value: ${value}`) as any
+    });
+    expect(result).toBe('Value: hello');
+  });
+});
+
+describe('For', () => {
+  it('should render array items', () => {
+    const items = [1, 2, 3];
+    const result = For({
+      each: items,
+      children: ((item: number) => item * 2) as any
+    });
+    expect(result).toEqual([2, 4, 6]);
+  });
+
+  it('should return empty array for empty input', () => {
+    const result = For({
+      each: [],
+      children: ((item: any) => item) as any
+    });
+    expect(result).toEqual([]);
+  });
+
+  it('should return fallback for empty array', () => {
+    const result = For({
+      each: [],
+      fallback: 'No items' as any,
+      children: ((item: any) => item) as any
+    });
+    expect(result).toEqual(['No items']);
+  });
+
+  it('should work with signal', () => {
+    const s = signal([1, 2, 3]);
+    const result = For({
+      each: s,
+      children: ((item: number) => item * 2) as any
+    });
+    expect(result).toEqual([2, 4, 6]);
+  });
+});
+
+describe('Switch/Match', () => {
+  it('should render first matching case', () => {
+    const result = Switch({
+      children: [
+        Match({ when: false, children: 'First' as any }),
+        Match({ when: true, children: 'Second' as any }),
+        Match({ when: true, children: 'Third' as any })
+      ] as any
+    });
+    expect(result).toBe('Second');
+  });
+
+  it('should render fallback when no match', () => {
+    const result = Switch({
+      fallback: 'No match' as any,
+      children: [
+        Match({ when: false, children: 'First' as any })
+      ] as any
+    });
+    expect(result).toBe('No match');
+  });
+
+  it('should render null when no match and no fallback', () => {
+    const result = Switch({
+      children: [
+        Match({ when: false, children: 'First' as any })
+      ] as any
+    });
+    expect(result).toBeNull();
+  });
+
+  it('should call children as function', () => {
+    const result = Switch({
+      children: [
+        Match({ when: true, children: (() => 'Dynamic') as any })
+      ] as any
+    });
+    expect(result).toBe('Dynamic');
+  });
+});

package/packages/core/src/components.ts

@@ -0,0 +1,181 @@
+import type { Signal } from '@zylaris/reactivity';
+import { isSignal } from './jsx-runtime.js';
+
+// Show component - conditional rendering with fallback
+interface ShowProps<T> {
+  when: T | Signal<T> | null | undefined | false;
+  fallback?: JSX.Element;
+  children: ((item: T) => JSX.Element) | JSX.Element;
+}
+
+export function Show<T>(props: ShowProps<T>): JSX.Element {
+  const when = isSignal(props.when) ? props.when() : props.when;
+  
+  if (!when) {
+    return props.fallback || (null as unknown as JSX.Element);
+  }
+  
+  if (typeof props.children === 'function') {
+    return props.children(when as T);
+  }
+  
+  return props.children;
+}
+
+// For component - optimized list rendering
+interface ForProps<T> {
+  each: T[] | Signal<T[]>;
+  children: (item: T, index: () => number) => JSX.Element;
+  fallback?: JSX.Element;
+}
+
+export function For<T>(props: ForProps<T>): JSX.Element[] {
+  const items = isSignal(props.each) ? props.each() : props.each;
+  
+  if (!items || items.length === 0) {
+    return props.fallback ? [props.fallback] : [];
+  }
+  
+  return items.map((item, index) => props.children(item, () => index));
+}
+
+// Switch/Match components
+interface SwitchProps {
+  fallback?: JSX.Element;
+  children: JSX.Element | JSX.Element[];
+}
+
+interface MatchProps {
+  when: boolean | Signal<boolean>;
+  children: JSX.Element | (() => JSX.Element);
+}
+
+export function Switch(props: SwitchProps): JSX.Element {
+  const children = Array.isArray(props.children) ? props.children : [props.children];
+  
+  for (const child of children) {
+    // Check if it's a Match marker object
+    if (child && typeof child === 'object' && 'type' in child && child.type === 'match' && 'props' in child) {
+      const matchProps = child.props as MatchProps;
+      const when = isSignal(matchProps.when) ? matchProps.when() : matchProps.when;
+      
+      if (when) {
+        return typeof matchProps.children === 'function' 
+          ? matchProps.children() 
+          : matchProps.children;
+      }
+    }
+  }
+  
+  return props.fallback || (null as unknown as JSX.Element);
+}
+
+// Match marker object for Switch
+export function Match(props: MatchProps): { type: 'match'; props: MatchProps } {
+  // Return a marker object that Switch can identify
+  return { type: 'match', props };
+}
+
+// Suspense component
+interface SuspenseProps {
+  fallback: JSX.Element;
+  children: JSX.Element;
+}
+
+export function Suspense(props: SuspenseProps): JSX.Element {
+  // In real implementation, this would integrate with resource signals
+  return props.children;
+}
+
+// Dynamic component
+interface DynamicProps<T> {
+  component: (props: T) => JSX.Element;
+  props?: T;
+}
+
+export function Dynamic<T extends object>(props: DynamicProps<T>): JSX.Element {
+  return props.component(props.props || {} as T);
+}
+
+// Portal component (for modals, tooltips)
+interface PortalProps {
+  mount?: HTMLElement;
+  children: JSX.Element;
+}
+
+export function Portal(props: PortalProps): JSX.Element {
+  // In real implementation, this would render to a different DOM node
+  return props.children;
+}
+
+// Error Boundary
+interface ErrorBoundaryProps {
+  fallback: (error: Error, reset: () => void) => JSX.Element;
+  children: JSX.Element;
+}
+
+interface ErrorBoundaryState {
+  error: Error | null;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+declare global {
+  namespace JSX {
+    interface Element {}
+  }
+}
+
+interface ReactLikeComponent<P, S> {
+  props: P;
+  state: S;
+  setState(state: Partial<S>): void;
+}
+
+export class ErrorBoundary implements ReactLikeComponent<ErrorBoundaryProps, ErrorBoundaryState> {
+  props: ErrorBoundaryProps;
+  state: ErrorBoundaryState;
+  
+  constructor(props: ErrorBoundaryProps) {
+    this.props = props;
+    this.state = { error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { error };
+  }
+
+  setState(state: Partial<ErrorBoundaryState>): void {
+    this.state = { ...this.state, ...state };
+  }
+
+  reset = () => {
+    this.setState({ error: null });
+  };
+
+  render(): JSX.Element {
+    if (this.state.error) {
+      return this.props.fallback(this.state.error, this.reset);
+    }
+    return this.props.children;
+  }
+}
+
+// Lazy component
+export function lazy<T extends object>(
+  loader: () => Promise<{ default: (props: T) => JSX.Element }>
+): (props: T) => JSX.Element {
+  let Component: ((props: T) => JSX.Element) | null = null;
+  let promise: Promise<void> | null = null;
+
+  return function LazyComponent(props: T): JSX.Element {
+    if (!Component) {
+      if (!promise) {
+        promise = loader().then((module) => {
+          Component = module.default;
+        });
+      }
+      throw promise;
+    }
+    return Component(props);
+  };
+}