@withl5e/l5e 0.3.3-alpha.0 → 0.3.3-alpha.2

package/src/core/entry-server.ts

@@ -155,8 +155,20 @@ export type SchemaMarkup = any | Array<any>;
 export interface LoaderResult {
   props?: Record<string, any>;
   lang?: string;
+
+  /**
+   * Browser, CDN max-age
+   */
   maxAge?: number;
+
+  /**
+   * CDN max-age
+   */
   sMaxAge?: number;
+
+  /**
+   * CDN stale-while-revalidate, browser must revalidate
+   */
   swr?: number;
   cacheTags?: string[] | Record<string, boolean>;
   rawResponse?: RawResponse;
@@ -479,10 +491,10 @@ export async function render(
       const serviceError = isProduction
         ? new ServiceUnavailableException('Internal Server Error')
         : new ServiceUnavailableException(err.message || 'Internal Server Error', {
-            originalError: err.name,
-            stack: err.stack,
-            timestamp: new Date().toISOString(),
-          });
+          originalError: err.name,
+          stack: err.stack,
+          timestamp: new Date().toISOString(),
+        });
       return await renderErrorView(serviceError);
     }
   }, requestInfo, undefined, { externalizeIslandProps });

package/src/core/global-style.ts

@@ -0,0 +1,35 @@
+import { existsSync } from 'node:fs';
+import { join } from 'node:path';
+
+export const GLOBAL_STYLE_SOURCE = '/src/global.css';
+export const GLOBAL_STYLE_MANIFEST_KEY = 'src/global.css';
+
+export function findGlobalStyleInput(root: string): string | null {
+  const absolutePath = join(root, GLOBAL_STYLE_MANIFEST_KEY);
+  return existsSync(absolutePath) ? absolutePath : null;
+}
+
+export function withAssetBase(base: string, assetPath: string): string {
+  const cleanPath = assetPath.replace(/^\/+/, '');
+  const normalizedBase = base.endsWith('/') ? base : `${base}/`;
+  return `${normalizedBase}${cleanPath}`;
+}
+
+export function resolveGlobalStyleHref({
+  root,
+  manifest,
+  isProduction,
+  base,
+}: {
+  root: string;
+  manifest?: Record<string, any>;
+  isProduction: boolean;
+  base: string;
+}): string | null {
+  if (!isProduction) {
+    return findGlobalStyleInput(root) ? withAssetBase(base, GLOBAL_STYLE_SOURCE) : null;
+  }
+
+  const file = manifest?.[GLOBAL_STYLE_MANIFEST_KEY]?.file;
+  return typeof file === 'string' ? withAssetBase(base, file) : null;
+}

package/src/core/server.ts

@@ -9,6 +9,7 @@ import type { ViteDevServer } from 'vite';
 import { createContext, type MiddlewareHandler, type RewritePayload } from '../middleware';
 import { bundleCss, bundleScripts, getBundledFile } from './bundler';
 import type { RenderResult, RequestInfo } from './entry-server';
+import { resolveGlobalStyleHref } from './global-style';
 import { escapeProp } from './render';
 import { createHeadersFromExpressRequest, parseCookies } from './request';
 
