waypoint-expo-template 3.0.0 → 4.0.0

package/AGENTS.md

@@ -1,3 +1,3 @@
 # Expo HAS CHANGED
 
-Read the exact versioned docs at https://docs.expo.dev/versions/v57.0.0/ before writing any code.
+Read the exact versioned docs at https://docs.expo.dev/versions/v58.0.0/ before writing any code.

package/app/_layout.tsx

@@ -0,0 +1,13 @@
+import { Stack } from 'expo-router';
+import { StatusBar } from 'expo-status-bar';
+
+// The root layout: every route renders inside this stack (waypoint ADR-039
+// amendment §1 — every screen is a route, every navigation is a link).
+export default function RootLayout() {
+  return (
+    <>
+      <Stack />
+      <StatusBar style="auto" />
+    </>
+  );
+}

package/{App.tsx → app/index.tsx}

@@ -1,11 +1,9 @@
-import { StatusBar } from 'expo-status-bar';
 import { StyleSheet, Text, View } from 'react-native';
 
-export default function App() {
+export default function Home() {
   return (
     <View style={styles.container}>
-      <Text>Open up App.tsx to start working on your app!</Text>
-      <StatusBar style="auto" />
+      <Text>Open up app/index.tsx to start working on your app!</Text>
     </View>
   );
 }

package/app.json

@@ -19,7 +19,16 @@
       "predictiveBackGestureEnabled": false
     },
     "web": {
+      "bundler": "metro",
+      "output": "single",
       "favicon": "./assets/favicon.png"
+    },
+    "scheme": "waypointapp",
+    "plugins": [
+      "expo-router"
+    ],
+    "experiments": {
+      "typedRoutes": true
     }
   }
 }

package/package.json

@@ -1,22 +1,33 @@
 {
   "name": "waypoint-expo-template",
-  "version": "3.0.0",
-  "main": "index.ts",
+  "version": "4.0.0",
+  "main": "expo-router/entry",
   "dependencies": {
-    "expo": "~57.0.21",
-    "expo-status-bar": "~57.0.1",
-    "react": "19.2.3",
-    "react-native": "0.86.3"
+    "expo": "~58.0.16",
+    "expo-constants": "~58.0.12",
+    "expo-linking": "~58.0.13",
+    "expo-router": "~58.0.24",
+    "expo-status-bar": "~58.0.3",
+    "react": "19.3.0",
+    "react-dom": "19.3.0",
+    "react-native": "0.88.0",
+    "react-native-safe-area-context": "~5.10.1",
+    "react-native-screens": "~4.30.0",
+    "react-native-web": "~0.21.4"
   },
   "devDependencies": {
-    "@types/react": "~19.2.2",
+    "@types/react": "~19.3.0",
     "typescript": "~6.0.3"
   },
   "scripts": {
     "start": "expo start",
     "android": "expo start --android",
     "ios": "expo start --ios",
-    "web": "expo start --web"
+    "web": "expo start --web",
+    "pwa:enable": "node scripts/enable-pwa.mjs",
+    "build:web": "expo export -p web && npx workbox-cli generateSW workbox-config.js",
+    "pwa:icons": "node scripts/enable-pwa.mjs",
+    "typecheck": "expo customize tsconfig.json && tsc --noEmit"
   },
-  "description": "Expo app template for Waypoint app previews \u2014 create-expo-app blank-typescript, unmodified."
+  "description": "Expo app template for Waypoint app previews \u2014 create-expo-app blank-typescript (Expo SDK 58) with Expo Router: every screen a route, typed routes on."
 }

