@multiplatform.one/cli 6.1.0 → 6.4.0

package/templates/universal/apps/__NAME__/routes/_layout.web.tsx

@@ -0,0 +1,21 @@
+import "@tamagui/core/reset.css";
+import "../tamagui.css";
+import resources from "virtual:i18next-loader";
+import { AppLayout } from "@features/__NAME__";
+import { createRootLayout } from "@multiplatform.one/core";
+import { defaultLanguage, defaultNamespace, languages, namespaces } from "@package/i18n";
+import { AppProvider } from "../src/app";
+
+// Web root layout (native resolves _layout.tsx). Translations come from the
+// vite i18next loader (packages/i18n) so they hot-reload in dev.
+export default createRootLayout({
+  AppProvider,
+  RootLayout: AppLayout,
+  i18n: {
+    languages,
+    namespaces,
+    defaultLanguage,
+    defaultNamespace,
+    resources,
+  },
+});

package/templates/universal/apps/__NAME__/routes/about.tsx

@@ -0,0 +1,3 @@
+import { AboutScreen } from "@features/__NAME__";
+
+export default AboutScreen;

package/templates/universal/apps/__NAME__/routes/index.tsx

@@ -0,0 +1,3 @@
+import { HomeScreen } from "@features/__NAME__";
+
+export default HomeScreen;

package/templates/universal/apps/__NAME__/src/app.ts

@@ -0,0 +1,10 @@
+import { createApp } from "@multiplatform.one/core";
+import { themeConfig } from "@package/themes";
+
+/**
+ * App-wide provider stack. Add keycloak / frappe / tanstack / web3 here as the
+ * app grows — see CreateAppConfig in @multiplatform.one/core.
+ */
+export const { AppProvider, useAppConfig, withApp } = createApp({
+  theme: themeConfig,
+});

package/templates/universal/apps/__NAME__/tamagui.css

@@ -0,0 +1,3 @@
+/* Generated by @tamagui/vite-plugin (outputCSS). This stub keeps the
+   `import "../tamagui.css"` in routes/_layout.web.tsx resolvable on a fresh
+   scaffold; dev/build regenerate it. */

package/templates/universal/apps/__NAME__/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "types": ["vite/client"]
+  },
+  "include": ["./config/**/*", "./routes/**/*", "./src/**/*", "./*.ts", "./types.d.ts"],
+  "exclude": ["**/node_modules/**", "dist/**", "ios/**", "android/**"]
+}

package/templates/universal/apps/__NAME__/types.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="../../packages/i18n/i18n.d.ts" />
+/// <reference types="@multiplatform.one/platform/rnw-overrides" />
+
+declare module "virtual:*";
+
+// Published core@6.1.0 sources carry a type skew against published
+// frappe-ui@6.1.0 (FrappeProvider auth.token). The app never imports
+// frappe-ui directly; treat it as untyped until fixed packages publish.
+declare module "@multiplatform.one/frappe-ui";

package/templates/universal/apps/__NAME__/vite.config.ts

@@ -0,0 +1,66 @@
+import { existsSync } from "node:fs";
+import { createRequire } from "node:module";
+import { createViteConfig } from "@multiplatform.one/config/vite";
+import { one } from "one/vite";
+import type { Plugin } from "vite";
+import { public as publicConfigKeys } from "../../packages/config/config.json";
+
+const require = createRequire(import.meta.url);
+
+/**
+ * Some @multiplatform.one packages at 6.1.0 publish web export targets that
+ * don't exist in their tarballs (exports say dist/esm/…/index.js; the build
+ * emitted index.mjs), which breaks resolution for anything importing them —
+ * e.g. forms → router and frappe-ui → frappe. Resolve those bare imports to
+ * the real web builds. Native is unaffected (vxrn's native resolver uses the
+ * packages' valid react-native export condition). Remove this plugin once
+ * fixed packages are published.
+ */
+const BROKEN_PUBLISHED_ENTRIES: Record<string, { pkg: string; entry: string }> = {
+  "@multiplatform.one/router": {
+    pkg: "@multiplatform.one/router",
+    entry: "dist/esm/index.mjs",
+  },
+  "@multiplatform.one/frappe": {
+    pkg: "@multiplatform.one/frappe",
+    entry: "dist/esm/index.mjs",
+  },
+  "@multiplatform.one/frappe/devtools": {
+    pkg: "@multiplatform.one/frappe",
+    entry: "dist/esm/devtools/index.mjs",
+  },
+};
+
+function fixPublishedEsmEntries(): Plugin {
+  return {
+    name: "fix-multiplatform-published-esm-entries",
+    enforce: "pre",
+    resolveId(id) {
+      const broken = BROKEN_PUBLISHED_ENTRIES[id];
+      if (!broken) return null;
+      try {
+        const pkgJson = require.resolve(`${broken.pkg}/package.json`);
+        const entry = pkgJson.replace(/package\.json$/, broken.entry);
+        return existsSync(entry) ? entry : null;
+      } catch {
+        return null;
+      }
+    },
+  };
+}
+
+export default createViteConfig({
+  publicConfigKeys,
+  one: true,
+  tamagui: { config: "./config/tamagui.config.ts", outputCSS: "./tamagui.css" },
+  i18n: { paths: ["../../packages/i18n"] },
+  plugins: [
+    one({
+      router: { root: "routes" },
+      web: { deploy: "node", defaultRenderMode: "ssr" },
+      react: { compiler: true },
+      native: { key: "__NAME_PASCAL__" },
+    }),
+    fixPublishedEsmEntries(),
+  ],
+});