@@ -213,6 +214,7 @@ async function createPageResponse({
   root,
   distClientDir,
   isProduction,
+  assetBase,
 }: {
   rendered: RenderResult;
   template: string;
@@ -220,6 +222,7 @@ async function createPageResponse({
   root: string;
   distClientDir: string;
   isProduction: boolean;
+  assetBase: string;
 }): Promise<globalThis.Response> {
   const rawResponse = createRawResponse(rendered);
   if (rawResponse) {
@@ -244,9 +247,23 @@ async function createPageResponse({
   const swr: number | undefined = rendered.swr;
 
   let extraHead = '';
+  const emittedStyles = new Set<string>();
+  const appendStylesheet = (href: string, crossorigin = false) => {
+    if (emittedStyles.has(href)) return;
+    emittedStyles.add(href);
+    extraHead += `<link rel="stylesheet"${crossorigin ? ' crossorigin' : ''} href="${escapeProp(href)}">`;
+  };
   let globalScripts: string[] = [];
   let islandRegistryScript = '';
 
+  const globalStyleHref = resolveGlobalStyleHref({
+    root,
+    manifest,
+    isProduction,
+    base: assetBase,
+  });
+  if (globalStyleHref) appendStylesheet(globalStyleHref, isProduction);
+
   // Externalized island props → a single JSON script at the end of the document.
   // serialize-javascript with isJSON escapes `<`, `>`, `&` (and U+2028/2029) so the
   // props can't break out of the <script> block or inject markup (XSS). The runtime
@@ -324,7 +341,7 @@ async function createPageResponse({
     if (globalEntry) {
       if (globalEntry.css && globalEntry.css.length > 0) {
         globalEntry.css.forEach((cssFile: string) => {
-          extraHead += `<link rel="stylesheet" crossorigin href="/${cssFile}">`;
+          appendStylesheet(`/${cssFile}`, true);
         });
       }
       if (globalEntry.file) {
@@ -346,18 +363,13 @@ async function createPageResponse({
     }
 
     if (cssSrcList.length > 0) {
-      extraHead += cssSrcList
-        .map((file) => `<link rel="stylesheet" crossorigin href="${file}">`)
-        .join('');
+      cssSrcList.forEach((file) => appendStylesheet(file, true));
     }
   }
 
-  let cssHtml = '';
   if (!isProduction) {
     // Registry đã dedupe, nhưng vẫn lọc lại ở đây để dev không bao giờ ra thẻ trùng
-    cssHtml = [...new Set(cssSrcList)]
-      .map((src) => `<link rel="stylesheet" href="${src}">`)
-      .join('');
+    [...new Set(cssSrcList)].forEach((src) => appendStylesheet(src));
   }
 
   let allScripts = [...globalScripts, ...scriptSrcList];
@@ -394,21 +406,39 @@ async function createPageResponse({
   const html = rendered.rawHtml
     ? rendered.html || ''
     : templateWithLang
-        .replace(`<!--app-head-->`, () => (rendered.head ?? '') + extraHead + cssHtml)
-        .replace(`<!--app-html-->`, () => rendered.html ?? '')
-        .replace(`<!--app-scripts-->`, () => scriptsHtml);
+      .replace(`<!--app-head-->`, () => (rendered.head ?? '') + extraHead)
+      .replace(`<!--app-html-->`, () => rendered.html ?? '')
+      .replace(`<!--app-scripts-->`, () => scriptsHtml);
 
   const headers = new Headers({
     'Content-Type': 'text/html',
   });
 
-  const cacheControlParts: string[] = ['public'];
-  if (maxAge !== undefined) cacheControlParts.push(`max-age=${maxAge}`);
-  if (sMaxAge !== undefined) cacheControlParts.push(`s-maxage=${sMaxAge}`);
-  if (swr !== undefined) cacheControlParts.push(`stale-while-revalidate=${swr}`);
+  const cacheControlParts: string[] = [];
+  const cdnCacheControlParts: string[] = [];
+  if (maxAge !== undefined) {
+    cacheControlParts.push(`max-age=${maxAge}`);
+    cdnCacheControlParts.push(`max-age=${maxAge}`);
+  }
+
+  if (sMaxAge !== undefined) {
+    cdnCacheControlParts.push(`s-maxage=${sMaxAge}`);
+  }
+
+  // ko cho phép browser swr
+  if (swr !== undefined) {
+    cdnCacheControlParts.push(`stale-while-revalidate=${swr}`);
+  }
 
   if (cacheControlParts.length > 1 && isProduction) {
+    cacheControlParts.push('public');
+    cacheControlParts.push('must-revalidate');
+
+    cdnCacheControlParts.push('public');
+
+
     headers.set('Cache-Control', cacheControlParts.join(', '));
+    headers.set('CDN-Cache-Control', cdnCacheControlParts.join(', '));
   }
 
   if (process.env.NODE_ENV === 'production') {
@@ -747,6 +777,7 @@ export async function createServer(options: ServerOptions = {}): Promise<ServerC
           root,
           distClientDir,
           isProduction,
+          assetBase: isProduction ? base : vite!.config.base,
         });
       };
 

package/src/core/vite-plugin.ts

@@ -10,6 +10,7 @@ import {
 } from 'fs';
 import { dirname, join, relative, resolve } from 'path';
 import type { Plugin, UserConfig } from 'vite';
+import { findGlobalStyleInput } from './global-style';
 
 const VIRTUAL_L5E_VIEWS = 'virtual:l5e-views';
 const VIRTUAL_L5E_ROUTE = 'virtual:l5e-route';
@@ -246,6 +247,12 @@ function discoverRollupInput(rootDir: string): {
       console.log('[l5e] Detected src/client.global.ts and added as entry');
     }
 
+    const globalStyleInput = findGlobalStyleInput(rootDir);
+    if (globalStyleInput) {
+      input['global-style'] = globalStyleInput;
+      console.log('[l5e] Detected src/global.css and added as global stylesheet');
+    }
+
     // Scan all .tsx and .ts files
     const tsFiles = scanTsFiles(srcDir);
 
@@ -297,6 +304,12 @@ function discoverRollupInput(rootDir: string): {
 
       const absolutePath = resolve(rootDir, relativePath);
 
+      // src/global.css is already a dedicated convention entry. Keeping one
+      // Rollup input avoids collisions if a shared layout also calls useCss().
+      if (globalStyleInput && resolve(absolutePath) === resolve(globalStyleInput)) {
+        continue;
+      }
+
       // Only add if file exists
       if (!existsSync(absolutePath)) {
         console.warn(`[l5e] CSS file not found: ${absolutePath} (from ${cssPath})`);