@punkestu/react-html 0.1.0 → 1.0.0

package/src/core/loader.ts

@@ -1,89 +0,0 @@
-import * as esbuild from 'esbuild';
-import fs from 'node:fs/promises';
-import path from 'node:path';
-import crypto from 'node:crypto';
-import { pathToFileURL } from 'node:url';
-
-export interface LoadedPage {
-  Component: React.ComponentType<any>;
-  metadata?: {
-    title?: string;
-    description?: string;
-    [key: string]: unknown;
-  };
-}
-
-const CACHE_DIR = path.resolve(process.cwd(), '.react-html/cache');
-
-// Plugin to replace import.meta.url with the real source file URL
-const importMetaUrlPlugin: esbuild.Plugin = {
-  name: 'preserve-import-meta-url',
-  setup(build) {
-    build.onLoad({ filter: /\.(tsx|ts|jsx|js)$/ }, async (args) => {
-      if (args.path.includes('node_modules')) return null;
-      let text = await fs.readFile(args.path, 'utf8');
-      if (text.includes('import.meta.url')) {
-        const fileUrl = pathToFileURL(args.path).href;
-        text = text.replaceAll('import.meta.url', JSON.stringify(fileUrl));
-        const ext = path.extname(args.path).slice(1);
-        return {
-          contents: text,
-          loader: (ext === 'js' || ext === 'jsx' || ext === 'ts' || ext === 'tsx') ? (ext as any) : 'tsx'
-        };
-      }
-      return null;
-    });
-  }
-};
-
-export async function loadPageModule(pageFilePath: string): Promise<LoadedPage> {
-  await fs.mkdir(CACHE_DIR, { recursive: true });
-
-  const resolvedPath = path.resolve(pageFilePath);
-  const hash = crypto.createHash('sha256').update(resolvedPath).digest('hex').slice(0, 12);
-  const cacheFilePath = path.join(CACHE_DIR, `page-${hash}.mjs`);
-
-  // Build the page bundle for Node.js execution
-  await esbuild.build({
-    entryPoints: [resolvedPath],
-    outfile: cacheFilePath,
-    bundle: true,
-    format: 'esm',
-    platform: 'node',
-    target: 'node22',
-    packages: 'external',
-    sourcemap: 'inline',
-    plugins: [importMetaUrlPlugin],
-    loader: {
-      '.tsx': 'tsx',
-      '.ts': 'ts',
-      '.jsx': 'jsx',
-      '.js': 'js',
-      '.css': 'empty'
-    }
-  });
-
-  // Dynamic import with timestamp cache buster
-  const fileUrl = `${pathToFileURL(cacheFilePath).href}?t=${Date.now()}`;
-  const importedModule = await import(fileUrl);
-
-  const Component = importedModule.default;
-  if (!Component) {
-    throw new Error(`Page "${pageFilePath}" does not have a default export. Please provide "export default function Page()".`);
-  }
-
-  const { default: _, ...metadata } = importedModule;
-
-  return {
-    Component,
-    metadata
-  };
-}
-
-export async function clearCache(): Promise<void> {
-  try {
-    await fs.rm(CACHE_DIR, { recursive: true, force: true });
-  } catch {
-    // Ignore cache cleanup errors
-  }
-}

package/src/core/renderer.ts