package/templates/universal/features/__NAME__/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@features/__NAME__",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "main": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./*": "./src/*.ts"
+  },
+  "scripts": {
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@multiplatform.one/components": "__MPO_VERSION__",
+    "@multiplatform.one/forms": "__MPO_VERSION__",
+    "@multiplatform.one/theme": "__MPO_VERSION__",
+    "@package/config": "workspace:*",
+    "one": "1.16.5",
+    "react": "19.2.5",
+    "react-i18next": "^16.6.6"
+  },
+  "devDependencies": {
+    "@multiplatform.one/config": "__MPO_VERSION__",
+    "@multiplatform.one/test-utils": "__MPO_VERSION__",
+    "@types/react": "~19.2.14",
+    "jsdom": "^26.0.0",
+    "typescript": "~5.9.3",
+    "vitest": "^4.1.5"
+  },
+  "peerDependencies": {
+    "react": "^19.1.0"
+  }
+}

package/templates/universal/features/__NAME__/src/AboutScreen.tsx

@@ -0,0 +1,27 @@
+import { Button, H2, Paragraph, Screen, YStack } from "@multiplatform.one/components";
+import { useRouter } from "one";
+import { useTranslation } from "react-i18next";
+
+/**
+ * About screen (route: /about) — demonstrates programmatic navigation with
+ * the router hooks from `one` (same pattern as the framework's own layouts).
+ */
+export function AboutScreen() {
+  const { t } = useTranslation();
+  const router = useRouter();
+
+  return (
+    <Screen>
+      <YStack gap="$3" alignItems="flex-start">
+        <H2>{t("screens.about.title", "About")}</H2>
+        <Paragraph color="$color11">
+          {t(
+            "screens.about.message",
+            "This screen lives in features/__NAME__ and is wired to the /about route by apps/__NAME__/routes/about.tsx.",
+          )}
+        </Paragraph>
+        <Button onPress={() => router.navigate("/")}>{t("screens.about.back", "Back home")}</Button>
+      </YStack>
+    </Screen>
+  );
+}

package/templates/universal/features/__NAME__/src/AppLayout.tsx

@@ -0,0 +1,50 @@
+import { Button, SizableText, XStack, YStack } from "@multiplatform.one/components";
+import { usePathname, useRouter } from "one";
+import type { PropsWithChildren } from "react";
+import { useTranslation } from "react-i18next";
+
+/**
+ * Root layout: top navigation + content. Wired into the router by
+ * apps/__NAME__/routes/_layout(.web).tsx via createRootLayout. Uses router
+ * hooks (not window.location) so it works on native as well as web.
+ */
+export function AppLayout({ children }: PropsWithChildren) {
+  const { t } = useTranslation();
+  const router = useRouter();
+  const path = usePathname() || "/";
+
+  const items = [
+    { label: t("nav.home", "Home"), href: "/", active: path === "/" },
+    { label: t("nav.about", "About"), href: "/about", active: path.startsWith("/about") },
+  ];
+
+  return (
+    <YStack flex={1} backgroundColor="$background">
+      <XStack
+        alignItems="center"
+        gap="$4"
+        paddingHorizontal="$4"
+        paddingVertical="$3"
+        borderBottomWidth={1}
+        borderBottomColor="$borderColor"
+      >
+        <SizableText fontWeight="700" size="$5">
+          {t("app.name", "__NAME_PASCAL__")}
+        </SizableText>
+        <XStack gap="$2" marginLeft="auto">
+          {items.map((item) => (
+            <Button
+              key={item.href}
+              size="$3"
+              chromeless={!item.active}
+              onPress={() => router.navigate(item.href)}
+            >
+              {item.label}
+            </Button>
+          ))}
+        </XStack>
+      </XStack>
+      {children}
+    </YStack>
+  );
+}