package/public/index.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="%LANG_ISO_CODE%">
+
+<head>
+  <meta charset="utf-8" />
+  <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+  <title>%WEB_TITLE%</title>
+  <!-- The `react-native-web` recommended style reset: https://necolas.github.io/react-native-web/docs/setup/#root-element -->
+  <style id="expo-reset">
+    /* These styles make the body full-height */
+    html,
+    body {
+      height: 100%;
+    }
+
+    /* These styles disable body scrolling if you are using <ScrollView> */
+    body {
+      overflow: hidden;
+    }
+
+    /* These styles make the root element full-height */
+    #root {
+      display: flex;
+      height: 100%;
+      flex: 1;
+    }
+  </style>
+  <link rel="manifest" href="/manifest.json" />
+  <meta name="theme-color" content="#000000" />
+  <script>
+    if ("serviceWorker" in navigator) {
+      window.addEventListener("load", () => {
+        fetch("/sw.js", { method: "HEAD" })
+          .then((res) => {
+            const contentType = res.headers.get("content-type");
+            if (res.status === 200 && contentType && contentType.includes("javascript")) {
+              navigator.serviceWorker.register("/sw.js")
+                .then((r) => console.log("SW registered:", r.scope))
+                .catch((e) => console.error("SW failed:", e));
+            }
+          })
+          .catch(() => { });
+      });
+    }
+  </script>
+</head>
+
+<body>
+  <!-- Use static rendering with Expo Router to support running without JavaScript. -->
+  <noscript>
+    You need to enable JavaScript to run this app.
+  </noscript>
+  <!-- The root element for your Expo app. -->
+  <div id="root"></div>
+</body>
+
+</html>

package/public/manifest.json

