@bleedingdev/modern-js-create 3.2.0-ultramodern.8 → 3.2.0-ultramodern.80

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/README.md +143 -35
  2. package/dist/index.js +4599 -607
  3. package/dist/types/locale/en.d.ts +3 -0
  4. package/dist/types/locale/zh.d.ts +3 -0
  5. package/dist/types/ultramodern-workspace.d.ts +11 -0
  6. package/package.json +6 -6
  7. package/template/.codex/hooks.json +16 -0
  8. package/template/.github/renovate.json +53 -0
  9. package/template/.github/workflows/ultramodern-gates.yml.handlebars +34 -10
  10. package/template/.mise.toml.handlebars +2 -0
  11. package/template/AGENTS.md +9 -6
  12. package/template/README.md +60 -34
  13. package/template/api/effect/index.ts.handlebars +9 -15
  14. package/template/config/public/locales/cs/translation.json +39 -0
  15. package/template/config/public/locales/en/translation.json +39 -0
  16. package/template/lefthook.yml +10 -0
  17. package/template/modern.config.ts.handlebars +41 -21
  18. package/template/oxfmt.config.ts +4 -3
  19. package/template/oxlint.config.ts +4 -4
  20. package/template/package.json.handlebars +43 -34
  21. package/template/pnpm-workspace.yaml +19 -0
  22. package/template/rstest.config.mts +7 -0
  23. package/template/scripts/bootstrap-agent-skills.mjs +63 -31
  24. package/template/scripts/check-i18n-strings.mjs +83 -0
  25. package/template/scripts/validate-ultramodern.mjs.handlebars +373 -35
  26. package/template/shared/effect/api.ts.handlebars +1 -2
  27. package/template/src/modern-app-env.d.ts +2 -0
  28. package/template/src/modern.runtime.ts.handlebars +17 -3
  29. package/template/src/routes/[lang]/page.tsx.handlebars +212 -0
  30. package/template/src/routes/index.css.handlebars +14 -3
  31. package/template/src/routes/layout.tsx.handlebars +2 -1
  32. package/template/tests/tsconfig.json +7 -0
  33. package/template/tests/ultramodern.contract.test.ts.handlebars +78 -0
  34. package/template-workspace/.agents/agent-reference-repos.json +24 -0
  35. package/template-workspace/.agents/skills-lock.json +19 -0
  36. package/template-workspace/.codex/hooks.json +16 -0
  37. package/template-workspace/.github/renovate.json +29 -0
  38. package/template-workspace/.github/workflows/ultramodern-workspace-gates.yml.handlebars +54 -0
  39. package/template-workspace/.gitignore.handlebars +5 -0
  40. package/template-workspace/.mise.toml.handlebars +2 -0
  41. package/template-workspace/AGENTS.md +36 -5
  42. package/template-workspace/README.md.handlebars +33 -10
  43. package/template-workspace/lefthook.yml +10 -0
  44. package/template-workspace/oxfmt.config.ts +13 -3
  45. package/template-workspace/oxlint.config.ts +12 -4
  46. package/template-workspace/pnpm-workspace.yaml +20 -8
  47. package/template-workspace/scripts/bootstrap-agent-skills.mjs +79 -22
  48. package/template-workspace/scripts/setup-agent-reference-repos.mjs +368 -0
  49. package/template/src/routes/page.tsx.handlebars +0 -119
  50. package/template-workspace/scripts/validate-ultramodern-workspace.mjs.handlebars +0 -403
package/README.md CHANGED
@@ -12,85 +12,125 @@
12
12
 
