@withl5e/l5e 0.1.0-alpha.0

package/src/core/bundler.ts

@@ -0,0 +1,275 @@
+/// <reference path="./jsx-types.d.ts" />
+import { createHash } from 'node:crypto';
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { rollup, type OutputOptions, type RollupOptions } from 'rollup';
+
+interface BundledFile {
+  content: string;
+  hash: string;
+  filename: string;
+  mimeType: string;
+}
+
+// Memory map để lưu bundled files
+const bundledFilesMap = new Map<string, BundledFile>();
+
+// Cache map để deduplicate bundling requests (cacheKey → entry chunk fileName)
+const bundleCache = new Map<string, string>();
+const cssCache = new Map<string, string>();
+
+/**
+ * Generate hash từ content
+ */
+function generateHash(content: string): string {
+  return createHash('sha256').update(content).digest('hex').substring(0, 16);
+}
+
+/**
+ * Bundle JavaScript files từ dist/client thành 1 file
+ * Trong production, các file đã được build sẵn trong dist/client
+ */
+export async function bundleScripts(
+  scriptPaths: string[],
+  rootDir: string,
+  distClientDir: string,
+): Promise<{ hash: string; filename: string; content: string }> {
+  if (scriptPaths.length === 0) {
+    return { hash: '', filename: '', content: '' };
+  }
+
+  // Dedupe paths (remove duplicates)
+  const uniquePaths = [...new Set(scriptPaths)];
+
+  // Tạo cache key từ sorted unique paths
+  const cacheKey = `scripts:${uniquePaths.sort().join(',')}`;
+
+  // Kiểm tra cache - return entry chunk info if already bundled
+  const cachedEntryFileName = bundleCache.get(cacheKey);
+  if (cachedEntryFileName) {
+    const entryFile = bundledFilesMap.get(cachedEntryFileName);
+    if (entryFile) {
+      return {
+        hash: entryFile.hash,
+        filename: entryFile.filename,
+        content: entryFile.content,
+      };
+    }
+  }
+
+  // Temp file path for cleanup
+  let entryFile: string | null = null;
+
+  try {
+    // Sử dụng rollup để bundle nếu cần (resolve imports, etc)
+    // Tạo temp entry file
+    const hash = generateHash(uniquePaths.join('\n'));
+    const tempDir = path.join(rootDir, '.temp-bundle');
+    await fs.mkdir(tempDir, { recursive: true }).catch(() => {});
+
+    entryFile = path.join(tempDir, `entry-${hash}.js`);
+    // Tạo entry file import tất cả scripts
+    const entryContent = uniquePaths
+      .map((p, i) => {
+        const filePath = p.startsWith('/')
+          ? path.join(distClientDir, p.substring(1))
+          : path.join(distClientDir, p);
+        return `import ${JSON.stringify(filePath)};`;
+      })
+      .join('\n');
+
+    await fs.writeFile(entryFile, entryContent, 'utf-8');
+    console.log(`[bundler] Wrote entry file to ${entryFile}`);
+    console.log(`[bundler] Entry content: ${entryContent}`);
+    // Rollup config để bundle
+    const rollupOptions: RollupOptions = {
+      input: entryFile,
+      plugins: [
+        {
+          name: 'vendor-path-rewriter',
+          resolveId(source, importer, _options) {
+            // Handle vendor/chunk/global files: convert absolute paths to web paths
+            // Global files (*.global.*) are already loaded by client.global.ts —
+            // re-bundling them would create duplicate module instances (e.g. nanostores)
+            if (
+              source.includes('vendor-') ||
+              source.includes('chunk-') ||
+              source.includes('.global')
+            ) {
+              console.log(`[bundler] Resolving source: ${source}`);
+              if (path.isAbsolute(source)) {
+                console.log(`[bundler] Resolving absolute path: ${source}`);
+                // e.g., C:\...\dist\client\assets\vendor-react-XXX.js -> /assets/vendor-react-XXX.js
+                const relativePath = path.relative(distClientDir, source);
+                const webPath = '/' + relativePath.replace(/\\/g, '/');
+                return { id: webPath, external: true };
+              } else if (importer && source.startsWith('.')) {
+                console.log(
+                  `[bundler] Resolving relative path: ${source} from importer: ${importer}`,
+                );
+                // Relative path like ./auth.global-BOVr81Z5.js — resolve from importer
+                const resolved = path.resolve(path.dirname(importer), source);
+                const relativePath = path.relative(distClientDir, resolved);
+                const webPath = '/' + relativePath.replace(/\\/g, '/');
+                return { id: webPath, external: true };
+              } else {
+                console.log(`[bundler] Resolving source: ${source}`);
+              }
+            }
+            return null; // Let other plugins/external handle
+          },
+        },
+      ],
+      external: (id) => {
+        // External node_modules
+        if (!id.startsWith('.') && !path.isAbsolute(id)) {
+          return true;
+        }
+
+        // Let plugin handle vendor/chunk/global files (don't mark external here)
+        if (id.includes('vendor-') || id.includes('chunk-') || id.includes('.global')) {
+          return false; // Let plugin's resolveId handle path rewriting
+        }
+
+        return false;
+      },
+    };
+
+    const outputOptions: OutputOptions = {
+      format: 'es',
+      inlineDynamicImports: false,
+      entryFileNames: 'bundle-[hash].js',
+      chunkFileNames: 'bundle-[hash].js',
+    };
+
+    const bundle = await rollup(rollupOptions);
+    const { output } = await bundle.generate(outputOptions);
+    await bundle.close();
+
+    // Lấy bundled content từ rollup
+
+    output.forEach((o) => {
+      if (o.type !== 'chunk') {
+        return;
+      }
+      // Lưu vào map với key = fileName
+      const bundledFile: BundledFile = {
+        content: o.code || '',
+        hash: generateHash(o.code || ''),
+        filename: o.fileName,
+        mimeType: 'application/javascript',
+      };
+      bundledFilesMap.set(o.fileName, bundledFile);
+    });
+
+    // Cache entry chunk fileName for deduplication
+    const entryChunk = output[0];
+    if (entryChunk?.type === 'chunk') {
+      bundleCache.set(cacheKey, entryChunk.fileName);
+    }
+
+    // Return entry chunk info
+    return {
+      hash: generateHash(output[0]?.code || ''),
+      filename: output[0]?.fileName || '',
+      content: output[0]?.code || '',
+    };
+  } catch (error) {
+    console.error('[bundler] Error bundling scripts:', error);
+    return { hash: '', filename: '', content: '' };
+  } finally {
+    // Cleanup temp entry file
+    if (entryFile) {
+      await fs.unlink(entryFile).catch(() => {
+        // Ignore cleanup errors
+      });
+    }
+  }
+}
+
+/**
+ * Bundle CSS files từ dist/client thành 1 file
+ * Trong production, các file đã được build sẵn trong dist/client
+ */
+export async function bundleCss(
+  cssPaths: string[],
+  rootDir: string,
+  distClientDir: string,
+): Promise<{ hash: string; filename: string; content: string }> {
+  if (cssPaths.length === 0) {
+    return { hash: '', filename: '', content: '' };
+  }
+
+  // Dedupe paths (remove duplicates)
+  const uniquePaths = [...new Set(cssPaths)];
+
+  // Tạo cache key từ sorted unique paths
+  const cacheKey = `css:${uniquePaths.sort().join(',')}`;
+
+  // Kiểm tra cache - return cached file if already bundled
+  const cachedFileName = cssCache.get(cacheKey);
+  if (cachedFileName) {
+    const cachedFile = bundledFilesMap.get(cachedFileName);
+    if (cachedFile) {
+      return {
+        hash: cachedFile.hash,
+        filename: cachedFile.filename,
+        content: cachedFile.content,
+      };
+    }
+  }
+
+  try {
+    // Đọc và gộp tất cả CSS files từ dist/client
+    const cssContents: string[] = [];
+
+    for (const cssPath of uniquePaths) {
+      // cssPath có thể là "/assets/xxx.css" hoặc từ manifest
+      const filePath = cssPath.startsWith('/')
+        ? path.join(distClientDir, cssPath.substring(1))
+        : path.join(distClientDir, cssPath);
+
+      try {
+        const content = await fs.readFile(filePath, 'utf-8');
+        cssContents.push(`/* ${cssPath} */\n${content}\n`);
+      } catch (err) {
+        console.warn(`[bundler] Failed to read CSS file: ${cssPath}`, err);
+      }
+    }
+
+    const bundledContent = cssContents.join('\n\n');
+    const hash = generateHash(bundledContent);
+    const filename = `bundle-${hash}.css`;
+
+    // Lưu vào map với key = filename
+    const bundledFile: BundledFile = {
+      content: bundledContent,
+      hash,
+      filename,
+      mimeType: 'text/css',
+    };
+    bundledFilesMap.set(filename, bundledFile);
+
+    // Cache filename for deduplication
+    cssCache.set(cacheKey, filename);
+
+    return { hash, filename, content: bundledContent };
+  } catch (error) {
+    console.error('[bundler] Error bundling CSS:', error);
+    return { hash: '', filename: '', content: '' };
+  }
+}
+
+/**
+ * Get bundled file từ map
+ */
+export function getBundledFile(filename: string): BundledFile | undefined {
+  return bundledFilesMap.get(filename);
+}
+
+/**
+ * Clear bundled files map (useful for testing)
+ */
+export function clearBundledFiles(): void {
+  bundledFilesMap.clear();
+}