@@ -1,80 +0,0 @@
-import React from 'react';
-import { renderToStaticMarkup } from 'react-dom/server';
-import { runWithRenderContext, IslandInstance } from './island-registry.js';
-import { formatHtml } from './formatter.js';
-
-export interface RenderResult {
-  html: string;
-  islands: IslandInstance[];
-}
-
-export interface RenderOptions {
-  pagePath: string;
-  Component: React.ComponentType<any>;
-  props?: Record<string, unknown>;
-  metadata?: {
-    title?: string;
-    description?: string;
-    lang?: string;
-    [key: string]: unknown;
-  };
-  basePath?: string;
-}
-
-export function renderPageToHtml(options: RenderOptions): RenderResult {
-  const { pagePath, Component, props = {}, metadata = {}, basePath = '' } = options;
-  const islands: IslandInstance[] = [];
-
-  const rawMarkup = runWithRenderContext(
-    { pagePath, islands },
-    () => renderToStaticMarkup(React.createElement(Component, props))
-  );
-
-  let finalHtml = rawMarkup;
-  const hasHtmlTag = /<html[^>]*>/i.test(finalHtml);
-  const hasDoctype = /<!DOCTYPE html>/i.test(finalHtml);
-
-  // If component returned only body contents / fragments, wrap in standard HTML shell
-  if (!hasHtmlTag) {
-    const lang = metadata.lang || 'en';
-    const titleTag = metadata.title ? `<title>${metadata.title}</title>` : '';
-    const descTag = metadata.description ? `<meta name="description" content="${metadata.description}">` : '';
-
-    finalHtml = `<!DOCTYPE html>
-<html lang="${lang}">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  ${titleTag}
-  ${descTag}
-</head>
-<body>
-  ${finalHtml}
-</body>
-</html>`;
-  } else if (!hasDoctype) {
-    finalHtml = `<!DOCTYPE html>\n${finalHtml}`;
-  }
-
-  // If there are islands, inject script tags before </body> or at the end of the file
-  if (islands.length > 0) {
-    // Collect unique island names
-    const uniqueIslands = Array.from(new Set(islands.map(i => i.name)));
-    const assetPrefix = basePath ? (basePath.endsWith('/') ? basePath : `${basePath}/`) : '/';
-    const scriptTags = uniqueIslands
-      .map(name => `<script type="module" src="${assetPrefix}assets/islands/${name}.js"></script>`)
-      .join('\n');
-
-    if (/<\/body>/i.test(finalHtml)) {
-      finalHtml = finalHtml.replace(/<\/body>/i, `${scriptTags}\n</body>`);
-    } else {
-      finalHtml = `${finalHtml}\n${scriptTags}`;
-    }
-  }
-
-  return {
-    html: formatHtml(finalHtml),
-    islands
-  };
-}
-

package/src/index.ts