@@ -0,0 +1,27 @@
+{
+  "short_name": "waypoint-exp",
+  "name": "waypoint-expo-template",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512",
+      "purpose": "any maskable"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

package/scripts/enable-pwa.mjs

@@ -0,0 +1,273 @@
+#!/usr/bin/env node
+
+/**
+ * enable-pwa.mjs — Scaffolds full PWA support into any Expo project.
+ *
+ * Reads app.json, generates icons, creates all PWA files from templates.
+ * Idempotent: safe to re-run, skips existing files.
+ *
+ * Usage:  node scripts/enable-pwa.mjs
+ *         npm run build:web
+ */
+
+import { resolve, dirname } from "path";
+import {
+  existsSync,
+  mkdirSync,
+  readFileSync,
+  writeFileSync,
+  unlinkSync,
+} from "fs";
+import { fileURLToPath } from "url";
+import { execSync } from "child_process";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const ROOT = resolve(__dirname, "..");
+
+const log = (m) => console.log(`[enable-pwa] ${m}`);
+const warn = (m) => console.warn(`[enable-pwa] WARNING: ${m}`);
+const error = (m) => {
+  console.error(`[enable-pwa] ERROR: ${m}`);
+  process.exit(1);
+};
+
+// ── Step 1: Read app.json ───────────────────────────────────────────────────
+
+const appJsonPath = resolve(ROOT, "app.json");
+if (!existsSync(appJsonPath)) error(`app.json not found at ${appJsonPath}`);
+
+const appJson = JSON.parse(readFileSync(appJsonPath, "utf-8"));
+const expo = appJson.expo;
+if (!expo) error("No expo config found in app.json");
+
+const name = expo.name || expo.slug || "Expo App";
+const shortName =
+  expo.shortName || (name.length > 12 ? name.slice(0, 12) : name);
+const display = expo.web?.display || "standalone";
+const themeColor = expo.web?.themeColor || "#000000";
+const bgColor = expo.web?.backgroundColor || "#ffffff";
+
+log(`Project: ${name}`);
+
+// ── Step 2: Find source icon ────────────────────────────────────────────────
+
+const iconCandidates = [
+  expo.icon,
+  expo.android?.adaptiveIcon?.foregroundImage,
+  "assets/icon.png",
+  "assets/icon.jpg",
+].filter(Boolean);
+
+let iconPath = null;
+for (const c of iconCandidates) {
+  const p = resolve(ROOT, c);
+  if (existsSync(p)) {
+    iconPath = p;
+    break;
+  }
+}
+if (!iconPath)
+  error(
+    `No icon found. Checked: ${iconCandidates.join(", ")}\n` +
+    "Set expo.icon in app.json or place an icon at assets/icon.png"
+  );
+log(`Source icon: ${iconPath}`);
+
+// ── Step 3: Generate PWA icons (192, 512) ───────────────────────────────────
+
+let Jimp;
+try {
+  Jimp = (await import("jimp-compact")).default;
+} catch {
+  error("jimp-compact not found. Run from an Expo project with it installed.");
+}
+
+const publicDir = resolve(ROOT, "public");
+mkdirSync(publicDir, { recursive: true });
+
+const img = await Jimp.read(iconPath);
+for (const size of [192, 512]) {
+  const out = resolve(publicDir, `logo${size}.png`);
+  await new Promise((res, rej) => {
+    img
+      .clone()
+      .resize(size, size)
+      .write(out, (err) => (err ? rej(err) : res()));
+  });
+  log(`Generated logo${size}.png`);
+}
+
+// ── Step 4: Create public/manifest.json ─────────────────────────────────────
+
+const manifestPath = resolve(publicDir, "manifest.json");
+if (!existsSync(manifestPath)) {
+  const manifest = {
+    short_name: shortName,
+    name,
+    icons: [
+      { src: "favicon.ico", sizes: "64x64 32x32 24x24 16x16", type: "image/x-icon" },
+      { src: "logo192.png", type: "image/png", sizes: "192x192", purpose: "any maskable" },
+      { src: "logo512.png", type: "image/png", sizes: "512x512", purpose: "any maskable" },
+    ],
+    start_url: ".",
+    display,
+    theme_color: themeColor,
+    background_color: bgColor,
+  };
+  writeFileSync(manifestPath, JSON.stringify(manifest, null, 2) + "\n");
+  log("Created public/manifest.json");
+} else {
+  log("manifest.json exists, skipping");
+}
+
+// ── Step 5: Create public/index.html ────────────────────────────────────────
+
+const htmlPath = resolve(publicDir, "index.html");
+
+if (existsSync(htmlPath)) {
+  // Check if already PWA-enabled
+  const existing = readFileSync(htmlPath, "utf-8");
+  if (existing.includes('rel="manifest"')) {
+    log("index.html already PWA-enabled, skipping");
+  } else {
+    // Inject PWA tags before </head>
+    const injection = [
+      `<link rel="manifest" href="/manifest.json" />`,
+      `<meta name="theme-color" content="${themeColor}" />`,
+      `<script>`,
+      `  if ("serviceWorker" in navigator) {`,
+      `    window.addEventListener("load", () => {`,
+      `      fetch("/sw.js", { method: "HEAD" })`,
+      `        .then((res) => {`,
+      `          const contentType = res.headers.get("content-type");`,
+      `          if (res.status === 200 && contentType && contentType.includes("javascript")) {`,
+      `            navigator.serviceWorker.register("/sw.js")`,
+      `              .then((r) => console.log("SW registered:", r.scope))`,
+      `              .catch((e) => console.error("SW failed:", e));`,
+      `          }`,
+      `        })`,
+      `        .catch(() => {});`,
+      `    });`,
+      `  }`,
+      `</script>`,
+    ].join("\n");
+    writeFileSync(
+      htmlPath,
+      existing.replace("</head>", `${injection}\n  </head>`)
+    );
+    log("Injected PWA tags into existing index.html");
+  }
+} else {
+  // Generate via expo customize, then inject PWA tags
+  log("Generating index.html via expo customize...");
+  try {
+    execSync("npx expo customize public/index.html", {
+      cwd: ROOT,
+      stdio: "pipe",
+      timeout: 30000,
+    });
+  } catch {
+    warn("expo customize failed, creating minimal index.html");
+    writeFileSync(
+      htmlPath,
+      `<!DOCTYPE html>\n<html lang="en">\n<head>\n  <meta charset="utf-8" />\n  <meta name="viewport" content="width=device-width, initial-scale=1" />\n  <title>${name}</title>\n</head>\n<body>\n  <div id="root"></div>\n</body>\n</html>\n`
+    );
+  }
+
+  // Now inject PWA tags
+  const html = readFileSync(htmlPath, "utf-8");
+  if (!html.includes('rel="manifest"')) {
+    const injection = [
+      `<link rel="manifest" href="/manifest.json" />`,
+      `<meta name="theme-color" content="${themeColor}" />`,
+      `<script>`,
+      `  if ("serviceWorker" in navigator) {`,
+      `    window.addEventListener("load", () => {`,
+      `      fetch("/sw.js", { method: "HEAD" })`,
+      `        .then((res) => {`,
+      `          const contentType = res.headers.get("content-type");`,
+      `          if (res.status === 200 && contentType && contentType.includes("javascript")) {`,
+      `            navigator.serviceWorker.register("/sw.js")`,
+      `              .then((r) => console.log("SW registered:", r.scope))`,
+      `              .catch((e) => console.error("SW failed:", e));`,
+      `          }`,
+      `        })`,
+      `        .catch(() => {});`,
+      `    });`,
+      `  }`,
+      `</script>`,
+    ].join("\n");
+    writeFileSync(
+      htmlPath,
+      html.replace("</head>", `${injection}\n  </head>`)
+    );
+  }
+  log("Created public/index.html with PWA support");
+}
+
+// ── Step 6: Create workbox-config.js ────────────────────────────────────────
+
+const wbPath = resolve(ROOT, "workbox-config.js");
+if (!existsSync(wbPath)) {
+  writeFileSync(
+    wbPath,
+    `// Workbox config — generated by enable-pwa.mjs
+module.exports = {
+  globDirectory: "dist",
+  globPatterns: ["**/*.{js,html,ttf,ico,json,png,woff,woff2}"],
+  swDest: "dist/sw.js",
+  // SPA: serve index.html for any navigation not matching a precached file.
+  navigateFallback: "/index.html",
+  navigateFallbackDenylist: [
+    /^\\/_expo\\//,        // JS bundles
+    /^\\/manifest\\.json$/,
+    /^\\/sw\\.js$/,
+  ],
+  cleanupOutdatedCaches: true,
+  runtimeCaching: [
+    {
+      urlPattern: /^https?.*/,
+      handler: "NetworkFirst",
+      options: {
+        cacheName: "offlineCache",
+        expiration: { maxEntries: 200, maxAgeSeconds: 86400 },
+      },
+    },
+  ],
+};
+`
+  );
+  log("Created workbox-config.js");
+} else {
+  log("workbox-config.js exists, skipping");
+}
+
+// ── Step 7: Update package.json ─────────────────────────────────────────────
+
+const pkgPath = resolve(ROOT, "package.json");
+const pkg = JSON.parse(readFileSync(pkgPath, "utf-8"));
+pkg.scripts = pkg.scripts || {};
+
+const scripts = {
+  "pwa:enable": "node scripts/enable-pwa.mjs",
+  "build:web": "npm run pwa:icons && expo export -p web && npx workbox-cli generateSW workbox-config.js",
+  "pwa:icons": "node scripts/enable-pwa.mjs",
+};
+
+let changed = false;
+for (const [k, v] of Object.entries(scripts)) {
+  if (!pkg.scripts[k]) {
+    pkg.scripts[k] = v;
+    changed = true;
+  }
+}
+if (changed) {
+  writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + "\n");
+  log("Updated package.json scripts");
+}
+
+// ── Done ────────────────────────────────────────────────────────────────────
+
+log("PWA support enabled!\n");
+console.log("  npm run build:web     # Build with service worker");
+console.log("  npx expo start --web  # Dev server with PWA");

