@bleedingdev/modern-js-create 3.2.0-ultramodern.0

package/template/scripts/validate-ultramodern.mjs.handlebars

@@ -0,0 +1,102 @@
+import fs from 'node:fs';
+import path from 'node:path';
+
+const configPath = path.resolve(process.cwd(), 'modern.config.ts');
+const templateManifestPath = path.resolve(
+  process.cwd(),
+  '.modernjs/mv-template-manifest.json',
+);
+
+if (!fs.existsSync(configPath)) {
+  console.error('modern.config.ts not found');
+  process.exit(1);
+}
+
+const content = fs.readFileSync(configPath, 'utf8');
+const requiredTokens = [
+  'presetUltramodern(',
+  'appTools()',
+  'enableModuleFederationSSR',
+  'enableBffRequestId',
+  'enableTelemetryExporters',
+];
+const missing = requiredTokens.filter(token => !content.includes(token));
+
+if (missing.length > 0) {
+  console.error(
+    `Ultramodern contract check failed. Missing tokens: ${missing.join(', ')}`,
+  );
+  process.exit(1);
+}
+
+if (!fs.existsSync(templateManifestPath)) {
+  console.error('.modernjs/mv-template-manifest.json not found');
+  process.exit(1);
+}
+
+const templateManifest = JSON.parse(
+  fs.readFileSync(templateManifestPath, 'utf8'),
+);
+const requiredDeniedPaths = [
+  '.git/**',
+  '.github/**',
+  '.npmrc',
+  '.yarnrc',
+  '.env',
+  '.env.*',
+  'node_modules/**',
+  'dist/**',
+];
+const requiredPostMaterialization = [
+  'ultramodern-contract-check',
+  'dependency-install-with-lifecycle-deny',
+  'template-manifest-retained',
+];
+const manifestErrors = [];
+
+if (templateManifest.schemaVersion !== 1) {
+  manifestErrors.push('schemaVersion');
+}
+
+if (templateManifest.source?.type !== 'builtin') {
+  manifestErrors.push('source.type');
+}
+
+if (
+  !Array.isArray(templateManifest.integrity?.checksums) ||
+  !templateManifest.integrity.checksums.some(
+    checksum =>
+      checksum.algorithm === 'sha256' &&
+      checksum.scope === 'source-tree' &&
+      /^[0-9a-f]{64}$/.test(checksum.value),
+  )
+) {
+  manifestErrors.push('integrity.checksums[source-tree]');
+}
+
+for (const deniedPath of requiredDeniedPaths) {
+  if (!templateManifest.materialization?.deniedPaths?.includes(deniedPath)) {
+    manifestErrors.push(`materialization.deniedPaths:${deniedPath}`);
+  }
+}
+
+if (templateManifest.lifecyclePolicy?.denyByDefault !== true) {
+  manifestErrors.push('lifecyclePolicy.denyByDefault');
+}
+
+for (const token of requiredPostMaterialization) {
+  if (!templateManifest.validation?.postMaterializationValidation?.includes(token)) {
+    manifestErrors.push(`validation.postMaterializationValidation:${token}`);
+  }
+}
+
+if (manifestErrors.length > 0) {
+  console.error(
+    `Ultramodern template manifest check failed. Invalid fields: ${manifestErrors.join(
+      ', ',
+    )}`,
+  );
+  process.exit(1);
+}
+
+console.log('Ultramodern contract check passed.');

package/template/shared/effect/api.ts.handlebars