13
13
  Please follow [Quick Start](https://modernjs.dev/en/guides/get-started/quick-start) to get started with Modern.js.
14
14
 
15
- For UltraModern.js, use the BleedingDev create package. It defaults to the
16
- canonical SuperApp workspace and published BleedingDev package aliases:
15
+ For UltraModern.js, use the BleedingDev create package. It defaults to a
16
+ production-ready single app with `presetUltramodern(...)`, TanStack Router,
17
+ Tailwind CSS v4, i18n, Effect BFF, generated quality gates, and published
18
+ BleedingDev package aliases:
17
19
 
18
20
  ```bash
19
- pnpm dlx @bleedingdev/modern-js-create my-super-app
21
+ pnpm dlx @bleedingdev/modern-js-create my-app
20
22
  ```
21
23
 
22
- ### Router Template
24
+ To initialize the empty directory you are already in, pass `.` explicitly:
23
25
 
24
- You can scaffold a TanStack Router first template:
26
+ ```bash
27
+ pnpm dlx @bleedingdev/modern-js-create .
28
+ ```
29
+
30
+ Create a full SuperApp workspace only when you need independently owned
31
+ verticals:
25
32
 
26
33
  ```bash
27
- npx @modern-js/create my-app --router tanstack
34
+ pnpm dlx @bleedingdev/modern-js-create my-super-app --ultramodern-workspace
28
35
  ```
29
36
 
30
- ### Tailwind Template
37
+ The workspace is a full-stack reference, not a visual-only commerce boundary
38
+ demo. It generates:
31
39
 
32
- You can scaffold Tailwind CSS v4 setup (PostCSS + starter utility classes):
40
+ - `apps/shell-super-app` as the Module Federation host and topology owner.
41
+ - `verticals/explore` for discovery UI plus
42
+ `/explore-api/effect/explore/*`.
43
+ - `verticals/decide` for product selection UI plus
44
+ `/decide-api/effect/decide/*`.
45
+ - `verticals/checkout` for cart and checkout UI plus
46
+ `/checkout-api/effect/checkout/*`.
47
+ - `packages/shared-design-tokens` as the shared CSS token owner.
48
+ - `.modernjs/ultramodern-generated-contract.json` with MF, Effect, i18n,
49
+ federated CSS, Cloudflare, and Zephyr dependency metadata.
50
+
51
+ Validate the generated workspace before making application changes:
33
52
 
34
53
  ```bash
35
- npx @modern-js/create my-app --tailwind
54
+ cd my-super-app
55
+ mise install
56
+ pnpm install
57
+ pnpm ultramodern:check
58
+ pnpm build
36
59
  ```
37
60
 
38
- You can combine both options:
61
+ ### Router Template
62
+
63
+ TanStack Router is generated by default. To force the compatibility router:
39
64
 
40
65
  ```bash
41
- npx @modern-js/create my-app --router tanstack --tailwind
66
+ pnpm dlx @bleedingdev/modern-js-create my-app --router react-router
42
67
  ```
43
68
 
44
- ### BFF Runtime Template
69
+ ### Tailwind Template
45
70
 
46
- You can scaffold BFF APIs with the current default runtime:
71
+ Tailwind CSS v4 setup is generated by default. Disable it explicitly when you
72
+ need a plain CSS starter:
47
73
 
48
74
  ```bash
49
- npx @modern-js/create my-app --bff
75
+ pnpm dlx @bleedingdev/modern-js-create my-app --no-tailwind
50
76
  ```
51
77
 
52
- You can explicitly scaffold Effect HttpApi runtime for BFF:
78
+ TanStack Router and Tailwind CSS work together without extra flags:
53
79
 
54
80
  ```bash
55
- npx @modern-js/create my-app --bff-runtime effect
81
+ pnpm dlx @bleedingdev/modern-js-create my-app
82
+ ```
83
+
84
+ ### BFF Runtime Template
85
+
86
+ UltraModern app scaffolds include Effect HttpApi BFF by default:
87
+
88
+ ```bash
89
+ pnpm dlx @bleedingdev/modern-js-create my-app
56
90
  ```
57
91
 
58
92
  To scaffold Hono runtime explicitly:
59
93
 
60
94
  ```bash
61
- npx @modern-js/create my-app --bff-runtime hono
95
+ pnpm dlx @bleedingdev/modern-js-create my-app --bff-runtime hono
62
96
  ```
63
97
 
64
98
  Generated starters expose `presetUltramodern(...)` as the public opinionated
65
99
  config wrapper when you want the full Ultramodern setup surface in
66
100
  `modern.config.ts`.
67
101
 
68
- You can combine TanStack Router + Tailwind + Effect BFF in one command:
102
+ TanStack Router, default Tailwind, and Effect BFF are included without extra
103
+ flags. For local monorepo dependency testing, add `--workspace`:
69
104
 
70
105
  ```bash
71
- npx @modern-js/create my-app --router tanstack --tailwind --bff-runtime effect
106
+ pnpm dlx @bleedingdev/modern-js-create my-app --workspace
72
107
  ```
73
108
 
74
- ### Micro Vertical Workspace Recipes
109
+ ### Vertical Workspace Recipes
75
110
 
76
- Use the existing create flags to scaffold packages inside a Micro Vertical
77
- workspace. The shell and remotes use TanStack Router; services use Effect by
78
- default, with Hono kept as an explicit compatibility lane.
111
+ Use the workspace add flow from the UltraModern workspace root. It derives the
112
+ package path, package name, port, Module Federation name, topology entry, local
113
+ overlay, ownership entry, Effect BFF surface, and root `dev:*` script from the
114
+ requested vertical name.
79
115
 
80
116
  ```bash
81
- npx @modern-js/create apps/shell --router tanstack --tailwind --workspace --sub
82
- npx @modern-js/create apps/remotes/catalog --router tanstack --tailwind --workspace --sub
83
- npx @modern-js/create apps/remotes/design-system --router tanstack --tailwind --workspace --sub
84
- npx @modern-js/create services/catalog-api --bff-runtime effect --workspace --sub
85
- npx @modern-js/create services/legacy-api --bff-runtime hono --workspace --sub
117
+ pnpm dlx @bleedingdev/modern-js-create catalog --vertical
86
118
  ```
87
119
 
88
- When a design system needs independent deployment, treat it as a horizontal
89
- Module Federation remote with the same topology, trust, SSR, compatibility, and
90
- fallback expectations as feature remotes. Otherwise shared packages should be
91
- regular workspace packages for tokens, primitives, generated clients, or
92
- domain-neutral utilities. Keep feature composites and workflow logic owned by a
93
- shell, remote, or service package.
120
+ Use this decision table before adding a vertical:
121
+
122
+ | Need | Keep inside current vertical | Create a new vertical |
123
+ | --- | --- | --- |
124
+ | Route or widget changes with the same product owner, release train, and fallback behavior | Yes | No |
125
+ | Route subtree needs independent rollout, rollback, or incident ownership | No | `--vertical` |
126
+ | UI and Effect BFF must version, deploy, and roll back together | No | `--vertical` |
127
+ | Design tokens, primitives, generated clients, or domain-neutral utilities | Yes | Use an ordinary workspace package, not a vertical |
128
+ | Feature composites or workflow state shared across verticals | No | Revisit ownership; do not hide it in shared code |
129
+
130
+ The lower-level `--router`, `--workspace`, and `--sub` flags remain available
131
+ for manual package scaffolding, but UltraModern vertical additions should use
132
+ `--vertical` so paths, topology, Effect BFF contracts, and local overlays stay
133
+ consistent.
94
134
 
95
135
  See
96
136
  `docs/super-app-rfc-adr/WORKSPACE-0001-micro-vertical-workspace-scaffolding.md`
@@ -101,13 +141,81 @@ UltraModern.js entrypoint. The lower-level `--ultramodern-*` flags remain
101
141
  available for release engineering and local package-source testing, but users
102
142
  should not need them for normal app creation.
103
143
 
144
+ ### Tractor Architecture Contracts
145
+
146
+ The generated shell owns route assembly and policy. The generated Explore,
147
+ Decide, and Checkout verticals own their own route subtree, MF exposes, Effect BFF
148
+ contract, generated client, `localisedUrls`, locale JSON, CSS layer, and
149
+ Cloudflare Worker output. The shell consumes vertical UI through MF manifests
150
+ and vertical APIs through generated Effect clients exported by the vertical
151
+ packages.
152
+
153
+ Route localization is route-owned. Each app writes
154
+ `src/routes/ultramodern-route-metadata` and passes
155
+ `ultramodernLocalisedUrls` into `@modern-js/plugin-i18n`. Locale JSON is served
156
+ from `/locales/{{lng}}/{{ns}}.json`; Czech and English routes are generated from
157
+ the route owner, not from shell rewrites.
158
+
159
+ CSS federation is explicit:
160
+
161
+ - `packages/shared-design-tokens` exports `./tokens.css` and owns
162
+ `ultramodern-shared-tokens`.
163
+ - The shell owns shell base and overlay CSS only.
164
+ - Verticals own their vertical CSS layer and `[data-app-id="<vertical>"]`
165
+ root marker.
166
+ - Tailwind CSS v4 is configured per app through `@tailwindcss/postcss`.
167
+ - Duplicate base styles are forbidden; SSR first paint depends on shared token
168
+ CSS plus Modern/Rspack-emitted app CSS.
169
+ - Apps should not inject remote `async-index.css` paths, hardcode remote
170
+ stylesheet links, or disable filename hashing to make CSS URLs predictable.
171
+ UltraModern SSR resolves federated CSS from build output and MF manifests so
172
+ generated shells and demos can keep normal hashed assets.
173
+
174
+ Version switching evidence must keep UI, Effect API, CSS, i18n JSON, and MF
175
+ manifest markers in lockstep for the same vertical version.
176
+
177
+ ### Cloudflare And Zephyr Proof
178
+
179
+ Each generated app has:
180
+
181
+ - `cloudflare:build`, `cloudflare:deploy`, `cloudflare:preview`, and
182
+ `cloudflare:proof` scripts.
183
+ - Cloudflare metadata in `.modernjs/ultramodern-generated-contract.json`.
184
+ - `zephyr:dependencies` for any consumed verticals.
185
+ - `zephyr-rspack-plugin` wired through the generated Modern.js Rspack bridge.
186
+
187
+ Public URL proof is intentionally separate from local build validation:
188
+
189
+ ```bash
190
+ ULTRAMODERN_PUBLIC_URL_EXPLORE=https://explore.example.workers.dev \
191
+ ULTRAMODERN_PUBLIC_URL_DECIDE=https://decide.example.workers.dev \
192
+ ULTRAMODERN_PUBLIC_URL_CHECKOUT=https://checkout.example.workers.dev \
193
+ ULTRAMODERN_PUBLIC_URL_SHELL_SUPER_APP=https://shell-super-app.example.workers.dev \
194
+ pnpm cloudflare:proof -- --require-public-urls
195
+ ```
196
+
197
+ Live Zephyr switching proof requires Zephyr credentials and public runtime,
198
+ manifest, and API URLs for v1 and v2 of Explore, Decide, and Checkout. Without
199
+ public URLs and credentials, use dry-run evidence only; do not claim live
200
+ Zephyr selection has been proven.
201
+
104
202
  ### Local Monorepo Testing
105
203
 
106
204
  When testing unreleased Modern.js packages from a local monorepo checkout, use
107
205
  workspace protocol dependencies:
108
206
 
109
207
  ```bash
110
- npx @modern-js/create my-app --router tanstack --bff-runtime effect --workspace
208
+ pnpm dlx @bleedingdev/modern-js-create my-app --workspace
209
+ ```
210
+
211
+ For package-source validation of the full Tractor workspace, generate with the
212
+ workspace package source, then run the generated contract gate:
213
+
214
+ ```bash
215
+ pnpm dlx @bleedingdev/modern-js-create tractor-super-app --ultramodern-workspace --ultramodern-package-source workspace
216
+ cd tractor-super-app
217
+ pnpm install
218
+ pnpm ultramodern:check
111
219
  ```
112
220
 
113
221
  ## Documentation