glashjs 0.14.1 → 0.15.0

package/README.md

@@ -179,7 +179,8 @@ export default defineConfig({
   outDir: '.glash/out',
   stylesheets: ['/app.css'],
   offline: true,
-  animatedFavicon: true,
+  favicon: 'node_modules/glashjs/templates/glash_favicon.svg',
+  animatedFavicon: false,
   dataPrefixes: ['/api/', '/auth/', '/rest/', '/live', '/stream'],
 });
 ```

package/bin/glash.mjs

@@ -56,6 +56,11 @@ function glashMark() {
   ];
 }
 
+function faviconLabel(cfg) {
+  const source = String(cfg.favicon || 'glash_favicon.svg');
+  return source.split(/[\\/]/).pop() || 'glash_favicon.svg';
+}
+
 // LAN IPv4 addresses, so the dev server prints a Network URL you can open from
 // your phone or another device on the same network.
 function lanAddresses() {
@@ -79,6 +84,7 @@ async function serve(dev) {
   console.log('');
   for (const line of glashMark()) console.log(line);
   console.log(`  glashjs ${dev ? 'dev' : 'serve'} — "${cfg.name}"`);
+  console.log(`  favicon  ${faviconLabel(cfg)} -> /favicon.svg`);
   if (port !== preferredPort) console.log(`  Port ${preferredPort} is in use; using ${port} instead.`);
   console.log(`  ${pages} page route(s), ${apis} api route(s)`);
   routes.forEach((r) => console.log(`    ${r.isApi ? 'api ' : 'page'}  ${r.pattern}`));
@@ -118,6 +124,8 @@ async function main() {
         auth: optionBool('--no-auth', undefined),
         sqlRunner: optionBool('--no-sql-runner', undefined),
         aiPrompts: optionBool('--no-ai-prompts', undefined),
+        translate: optionBool('--no-translate', undefined),
+        animation: flag('--animation') ? true : undefined,
       });
       break;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glashjs",
-  "version": "0.14.1",
+  "version": "0.15.0",
   "description": "glashjs — The Postgres-native full-stack framework for builders who want to ship without DevOps. Framework, hosting, database, auth, and deploy in one GlashDB-native runtime.",
   "type": "module",
   "bin": {

package/src/config.mjs

@@ -25,6 +25,14 @@ export const DEFAULT_CONFIG = {
   outDir: '.glash/out',
   themeColor: '#0b0d12',
   offline: true,
+  // Built-in IP auto-translation. true = detect the visitor's country (from the
+  // edge geo header, falling back to a public IP service) and, if their native
+  // language differs from the page, offer a one-tap in-place translation. The
+  // framework serves the runtime (/_glash/i18n.js) and a geo endpoint
+  // (/api/_glash/geo) automatically — no route or layout wiring per app.
+  //   true | false | { auto?: boolean, geoEndpoint?: string }
+  //   auto: translate immediately instead of prompting.
+  i18n: true,
   // Requests under these prefixes are treated as live/updated data: network-first
   // in the Service Worker, so offline mode degrades exactly there (no stale live data).
   dataPrefixes: ['/api/', '/rest/', '/auth/', '/realtime', '/live', '/stream'],

package/src/create.mjs

@@ -111,7 +111,7 @@ function projectFiles(answers) {
     '.env.local': envLocal(answers),
     'glash.config.mjs': configFile(answers, hasCss),
     'README.md': projectReadme(answers),
-    'routes/_layout.jsx': layoutRoute(answers),
+    'routes/_layout.jsx': layoutRoute(),
     'routes/index.jsx': indexRoute(answers),
     'routes/api/health.mjs': healthRoute(),
     'db/schema.sql': schemaSql(answers),
@@ -119,7 +119,6 @@ function projectFiles(answers) {
     ...(answers.css === 'tailwind' ? { 'styles/input.css': tailwindInput() } : {}),
     ...(answers.auth ? authRoutes() : {}),
     ...(answers.sqlRunner ? sqlRunnerRoutes() : {}),
-    ...(answers.translate ? { 'routes/api/_glash/geo.mjs': geoRoute() } : {}),
     ...(answers.animation ? { 'routes/demo/motion.jsx': motionDemoRoute() } : {}),
     ...(answers.aiPrompts ? { '.glash/prompts/deploy.md': aiDeployPrompt(answers) } : {}),
     'public/favicon.svg': faviconSvg(),
@@ -136,7 +135,13 @@ export default defineConfig({
   publicDir: 'public',
   outDir: '.glash/out',
   offline: true,
-  animatedFavicon: true,
+  // Built-in IP auto-translation: detect the visitor's country and offer a
+  // one-tap in-place translation into their native language. The framework
+  // serves the runtime + geo endpoint and relaxes the CSP for the translate
+  // widget automatically — no route or layout wiring needed.
+  i18n: ${answers.translate ? 'true' : 'false'},
+  favicon: 'node_modules/glashjs/templates/glash_favicon.svg',
+  animatedFavicon: false,
   stylesheets: ${hasCss ? "['/app.css']" : '[]'},
   dataPrefixes: ['/api/', '/auth/', '/rest/', '/live', '/stream'],
   security: {
@@ -148,19 +153,10 @@ export default defineConfig({
 `;
 }
 