@@ -1,138 +0,0 @@
-import fs from 'node:fs/promises';
-import path from 'node:path';
-import { loadPageModule, clearCache } from './core/loader.js';
-import { renderPageToHtml } from './core/renderer.js';
-import { bundleIslands } from './core/bundler.js';
-import { IslandInstance } from './core/island-registry.js';
-
-export { Island, island } from './core/island.js';
-export type { IslandProps } from './core/island.js';
-export { hydrateIsland } from './client/hydrate.js';
-export { renderPageToHtml } from './core/renderer.js';
-export { createEngine, ReactHtmlEngine } from './server/engine.js';
-export type { EngineOptions } from './server/engine.js';
-
-export interface BuildConfig {
-  root?: string;
-  pagesDir?: string;
-  outDir?: string;
-  publicDir?: string;
-  minify?: boolean;
-}
-
-export interface BuildResult {
-  pages: { input: string; output: string }[];
-  islands: string[];
-  outDir: string;
-}
-
-async function findFilesRecursively(dir: string, extensions: string[]): Promise<string[]> {
-  const entries = await fs.readdir(dir, { withFileTypes: true });
-  const files: string[] = [];
-
-  for (const entry of entries) {
-    const fullPath = path.join(dir, entry.name);
-    if (entry.isDirectory()) {
-      files.push(...(await findFilesRecursively(fullPath, extensions)));
-    } else if (entry.isFile()) {
-      const ext = path.extname(entry.name);
-      if (extensions.includes(ext) && !entry.name.startsWith('_') && !entry.name.includes('.test.')) {
-        files.push(fullPath);
-      }
-    }
-  }
-
-  return files;
-}
-
-export async function build(config: BuildConfig = {}): Promise<BuildResult> {
-  const root = path.resolve(config.root || process.cwd());
-  const outDir = path.resolve(root, config.outDir || 'dist');
-  const minify = config.minify ?? true;
-
-  // Locate pages directory
-  let pagesDir = config.pagesDir ? path.resolve(root, config.pagesDir) : '';
-  if (!pagesDir) {
-    const candidateDirs = ['src/pages', 'pages'];
-    for (const cand of candidateDirs) {
-      const p = path.join(root, cand);
-      try {
-        const stat = await fs.stat(p);
-        if (stat.isDirectory()) {
-          pagesDir = p;
-          break;
-        }
-      } catch {
-        // Continue checking
-      }
-    }
-  }
-
-  if (!pagesDir) {
-    throw new Error(`Pages directory not found. Please create 'src/pages' or specify 'pagesDir'.`);
-  }
-
-  // Ensure output directory exists and is clean
-  await fs.mkdir(outDir, { recursive: true });
-
-  // Copy public static directory if present
-  const publicDir = path.resolve(root, config.publicDir || 'public');
-  try {
-    const publicStat = await fs.stat(publicDir);
-    if (publicStat.isDirectory()) {
-      await fs.cp(publicDir, outDir, { recursive: true });
-    }
-  } catch {
-    // Public directory optional
-  }
-
-  const pageFiles = await findFilesRecursively(pagesDir, ['.tsx', '.jsx', '.ts', '.js']);
-  if (pageFiles.length === 0) {
-    console.warn(`[react-html] No pages found in ${pagesDir}`);
-  }
-
-  const allDiscoveredIslands: IslandInstance[] = [];
-  const processedPages: { input: string; output: string }[] = [];
-
-  for (const pageFile of pageFiles) {
-    const relativePage = path.relative(pagesDir, pageFile);
-    const parsed = path.parse(relativePage);
-
-    // Compute destination path: index.tsx -> index.html, about.tsx -> about.html
-    const outHtmlFile = path.join(outDir, parsed.dir, `${parsed.name}.html`);
-    await fs.mkdir(path.dirname(outHtmlFile), { recursive: true });
-
-    // Load page module
-    const { Component, metadata } = await loadPageModule(pageFile);
-
-    // Render to pure HTML and extract islands
-    const { html, islands } = renderPageToHtml({
-      pagePath: pageFile,
-      Component,
-      metadata
-    });
-
-    await fs.writeFile(outHtmlFile, html, 'utf8');
-    processedPages.push({ input: pageFile, output: outHtmlFile });
-
-    if (islands.length > 0) {
-      allDiscoveredIslands.push(...islands);
-    }
-  }
-
-  // Bundle reactive islands
-  let bundledIslands: string[] = [];
-  if (allDiscoveredIslands.length > 0) {
-    bundledIslands = await bundleIslands(allDiscoveredIslands, { outDir, minify });
-  }
-
-  // Cleanup compile cache
-  await clearCache();
-
-  return {
-    pages: processedPages,
-    islands: bundledIslands,
-    outDir
-  };
-}
-

package/src/server/dev-server.ts

