create-catalyst-app 1.1.0 → 1.2.0-canary.2

package/Readme.md

@@ -51,6 +51,19 @@ To serve the production build, execute:
 npm run serve
 ```
 
+## Android and iOS
+
+Every app is ready to run as a native app. `config/config.json` gets `WEBVIEW_CONFIG.appId` (`com.example.<project name>`) and `appName` from the project name, and the app gets a placeholder `public/icon.png`.
+
+```bash
+npm run android          # run on an Android emulator or connected phone
+npm run ios              # run on an iOS simulator or connected iPhone (macOS)
+npm run android:release  # signed App Bundle for Google Play
+npm run ios:release      # signed IPA for App Store Connect
+```
+
+The first run installs what is missing after asking. Before a release, replace the `com.example.` app id with your own and set `WEBVIEW_CONFIG.url` to your deployed site. See [Universal App Deployment](https://catalyst.1mg.com/content/Deployment/universal-app-deployment).
+
 ## Documentation
 
 Explore the complete documentation at [https://catalyst.1mg.com](https://catalyst.1mg.com).

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "create-catalyst-app",
     "bin": "scripts/cli.cjs",
-    "version": "1.1.0",
+    "version": "1.2.0-canary.2",
     "engines": {
         "node": ">=20.12.0"
     },

package/scripts/appIdentity.cjs

@@ -0,0 +1,77 @@
+// The app id and name every new app gets in config/config.json, derived from
+// the project name, so they are visible (and easy to change) from day one.
+// A release build refuses the com.example.* id until it is replaced.
+const fs = require("fs")
+const path = require("path")
+
+// Java keywords and literals cannot be package-name segments.
+const JAVA_RESERVED = new Set(
+    (
+        "abstract assert boolean break byte case catch char class const continue default do double else enum " +
+        "extends false final finally float for goto if implements import instanceof int interface long native " +
+        "new null package private protected public return short static strictfp super switch synchronized this " +
+        "throw throws transient true try void volatile while"
+    ).split(" ")
+)
+
+/** "@scope/my-shop" -> "com.example.myshop": valid on Android and iOS. */
+function deriveAppId(projectName) {
+    const base = String(projectName || "")
+        .split("/")
+        .pop()
+        .toLowerCase()
+        .replace(/[^a-z0-9]/g, "")
+    let segment = base || "app"
+    if (/^[0-9]/.test(segment)) segment = `app${segment}`
+    if (JAVA_RESERVED.has(segment)) segment = `${segment}app`
+    return `com.example.${segment}`
+}
+
+/** "my-cool_app" -> "My Cool App": the name shown under the app icon. */
+function deriveAppName(projectName) {
+    const words = String(projectName || "")
+        .split("/")
+        .pop()
+        .split(/[^A-Za-z0-9]+/)
+        .filter(Boolean)
+    if (words.length === 0) return "Catalyst App"
+    return words.map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ")
+}
+
+/**
+ * Set WEBVIEW_CONFIG.appId and appName in the new app's config/config.json
+ * from the project name. The template carries both keys with placeholder
+ * values; only those two values change, so the file keeps its layout. A
+ * config without them gets them added under WEBVIEW_CONFIG.
+ *
+ * @param {string} projectDir
+ * @param {string} projectName
+ * @returns {boolean} whether the file was written
+ */
+function applyAppIdentity(projectDir, projectName) {
+    const file = path.join(projectDir, "config", "config.json")
+    let text
+    let config
+    try {
+        text = fs.readFileSync(file, "utf8")
+        config = JSON.parse(text)
+    } catch {
+        return false
+    }
+    const wv = config.WEBVIEW_CONFIG
+    if (!wv || typeof wv !== "object" || Array.isArray(wv)) return false
+    const appId = deriveAppId(projectName)
+    const appName = deriveAppName(projectName)
+    if (typeof wv.appId === "string" && typeof wv.appName === "string") {
+        text = text
+            .replace(/("appId"\s*:\s*)"[^"]*"/, `$1${JSON.stringify(appId)}`)
+            .replace(/("appName"\s*:\s*)"[^"]*"/, `$1${JSON.stringify(appName)}`)
+    } else {
+        config.WEBVIEW_CONFIG = { appId, appName, ...wv }
+        text = JSON.stringify(config, null, 4) + "\n"
+    }
+    fs.writeFileSync(file, text)
+    return true
+}
+
+module.exports = { deriveAppId, deriveAppName, applyAppIdentity }

package/scripts/cli.cjs

@@ -21,6 +21,7 @@ const {
     resolveOutputMode,
     getDebugEnvInfo,
 } = require("./errors.cjs")
+const { applyAppIdentity } = require("./appIdentity.cjs")
 const outputMode = resolveOutputMode(process.argv)
 // Colored (red) prefix only applies in default mode — verbose/debug boxes
 // own their coloring internally (see errors.cjs#box).
@@ -157,6 +158,8 @@ const program = new Commander.Command()
 
                     extractSubdirectory(packageFilePath)
                     createGitignore(projectName)
+                    // appId and appName in config/config.json, from the project name.
+                    applyAppIdentity(projectPath, projectName)
 
                     // npm's install output is hundreds of lines nobody reads
                     // when it works. Fold it behind a spinner, and print it in
@@ -568,7 +571,16 @@ function deleteDirectory(dirPath) {
 
 // Function to create a .gitignore file with the hardcoded patterns
 function createGitignore(projectName) {
-    const gitiIgnorePatterns = ["node_modules", "build", "logs"]
+    // credentials/ holds signing keys, .catalyst/ per-machine CLI state, and
+    // build-output/ the signed store builds.
+    const gitiIgnorePatterns = [
+        "node_modules",
+        "build",
+        "logs",
+        "credentials/",
+        ".catalyst/",
+        "build-output/",
+    ]
 
     const gitignorePath = `${process.cwd()}${path.sep}${projectName}${path.sep}.gitignore`
 

package/scripts/generateDocs.cjs

@@ -48,6 +48,12 @@ function generateDocs() {
     // Merge into the shared errors/index.json rather than overwriting it —
     // catalyst-core's own generateDocs.js owns every other category.
     const index = readExistingIndex()
+    // Drop this package's own entries first, so a code removed from
+    // ERROR_DEFINITIONS does not linger in the index.
+    const ownedCategories = new Set(Object.values(ERROR_DEFINITIONS).map((d) => d.category))
+    for (const code of Object.keys(index)) {
+        if (ownedCategories.has(index[code].category)) delete index[code]
+    }
 
     for (const [code, def] of Object.entries(ERROR_DEFINITIONS)) {
         const dir = path.join(ERRORS_DIR, def.category)

package/templates/common/config/config.json

@@ -7,6 +7,8 @@
     "API_URL": "",
     "CLIENT_ENV_VARIABLES": ["API_URL"],
     "WEBVIEW_CONFIG": {
+        "appId": "com.example.app",
+        "appName": "Catalyst App",
         "LOCAL_IP": "localhost",
         "port": "3005",
         "appInfo": "",
@@ -15,6 +17,13 @@
         },
         "ios": {
             "buildType": "debug"
+        },
+        "splashScreen": {
+            "backgroundColor": "#0b0a14",
+            "minDuration": 7000,
+            "imageWidth": 144,
+            "imageHeight": 144,
+            "cornerRadius": 0
         }
     }
 }

package/templates/common/public/offline.html

@@ -3,54 +3,75 @@
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="color-scheme" content="light dark" />
         <title>Offline</title>
         <style>
+            :root {
+                --paper: #f5f4ff;
+                --ink: #14132a;
+                --muted: #4b4a6b;
+                --accent: #5353dc;
+            }
+            @media (prefers-color-scheme: dark) {
+                :root {
+                    --paper: #0b0a14;
+                    --ink: #f3f2ff;
+                    --muted: #a9a8c9;
+                    --accent: #a0a0ff;
+                }
+            }
             body {
                 margin: 0;
-                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-                background: #282c34;
-                color: #ffffff;
-                min-height: 100vh;
+                font-family:
+                    system-ui,
+                    -apple-system,
+                    "Segoe UI",
+                    sans-serif;
+                background: var(--paper);
+                color: var(--ink);
+                min-height: 100dvh;
                 display: flex;
                 align-items: center;
-                justify-content: center;
-                text-align: center;
-                font-size: calc(10px + 2vmin);
+                padding: 0 28px;
+                box-sizing: border-box;
+                -webkit-font-smoothing: antialiased;
             }
             .card {
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                gap: 12px;
-                padding: 0 24px;
                 max-width: 440px;
             }
             h1 {
                 margin: 0;
-                font-size: 2rem;
-                font-weight: 700;
+                font-size: clamp(2.5rem, 11vw, 3.5rem);
+                font-weight: 800;
+                line-height: 1.05;
+                letter-spacing: -0.04em;
             }
             p {
-                margin: 0;
-                color: #d8e0f7;
-                line-height: 1.4;
+                margin: 16px 0 0;
+                color: var(--muted);
+                font-size: 1.0625rem;
+                line-height: 1.5;
             }
             a.retry {
-                color: #61dafb;
-                font-weight: 600;
+                display: inline-block;
+                margin-top: 16px;
+                padding: 12px 0;
+                color: var(--accent);
+                font-weight: 650;
                 text-decoration: none;
-                transition: color 0.2s ease;
             }
-            a.retry:hover {
-                color: #9ae3fb;
+            a.retry:focus-visible {
+                outline: 2px solid var(--accent);
+                outline-offset: 3px;
+                border-radius: 4px;
             }
         </style>
     </head>
     <body>
         <div class="card">
-            <h1>You're Offline</h1>
-            <p>Please check your connection and try again.</p>
-            <a class="retry" href="catalyst://retry">Try Again</a>
+            <h1>You're offline.</h1>
+            <p>Check your connection and try again.</p>
+            <a class="retry" href="catalyst://retry">Try again</a>
         </div>
     </body>
 </html>