@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.
- package/README.md +143 -35
- package/dist/index.js +4599 -607
- package/dist/types/locale/en.d.ts +3 -0
- package/dist/types/locale/zh.d.ts +3 -0
- package/dist/types/ultramodern-workspace.d.ts +11 -0
- package/package.json +6 -6
- package/template/.codex/hooks.json +16 -0
- package/template/.github/renovate.json +53 -0
- package/template/.github/workflows/ultramodern-gates.yml.handlebars +34 -10
- package/template/.mise.toml.handlebars +2 -0
- package/template/AGENTS.md +9 -6
- package/template/README.md +60 -34
- package/template/api/effect/index.ts.handlebars +9 -15
- package/template/config/public/locales/cs/translation.json +39 -0
- package/template/config/public/locales/en/translation.json +39 -0
- package/template/lefthook.yml +10 -0
- package/template/modern.config.ts.handlebars +41 -21
- package/template/oxfmt.config.ts +4 -3
- package/template/oxlint.config.ts +4 -4
- package/template/package.json.handlebars +43 -34
- package/template/pnpm-workspace.yaml +19 -0
- package/template/rstest.config.mts +7 -0
- package/template/scripts/bootstrap-agent-skills.mjs +63 -31
- package/template/scripts/check-i18n-strings.mjs +83 -0
- package/template/scripts/validate-ultramodern.mjs.handlebars +373 -35
- package/template/shared/effect/api.ts.handlebars +1 -2
- package/template/src/modern-app-env.d.ts +2 -0
- package/template/src/modern.runtime.ts.handlebars +17 -3
- package/template/src/routes/[lang]/page.tsx.handlebars +212 -0
- package/template/src/routes/index.css.handlebars +14 -3
- package/template/src/routes/layout.tsx.handlebars +2 -1
- package/template/tests/tsconfig.json +7 -0
- package/template/tests/ultramodern.contract.test.ts.handlebars +78 -0
- package/template-workspace/.agents/agent-reference-repos.json +24 -0
- package/template-workspace/.agents/skills-lock.json +19 -0
- package/template-workspace/.codex/hooks.json +16 -0
- package/template-workspace/.github/renovate.json +29 -0
- package/template-workspace/.github/workflows/ultramodern-workspace-gates.yml.handlebars +54 -0
- package/template-workspace/.gitignore.handlebars +5 -0
- package/template-workspace/.mise.toml.handlebars +2 -0
- package/template-workspace/AGENTS.md +36 -5
- package/template-workspace/README.md.handlebars +33 -10
- package/template-workspace/lefthook.yml +10 -0
- package/template-workspace/oxfmt.config.ts +13 -3
- package/template-workspace/oxlint.config.ts +12 -4
- package/template-workspace/pnpm-workspace.yaml +20 -8
- package/template-workspace/scripts/bootstrap-agent-skills.mjs +79 -22
- package/template-workspace/scripts/setup-agent-reference-repos.mjs +368 -0
- package/template/src/routes/page.tsx.handlebars +0 -119
- 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
|
|
16
|
-
|
|
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-
|
|
21
|
+
pnpm dlx @bleedingdev/modern-js-create my-app
|
|
20
22
|
```
|
|
21
23
|
|
|
22
|
-
|
|
24
|
+
To initialize the empty directory you are already in, pass `.` explicitly:
|
|
23
25
|
|
|
24
|
-
|
|
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
|
-
|
|
34
|
+
pnpm dlx @bleedingdev/modern-js-create my-super-app --ultramodern-workspace
|
|
28
35
|
```
|
|
29
36
|
|
|
30
|
-
|
|
37
|
+
The workspace is a full-stack reference, not a visual-only commerce boundary
|
|
38
|
+
demo. It generates:
|
|
31
39
|
|
|
32
|
-
|
|
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
|
-
|
|
54
|
+
cd my-super-app
|
|
55
|
+
mise install
|
|
56
|
+
pnpm install
|
|
57
|
+
pnpm ultramodern:check
|
|
58
|
+
pnpm build
|
|
36
59
|
```
|
|
37
60
|
|
|
38
|
-
|
|
61
|
+
### Router Template
|
|
62
|
+
|
|
63
|
+
TanStack Router is generated by default. To force the compatibility router:
|
|
39
64
|
|
|
40
65
|
```bash
|
|
41
|
-
|
|
66
|
+
pnpm dlx @bleedingdev/modern-js-create my-app --router react-router
|
|
42
67
|
```
|
|
43
68
|
|
|
44
|
-
###
|
|
69
|
+
### Tailwind Template
|
|
45
70
|
|
|
46
|
-
|
|
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
|
-
|
|
75
|
+
pnpm dlx @bleedingdev/modern-js-create my-app --no-tailwind
|
|
50
76
|
```
|
|
51
77
|
|
|
52
|
-
|
|
78
|
+
TanStack Router and Tailwind CSS work together without extra flags:
|
|
53
79
|
|
|
54
80
|
```bash
|
|
55
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
106
|
+
pnpm dlx @bleedingdev/modern-js-create my-app --workspace
|
|
72
107
|
```
|
|
73
108
|
|
|
74
|
-
###
|
|
109
|
+
### Vertical Workspace Recipes
|
|
75
110
|
|
|
76
|
-
Use the
|
|
77
|
-
|
|
78
|
-
|
|
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
|
-
|
|
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
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
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
|
-
|
|
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
|