-function layoutRoute(answers = {}) {
-  const t = answers.translate;
-  const imports = [`import { Link } from 'glashjs/link';`];
-  if (t) {
-    imports.push(`import { useEffect } from 'preact/hooks';`);
-    imports.push(`import { glashAutoTranslate } from 'glashjs/i18n';`);
-  }
-  return `${imports.join('\n')}
+function layoutRoute() {
+  return `import { Link } from 'glashjs/link';
 
-export default function RootLayout({ children }) {${t ? `
-  // Built-in IP auto-translation: detect the visitor's country and offer to
-  // translate the page into their native language. Reads /api/_glash/geo.
-  useEffect(() => { glashAutoTranslate(); }, []);` : ''}
+export default function RootLayout({ children }) {
   return (
     <div className="shell">
       <header className="nav">
@@ -177,16 +173,6 @@ export default function RootLayout({ children }) {${t ? `
 `;
 }
 
-function geoRoute() {
-  return `// IP -> country -> native language, read from the edge geo header
-// (CF-IPCountry / X-Glash-Country on glashDB hosting). The client i18n runtime
-// calls this to decide whether to offer auto-translation.
-import { geoRouteHandler } from 'glashjs/i18n';
-
-export const GET = geoRouteHandler;
-`;
-}
-
 function motionDemoRoute() {
   return `import { useEffect, useRef } from 'preact/hooks';
 import { animate } from 'motion';

package/src/security/headers.mjs

@@ -11,14 +11,37 @@ import { createHash } from 'node:crypto';
  * builds hash/nonce-based, so XSS via injected <script> is blocked by default.
  * Pass `connectSrc` to allow your API/realtime origins.
  */
+// Google Translate widget origins used by the built-in i18n auto-translation.
+// Scripts stay nonce-based (no 'unsafe-inline'): GT's element.js loads as an
+// EXTERNAL script from these origins and fetches translations over XHR, so the
+// framework's strict, nonce-based script CSP is preserved. Only style-src gains
+// 'unsafe-inline' (low-risk) for the inline styles GT applies to translated text.
+const I18N_CSP = {
+  script: ['https://translate.google.com', 'https://translate.googleapis.com', 'https://www.gstatic.com'],
+  style: ["'unsafe-inline'", 'https://www.gstatic.com'],
+  img: ['https://translate.google.com', 'https://translate.googleapis.com', 'https://www.gstatic.com'],
+  connect: ['https://translate.googleapis.com', 'https://ipapi.co'],
+  frame: ['https://translate.google.com'],
+};
+const merge = (base, extra) => [...new Set([...base, ...extra])];
+
 export function buildCsp({
   connectSrc = ["'self'"],
   imgSrc = ["'self'", 'data:', 'blob:'],
   mediaSrc = ["'self'", 'blob:'],
   styleSrc = ["'self'"],
   scriptSrc = ["'self'"],
+  frameSrc = ["'self'"],
   nonce,
+  i18n = false,
 } = {}) {
+  if (i18n) {
+    scriptSrc = merge(scriptSrc, I18N_CSP.script);
+    styleSrc = merge(styleSrc, I18N_CSP.style);
+    imgSrc = merge(imgSrc, I18N_CSP.img);
+    connectSrc = merge(connectSrc, I18N_CSP.connect);
+    frameSrc = merge(frameSrc, I18N_CSP.frame);
+  }
   const script = nonce ? [...scriptSrc, `'nonce-${nonce}'`] : scriptSrc;
   const directives = {
     'default-src': ["'self'"],
@@ -31,6 +54,7 @@ export function buildCsp({
     'img-src': imgSrc,
     'media-src': mediaSrc,
     'connect-src': connectSrc,
+    'frame-src': frameSrc,
     'worker-src': ["'self'"],
     'manifest-src': ["'self'"],
     'upgrade-insecure-requests': [],

package/src/server/html.mjs

@@ -49,7 +49,7 @@ ${headHtml}
 `;
 }
 
-function shellTail({ offline = true, animatedFavicon = false, dev = false, nonce = '' }) {
+function shellTail({ offline = true, animatedFavicon = false, dev = false, nonce = '', i18n = false }) {
   const n = nonce ? ` nonce="${escapeHtml(nonce)}"` : '';
   const fav = animatedFavicon
     ? `<script type="module"${n}>try{const m=await import("/glash-favicon.mjs");m.startGlashFavicon&&m.startGlashFavicon();}catch{}</script>`
@@ -57,6 +57,16 @@ function shellTail({ offline = true, animatedFavicon = false, dev = false, nonce
   const off = offline
     ? `<script type="module"${n}>try{const m=await import("/glash-offline.mjs");m.registerGlashOffline&&m.registerGlashOffline();}catch{}</script>`
     : '';
+  // Built-in IP auto-translation: the framework serves /_glash/i18n.js (the
+  // dependency-free runtime). It detects the visitor's country, maps it to their
+  // native language, and offers a one-tap in-place translation. CSP-safe: a
+  // nonce'd module import of a same-origin URL, no inline logic.
+  const i18nOpts = i18n && typeof i18n === 'object'
+    ? { auto: !!i18n.auto, ...(i18n.geoEndpoint ? { geoEndpoint: i18n.geoEndpoint } : {}) }
+    : {};
+  const intl = i18n
+    ? `<script type="module"${n}>try{const m=await import("/_glash/i18n.js");m.glashAutoTranslate&&m.glashAutoTranslate(${JSON.stringify(i18nOpts)});}catch{}</script>`
+    : '';
   // Dev HMR: a nonce'd inline script (CSP-safe). On a change event it does an
   // in-place soft refresh (no full reload, keeps scroll/focus/inputs), falling
   // back to a full reload if the nav runtime hasn't loaded yet.
@@ -65,7 +75,7 @@ function shellTail({ offline = true, animatedFavicon = false, dev = false, nonce
     : '';
   // Client-side navigation runtime (external 'self' module, CSP-safe).
   const nav = '<script type="module" src="/_glash/nav.js"></script>';
-  return `\n${fav}${off}${hmr}${nav}\n</body>\n</html>`;
+  return `\n${fav}${off}${intl}${hmr}${nav}\n</body>\n</html>`;
 }
 
 /**

package/src/server/server.mjs

@@ -6,11 +6,12 @@
 //                 service worker, favicons) with Brotli negotiation.
 // Every response carries the secure-by-default headers.
 import http from 'node:http';
-import { promises as fs, existsSync, statSync, watch, createReadStream } from 'node:fs';
+import { promises as fs, existsSync, statSync, watch, createReadStream, readFileSync } from 'node:fs';
 import { Transform } from 'node:stream';
 import { randomBytes } from 'node:crypto';
 import path from 'node:path';
-import { pathToFileURL } from 'node:url';
+import { pathToFileURL, fileURLToPath } from 'node:url';
+import { geoRouteHandler } from '../i18n.mjs';
 import { discoverRoutes, matchRoute, findMiddleware } from './router.mjs';
 import { renderDocument, documentParts, renderMeta, escapeHtml } from './html.mjs';
 import { NAV_CLIENT } from './nav-client.mjs';
@@ -28,6 +29,11 @@ const MIME = {
 };
 const mime = (file) => MIME[path.extname(file).toLowerCase()] || 'application/octet-stream';
 
+// The built-in i18n runtime served at /_glash/i18n.js. i18n.mjs is dependency-free
+// and valid browser ESM (its server-only exports are harmless in the browser), so
+// we serve it raw — single source of truth, works identically in dev and prod.
+const I18N_CLIENT = readFileSync(fileURLToPath(new URL('../i18n.mjs', import.meta.url)), 'utf8');
+
 /** Build the glashjs server. Returns { server, listen, cfg }. */
 export async function createGlashServer({ root = process.cwd(), dev = false } = {}) {
   loadEnvFiles(root);
@@ -70,6 +76,17 @@ export async function createGlashServer({ root = process.cwd(), dev = false } =
       if (pathname === '/_glash/nav.js') {
         return send(res, 200, 'text/javascript; charset=utf-8', NAV_CLIENT, { ...secHeaders, 'cache-control': dev ? 'no-store' : 'public, max-age=31536000, immutable' });
       }
+      // Built-in IP auto-translation runtime + geo endpoint (config: i18n).
+      if (cfg.i18n) {
+        if (pathname === '/_glash/i18n.js') {
+          return send(res, 200, 'text/javascript; charset=utf-8', I18N_CLIENT, { ...secHeaders, 'cache-control': dev ? 'no-store' : 'public, max-age=31536000, immutable' });
+        }
+        // Geo endpoint: an app-defined routes/api/_glash/geo.mjs wins; otherwise
+        // the framework answers from the edge country header.
+        if (pathname === '/api/_glash/geo' && !matchRoute(routes, pathname)) {
+          return send(res, 200, 'application/json', JSON.stringify(geoRouteHandler({ headers: req.headers })), { ...secHeaders, 'cache-control': 'no-store' });
+        }
+      }
       // Static first: in production this serves prebuilt /_glash/<id>.js bundles
       // (written by `glash build`) — no runtime esbuild needed.
       if (await serveStatic(res, outDir, pathname, req, secHeaders)) return;
@@ -176,6 +193,7 @@ async function handlePage(res, mod, ctx, cfg, secHeaders, dev) {
     body: page.body ?? '',
     offline: cfg.offline,
     animatedFavicon: !!cfg.animatedFavicon,
+    i18n: cfg.i18n,
     nonce, dev,
   });
   send(res, page.status || 200, 'text/html; charset=utf-8', docHtml, { ...pageHeaders(cfg, secHeaders, nonce), ...(page.headers || {}) });
@@ -201,7 +219,7 @@ async function handleComponentPage(res, route, ctx, cfg, secHeaders, root, route
   // external 'self' module — both pass the strict CSP without 'unsafe-inline'.
   const head = renderStylesheets(cfg) + renderMeta(meta) + `<script type="application/json" id="glash-props">${safeJson(props)}</script>`;
   const { open, tail } = documentParts({
-    title, head, offline: cfg.offline, animatedFavicon: !!cfg.animatedFavicon, nonce, dev,
+    title, head, offline: cfg.offline, animatedFavicon: !!cfg.animatedFavicon, i18n: cfg.i18n, nonce, dev,
   });
   const bundleTag = `</div><script type="module" src="/_glash/${id}.js"></script>`;
   res.writeHead(200, { ...pageHeaders(cfg, secHeaders, nonce), 'content-type': 'text/html; charset=utf-8' });
@@ -250,7 +268,7 @@ async function resolveMeta(metadata, ctx) {
 // Per-request page headers: a fresh CSP carrying this request's script nonce, so
 // the framework's own inline <script>s run while injected scripts stay blocked.
 function pageHeaders(cfg, secHeaders, nonce) {
-  const csp = securityHeaders({ ...(cfg.security || {}), csp: { ...((cfg.security || {}).csp || {}), nonce } })['Content-Security-Policy'];
+  const csp = securityHeaders({ ...(cfg.security || {}), csp: { ...((cfg.security || {}).csp || {}), nonce, i18n: !!cfg.i18n } })['Content-Security-Policy'];
   return { ...secHeaders, 'Content-Security-Policy': csp };
 }