package/src/core/const.ts

@@ -0,0 +1,2 @@
+// Marker object để đánh dấu raw HTML không escape
+export const RAW_HTML_MARKER = Symbol('rawHtml');

package/src/core/entry-server.d.ts

@@ -0,0 +1 @@
+export * from './entry-server';

package/src/core/entry-server.ts

@@ -0,0 +1,381 @@
+/// <reference path="./jsx-types.d.ts" />
+import { MetadataRenderer } from '../seo/generateMetadata';
+import type { Metadata } from '../seo/types';
+import {
+  HttpException,
+  InternalServerErrorException,
+  NotFoundException,
+  RedirectException,
+  ServiceUnavailableException,
+} from './exceptions';
+import { HEAD_PRIORITY } from './head-priority';
+import {
+  addCacheTag,
+  getCacheTags,
+  getClientJsEntries,
+  getCssEntries,
+  getHeadContent,
+  getIslandEntries,
+  getSchemas,
+  jsxFactory as h,
+  Head,
+  pushMetadata,
+  pushSchema,
+  runInRenderContext,
+  setViewName,
+} from './jsx-runtime';
+import { renderJsxToHtmlString } from './render';
+// @ts-ignore - Virtual modules provided by Vite plugin
+import { viewComponents, viewLoaders } from 'virtual:l5e-views';
+// @ts-ignore - Virtual modules provided by Vite plugin
+import routeHandler from 'virtual:l5e-route';
+// @ts-ignore - Virtual modules provided by Vite plugin
+import { globalLoader } from 'virtual:l5e-global-loader';
+// @ts-ignore - Virtual modules provided by Vite plugin
+export { loadMiddleware } from 'virtual:l5e-middleware';
+
+export interface RawResponse {
+  body: string | Buffer;
+  contentType: string;
+  statusCode?: number;
+  headers?: Record<string, string>;
+}
+
+export interface RenderResult {
+  html?: string;
+  scripts?: string[];
+  styles?: string[];
+  islands?: Array<{ key: string; src: string; name: string }>;
+  head?: string;
+  lang?: string;
+  statusCode?: number;
+  maxAge?: number;
+  sMaxAge?: number;
+  swr?: number;
+  cacheTags?: string[];
+  redirect?: { url: string; statusCode: number };
+  rawResponse?: RawResponse;
+  rawHtml?: boolean;
+}
+
+export interface RequestInfo {
+  url?: URL;
+  path?: string;
+  pathname?: string;
+  method?: string;
+  headers?: Record<string, any>;
+  cookies?: Record<string, string>;
+  query?: Record<string, any>;
+  ip?: string;
+  locals?: Record<string, unknown>;
+}
+
+// SchemaMarkup type - có thể là single schema hoặc array of schemas
+// Sử dụng any để tương thích với schema-dts types từ frontend
+export type SchemaMarkup = any | Array<any>;
+
+export interface LoaderResult {
+  props?: Record<string, any>;
+  lang?: string;
+  maxAge?: number;
+  sMaxAge?: number;
+  swr?: number;
+  cacheTags?: string[] | Record<string, boolean>;
+  rawResponse?: RawResponse;
+  rawHtml?: boolean;
+}
+
+export type LoaderFunction = (requestInfo: RequestInfo) => Promise<LoaderResult>;
+
+export type GenerateMetadataFunction = (requestInfo: RequestInfo, props: any) => Metadata | null;
+
+export type GenerateSchemaFunction = (requestInfo: RequestInfo, props: any) => SchemaMarkup | null;
+
+export interface GlobalLoaderModule {
+  loader: LoaderFunction;
+  generateMetadata?: GenerateMetadataFunction;
+  generateSchema?: GenerateSchemaFunction;
+  shouldIgnore?: (viewName: string) => boolean;
+}
+
+/**
+ * Helper function to render error view
+ */
+async function renderErrorView(err: HttpException, lang?: string): Promise<RenderResult> {
+  const errorViewName = `_error`;
+  const errorComponentPath = `/src/views/${errorViewName}/index.tsx`;
+
+  // Set error view name in context
+  setViewName(errorViewName);
+
+  // Try to load error view
+  const errorComponentModule = viewComponents[errorComponentPath]
+    ? await viewComponents[errorComponentPath]()
+    : null;
+
+  if (errorComponentModule?.default) {
+    // Render error view with exception data
+    const errorProps = {
+      statusCode: err.statusCode,
+      message: err.message,
+      data: err.data,
+    };
+
+    const Component = errorComponentModule.default;
+    const htmlBody = renderJsxToHtmlString(h(Component, errorProps));
+    const clientEntries = getClientJsEntries();
+    const cssEntries = getCssEntries();
+    const headContent = getHeadContent();
+
+    const headHtml =
+      headContent.length > 0
+        ? headContent.map((content) => renderJsxToHtmlString(content)).join('\n    ')
+        : undefined;
+
+    return {
+      html: htmlBody,
+      scripts: clientEntries.map((entry) => entry.path),
+      styles: cssEntries.map((entry) => entry.path),
+      head: headHtml,
+      lang,
+      statusCode: err.statusCode,
+    };
+  } else {
+    // No error view found, render default error message
+    const html = h('div', {}, `${err.statusCode} - ${err.message}`);
+    return {
+      html: renderJsxToHtmlString(html),
+      statusCode: err.statusCode,
+    };
+  }
+}
+
+export async function render(url: string, requestInfo: RequestInfo = {}): Promise<RenderResult> {
+  return runInRenderContext(async () => {
+    try {
+      // Step 1: Call route handler to get view name
+      const viewName = await routeHandler(requestInfo);
+
+      if (!viewName) {
+        // Throw NotFoundException to render error_404 view
+        throw new NotFoundException('Page not found', {
+          path: requestInfo.path,
+          pathname: requestInfo.pathname,
+          url: requestInfo.url?.href,
+        });
+      }
+
+      // Set view name in render context
+      setViewName(viewName);
+
+      // Step 2: Load global loader (optional)
+      let globalProps: Record<string, any> = {};
+      let lang: string | undefined;
+
+      // Try to load global loader
+      const globalLoaderPathTs = '/src/global-loader.ts';
+
+      const globalLoaderModule: GlobalLoaderModule | null = globalLoader[globalLoaderPathTs]
+        ? await globalLoader[globalLoaderPathTs]()
+        : null;
+
+      // Run global loader if exists and not ignored
+      if (globalLoaderModule?.loader) {
+        const shouldIgnore = globalLoaderModule.shouldIgnore?.(viewName) || false;
+
+        if (!shouldIgnore) {
+          const globalLoaderResult = await globalLoaderModule.loader(requestInfo);
+
+          globalProps = globalLoaderResult.props || {};
+          lang = globalLoaderResult.lang; // Extract lang from global loader
+
+          if (globalLoaderResult.cacheTags) {
+            addCacheTag(globalLoaderResult.cacheTags);
+          }
+
+          // generateMetadata và generateSchema sẽ được gọi sau khi có props
+        } else {
+          console.info(`Global loader ignored for view: ${viewName}`);
+        }
+      }
+
+      // Step 3: Dynamic import view loader (optional)
+      let viewProps: Record<string, any> = {};
+      let maxAge: number | undefined;
+      let sMaxAge: number | undefined;
+      let swr: number | undefined;
+      let rawHtml: boolean = false;
+      const loaderPathTs = `/src/views/${viewName}/loader.ts`;
+
+      // Try TypeScript loader formats only
+      const loaderModule = viewLoaders[loaderPathTs] ? await viewLoaders[loaderPathTs]() : null;
+
+      if (loaderModule?.loader) {
+        const loaderResult = await loaderModule.loader(requestInfo);
+
+        // Check if loader returns raw response
+        if (loaderResult.rawResponse) {
+          return {
+            rawResponse: loaderResult.rawResponse,
+            statusCode: loaderResult.rawResponse.statusCode || 200,
+          };
+        }
+
+        viewProps = loaderResult.props || {};
+        maxAge = loaderResult.maxAge;
+        sMaxAge = loaderResult.sMaxAge;
+        swr = loaderResult.swr;
+        rawHtml = loaderResult.rawHtml || false;
+
+        if (loaderResult.cacheTags) {
+          addCacheTag(loaderResult.cacheTags);
+        }
+
+        // View loader lang overrides global loader lang
+        if (loaderResult.lang) {
+          lang = loaderResult.lang;
+        }
+      } else {
+        console.info(`No loader for view: ${viewName}`);
+      }
+
+      // Merge props: global props first, then view props (view can override)
+      const props = { ...globalProps, ...viewProps };
+
+      // Step 3.5: Generate metadata và schema từ generateMetadata và generateSchema functions
+      // Global generateMetadata (parent metadata)
+      if (globalLoaderModule?.generateMetadata) {
+        const globalMetadata = globalLoaderModule.generateMetadata(requestInfo, props);
+        if (globalMetadata) {
+          pushMetadata(globalMetadata);
+        }
+      }
+
+      // View generateMetadata (child metadata, sẽ merge với parent)
+      if (loaderModule?.generateMetadata) {
+        const viewMetadata = loaderModule.generateMetadata(requestInfo, props);
+        if (viewMetadata) {
+          pushMetadata(viewMetadata);
+        }
+      }
+
+      // Global generateSchema (base schemas)
+      if (globalLoaderModule?.generateSchema) {
+        const globalSchema = globalLoaderModule.generateSchema(requestInfo, props);
+        if (globalSchema) {
+          pushSchema(globalSchema);
+        }
+      }
+
+      // View generateSchema (view-specific schemas)
+      if (loaderModule?.generateSchema) {
+        const viewSchema = loaderModule.generateSchema(requestInfo, props);
+        if (viewSchema) {
+          pushSchema(viewSchema);
+        }
+      }
+
+      // Step 4: Dynamic import component (required)
+      const componentPathTsx = `/src/views/${viewName}/index.tsx`;
+
+      const componentModule = viewComponents[componentPathTsx]
+        ? await viewComponents[componentPathTsx]()
+        : null;
+
+      const Component = componentModule?.default;
+
+      if (!Component) {
+        console.error(`View component not found: ${viewName}`);
+
+        // Check if in development or production mode
+        const isDevelopment = process.env.NODE_ENV !== 'production';
+
+        if (isDevelopment) {
+          // Development: provide detailed error information
+          throw new InternalServerErrorException(`View component not found: "${viewName}"`, {
+            viewName,
+            expectedPath: componentPathTsx,
+            availableViews: Object.keys(viewComponents),
+            hint: `Make sure the view component exists at ${componentPathTsx} and exports a default component`,
+            timestamp: new Date().toISOString(),
+          });
+        } else {
+          // Production: simple error message
+          throw new InternalServerErrorException('Internal Server Error');
+        }
+      }
+
+      // Auto-render MetadataRenderer trước khi render component
+      // MetadataRenderer sẽ push metadata vào headRegistry thông qua Head component
+      renderJsxToHtmlString(h(MetadataRenderer, {}));
+
+      // Auto-render schemas vào headRegistry
+      const schemas = getSchemas();
+      schemas.forEach((schema) => {
+        const schemaJson = JSON.stringify(schema);
+        // Push schema vào headRegistry thông qua Head component
+        // Head component chỉ push vào registry, không cần renderJsxToHtmlString
+        Head({
+          priority: HEAD_PRIORITY.SEO,
+          children: h('script', {
+            type: 'application/ld+json',
+            setHtml: schemaJson,
+          }),
+        });
+      });
+
+      // Render component (có thể có Head components khác)
+      const htmlBody = renderJsxToHtmlString(h(Component, props));
+      const clientEntries = getClientJsEntries();
+      const cssEntries = getCssEntries();
+      const islandEntries = getIslandEntries();
+      const cacheTags = getCacheTags();
+      const headContent = getHeadContent();
+
+      // Render head content to HTML string
+      const headHtml =
+        headContent.length > 0
+          ? headContent.map((content) => renderJsxToHtmlString(content)).join('\n    ')
+          : undefined;
+
+      return {
+        html: htmlBody,
+        scripts: clientEntries.map((entry) => entry.path),
+        styles: cssEntries.map((entry) => entry.path),
+        islands: islandEntries.length > 0 ? islandEntries : undefined,
+        head: headHtml,
+        lang,
+        maxAge,
+        sMaxAge,
+        swr,
+        cacheTags,
+        rawHtml,
+      };
+    } catch (err: any) {
+      // Handle RedirectException
+      if (err instanceof RedirectException) {
+        return {
+          html: '',
+          redirect: {
+            url: err.url,
+            statusCode: err.statusCode,
+          },
+        };
+      }
+
+      // Handle HttpException
+      if (err instanceof HttpException) {
+        return await renderErrorView(err);
+      }
+
+      // For other errors, convert to ServiceUnavailableException
+      console.error(`Failed to render:`, err);
+      const serviceError = new ServiceUnavailableException(err.message || 'Internal Server Error', {
+        originalError: err.name,
+        stack: err.stack,
+        timestamp: new Date().toISOString(),
+      });
+      return await renderErrorView(serviceError);
+    }
+  }, requestInfo);
+}