package/templates/universal/features/__NAME__/src/ContactForm.spec.tsx

@@ -0,0 +1,22 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { fireEvent } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { ContactForm } from "./ContactForm";
+
+describe("ContactForm", () => {
+  it("renders the starter form fields", () => {
+    const result = renderWithProviders(<ContactForm />);
+    expect(result.findTextElement("Contact")).toBeDefined();
+    expect(result.findTextElement("Name")).toBeDefined();
+    expect(result.findTextElement("Message")).toBeDefined();
+    expect(result.getButton("Send")).toBeDefined();
+  });
+
+  it("shows required errors when submitting empty", () => {
+    const result = renderWithProviders(<ContactForm />);
+    const send = result.getButton("Send");
+    expect(send).toBeDefined();
+    fireEvent.click(send as Element);
+    expect(result.findTextElement("This field is required")).toBeDefined();
+  });
+});

package/templates/universal/features/__NAME__/src/ContactForm.tsx

@@ -0,0 +1,55 @@
+import { H2, Paragraph, YStack } from "@multiplatform.one/components";
+import { Button, Input, TextArea } from "@multiplatform.one/forms";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+/**
+ * Starter form demonstrating @multiplatform.one/forms fields (Input, TextArea,
+ * Button) with the canonical onChangeText/value contract, helper/error slots,
+ * and a submit handler. Replace the console.info with a real mutation.
+ */
+export function ContactForm() {
+  const { t } = useTranslation();
+  const [name, setName] = useState("");
+  const [message, setMessage] = useState("");
+  const [submitted, setSubmitted] = useState(false);
+  const [sent, setSent] = useState(false);
+
+  const requiredError = t("screens.contact.required", "This field is required");
+
+  function handleSend() {
+    setSubmitted(true);
+    if (!name.trim() || !message.trim()) return;
+    // eslint-disable-next-line no-console
+    console.info("[__NAME__] contact form:", { name, message });
+    setSent(true);
+  }
+
+  return (
+    <YStack gap="$4" maxWidth={480}>
+      <H2>{t("screens.contact.title", "Contact")}</H2>
+      <Input
+        label={t("screens.contact.name", "Name")}
+        placeholder={t("screens.contact.namePlaceholder", "Your name")}
+        value={name}
+        onChangeText={setName}
+        required
+        error={submitted && !name.trim() ? requiredError : undefined}
+      />
+      <TextArea
+        label={t("screens.contact.message", "Message")}
+        placeholder={t("screens.contact.messagePlaceholder", "What do you want to say?")}
+        value={message}
+        onChangeText={setMessage}
+        required
+        error={submitted && !message.trim() ? requiredError : undefined}
+      />
+      <Button onPress={handleSend}>{t("screens.contact.send", "Send")}</Button>
+      {sent ? (
+        <Paragraph color="$color11">
+          {t("screens.contact.sent", "Message sent (demo) — check the console.")}
+        </Paragraph>
+      ) : null}
+    </YStack>
+  );
+}

package/templates/universal/features/__NAME__/src/HomeScreen.tsx

@@ -0,0 +1,40 @@
+import { H1, Paragraph, Screen, Separator, YStack } from "@multiplatform.one/components";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { Link } from "one";
+import { useTranslation } from "react-i18next";
+import { ContactForm } from "./ContactForm";
+
+/**
+ * Home screen (route: /). Keep product UI in features/<name>; the app shell
+ * (apps/<name>) only wires routes and providers.
+ */
+export function HomeScreen() {
+  const { t } = useTranslation();
+  // Knob wiring: spread complete knobProps fragments — never cherry-pick
+  // resolved tokens (see AGENTS.md, knobs system).
+  const { knobProps } = useResolvedKnobs({ component: "Card" });
+
+  return (
+    <Screen>
+      <YStack
+        {...knobProps.surface}
+        {...knobProps.borderRadius}
+        {...knobProps.panelPadding}
+        {...knobProps.gap}
+        backgroundColor="$color2"
+        borderColor="$borderColor"
+      >
+        <H1 {...knobProps.heading}>{t("screens.home.welcome", "Welcome to __NAME_PASCAL__")}</H1>
+        <Paragraph {...knobProps.body} color="$color11">
+          {t(
+            "screens.home.message",
+            "One codebase — web, iOS, and Android. Edit features/__NAME__/src/HomeScreen.tsx to get started.",
+          )}
+        </Paragraph>
+        <Link href="/about">{t("nav.about", "About")}</Link>
+      </YStack>
+      <Separator />
+      <ContactForm />
+    </Screen>
+  );
+}