@@ -1,125 +0,0 @@
-import http from 'node:http';
-import fs from 'node:fs/promises';
-import { existsSync, watch } from 'node:fs';
-import path from 'node:path';
-import { build, BuildConfig } from '../index.js';
-
-const MIME_TYPES: Record<string, string> = {
-  '.html': 'text/html; charset=utf-8',
-  '.js': 'application/javascript; charset=utf-8',
-  '.mjs': 'application/javascript; charset=utf-8',
-  '.css': 'text/css; charset=utf-8',
-  '.json': 'application/json; charset=utf-8',
-  '.png': 'image/png',
-  '.jpg': 'image/jpeg',
-  '.jpeg': 'image/jpeg',
-  '.gif': 'image/gif',
-  '.svg': 'image/svg+xml',
-  '.ico': 'image/x-icon',
-  '.woff2': 'font/woff2'
-};
-
-export interface DevServerOptions extends BuildConfig {
-  port?: number;
-  host?: string;
-}
-
-export async function createDevServer(options: DevServerOptions = {}): Promise<http.Server> {
-  const port = options.port || 3000;
-  const host = options.host || 'localhost';
-  const root = path.resolve(options.root || process.cwd());
-  const outDir = path.resolve(root, options.outDir || 'dist');
-
-  console.log(`[react-html] Performing initial build...`);
-  await build({ ...options, minify: false });
-  console.log(`[react-html] Build completed.`);
-
-  // Setup file watcher with debounce
-  let isRebuilding = false;
-  let rebuildTimeout: NodeJS.Timeout | null = null;
-
-  const triggerRebuild = () => {
-    if (rebuildTimeout) clearTimeout(rebuildTimeout);
-    rebuildTimeout = setTimeout(async () => {
-      if (isRebuilding) return;
-      isRebuilding = true;
-      try {
-        console.log(`[react-html] Change detected, rebuilding...`);
-        const startTime = Date.now();
-        await build({ ...options, minify: false });
-        console.log(`[react-html] Rebuild finished in ${Date.now() - startTime}ms`);
-      } catch (err) {
-        console.error(`[react-html] Rebuild error:`, err);
-      } finally {
-        isRebuilding = false;
-      }
-    }, 100);
-  };
-
-  const watchDirs = ['src', 'pages', 'public'].map(d => path.join(root, d)).filter(existsSync);
-  for (const dir of watchDirs) {
-    try {
-      watch(dir, { recursive: true }, (event, filename) => {
-        if (filename && !filename.includes('.react-html') && !filename.includes('dist')) {
-          triggerRebuild();
-        }
-      });
-    } catch {
-      // Fallback
-    }
-  }
-
-  const server = http.createServer(async (req, res) => {
-    try {
-      const url = new URL(req.url || '/', `http://${host}:${port}`);
-      let pathname = decodeURIComponent(url.pathname);
-
-      if (pathname.endsWith('/')) {
-        pathname += 'index.html';
-      }
-
-      let filePath = path.join(outDir, pathname);
-
-      // If no extension, check if an .html file exists
-      if (!path.extname(filePath)) {
-        if (existsSync(`${filePath}.html`)) {
-          filePath = `${filePath}.html`;
-        } else if (existsSync(path.join(filePath, 'index.html'))) {
-          filePath = path.join(filePath, 'index.html');
-        }
-      }
-
-      if (!existsSync(filePath)) {
-        res.writeHead(404, { 'Content-Type': 'text/html' });
-        res.end(`<h1>404 Not Found</h1><p>File not found: ${pathname}</p>`);
-        return;
-      }
-
-      const stat = await fs.stat(filePath);
-      if (stat.isDirectory()) {
-        filePath = path.join(filePath, 'index.html');
-      }
-
-      const ext = path.extname(filePath).toLowerCase();
-      const contentType = MIME_TYPES[ext] || 'application/octet-stream';
-
-      const content = await fs.readFile(filePath);
-      res.writeHead(200, {
-        'Content-Type': contentType,
-        'Content-Length': content.length
-      });
-      res.end(content);
-    } catch (err: any) {
-      res.writeHead(500, { 'Content-Type': 'text/plain' });
-      res.end(`500 Internal Server Error: ${err?.message || err}`);
-    }
-  });
-
-  return new Promise((resolve) => {
-    server.listen(port, host, () => {
-      console.log(`[react-html] Dev server running at http://${host}:${port}/`);
-      resolve(server);
-    });
-  });
-}
-

package/src/server/engine.ts