@@ -0,0 +1,18 @@
+{{#if useEffectBff}}import {
+  HttpApi,
+  HttpApiEndpoint,
+  HttpApiGroup,
+  Schema,
+} from '@modern-js/plugin-bff/effect-client';
+
+export const bffEffectApi = HttpApi.make('BffApi').add(
+  HttpApiGroup.make('greetings').add(
+    HttpApiEndpoint.get('hello', '/effect/hello', {
+      success: Schema.Struct({
+        message: Schema.String,
+        runtime: Schema.Literal('effect'),
+      }),
+    }),
+  ),
+);
+{{/if}}

package/template/src/modern-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types='@modern-js/app-tools/types' />

package/template/src/modern.runtime.ts.handlebars

@@ -0,0 +1,9 @@
+import { defineRuntimeConfig } from '@modern-js/runtime';
+
+export default defineRuntimeConfig({
+{{#if isTanstackRouter}}
+  router: {
+    framework: 'tanstack',
+  },
+{{/if}}
+});

package/template/src/routes/index.css.handlebars

@@ -0,0 +1,118 @@
+{{#if enableTailwind}}@import 'tailwindcss';
+
+{{/if}}html,
+body {
+  padding: 0;
+  margin: 0;
+  font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+  background: linear-gradient(to bottom, transparent, #fff) #eceeef;
+}
+
+p {
+  margin: 0;
+}
+
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  box-sizing: border-box;
+}
+
+.container-box {
+  min-height: 100vh;
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding-top: 10px;
+}
+
+main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.title {
+  display: flex;
+  margin: 4rem 0 4rem;
+  align-items: center;
+  font-size: 4rem;
+  font-weight: 600;
+}
+
+.logo {
+  width: 6rem;
+  margin: 7px 0 0 1rem;
+}
+
+.name {
+  color: #4ecaff;
+}
+
+.description {
+  text-align: center;
+  line-height: 1.5;
+  font-size: 1.3rem;
+  color: #1b3a42;
+  margin-bottom: 5rem;
+}
+
+.code {
+  background: #fafafa;
+  border-radius: 12px;
+  padding: 0.6rem 0.9rem;
+  font-size: 1.05rem;
+  font-family:
+    Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
+    Bitstream Vera Sans Mono, Courier New, monospace;
+}
+
+.container-box .grid {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1100px;
+  margin-top: 3rem;
+}
+
+.card {
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 100px;
+  color: inherit;
+  text-decoration: none;
+  transition: 0.15s ease;
+  width: 45%;
+}
+
+.card:hover,
+.card:focus {
+  transform: scale(1.05);
+}
+
+.card h2 {
+  display: flex;
+  align-items: center;
+  font-size: 1.5rem;
+  margin: 0;
+  padding: 0;
+}
+
+.card p {
+  opacity: 0.6;
+  font-size: 0.9rem;
+  line-height: 1.5;
+  margin-top: 1rem;
+}
+
+.arrow-right {
+  width: 1.3rem;
+  margin-left: 0.5rem;
+  margin-top: 3px;
+}

package/template/src/routes/layout.tsx.handlebars

@@ -0,0 +1,9 @@
+import { Outlet } from '@modern-js/runtime/{{routerImportPath}}';
+
+export default function Layout() {
+  return (
+    <div>
+      <Outlet />
+    </div>
+  );
+}

package/template/src/routes/page.tsx.handlebars

@@ -0,0 +1,119 @@
+import { Helmet } from '@modern-js/runtime/head';
+{{#if useEffectBff}}import effectBff from '@api/effect/index';
+import { useEffect, useState } from 'react';
+{{/if}}
+import './index.css';
+
+const Index = () => {
+{{#if useEffectBff}}
+  const [effectMessage, setEffectMessage] = useState('loading...');
+
+  useEffect(() => {
+    effectBff.client.greetings.hello({}).then(data => {
+      setEffectMessage(data.message);
+    });
+  }, []);
+{{/if}}
+
+  return (
+    <div className="container-box">
+      <Helmet>
+        <link
+          rel="icon"
+          type="image/x-icon"
+          href="https://lf3-static.bytednsdoc.com/obj/eden-cn/uhbfnupenuhf/favicon.ico"
+        />
+      </Helmet>
+      <main>
+        <div className="title">
+          Modern.js
+          <img
+            className="logo"
+            src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/modern-js-logo.svg"
+            alt="Modern.js Logo"
+          />
+          <p className="name">presetUltramodern</p>
+        </div>
+        <p className="description{{#if enableTailwind}} text-emerald-700 font-semibold{{/if}}">
+          This starter ships the public <code className="code">presetUltramodern(...)</code> profile. Start in
+          <code className="code">modern.config.ts</code>, keep
+          <code className="code">pnpm run ultramodern:check</code> green, and
+          tune the generated preset only where your app needs a softer lane.
+        </p>
+{{#if useEffectBff}}
+        <p className="description effect-message{{#if enableTailwind}} text-emerald-700 font-semibold{{/if}}">
+          Effect HttpApi response: <code className="code">{effectMessage}</code>
+        </p>
+{{/if}}
+        <div className="grid">
+          <a
+            href="https://modernjs.dev/en/guides/get-started/ultramodern.html"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="card"
+          >
+            <h2>
+              presetUltramodern Guide
+              <img
+                className="arrow-right"
+                src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/arrow-right.svg"
+                alt="Guide"
+              />
+            </h2>
+            <p>Review the MV-first, TanStack-ready, Effect-ready public preset.</p>
+          </a>
+          <a
+            href="https://modernjs.dev/en/configure/app/usage.html"
+            target="_blank"
+            className="card"
+            rel="noreferrer"
+          >
+            <h2>
+              Configure presetUltramodern
+              <img
+                className="arrow-right"
+                src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/arrow-right.svg"
+                alt="Tutorials"
+              />
+            </h2>
+            <p>Tune the generated defaults in <code className="code">modern.config.ts</code>.</p>
+          </a>
+          <a
+            href="https://github.com/web-infra-dev/modern.js/blob/main/packages/toolkit/create/template/.github/workflows/ultramodern-gates.yml.handlebars"
+            target="_blank"
+            className="card"
+            rel="noreferrer"
+          >
+            <h2>
+              Ultramodern Gates
+              <img
+                className="arrow-right"
+                src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/arrow-right.svg"
+                alt="Config"
+              />
+            </h2>
+            <p>The starter includes a PR workflow for <code className="code">ultramodern:check</code> and build.</p>
+          </a>
+          <a
+            href="https://modernjs.dev/en/configure/app/bff/effect.html"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="card"
+          >
+            <h2>
+              BFF + Effect
+              <img
+                className="arrow-right"
+                src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/arrow-right.svg"
+                alt="Github"
+              />
+            </h2>
+            <p>Keep Effect as the preferred BFF lane while Hono stays an explicit fallback.</p>
+          </a>
+        </div>
+      </main>
+    </div>
+  );
+};
+
+export default Index;

package/template/tailwind.config.ts.handlebars

@@ -0,0 +1,10 @@
+{{#if enableTailwind}}import type { Config } from 'tailwindcss';
+
+export default {
+  content: ['./src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+} satisfies Config;
+{{/if}}

package/template/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "@modern-js/tsconfig/base",
+  "compilerOptions": {
+    "declaration": false,
+    "jsx": "preserve",
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@api/*": ["./api/*"],
+      "@shared/*": ["./shared/*"]
+    },
+    "rootDir": "./src"
+  },
+  "include": ["src", "api", "shared", "config", "modern.config.ts"],
+  "exclude": ["**/node_modules"]
+}

package/template-workspace/README.md.handlebars

@@ -0,0 +1,28 @@
+# {{packageName}}
+
+Generated UltraModern SuperApp workspace.
+
+This workspace keeps `presetUltramodern(...)` as the single public Modern.js
+preset surface and scaffolds the canonical Micro Vertical starter topology:
+
+- `apps/shell-super-app` owns shell route assembly and remote manifest wiring.
+- `apps/remotes/remote-commerce` owns the commerce vertical remote.
+- `apps/remotes/remote-identity` owns the identity vertical remote.
+- `apps/remotes/remote-design-system` owns the horizontal design-system remote.
+- `services/service-recommendations-effect` owns the Effect BFF service.
+- `packages/shared-*` provide placeholders for cross-workspace contracts.
+
+Run the scaffold validator before adding business code:
+
+```bash
+pnpm ultramodern:check
+```
+
+The topology and ownership metadata are generated under `topology/`.
+
+Package source metadata is generated at
+`.modernjs/ultramodern-package-source.json`. The default strategy keeps Modern.js
+runtime and tooling packages on `workspace:*` for monorepo development. To create
+a workspace that can install those packages outside the monorepo, generate with
+`--ultramodern-package-source install`; generated shared packages still use
+`workspace:*` because they are part of this workspace.

package/template-workspace/pnpm-workspace.yaml

@@ -0,0 +1,5 @@
+packages:
+  - apps/*
+  - apps/remotes/*
+  - services/*
+  - packages/*