create-mithril-lynx 0.0.1 → 0.0.2

package/README.md

@@ -1,6 +1,6 @@
 # create-mithril-lynx
 
-Scaffolds a new [`mithril-lynx`](https://github.com/carlos-sweb/mithril-lynx) app — the Mithril.js analog of Lynx's official React hello-world template ([`lynx-examples/examples/hello-world`](https://github.com/lynx-family/lynx-examples/tree/main/examples/hello-world)). Same layout, same "tap the logo" interaction, running through Mithril hyperscript instead of JSX.
+Scaffolds a new [`mithril-lynx`](https://github.com/carlos-sweb/mithril-lynx) app. Three templates, matching the "Hello World" / "Blank" / "Basic Activity" naming most native app scaffolds already use, each available in TypeScript or JavaScript.
 
 ## Usage
 
@@ -8,35 +8,57 @@ Scaffolds a new [`mithril-lynx`](https://github.com/carlos-sweb/mithril-lynx) ap
 npm create mithril-lynx@latest
 ```
 
-Prompts for a project name and a variant (TypeScript or JavaScript), scaffolds it, and offers to install dependencies for you.
+Prompts for a project name, a template, and a variant (TypeScript or JavaScript), scaffolds it, and offers to install dependencies for you.
 
 ### Non-interactive
 
 ```bash
-npx create-mithril-lynx my-app --ts
-npx create-mithril-lynx my-app --js --no-install
+npx create-mithril-lynx my-app --hello-world --ts
+npx create-mithril-lynx my-app --basic-activity --js --no-install
 ```
 
-## What it scaffolds
+## Templates
+
+| Template | What it is |
+|---|---|
+| **Hello World** (recommended) | The Mithril.js analog of Lynx's official React hello-world ([`lynx-examples/examples/hello-world`](https://github.com/lynx-family/lynx-examples/tree/main/examples/hello-world)) — same layout, same "tap the logo" interaction, running through Mithril hyperscript instead of JSX. |
+| **Blank** | A single centered line of text. Nothing else — the starting point when you don't want any of Hello World's styling/assets in your way. |
+| **Basic Activity** | Two screens (Main → Details) wired with [`mithril-lynx/navigation`](https://github.com/carlos-sweb/mithril-lynx#navigation) — a stack-based, in-memory navigator (deliberately not `m.route`; see that package's README for why Lynx pages can't use URL-based routing). Includes a reusable app-bar-with-back-button pattern. Confirmed working end to end on a real device: `push()` with data, the back button, and `pop()` all round-trip correctly. |
+
+## Variants
 
 | Variant | Adds over the base template |
 |---|---|
 | **TypeScript** (recommended) | `.ts` source files, `tsconfig.json` (project references, matching `@lynx-js/rspeedy`'s own generated config), `@rsbuild/plugin-type-check`, `@types/mithril` for real editor autocomplete on `m()` calls. |
 | **JavaScript** | Same app, plain `.js` with ES module `import`/`export` — no type-checking, no `tsconfig.json`. |
 
-Both variants share `template-common/`: the logo/arrow image assets, `style.css`, `.gitignore`, and the project's own `README.md`.
-
 ## Package structure
 
 ```
 create-mithril-lynx/
-  src/index.js        the CLI itself
-  template-common/    shared across both variants
-  template-js/        JavaScript-only files
-  template-ts/        TypeScript-only files
+  src/index.js              the CLI itself
+  templates/
+    _shared/
+      common/                gitignore, project README — shared by every template
+      js/                    lynx.config.js, package.json, main-thread.js — shared by every JS variant
+      ts/                    lynx.config.ts, tsconfig*, package.json, main-thread.ts — shared by every TS variant
+    hello-world/
+      common/src/            logo/arrow assets, style.css
+      js/src/index.js
+      ts/src/index.ts
+    blank/
+      common/src/style.css
+      js/src/index.js
+      ts/src/index.ts
+    basic-activity/
+      common/src/style.css
+      js/src/index.js
+      ts/src/index.ts
 ```
 
-`src/index.js` copies `template-common/` then `template-<variant>/` into the target directory, renames `gitignore` to `.gitignore` (npm doesn't publish dotfiles reliably otherwise), and replaces `{{PROJECT_NAME}}`/`{{MITHRIL_LYNX_VERSION}}` placeholders in `package.json` and `README.md`.
+`src/index.js` copies, in order, `templates/_shared/common` → `templates/_shared/<variant>` → `templates/<template>/common` → `templates/<template>/<variant>` into the target directory (later copies never need to overwrite earlier ones — each layer contributes different files), renames `gitignore` to `.gitignore` (npm doesn't publish dotfiles reliably otherwise), and replaces `{{PROJECT_NAME}}`/`{{MITHRIL_LYNX_VERSION}}` placeholders in `package.json` and `README.md`.
+
+Every template's `src/index.{js,ts}` exports the same shape (`{ root }`), so `_shared/{js,ts}/src/main-thread.{js,ts}` — the actual `__RenderPage` wiring — is 100% shared and never duplicated per template.
 
 ## License
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "create-mithril-lynx",
-  "version": "0.0.1",
-  "description": "Scaffolds a new mithril-lynx app — the Mithril.js analog of Lynx's official React hello-world template.",
+  "version": "0.0.2",
+  "description": "Scaffolds a new mithril-lynx app — Hello World, Blank, or Basic Activity (with navigation), in JavaScript or TypeScript.",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -17,9 +17,7 @@
   },
   "files": [
     "src",
-    "template-common",
-    "template-js",
-    "template-ts"
+    "templates"
   ],
   "engines": {
     "node": "^20.19.0 || >=22.12.0"

package/src/index.js

@@ -10,7 +10,16 @@ const scriptDir = path.dirname(fileURLToPath(import.meta.url));
 const packageRoot = path.join(scriptDir, "..");
 const cwd = process.cwd();
 
-const MITHRIL_LYNX_VERSION = "0.0.1";
+// 0.0.2+ — "basic-activity" needs mithril-lynx/navigation, added after 0.0.1
+// was published.
+const MITHRIL_LYNX_VERSION = "0.0.2";
+
+const TEMPLATES = [
+	{ value: "hello-world", label: "Hello World", hint: "recommended" },
+	{ value: "blank", label: "Blank" },
+	{ value: "basic-activity", label: "Basic Activity", hint: "multi-screen navigation" },
+];
+const TEMPLATE_VALUES = TEMPLATES.map((t) => t.value);
 
 function isValidPackageName(name) {
 	return /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/.test(name);
@@ -40,13 +49,14 @@ function targetDirHasConflict(value) {
 
 async function main() {
 	// Non-interactive escape hatch for scripting/CI:
-	//   create-mithril-lynx my-app --ts
-	//   create-mithril-lynx my-app --js --no-install
+	//   create-mithril-lynx my-app --ts --hello-world
+	//   create-mithril-lynx my-app --js --basic-activity --no-install
 	const args = process.argv.slice(2);
 	const positional = args.find((a) => !a.startsWith("-"));
 	const variantFlag = args.includes("--ts") ? "ts" : args.includes("--js") ? "js" : undefined;
+	const templateFlag = TEMPLATE_VALUES.find((t) => args.includes(`--${t}`));
 	const noInstall = args.includes("--no-install");
-	const nonInteractive = positional != null && variantFlag != null;
+	const nonInteractive = positional != null && variantFlag != null && templateFlag != null;
 
 	intro("create-mithril-lynx");
 
@@ -73,6 +83,15 @@ async function main() {
 		? rawName
 		: rawName.trim().toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-~]/g, "-");
 
+	let template = templateFlag;
+	if (template == null) {
+		template = await select({
+			message: "Select a template",
+			options: TEMPLATES,
+		});
+		if (isCancel(template)) return bail();
+	}
+
 	let variant = variantFlag;
 	if (variant == null) {
 		variant = await select({
@@ -88,8 +107,13 @@ async function main() {
 	const targetDir = path.join(cwd, rawName);
 	fs.mkdirSync(targetDir, { recursive: true });
 
-	copyDir(path.join(packageRoot, "template-common"), targetDir);
-	copyDir(path.join(packageRoot, `template-${variant}`), targetDir);
+	// Layered copy: shared build plumbing (gitignore/README, then
+	// lynx.config/tsconfig/main-thread for the chosen variant), then the
+	// chosen template's own app content (style.css/assets, then src/index).
+	copyDir(path.join(packageRoot, "templates/_shared/common"), targetDir);
+	copyDir(path.join(packageRoot, "templates/_shared", variant), targetDir);
+	copyDir(path.join(packageRoot, "templates", template, "common"), targetDir);
+	copyDir(path.join(packageRoot, "templates", template, variant), targetDir);
 
 	const gitignorePath = path.join(targetDir, "gitignore");
 	if (fs.existsSync(gitignorePath)) {

package/templates/basic-activity/common/src/style.css

@@ -0,0 +1,59 @@
+:root {
+  background-color: #fff;
+}
+
+.Page {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.AppBar {
+  height: 56px;
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  background-color: #6200ee;
+}
+
+.AppBar-back {
+  font-size: 22px;
+  font-weight: 700;
+  color: #fff;
+  margin-right: 16px;
+  padding: 4px 8px;
+}
+
+.AppBar-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: #fff;
+}
+
+.Content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+}
+
+.Description {
+  font-size: 16px;
+  color: #333;
+  text-align: center;
+  margin-bottom: 24px;
+}
+
+.Button {
+  padding: 12px 24px;
+  border-radius: 8px;
+  background-color: #6200ee;
+}
+
+.Button-label {
+  color: #fff;
+  font-size: 16px;
+  font-weight: 600;
+}

package/templates/basic-activity/js/src/index.js

@@ -0,0 +1,43 @@
+import m from "mithril";
+import { createNavigator } from "mithril-lynx/navigation";
+
+// A reusable app bar: a title, plus a back affordance when `onBack` is
+// given. No m.route involved anywhere in this file — see
+// mithril-lynx/navigation's own docs for why (Lynx pages have no URL to
+// route to). Navigation here is a plain in-memory stack.
+function AppBar(title, onBack) {
+  return m("view", { class: "AppBar" }, [
+    onBack != null ? m("text", { class: "AppBar-back", ontap: onBack }, "←") : null,
+    m("text", { class: "AppBar-title" }, title),
+  ]);
+}
+
+const MainScreen = {
+  view(vnode) {
+    return m("view", { class: "Page" }, [
+      AppBar("Basic Activity"),
+      m("view", { class: "Content" }, [
+        m("text", { class: "Description" }, "This is the main screen."),
+        m("view", {
+          class: "Button",
+          ontap: () => vnode.attrs.nav.push(DetailsScreen, { message: "Hello from MainScreen!" }),
+        }, [m("text", { class: "Button-label" }, "Next")]),
+      ]),
+    ]);
+  },
+};
+
+const DetailsScreen = {
+  view(vnode) {
+    return m("view", { class: "Page" }, [
+      AppBar("Details", () => vnode.attrs.nav.pop()),
+      m("view", { class: "Content" }, [
+        m("text", { class: "Description" }, vnode.attrs.message),
+      ]),
+    ]);
+  },
+};
+
+const nav = createNavigator({ initial: MainScreen });
+
+export default { root: m(nav.Navigator) };

package/templates/basic-activity/ts/src/index.ts

@@ -0,0 +1,48 @@
+import m from "mithril";
+import { createNavigator, type Nav } from "mithril-lynx/navigation";
+
+interface DetailsAttrs {
+  nav: Nav;
+  message: string;
+}
+
+// A reusable app bar: a title, plus a back affordance when `onBack` is
+// given. No m.route involved anywhere in this file — see
+// mithril-lynx/navigation's own docs for why (Lynx pages have no URL to
+// route to). Navigation here is a plain in-memory stack.
+function AppBar(title: string, onBack?: () => void) {
+  return m("view", { class: "AppBar" }, [
+    onBack != null ? m("text", { class: "AppBar-back", ontap: onBack }, "←") : null,
+    m("text", { class: "AppBar-title" }, title),
+  ]);
+}
+
+const MainScreen: m.Component<{ nav: Nav }> = {
+  view(vnode) {
+    return m("view", { class: "Page" }, [
+      AppBar("Basic Activity"),
+      m("view", { class: "Content" }, [
+        m("text", { class: "Description" }, "This is the main screen."),
+        m("view", {
+          class: "Button",
+          ontap: () => vnode.attrs.nav.push(DetailsScreen, { message: "Hello from MainScreen!" }),
+        }, [m("text", { class: "Button-label" }, "Next")]),
+      ]),
+    ]);
+  },
+};
+
+const DetailsScreen: m.Component<DetailsAttrs> = {
+  view(vnode) {
+    return m("view", { class: "Page" }, [
+      AppBar("Details", () => vnode.attrs.nav.pop()),
+      m("view", { class: "Content" }, [
+        m("text", { class: "Description" }, vnode.attrs.message),
+      ]),
+    ]);
+  },
+};
+
+const nav = createNavigator({ initial: MainScreen });
+
+export default { root: m(nav.Navigator) };

package/templates/blank/common/src/style.css

@@ -0,0 +1,16 @@
+:root {
+  background-color: #fff;
+}
+
+.Page {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.Title {
+  font-size: 24px;
+  font-weight: 600;
+}

package/templates/blank/js/src/index.js

@@ -0,0 +1,11 @@
+import m from "mithril";
+
+const App = {
+  view() {
+    return m("view", { class: "Page" }, [
+      m("text", { class: "Title" }, "Hello, mithril-lynx!"),
+    ]);
+  },
+};
+
+export default { App, root: m(App) };

package/templates/blank/ts/src/index.ts

@@ -0,0 +1,11 @@
+import m from "mithril";
+
+const App: m.Component = {
+  view() {
+    return m("view", { class: "Page" }, [
+      m("text", { class: "Title" }, "Hello, mithril-lynx!"),
+    ]);
+  },
+};
+
+export default { App, root: m(App) };