package/templates/universal/features/__NAME__/src/index.ts

@@ -0,0 +1,4 @@
+export { AboutScreen } from "./AboutScreen";
+export { AppLayout } from "./AppLayout";
+export { ContactForm } from "./ContactForm";
+export { HomeScreen } from "./HomeScreen";

package/templates/universal/features/__NAME__/src/screens.spec.ts

@@ -0,0 +1,12 @@
+import { describe, expect, it } from "vitest";
+import { AboutScreen, AppLayout, ContactForm, HomeScreen } from "./index";
+
+// Source-shape smoke: every starter screen is exported and renderable
+// (component functions). Full render coverage lives next to each component.
+describe("feature exports", () => {
+  it("exports the starter screens", () => {
+    for (const Component of [AboutScreen, AppLayout, ContactForm, HomeScreen]) {
+      expect(typeof Component).toBe("function");
+    }
+  });
+});

package/templates/universal/features/__NAME__/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": ["./src/**/*", "../../types/env.d.ts"],
+  "exclude": ["**/node_modules/**"]
+}

package/templates/universal/features/__NAME__/vitest.config.mjs

@@ -0,0 +1,7 @@
+import { createVitestConfig } from "@multiplatform.one/config/vitest";
+
+export default createVitestConfig({
+  tamaguiConfig: "../../packages/themes/tamagui.config.ts",
+  setupFiles: ["@multiplatform.one/test-utils/setup"],
+  include: ["src/**/*.spec.{ts,tsx}"],
+});

package/templates/universal/gitignore

@@ -0,0 +1,12 @@
+node_modules
+dist
+.turbo
+.vite
+.tamagui
+.expo
+*.log
+.env
+.env.local
+.DS_Store
+apps/__NAME__/ios
+apps/__NAME__/android

package/templates/universal/npmrc

@@ -0,0 +1,3 @@
+auto-install-peers=true
+strict-peer-dependencies=false
+node-linker=hoisted

package/templates/universal/oxlintrc.json

@@ -0,0 +1,39 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "rules": {
+    "no-unused-vars": [
+      "warn",
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_"
+      }
+    ],
+    "no-console": "warn",
+    "eqeqeq": "error",
+    "no-var": "error",
+    "prefer-const": "error"
+  },
+  "overrides": [
+    {
+      "files": [
+        "apps/**/*.{ts,tsx,js,jsx}",
+        "features/**/*.{ts,tsx,js,jsx}",
+        "packages/**/*.{ts,tsx,js,jsx}"
+      ],
+      "rules": {
+        "no-restricted-imports": [
+          "error",
+          {
+            "paths": [
+              {
+                "name": "tamagui",
+                "message": "Raw tamagui is only allowed inside framework packages. Import from @multiplatform.one/components, @multiplatform.one/forms, or @multiplatform.one/theme. See AGENTS.md."
+              }
+            ]
+          }
+        ]
+      }
+    }
+  ],
+  "ignorePatterns": ["**/node_modules/**", "**/dist/**", "**/build/**"]
+}

package/templates/universal/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "__NAME__",
+  "version": "0.0.0",
+  "private": true,
+  "description": "__NAME__ — multiplatform.one universal app (web + iOS + Android)",
+  "license": "MIT",
+  "scripts": {
+    "dev": "pnpm --filter @app/__NAME__ dev",
+    "build": "pnpm --filter @app/__NAME__ build",
+    "serve": "pnpm --filter @app/__NAME__ serve",
+    "native": "pnpm --filter @app/__NAME__ prebuild:native",
+    "ios": "pnpm --filter @app/__NAME__ ios",
+    "android": "pnpm --filter @app/__NAME__ android",
+    "test": "pnpm -r test",
+    "lint": "oxlint -c oxlintrc.json .",
+    "typecheck": "pnpm -r typecheck"
+  },
+  "devDependencies": {
+    "@types/chrome": "^0.2.5",
+    "@types/firefox-webext-browser": "^143.0.0",
+    "oxlint": "^1.62.0"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "packageManager": "pnpm@10.32.1"
+}

package/templates/universal/packages/config/config.json

@@ -0,0 +1,4 @@
+{
+  "private": ["SECRET"],
+  "public": ["BASE_URL", "DEBUG", "I18N_DEFAULT_LANGUAGE"]
+}

package/templates/universal/packages/config/index.ts

