glashjs 0.13.4 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glashjs",
-  "version": "0.13.4",
+  "version": "0.14.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": {
@@ -21,7 +21,8 @@
     "./image": "./src/components/image.mjs",
     "./video": "./src/components/video.mjs",
     "./link": "./src/components/link.mjs",
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./i18n": "./src/i18n.mjs"
   },
   "files": [
     "bin",

package/src/create.mjs

@@ -42,6 +42,8 @@ async function collectAnswers(options, rl) {
   const auth = boolAnswer(options.auth, await ask(rl, 'Add glashAuth routes?', 'yes'));
   const sqlRunner = boolAnswer(options.sqlRunner, await ask(rl, 'Add SQL runner support?', 'yes'));
   const aiPrompts = boolAnswer(options.aiPrompts, await ask(rl, 'Add AI deployment prompts?', 'yes'));
+  const translate = boolAnswer(options.translate, await ask(rl, 'Add built-in IP auto-translation?', 'yes'));
+  const animation = boolAnswer(options.animation, await ask(rl, 'Add motion + 3D (motion, three.js)?', 'no'));
   const install = boolAnswer(options.install, await ask(rl, 'Install dependencies now?', 'yes'));
   const packageManager = normalizeChoice(options.packageManager || await ask(rl, 'Package manager (npm/pnpm/yarn/bun)', detectPackageManager()), PM_CHOICES, 'npm');
   const git = boolAnswer(options.git, await ask(rl, 'Initialize git?', 'yes'));
@@ -54,6 +56,8 @@ async function collectAnswers(options, rl) {
     auth,
     sqlRunner,
     aiPrompts,
+    translate,
+    animation,
     install,
     packageManager,
     git,
@@ -85,6 +89,8 @@ function projectFiles(answers) {
     pg: '^8.16.3',
     preact: '^10.29.2',
     'preact-render-to-string': '^6.7.0',
+    // Motion (animation) + three.js (3D), bundled client-side via esbuild.
+    ...(answers.animation ? { motion: '^11.15.0', three: '^0.171.0' } : {}),
   };
   const devDependencies = answers.css === 'tailwind'
     ? { tailwindcss: '^4.1.0', '@tailwindcss/cli': '^4.1.0' }
@@ -105,7 +111,7 @@ function projectFiles(answers) {
     '.env.local': envLocal(answers),
     'glash.config.mjs': configFile(answers, hasCss),
     'README.md': projectReadme(answers),
-    'routes/_layout.jsx': layoutRoute(),
+    'routes/_layout.jsx': layoutRoute(answers),
     'routes/index.jsx': indexRoute(answers),
     'routes/api/health.mjs': healthRoute(),
     'db/schema.sql': schemaSql(answers),
@@ -113,6 +119,8 @@ 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(),
   };
@@ -140,10 +148,19 @@ export default defineConfig({
 `;
 }
 
-function layoutRoute() {
-  return `import { Link } from 'glashjs/link';
+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')}
 
-export default function RootLayout({ children }) {
+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(); }, []);` : ''}
   return (
     <div className="shell">
       <header className="nav">
@@ -160,6 +177,58 @@ export default function RootLayout({ children }) {
 `;
 }
 
+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';
+import * as THREE from 'three';
+
+export const metadata = { title: 'Motion + 3D' };
+
+export default function MotionDemo() {
+  const card = useRef(null);
+  const canvas = useRef(null);
+
+  useEffect(() => {
+    if (card.current) {
+      animate(card.current, { rotate: [0, 8, -8, 0], scale: [1, 1.06, 1] }, { duration: 2.4, repeat: Infinity });
+    }
+    const el = canvas.current;
+    if (!el) return;
+    const renderer = new THREE.WebGLRenderer({ canvas: el, antialias: true, alpha: true });
+    renderer.setSize(240, 240, false);
+    const scene = new THREE.Scene();
+    const camera = new THREE.PerspectiveCamera(60, 1, 0.1, 100);
+    camera.position.z = 3;
+    const cube = new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshNormalMaterial());
+    scene.add(cube);
+    let raf;
+    const loop = () => { cube.rotation.x += 0.01; cube.rotation.y += 0.013; renderer.render(scene, camera); raf = requestAnimationFrame(loop); };
+    loop();
+    return () => cancelAnimationFrame(raf);
+  }, []);
+
+  return (
+    <main className="hero">
+      <h1>Motion + 3D</h1>
+      <p className="lede">motion drives the card animation; three.js renders the cube.</p>
+      <div ref={card} style={{ width: '120px', height: '120px', borderRadius: '16px', background: '#e8eaed' }} />
+      <canvas ref={canvas} width={240} height={240} />
+    </main>
+  );
+}
+`;
+}
+
 function indexRoute(answers) {
   return `import { useState } from 'preact/hooks';
 import { callServerFunction } from 'glashjs/server-functions';

package/src/i18n.mjs

@@ -0,0 +1,185 @@
+// glashjs/i18n — built-in IP-based auto-translation.
+//
+// Server:
+//   detectCountry(req)        -> 'US' | null   (reads edge/CDN geo headers)
+//   languageForCountry('FR')  -> { code: 'fr', name: 'Français' } | null
+//
+// Client:
+//   glashAutoTranslate(opts)  -> looks up the visitor's country (via a glashjs
+//     geo API route, falling back to a public IP service), maps it to a language,
+//     and — if that differs from the page language — shows a small prompt to
+//     translate the page into the visitor's native language. No API key: it uses
+//     the Google website-translate widget (cookie-driven, in-place).
+//
+// Wire it up in a client effect:
+//   import { glashAutoTranslate } from 'glashjs/i18n';
+//   useEffect(() => glashAutoTranslate(), []);
+// and scaffold `routes/api/_glash/geo.mjs` (see geoRouteHandler) so detection
+// works on glashDB hosting, where the edge sets the country header.
+
+// country code -> [BCP-47 language, native name]
+export const COUNTRY_LANGUAGE = {
+  US: ['en', 'English'], GB: ['en', 'English'], AU: ['en', 'English'], CA: ['en', 'English'],
+  IE: ['en', 'English'], NZ: ['en', 'English'], NG: ['en', 'English'], GH: ['en', 'English'],
+  KE: ['en', 'English'], ZA: ['en', 'English'], IN: ['hi', 'हिन्दी'], PK: ['ur', 'اردو'],
+  FR: ['fr', 'Français'], BE: ['fr', 'Français'], LU: ['fr', 'Français'], CI: ['fr', 'Français'],
+  SN: ['fr', 'Français'], CM: ['fr', 'Français'], ES: ['es', 'Español'], MX: ['es', 'Español'],
+  AR: ['es', 'Español'], CO: ['es', 'Español'], CL: ['es', 'Español'], PE: ['es', 'Español'],
+  VE: ['es', 'Español'], DE: ['de', 'Deutsch'], AT: ['de', 'Deutsch'], CH: ['de', 'Deutsch'],
+  IT: ['it', 'Italiano'], PT: ['pt', 'Português'], BR: ['pt', 'Português'], AO: ['pt', 'Português'],
+  NL: ['nl', 'Nederlands'], RU: ['ru', 'Русский'], UA: ['uk', 'Українська'], PL: ['pl', 'Polski'],
+  CZ: ['cs', 'Čeština'], SK: ['sk', 'Slovenčina'], RO: ['ro', 'Română'], HU: ['hu', 'Magyar'],
+  GR: ['el', 'Ελληνικά'], TR: ['tr', 'Türkçe'], SE: ['sv', 'Svenska'], NO: ['no', 'Norsk'],
+  DK: ['da', 'Dansk'], FI: ['fi', 'Suomi'], IS: ['is', 'Íslenska'], CN: ['zh-CN', '中文'],
+  TW: ['zh-TW', '繁體中文'], HK: ['zh-TW', '繁體中文'], JP: ['ja', '日本語'], KR: ['ko', '한국어'],
+  TH: ['th', 'ไทย'], VN: ['vi', 'Tiếng Việt'], ID: ['id', 'Bahasa Indonesia'], MY: ['ms', 'Bahasa Melayu'],
+  PH: ['tl', 'Filipino'], SA: ['ar', 'العربية'], AE: ['ar', 'العربية'], EG: ['ar', 'العربية'],
+  MA: ['ar', 'العربية'], DZ: ['ar', 'العربية'], IQ: ['ar', 'العربية'], IL: ['he', 'עברית'],
+  IR: ['fa', 'فارسی'], BD: ['bn', 'বাংলা'], ET: ['am', 'አማርኛ'],
+};
+
+export function detectCountry(req) {
+  const h = (req && req.headers) || {};
+  const get = (k) => (typeof h.get === 'function' ? h.get(k) : (h[k] ?? h[k.toLowerCase()]));
+  const cc = String(
+    get('cf-ipcountry') || get('x-glash-country') || get('x-vercel-ip-country') || get('x-country-code') || '',
+  ).split(',')[0].trim().toUpperCase();
+  return /^[A-Z]{2}$/.test(cc) && cc !== 'XX' ? cc : null;
+}
+
+export function languageForCountry(country) {
+  const entry = COUNTRY_LANGUAGE[String(country || '').toUpperCase()];
+  return entry ? { code: entry[0], name: entry[1] } : null;
+}
+
+/** Drop-in handler for `routes/api/_glash/geo.mjs` (export const GET = geoRouteHandler). */
+export function geoRouteHandler(ctx) {
+  const country = detectCountry({ headers: (ctx && ctx.headers) || {} });
+  const language = country ? languageForCountry(country) : null;
+  return { country, language };
+}
+
+// ---- client ---------------------------------------------------------------
+
+function baseLang(code) { return String(code || '').toLowerCase().split('-')[0]; }
+
+async function lookupLanguage(geoEndpoint) {
+  // 1) glashjs geo route (works on glashDB hosting via the edge country header).
+  try {
+    const r = await fetch(geoEndpoint, { headers: { accept: 'application/json' } });
+    if (r.ok) {
+      const d = await r.json();
+      if (d && d.language && d.language.code) return d.language;
+      if (d && d.country) { const l = languageForCountry(d.country); if (l) return l; }
+    }
+  } catch { /* fall through */ }
+  // 2) Public IP geolocation fallback (no key, CORS-enabled).
+  try {
+    const r = await fetch('https://ipapi.co/json/');
+    if (r.ok) {
+      const d = await r.json();
+      const l = d && d.country_code ? languageForCountry(d.country_code) : null;
+      if (l) return l;
+    }
+  } catch { /* fall through */ }
+  return null;
+}
+
+function setGoogTransCookie(from, to) {
+  const val = `/${from}/${to}`;
+  const host = location.hostname;
+  document.cookie = `googtrans=${val};path=/`;
+  document.cookie = `googtrans=${val};path=/;domain=${host}`;
+  if (host.split('.').length > 1) document.cookie = `googtrans=${val};path=/;domain=.${host}`;
+}
+
+function loadGoogleWidget(pageLanguage) {
+  if (window.__glashGTLoaded) return;
+  window.__glashGTLoaded = true;
+  if (!document.getElementById('glash-gt')) {
+    const el = document.createElement('div');
+    el.id = 'glash-gt';
+    el.style.display = 'none';
+    document.body.appendChild(el);
+  }
+  window.googleTranslateElementInit = function () {
+    try { new window.google.translate.TranslateElement({ pageLanguage, autoDisplay: false }, 'glash-gt'); } catch { /* ignore */ }
+  };
+  const s = document.createElement('script');
+  s.src = 'https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';
+  document.head.appendChild(s);
+}
+
+function showPrompt(language, onAccept, onDismiss) {
+  if (document.getElementById('glash-translate-prompt')) return;
+  const box = document.createElement('div');
+  box.id = 'glash-translate-prompt';
+  box.setAttribute('role', 'dialog');
+  box.style.cssText = [
+    'position:fixed', 'z-index:2147483646', 'left:50%', 'bottom:20px', 'transform:translateX(-50%)',
+    'max-width:min(92vw,460px)', 'display:flex', 'gap:12px', 'align-items:center',
+    'padding:12px 14px', 'border-radius:12px', 'font:14px/1.4 system-ui,sans-serif',
+    'background:#0b0d12', 'color:#e8eaed', 'border:1px solid rgba(255,255,255,0.12)',
+    'box-shadow:0 8px 30px rgba(0,0,0,0.45)',
+  ].join(';');
+  const text = document.createElement('span');
+  text.style.cssText = 'flex:1';
+  text.textContent = `View this site in ${language.name}?`;
+  const yes = document.createElement('button');
+  yes.textContent = 'Translate';
+  yes.style.cssText = 'cursor:pointer;border:0;border-radius:8px;padding:7px 12px;font:inherit;background:#e8eaed;color:#0b0d12;font-weight:600';
+  const no = document.createElement('button');
+  no.textContent = 'No thanks';
+  no.style.cssText = 'cursor:pointer;border:0;border-radius:8px;padding:7px 10px;font:inherit;background:transparent;color:#9aa0a6';
+  yes.addEventListener('click', () => { box.remove(); onAccept(); });
+  no.addEventListener('click', () => { box.remove(); onDismiss(); });
+  box.append(text, yes, no);
+  document.body.appendChild(box);
+}
+
+/**
+ * Detect the visitor's country by IP, map it to their native language, and (if it
+ * differs from the page language) prompt to auto-translate the page in place.
+ *
+ * Options:
+ *   pageLanguage  language the site is authored in (default: <html lang> or 'en')
+ *   geoEndpoint   glashjs geo route (default: '/api/_glash/geo')
+ *   auto          translate immediately without prompting (default: false)
+ *   storageKey    localStorage key remembering the choice
+ */
+export function glashAutoTranslate(opts = {}) {
+  if (typeof window === 'undefined' || typeof document === 'undefined') return;
+  const {
+    pageLanguage = baseLang(document.documentElement.lang) || 'en',
+    geoEndpoint = '/api/_glash/geo',
+    auto = false,
+    storageKey = 'glash:autotranslate',
+  } = opts;
+
+  // If a previous choice already translated the page, re-apply the widget so the
+  // translation persists across navigations, then stop.
+  if (/(^|;\s*)googtrans=\//.test(document.cookie)) { loadGoogleWidget(pageLanguage); return; }
+  let saved = null;
+  try { saved = localStorage.getItem(storageKey); } catch { /* ignore */ }
+  if (saved === 'dismissed') return;
+
+  const translateTo = (code) => {
+    setGoogTransCookie(pageLanguage, code);
+    loadGoogleWidget(pageLanguage);
+    setTimeout(() => location.reload(), 60);
+  };
+
+  if (saved && saved !== pageLanguage) { translateTo(saved); return; }
+
+  lookupLanguage(geoEndpoint).then((language) => {
+    if (!language || baseLang(language.code) === pageLanguage) return;
+    if (auto) { try { localStorage.setItem(storageKey, language.code); } catch {} translateTo(language.code); return; }
+    showPrompt(
+      language,
+      () => { try { localStorage.setItem(storageKey, language.code); } catch {} translateTo(language.code); },
+      () => { try { localStorage.setItem(storageKey, 'dismissed'); } catch {} },
+    );
+  }).catch(() => {});
+}
+
+export default { detectCountry, languageForCountry, geoRouteHandler, glashAutoTranslate, COUNTRY_LANGUAGE };

package/src/server/jsx.mjs

@@ -54,6 +54,15 @@ const REACT_ALIAS = {
   'next/headers': path.join(pkgRoot, 'next/headers.mjs'),
 };
 
+// CJS deps bundled into an ESM server module (e.g. lucide-react -> require('react')
+// -> aliased preact/compat, which is external) emit a dynamic require that ESM
+// can't run ("Dynamic require of X is not supported"). Defining `require` via
+// createRequire makes esbuild's __require shim use the real Node require, so those
+// runtime requires resolve from the app's node_modules.
+const NODE_ESM_REQUIRE_BANNER = {
+  js: "import { createRequire as __glashCreateRequire } from 'node:module';\nconst require = __glashCreateRequire(import.meta.url);",
+};
+
 export function isComponentRoute(file) {
   return /\.(jsx|tsx)$/.test(file);
 }
@@ -76,7 +85,7 @@ export async function compileModule(file, root, dev) {
     entryPoints: [file], bundle: true, platform: 'node', format: 'esm',
     jsx: 'automatic', jsxImportSource: 'preact',
     external: ['preact', 'preact/*', 'preact-render-to-string'],
-    alias: REACT_ALIAS, outfile: out, logLevel: 'silent',
+    alias: REACT_ALIAS, banner: NODE_ESM_REQUIRE_BANNER, outfile: out, logLevel: 'silent',
   });
   return import(pathToFileURL(out).href + (dev ? `?t=${Date.now()}` : ''));
 }
@@ -158,7 +167,7 @@ export async function loadComponentRoute(pageFile, layouts, root, dev, force = f
     stdin: { contents: serverEntry(pageFile, layouts), resolveDir: path.dirname(pageFile), loader: 'js', sourcefile: 'glash-server-entry.js' },
     bundle: true, platform: 'node', format: 'esm', jsx: 'automatic', jsxImportSource: 'preact',
     external: ['preact', 'preact/*', 'preact-render-to-string'],
-    alias: REACT_ALIAS,
+    alias: REACT_ALIAS, banner: NODE_ESM_REQUIRE_BANNER,
     outfile: out, logLevel: 'silent',
   });
   const mod = await import(pathToFileURL(out).href + (dev ? `?t=${Date.now()}` : ''));