package/tsconfig.json

@@ -2,5 +2,14 @@
   "extends": "expo/tsconfig.base",
   "compilerOptions": {
     "strict": true
-  }
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    ".expo/types/**/*.ts",
+    "expo-env.d.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }

package/workbox-config.js

@@ -0,0 +1,24 @@
+// Workbox config — generated by enable-pwa.mjs
+module.exports = {
+  globDirectory: "dist",
+  globPatterns: ["**/*.{js,html,ttf,ico,json,png,woff,woff2}"],
+  swDest: "dist/sw.js",
+  // SPA: serve index.html for any navigation not matching a precached file.
+  navigateFallback: "/index.html",
+  navigateFallbackDenylist: [
+    /^\/_expo\//,        // JS bundles
+    /^\/manifest\.json$/,
+    /^\/sw\.js$/,
+  ],
+  cleanupOutdatedCaches: true,
+  runtimeCaching: [
+    {
+      urlPattern: /^https?.*/,
+      handler: "NetworkFirst",
+      options: {
+        cacheName: "offlineCache",
+        expiration: { maxEntries: 200, maxAgeSeconds: 86400 },
+      },
+    },
+  ],
+};

package/index.ts

@@ -1,8 +0,0 @@
-import { registerRootComponent } from 'expo';
-
-import App from './App';
-
-// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
-// It also ensures that whether you load the app in Expo Go or in a native build,
-// the environment is set up appropriately
-registerRootComponent(App);