@@ -0,0 +1,5 @@
+import configJson from "./config.json";
+
+export const config = configJson;
+export type AppConfig = typeof configJson;
+export default config;

package/templates/universal/packages/config/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@package/config",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "main": "./index.ts",
+  "exports": {
+    ".": "./index.ts",
+    "./config.json": "./config.json"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "typescript": "~5.9.3"
+  }
+}

package/templates/universal/packages/config/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": ["./**/*"],
+  "exclude": ["**/node_modules/**"]
+}

package/templates/universal/packages/i18n/en/common.json

@@ -0,0 +1,30 @@
+{
+  "app": {
+    "name": "__NAME_PASCAL__"
+  },
+  "nav": {
+    "home": "Home",
+    "about": "About"
+  },
+  "screens": {
+    "home": {
+      "welcome": "Welcome to __NAME_PASCAL__",
+      "message": "One codebase — web, iOS, and Android. Edit features/__NAME__/src/HomeScreen.tsx to get started."
+    },
+    "about": {
+      "title": "About",
+      "message": "This screen lives in features/__NAME__ and is wired to the /about route by apps/__NAME__/routes/about.tsx.",
+      "back": "Back home"
+    },
+    "contact": {
+      "title": "Contact",
+      "name": "Name",
+      "namePlaceholder": "Your name",
+      "message": "Message",
+      "messagePlaceholder": "What do you want to say?",
+      "send": "Send",
+      "required": "This field is required",
+      "sent": "Message sent (demo) — check the console."
+    }
+  }
+}

package/templates/universal/packages/i18n/es/common.json

@@ -0,0 +1,30 @@
+{
+  "app": {
+    "name": "__NAME_PASCAL__"
+  },
+  "nav": {
+    "home": "Inicio",
+    "about": "Acerca de"
+  },
+  "screens": {
+    "home": {
+      "welcome": "Bienvenido a __NAME_PASCAL__",
+      "message": "Un solo código — web, iOS y Android. Edita features/__NAME__/src/HomeScreen.tsx para empezar."
+    },
+    "about": {
+      "title": "Acerca de",
+      "message": "Esta pantalla vive en features/__NAME__ y se conecta a la ruta /about desde apps/__NAME__/routes/about.tsx.",
+      "back": "Volver al inicio"
+    },
+    "contact": {
+      "title": "Contacto",
+      "name": "Nombre",
+      "namePlaceholder": "Tu nombre",
+      "message": "Mensaje",
+      "messagePlaceholder": "¿Qué quieres decir?",
+      "send": "Enviar",
+      "required": "Este campo es obligatorio",
+      "sent": "Mensaje enviado (demo) — mira la consola."
+    }
+  }
+}

package/templates/universal/packages/i18n/i18n.d.ts

@@ -0,0 +1,16 @@
+/**
+ * i18next TypeScript type augmentations.
+ *
+ * Key typing is intentionally loose (t() accepts any string; missing keys fall
+ * back at runtime). To restore strict typed keys, add
+ * `resources: { common: typeof import("./en/common.json") }` to
+ * CustomTypeOptions.
+ */
+import "i18next";
+
+declare module "i18next" {
+  interface CustomTypeOptions {
+    defaultNS: "common";
+    returnNull: false;
+  }
+}

package/templates/universal/packages/i18n/index.ts

@@ -0,0 +1,26 @@
+/**
+ * Supported languages. Add a language by creating `<lng>/common.json` and
+ * listing the code here (and in resources.ts for native).
+ */
+export const languages = ["en", "es"] as const;
+
+/** Translation namespaces — one JSON file per namespace per language. */
+export const namespaces = ["common"] as const;
+
+/** Fallback language when a translation is missing. */
+export const defaultLanguage = "en" as const;
+
+/** Namespace used when t() calls do not specify one. */
+export const defaultNamespace = "common" as const;
+
+export type Language = (typeof languages)[number];
+export type Namespace = (typeof namespaces)[number];
+
+// Re-export framework i18n utilities
+export {
+  createI18nConfig,
+  detectLanguage,
+  getPersistedLanguage,
+  persistLanguage,
+} from "@multiplatform.one/i18n";
+export type { I18nConfigOptions } from "@multiplatform.one/i18n";

package/templates/universal/packages/i18n/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@package/i18n",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "main": "./index.ts",
+  "exports": {
+    ".": "./index.ts",
+    "./resources": "./resources.ts"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@multiplatform.one/i18n": "__MPO_VERSION__"
+  },
+  "devDependencies": {
+    "typescript": "~5.9.3"
+  }
+}