@@ -1,270 +0,0 @@
-import fs from 'node:fs/promises';
-import { existsSync } from 'node:fs';
-import path from 'node:path';
-import type { IncomingMessage, ServerResponse } from 'node:http';
-import { loadPageModule } from '../core/loader.js';
-import { renderPageToHtml } from '../core/renderer.js';
-import { bundleIslands } from '../core/bundler.js';
-import { IslandInstance } from '../core/island-registry.js';
-
-export interface EngineOptions {
-  /** Project root directory (default: process.cwd()) */
-  root?: string;
-  /** Source pages directory (default: 'src/pages' or 'pages') */
-  pagesDir?: string;
-  /** Production build output directory (default: 'dist') */
-  distDir?: string;
-  /** Static public directory (default: 'public') */
-  publicDir?: string;
-  /** Force production mode. If omitted, checks process.env.NODE_ENV === 'production' */
-  isProduction?: boolean;
-  /** Base asset URL prefix (default: '/') */
-  basePath?: string;
-}
-
-const MIME_TYPES: Record<string, string> = {
-  '.html': 'text/html; charset=utf-8',
-  '.js': 'application/javascript; charset=utf-8',
-  '.mjs': 'application/javascript; charset=utf-8',
-  '.css': 'text/css; charset=utf-8',
-  '.json': 'application/json; charset=utf-8',
-  '.png': 'image/png',
-  '.jpg': 'image/jpeg',
-  '.jpeg': 'image/jpeg',
-  '.gif': 'image/gif',
-  '.svg': 'image/svg+xml',
-  '.ico': 'image/x-icon',
-  '.woff2': 'font/woff2'
-};
-
-export class ReactHtmlEngine {
-  public readonly root: string;
-  public readonly pagesDir: string;
-  public readonly distDir: string;
-  public readonly publicDir: string;
-  public readonly isProduction: boolean;
-  public readonly basePath: string;
-
-  constructor(options: EngineOptions = {}) {
-    this.root = path.resolve(options.root || process.cwd());
-    this.isProduction =
-      options.isProduction !== undefined
-        ? options.isProduction
-        : process.env.NODE_ENV === 'production';
-    this.basePath = options.basePath || '/';
-
-    // Resolve distDir
-    this.distDir = path.resolve(this.root, options.distDir || 'dist');
-    this.publicDir = path.resolve(this.root, options.publicDir || 'public');
-
-    // Resolve pagesDir
-    if (options.pagesDir) {
-      this.pagesDir = path.resolve(this.root, options.pagesDir);
-    } else {
-      const candidates = ['src/pages', 'pages'];
-      let found = path.join(this.root, 'src/pages');
-      for (const cand of candidates) {
-        const p = path.join(this.root, cand);
-        if (existsSync(p)) {
-          found = p;
-          break;
-        }
-      }
-      this.pagesDir = found;
-    }
-  }
-
-  /**
-   * Render a page by name or route.
-   * - In production: checks for pre-built static HTML in dist/ first.
-   * - In development: recompiles the TSX page on the fly and bundles any needed reactive islands.
-   */
-  public async render(
-    pageRoute: string,
-    props: Record<string, unknown> = {},
-    metadata: Record<string, unknown> = {}
-  ): Promise<string> {
-    const cleanRoute = pageRoute.replace(/^\/+/, '').replace(/\.html$/, '');
-    const normalizedName = cleanRoute === '' ? 'index' : cleanRoute;
-
-    // In production, check for pre-built static HTML
-    if (this.isProduction) {
-      const candidatePaths = [
-        path.join(this.distDir, `${normalizedName}.html`),
-        path.join(this.distDir, normalizedName, 'index.html')
-      ];
-
-      for (const candidate of candidatePaths) {
-        if (existsSync(candidate)) {
-          return await fs.readFile(candidate, 'utf8');
-        }
-      }
-    }
-
-    // In development (or if production pre-build not found), compile on-the-fly
-    const sourceFilePath = await this.resolveSourcePage(normalizedName);
-    if (!sourceFilePath) {
-      throw new Error(
-        `[react-html] Page "${pageRoute}" not found in "${this.pagesDir}".`
-      );
-    }
-
-    const { Component, metadata: pageMeta } = await loadPageModule(sourceFilePath);
-    const mergedMetadata = { ...pageMeta, ...metadata };
-
-    const { html, islands } = renderPageToHtml({
-      pagePath: sourceFilePath,
-      Component,
-      props,
-      metadata: mergedMetadata,
-      basePath: this.basePath
-    });
-
-    // In development, bundle reactive islands on-the-fly into distDir/assets/islands
-    if (islands.length > 0) {
-      await bundleIslands(islands, {
-        outDir: this.distDir,
-        minify: this.isProduction
-      });
-    }
-
-    return html;
-  }
-
-  /**
-   * Universal Connect / Express / Node.js HTTP middleware.
-   * Handles page routes and static assets according to environment mode.
-   */
-  public middleware = async (
-    req: IncomingMessage,
-    res: ServerResponse,
-    next?: () => void
-  ): Promise<void> => {
-    const url = new URL(req.url || '/', `http://${req.headers.host || 'localhost'}`);
-    let pathname = decodeURIComponent(url.pathname);
-
-    // 1. Check if request matches an asset in dist/ or public/
-    const assetResponse = await this.tryServeStaticAsset(pathname);
-    if (assetResponse) {
-      res.writeHead(200, {
-        'Content-Type': assetResponse.contentType,
-        'Content-Length': assetResponse.content.length
-      });
-      res.end(assetResponse.content);
-      return;
-    }
-
-    // 2. Normalize page route
-    let route = pathname.replace(/^\/+/, '').replace(/\/+$/, '');
-    if (route === '' || route.endsWith('.html')) {
-      route = route.replace(/\.html$/, '') || 'index';
-    }
-
-    // 3. Try rendering the page
-    try {
-      // In production: check if dist HTML exists
-      if (this.isProduction) {
-        const candidatePaths = [
-          path.join(this.distDir, `${route}.html`),
-          path.join(this.distDir, route, 'index.html')
-        ];
-        for (const candidate of candidatePaths) {
-          if (existsSync(candidate)) {
-            const content = await fs.readFile(candidate);
-            res.writeHead(200, {
-              'Content-Type': 'text/html; charset=utf-8',
-              'Content-Length': content.length
-            });
-            res.end(content);
-            return;
-          }
-        }
-      } else {
-        // In development: check if source page exists
-        const sourcePath = await this.resolveSourcePage(route);
-        if (sourcePath) {
-          const html = await this.render(route);
-          const buffer = Buffer.from(html, 'utf8');
-          res.writeHead(200, {
-            'Content-Type': 'text/html; charset=utf-8',
-            'Content-Length': buffer.length
-          });
-          res.end(buffer);
-          return;
-        }
-      }
-    } catch (err: any) {
-      console.error(`[react-html] Engine rendering error for route "${pathname}":`, err);
-      res.writeHead(500, { 'Content-Type': 'text/plain; charset=utf-8' });
-      res.end(`500 Internal Server Error: ${err?.message || err}`);
-      return;
-    }
-
-    // If not handled, pass to next middleware if available
-    if (typeof next === 'function') {
-      next();
-    } else {
-      res.writeHead(404, { 'Content-Type': 'text/html; charset=utf-8' });
-      res.end(`<h1>404 Not Found</h1><p>Route "${pathname}" not found.</p>`);
-    }
-  };
-
-  /**
-   * Standalone HTTP request handler suitable for http.createServer(engine.handle)
-   */
-  public handle = (req: IncomingMessage, res: ServerResponse): Promise<void> => {
-    return this.middleware(req, res);
-  };
-
-  private async resolveSourcePage(normalizedName: string): Promise<string | null> {
-    const extensions = ['.tsx', '.jsx', '.ts', '.js'];
-    const candidates = [
-      ...extensions.map(ext => path.join(this.pagesDir, `${normalizedName}${ext}`)),
-      ...extensions.map(ext => path.join(this.pagesDir, normalizedName, `index${ext}`))
-    ];
-
-    for (const cand of candidates) {
-      if (existsSync(cand)) {
-        return cand;
-      }
-    }
-    return null;
-  }
-
-  private async tryServeStaticAsset(
-    pathname: string
-  ): Promise<{ content: Buffer; contentType: string } | null> {
-    const ext = path.extname(pathname).toLowerCase();
-    if (!ext || ext === '.html') return null;
-
-    const cleanPath = pathname.replace(/^\/+/, '');
-    const candidateFiles = [
-      path.join(this.distDir, cleanPath),
-      path.join(this.publicDir, cleanPath)
-    ];
-
-    for (const filePath of candidateFiles) {
-      if (existsSync(filePath)) {
-        try {
-          const stat = await fs.stat(filePath);
-          if (stat.isFile()) {
-            const content = await fs.readFile(filePath);
-            const contentType = MIME_TYPES[ext] || 'application/octet-stream';
-            return { content, contentType };
-          }
-        } catch {
-          // Continue searching
-        }
-      }
-    }
-    return null;
-  }
-}
-
-/**
- * Factory function to create a new ReactHtmlEngine instance
- */
-export function createEngine(options: EngineOptions = {}): ReactHtmlEngine {
-  return new ReactHtmlEngine(options);
-}
-