create-wp-reactor 0.1.0

package/bin/create-app.js

@@ -0,0 +1,61 @@
+#!/usr/bin/env node
+import { resolve } from "node:path";
+
+// Charge la source TS via tsx (dev), sinon le build dist.
+async function loadApi() {
+	try {
+		return await import("../src/index.ts");
+	} catch {
+		return await import("../dist/index.js");
+	}
+}
+
+function parseArgs(argv) {
+	const out = { projectName: null, dir: null, namespace: null, range: null };
+	for (let i = 0; i < argv.length; i += 1) {
+		const arg = argv[i];
+		if (arg === "--dir") out.dir = argv[++i];
+		else if (arg === "--namespace") out.namespace = argv[++i];
+		else if (arg === "--range") out.range = argv[++i];
+		else if (!arg.startsWith("--") && !out.projectName) out.projectName = arg;
+		else {
+			console.error(`Unknown option: ${arg}`);
+			process.exit(1);
+		}
+	}
+	return out;
+}
+
+async function main() {
+	const args = parseArgs(process.argv.slice(2));
+	if (!args.projectName) {
+		console.error(
+			"Usage:\n  create-wp-reactor <project-name> [--dir <path>] [--namespace <ns>] [--range <semver>]",
+		);
+		process.exit(1);
+	}
+
+	const { scaffold } = await loadApi();
+	const targetDir = args.dir
+		? resolve(args.dir)
+		: resolve(process.cwd(), args.projectName);
+
+	const result = scaffold({
+		projectName: args.projectName,
+		targetDir,
+		namespace: args.namespace ?? undefined,
+		pkgRange: args.range ?? undefined,
+	});
+
+	console.log(`\n✓ Repo client généré : ${result.targetDir}`);
+	console.log(`  ${result.written.length} entrées écrites`);
+	console.log("\nProchaines étapes :");
+	console.log(`  cd ${args.projectName}`);
+	console.log("  pnpm install   # nécessite l'auth GitHub Packages (read:packages)");
+	console.log("  pnpm dev");
+}
+
+main().catch((error) => {
+	console.error(error instanceof Error ? error.message : String(error));
+	process.exit(1);
+});

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+declare const TEMPLATES_DIR: string;
+interface ScaffoldOptions {
+    /** Nom kebab du projet (ex. "client-2") → noms de packages, dossiers, thème. */
+    projectName: string;
+    /** Dossier cible (créé). */
+    targetDir: string;
+    /** Namespace des blocs gen-block. Défaut : projectName sans tirets. */
+    namespace?: string;
+    /** Override du dossier template (tests). */
+    templatesDir?: string;
+}
+interface ScaffoldResult {
+    targetDir: string;
+    written: string[];
+}
+declare function scaffold(opts: ScaffoldOptions): ScaffoldResult;
+
+export { type ScaffoldOptions, type ScaffoldResult, TEMPLATES_DIR, scaffold };

package/dist/index.js

@@ -0,0 +1,62 @@
+// src/index.ts
+import {
+  mkdirSync,
+  readFileSync,
+  readdirSync,
+  statSync,
+  writeFileSync
+} from "fs";
+import { dirname, join, resolve } from "path";
+import { fileURLToPath } from "url";
+var HERE = dirname(fileURLToPath(import.meta.url));
+var TEMPLATES_DIR = resolve(HERE, "../templates/client");
+function titleCase(kebab) {
+  return kebab.split(/[-_]/).filter(Boolean).map((w) => w[0].toUpperCase() + w.slice(1)).join(" ");
+}
+function applyTokens(input, tokens) {
+  let out = input;
+  for (const [key, value] of Object.entries(tokens)) {
+    out = out.split(key).join(value);
+  }
+  return out;
+}
+var DOTFILES = {
+  gitignore: ".gitignore",
+  npmrc: ".npmrc"
+};
+function copyTemplateTree(srcDir, destDir, tokens, written) {
+  for (const entry of readdirSync(srcDir)) {
+    const srcPath = join(srcDir, entry);
+    const destName = DOTFILES[entry] ?? applyTokens(entry, tokens);
+    const destPath = join(destDir, destName);
+    if (statSync(srcPath).isDirectory()) {
+      mkdirSync(destPath, { recursive: true });
+      copyTemplateTree(srcPath, destPath, tokens, written);
+    } else {
+      const content = applyTokens(readFileSync(srcPath, "utf8"), tokens);
+      mkdirSync(dirname(destPath), { recursive: true });
+      writeFileSync(destPath, content);
+      written.push(destPath);
+    }
+  }
+}
+function scaffold(opts) {
+  const projectName = opts.projectName;
+  const namespace = opts.namespace ?? projectName.replace(/[-_]/g, "");
+  const templatesDir = opts.templatesDir ?? TEMPLATES_DIR;
+  const targetDir = resolve(opts.targetDir);
+  const tokens = {
+    __PROJECT_NAME__: projectName,
+    __PROJECT_TITLE__: titleCase(projectName),
+    __BLOCK_NAMESPACE__: namespace
+  };
+  const written = [];
+  mkdirSync(targetDir, { recursive: true });
+  copyTemplateTree(templatesDir, targetDir, tokens, written);
+  return { targetDir, written };
+}
+export {
+  TEMPLATES_DIR,
+  scaffold
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// create-wp-reactor — scaffolder de repo client mince.\n//\n// Émet un monorepo client « 2 mondes » depuis un template BUNDLÉ (npx-friendly :\n// aucun accès au monorepo framework au runtime) :\n//   • apps/webapp     ← coque (starter synchronisé dans templates/, voir\n//                       scripts/sync-template.mjs)\n//   • apps/wordpress  ← thème ENFANT\n//   • .github, docker, wp-reactor.config.json, workspace root\n//\n// Le runtime ne fait que copier templates/client/ en substituant les tokens.\n\nimport {\n\tmkdirSync,\n\treadFileSync,\n\treaddirSync,\n\tstatSync,\n\twriteFileSync,\n} from \"node:fs\";\nimport { dirname, join, resolve } from \"node:path\";\nimport { fileURLToPath } from \"node:url\";\n\nconst HERE = dirname(fileURLToPath(import.meta.url));\n// src/ (dev via tsx) comme dist/ (build) sont à 1 niveau du package.\nconst TEMPLATES_DIR = resolve(HERE, \"../templates/client\");\n\nexport interface ScaffoldOptions {\n\t/** Nom kebab du projet (ex. \"client-2\") → noms de packages, dossiers, thème. */\n\tprojectName: string;\n\t/** Dossier cible (créé). */\n\ttargetDir: string;\n\t/** Namespace des blocs gen-block. Défaut : projectName sans tirets. */\n\tnamespace?: string;\n\t/** Override du dossier template (tests). */\n\ttemplatesDir?: string;\n}\n\nexport interface ScaffoldResult {\n\ttargetDir: string;\n\twritten: string[];\n}\n\nfunction titleCase(kebab: string): string {\n\treturn kebab\n\t\t.split(/[-_]/)\n\t\t.filter(Boolean)\n\t\t.map((w) => w[0].toUpperCase() + w.slice(1))\n\t\t.join(\" \");\n}\n\nfunction applyTokens(input: string, tokens: Record<string, string>): string {\n\tlet out = input;\n\tfor (const [key, value] of Object.entries(tokens)) {\n\t\tout = out.split(key).join(value);\n\t}\n\treturn out;\n}\n\n// npm strippe `.gitignore` et `.npmrc` des tarballs publiés : on les stocke\n// sans point dans le template et on les re-dotte à l'écriture.\nconst DOTFILES: Record<string, string> = {\n\tgitignore: \".gitignore\",\n\tnpmrc: \".npmrc\",\n};\n\n/** Copie récursive du template en substituant les tokens dans chemins + contenu. */\nfunction copyTemplateTree(\n\tsrcDir: string,\n\tdestDir: string,\n\ttokens: Record<string, string>,\n\twritten: string[],\n): void {\n\tfor (const entry of readdirSync(srcDir)) {\n\t\tconst srcPath = join(srcDir, entry);\n\t\tconst destName = DOTFILES[entry] ?? applyTokens(entry, tokens);\n\t\tconst destPath = join(destDir, destName);\n\t\tif (statSync(srcPath).isDirectory()) {\n\t\t\tmkdirSync(destPath, { recursive: true });\n\t\t\tcopyTemplateTree(srcPath, destPath, tokens, written);\n\t\t} else {\n\t\t\tconst content = applyTokens(readFileSync(srcPath, \"utf8\"), tokens);\n\t\t\tmkdirSync(dirname(destPath), { recursive: true });\n\t\t\twriteFileSync(destPath, content);\n\t\t\twritten.push(destPath);\n\t\t}\n\t}\n}\n\nexport function scaffold(opts: ScaffoldOptions): ScaffoldResult {\n\tconst projectName = opts.projectName;\n\tconst namespace = opts.namespace ?? projectName.replace(/[-_]/g, \"\");\n\tconst templatesDir = opts.templatesDir ?? TEMPLATES_DIR;\n\tconst targetDir = resolve(opts.targetDir);\n\tconst tokens: Record<string, string> = {\n\t\t__PROJECT_NAME__: projectName,\n\t\t__PROJECT_TITLE__: titleCase(projectName),\n\t\t__BLOCK_NAMESPACE__: namespace,\n\t};\n\tconst written: string[] = [];\n\n\tmkdirSync(targetDir, { recursive: true });\n\tcopyTemplateTree(templatesDir, targetDir, tokens, written);\n\n\treturn { targetDir, written };\n}\n\nexport { TEMPLATES_DIR };\n"],"mappings":";AAWA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,SAAS,MAAM,eAAe;AACvC,SAAS,qBAAqB;AAE9B,IAAM,OAAO,QAAQ,cAAc,YAAY,GAAG,CAAC;AAEnD,IAAM,gBAAgB,QAAQ,MAAM,qBAAqB;AAkBzD,SAAS,UAAU,OAAuB;AACzC,SAAO,MACL,MAAM,MAAM,EACZ,OAAO,OAAO,EACd,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,YAAY,IAAI,EAAE,MAAM,CAAC,CAAC,EAC1C,KAAK,GAAG;AACX;AAEA,SAAS,YAAY,OAAe,QAAwC;AAC3E,MAAI,MAAM;AACV,aAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,MAAM,GAAG;AAClD,UAAM,IAAI,MAAM,GAAG,EAAE,KAAK,KAAK;AAAA,EAChC;AACA,SAAO;AACR;AAIA,IAAM,WAAmC;AAAA,EACxC,WAAW;AAAA,EACX,OAAO;AACR;AAGA,SAAS,iBACR,QACA,SACA,QACA,SACO;AACP,aAAW,SAAS,YAAY,MAAM,GAAG;AACxC,UAAM,UAAU,KAAK,QAAQ,KAAK;AAClC,UAAM,WAAW,SAAS,KAAK,KAAK,YAAY,OAAO,MAAM;AAC7D,UAAM,WAAW,KAAK,SAAS,QAAQ;AACvC,QAAI,SAAS,OAAO,EAAE,YAAY,GAAG;AACpC,gBAAU,UAAU,EAAE,WAAW,KAAK,CAAC;AACvC,uBAAiB,SAAS,UAAU,QAAQ,OAAO;AAAA,IACpD,OAAO;AACN,YAAM,UAAU,YAAY,aAAa,SAAS,MAAM,GAAG,MAAM;AACjE,gBAAU,QAAQ,QAAQ,GAAG,EAAE,WAAW,KAAK,CAAC;AAChD,oBAAc,UAAU,OAAO;AAC/B,cAAQ,KAAK,QAAQ;AAAA,IACtB;AAAA,EACD;AACD;AAEO,SAAS,SAAS,MAAuC;AAC/D,QAAM,cAAc,KAAK;AACzB,QAAM,YAAY,KAAK,aAAa,YAAY,QAAQ,SAAS,EAAE;AACnE,QAAM,eAAe,KAAK,gBAAgB;AAC1C,QAAM,YAAY,QAAQ,KAAK,SAAS;AACxC,QAAM,SAAiC;AAAA,IACtC,kBAAkB;AAAA,IAClB,mBAAmB,UAAU,WAAW;AAAA,IACxC,qBAAqB;AAAA,EACtB;AACA,QAAM,UAAoB,CAAC;AAE3B,YAAU,WAAW,EAAE,WAAW,KAAK,CAAC;AACxC,mBAAiB,cAAc,WAAW,QAAQ,OAAO;AAEzD,SAAO,EAAE,WAAW,QAAQ;AAC7B;","names":[]}

package/package.json

@@ -0,0 +1,48 @@
+{
+	"name": "create-wp-reactor",
+	"version": "0.1.0",
+	"type": "module",
+	"description": "Scaffolder de repo client mince WP Reactor : émet apps/webapp (depuis le starter) + thème enfant + CI réutilisable + docker. Usage : npm create wp-reactor <nom>.",
+	"bin": {
+		"create-wp-reactor": "./bin/create-app.js"
+	},
+	"exports": {
+		".": "./src/index.ts"
+	},
+	"files": [
+		"dist",
+		"bin",
+		"templates"
+	],
+	"scripts": {
+		"sync": "node scripts/sync-template.mjs",
+		"build": "tsup",
+		"release:npm": "node scripts/publish-npm.mjs",
+		"prepack": "node scripts/sync-template.mjs",
+		"check-types": "tsc --noEmit",
+		"test": "vitest run",
+		"lint": "biome lint .",
+		"format": "biome format --write ."
+	},
+	"devDependencies": {
+		"@types/node": "^22.10.2",
+		"@wp-reactor/config-biome": "workspace:*",
+		"@wp-reactor/config-tsconfig": "workspace:*",
+		"tsup": "^8.5.1",
+		"typescript": "5.9.2",
+		"vitest": "^4.1.0"
+	},
+	"publishConfig": {
+		"access": "public",
+		"registry": "https://registry.npmjs.org",
+		"main": "./dist/index.js",
+		"module": "./dist/index.js",
+		"types": "./dist/index.d.ts",
+		"exports": {
+			".": {
+				"types": "./dist/index.d.ts",
+				"import": "./dist/index.js"
+			}
+		}
+	}
+}

package/templates/client/.env.example

@@ -0,0 +1,7 @@
+# Webapp (bakées au build Vite)
+VITE_WORDPRESS_URL=https://__PROJECT_NAME__-wp.example.com
+VITE_GRAPHQL_PATH=/graphql
+VITE_FEATURE_EDITORIAL=true
+VITE_FEATURE_ECOMMERCE=true
+VITE_FEATURE_AUTH=true
+SESSION_SECRET=change-me

package/templates/client/.github/workflows/ci.yml

@@ -0,0 +1,24 @@
+name: CI
+on:
+  pull_request:
+  push:
+    branches: [main]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+          registry-url: https://npm.pkg.github.com
+          scope: "@wp-reactor"
+      - run: pnpm install --frozen-lockfile
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - run: pnpm build
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - run: pnpm check-types

package/templates/client/.github/workflows/deploy.yml

@@ -0,0 +1,43 @@
+name: Build & deploy
+
+# Appelle les workflows RÉUTILISABLES du framework WP Reactor — aucune logique
+# CI dupliquée ici. Voir wp-reactor/wp-reactor/.github/workflows/build-and-deploy-image.yml
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+jobs:
+  webapp:
+    uses: wp-reactor/wp-reactor/.github/workflows/build-and-deploy-image.yml@main
+    permissions:
+      contents: read
+      packages: write
+    with:
+      image: ghcr.io/${{ github.repository }}/webapp
+      dockerfile: apps/webapp/Dockerfile
+      build-args: |
+        NODE_AUTH_TOKEN=${{ secrets.GITHUB_TOKEN }}
+        VITE_WORDPRESS_URL=${{ vars.VITE_WORDPRESS_URL }}
+        VITE_GRAPHQL_PATH=${{ vars.VITE_GRAPHQL_PATH }}
+        VITE_FEATURE_EDITORIAL=${{ vars.VITE_FEATURE_EDITORIAL }}
+        VITE_FEATURE_ECOMMERCE=${{ vars.VITE_FEATURE_ECOMMERCE }}
+        VITE_FEATURE_AUTH=${{ vars.VITE_FEATURE_AUTH }}
+        SESSION_SECRET=${{ secrets.SESSION_SECRET }}
+    secrets:
+      COOLIFY_URL: ${{ secrets.COOLIFY_URL }}
+      COOLIFY_TOKEN: ${{ secrets.COOLIFY_TOKEN }}
+      COOLIFY_UUID: ${{ secrets.COOLIFY_WEBAPP_UUID }}
+
+  wordpress:
+    uses: wp-reactor/wp-reactor/.github/workflows/build-and-deploy-image.yml@main
+    permissions:
+      contents: read
+      packages: write
+    with:
+      image: ghcr.io/${{ github.repository }}/wordpress
+      dockerfile: apps/wordpress/Dockerfile
+    secrets:
+      COOLIFY_URL: ${{ secrets.COOLIFY_URL }}
+      COOLIFY_TOKEN: ${{ secrets.COOLIFY_TOKEN }}
+      COOLIFY_UUID: ${{ secrets.COOLIFY_WORDPRESS_UUID }}

package/templates/client/README.md

@@ -0,0 +1,40 @@
+# __PROJECT_TITLE__
+
+Repo client **WP Reactor** (framework headless WordPress) — monorepo léger « 2 mondes ».
+
+```
+apps/webapp/                 coque TanStack Start (deps @wp-reactor/* publiées)
+apps/wordpress/theme-__PROJECT_NAME__/   thème ENFANT (branding + blocs propres)
+apps/wordpress/Dockerfile    image WP = base framework + thème enfant overlayé
+.github/workflows/deploy.yml appelle les workflows réutilisables du framework
+wp-reactor.config.json       config gen-block (namespace, chemins)
+```
+
+## Prérequis
+
+Les packages `@wp-reactor/*` sont sur **GitHub Packages** (privé, org `wp-reactor`).
+Authentifie-toi avant `pnpm install` :
+
+```bash
+echo "//npm.pkg.github.com/:_authToken=<PAT read:packages>" >> ~/.npmrc
+```
+
+## Dev
+
+```bash
+pnpm install
+cp .env.example .env   # renseigne VITE_WORDPRESS_URL, SESSION_SECRET…
+pnpm dev               # webapp sur :3000
+```
+
+## Générer un bloc
+
+```bash
+pnpm gen:block schemas/<slug>.json   # écrit thème enfant + renderer webapp + registre
+```
+
+## Déploiement
+
+Push sur `main` → `.github/workflows/deploy.yml` build+push les images webapp & WordPress
+sur GHCR via les workflows réutilisables du framework, puis déclenche Coolify (secrets
+`COOLIFY_*` requis).

package/templates/client/apps/webapp/.env.example

@@ -0,0 +1,10 @@
+# WordPress headless endpoint consommé par @wp-reactor/headless-core
+VITE_WORDPRESS_URL=https://wp.example.test
+
+# Modules métier activés côté webapp (cf. docs/new-client-project du plan)
+VITE_FEATURE_EDITORIAL=true
+VITE_FEATURE_ECOMMERCE=false
+VITE_FEATURE_AUTH=false
+
+# Hôte autorisé supplémentaire (dev/staging)
+# VITE_ALLOWED_HOST=

package/templates/client/apps/webapp/README.md

@@ -0,0 +1,14 @@
+# @wp-reactor/webapp-template
+
+Starter TanStack Start du framework WP Reactor — l'app de référence minimale, CI-testée, dont
+chaque repo client dérive sa coque (`apps/webapp`).
+
+🚧 Squelette : route d'accueil unique. Le câblage WordPress (clients GraphQL, cache, providers)
+arrive avec la distillation de `@wp-reactor/headless-core` puis des modules métier.
+
+```bash
+pnpm install        # à la racine du monorepo
+pnpm --filter @wp-reactor/webapp-template dev
+```
+
+Source de référence distillée : `.reference/namaki/apps/webapp`.

package/templates/client/apps/webapp/blocks/cta-banner/block.json

@@ -0,0 +1,39 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "wp-reactor/cta-banner",
+	"version": "0.1.0",
+	"title": "CTA Banner",
+	"category": "design",
+	"icon": "megaphone",
+	"description": "Bannière d'appel à l'action",
+	"textdomain": "wp-reactor",
+	"editorScript": "file:./index.js",
+	"editorStyle": "file:./editor.css",
+	"render": "file:./render.php",
+	"attributes": {
+		"heading": {
+			"type": "string",
+			"default": "Titre"
+		},
+		"body": {
+			"type": "string",
+			"default": ""
+		},
+		"inverted": {
+			"type": "boolean",
+			"default": false
+		},
+		"items": {
+			"type": "array",
+			"default": []
+		}
+	},
+	"supports": {
+		"html": false,
+		"align": [
+			"wide",
+			"full"
+		]
+	}
+}

package/templates/client/apps/webapp/blocks/cta-banner/edit.tsx

@@ -0,0 +1,65 @@
+import { useBlockProps } from "@wordpress/block-editor";
+import type { BlockEditProps } from "@wordpress/blocks";
+import { useState } from "react";
+import {
+	BlockEditModal,
+	BlockEditOverlay,
+	FieldControl,
+	FrontPreviewFrame,
+} from "@wp-reactor/block-editor";
+
+export interface CtaBannerBlockAttributes {
+	heading: string;
+	body: string;
+	inverted: boolean;
+	items: unknown[];
+}
+
+export function Edit({
+	attributes,
+	setAttributes,
+}: BlockEditProps<CtaBannerBlockAttributes>) {
+	const blockProps = useBlockProps({ className: "wp-reactor-cta-banner-editor" });
+	const [isModalOpen, setIsModalOpen] = useState(false);
+
+	const fields = (
+		<>
+			<FieldControl
+				field={{ key: "heading", label: "Titre", ui: "TextInput" }}
+				value={attributes.heading}
+				onChange={(value) => setAttributes({ heading: value as string })}
+			/>
+			<FieldControl
+				field={{ key: "body", label: "Texte", ui: "RichText" }}
+				value={attributes.body}
+				onChange={(value) => setAttributes({ body: value as string })}
+			/>
+			<FieldControl
+				field={{ key: "inverted", label: "Thème inversé", ui: "Toggle" }}
+				value={attributes.inverted}
+				onChange={(value) => setAttributes({ inverted: value as boolean })}
+			/>
+			<FieldControl
+				field={{ key: "items", label: "Liens", ui: "ArrayRepeater" }}
+				value={attributes.items}
+				onChange={(value) => setAttributes({ items: value as unknown[] })}
+			/>
+		</>
+	);
+
+	return (
+		<>
+			{isModalOpen && (
+				<BlockEditModal title="CTA Banner" onClose={() => setIsModalOpen(false)}>
+					{fields}
+				</BlockEditModal>
+			)}
+			<BlockEditOverlay blockProps={blockProps} onEditClick={() => setIsModalOpen(true)}>
+				<FrontPreviewFrame
+					block="wp-reactor/cta-banner"
+					attributes={attributes as Record<string, unknown>}
+				/>
+			</BlockEditOverlay>
+		</>
+	);
+}

package/templates/client/apps/webapp/blocks/cta-banner/editor.scss

@@ -0,0 +1,3 @@
+.wp-reactor-cta-banner-editor {
+	display: block;
+}

package/templates/client/apps/webapp/blocks/cta-banner/index.tsx

@@ -0,0 +1,9 @@
+import { registerBlockType } from "@wordpress/blocks";
+import metadata from "./block.json";
+import { Edit } from "./edit";
+import { save } from "./save";
+
+import "./editor.scss";
+
+// biome-ignore lint/suspicious/noExplicitAny: WP block registration typing
+registerBlockType(metadata.name, { ...metadata, edit: Edit, save } as any);

package/templates/client/apps/webapp/blocks/cta-banner/render.php

@@ -0,0 +1,11 @@
+<?php
+/**
+ * Server render for wp-reactor/cta-banner.
+ * Headless : le rendu réel est fait par la webapp (@wp-reactor/editorial).
+ * Ce wrapper expose juste les attributs au front via le bloc éditeur.
+ */
+if (!defined('ABSPATH')) {
+    exit;
+}
+?>
+<div <?php echo get_block_wrapper_attributes(); ?>></div>

package/templates/client/apps/webapp/blocks/cta-banner/save.tsx

@@ -0,0 +1,3 @@
+export function save() {
+	return null;
+}

package/templates/client/apps/webapp/package.json

@@ -0,0 +1,44 @@
+{
+	"name": "@__PROJECT_NAME__/webapp",
+	"private": true,
+	"type": "module",
+	"description": "Starter TanStack Start du framework WP Reactor — app de référence minimale, CI-testée.",
+	"scripts": {
+		"dev": "vite dev --port 3000",
+		"build": "vite build && tsc --noEmit",
+		"preview": "vite preview",
+		"check-types": "tsc --noEmit",
+		"format": "biome format --write .",
+		"lint": "biome lint ."
+	},
+	"dependencies": {
+		"@tanstack/react-query": "^5.66.5",
+		"@tanstack/react-router": "^1.170.8",
+		"@tanstack/react-router-ssr-query": "^1.167.0",
+		"@tanstack/react-start": "^1.168.14",
+		"@tanstack/router-plugin": "^1.168.11",
+		"@tailwindcss/vite": "^4.2.4",
+		"@wp-reactor/auth": "^0.1.0",
+		"@wp-reactor/commerce": "^0.1.0",
+		"@wp-reactor/editorial": "^0.1.0",
+		"@wp-reactor/headless-core": "^0.1.0",
+		"@wp-reactor/ui": "^0.1.0",
+		"graphql": "^16.10.0",
+		"graphql-request": "^7.4.0",
+		"nitro": "npm:nitro-nightly@3.0.1-20260601-173724-a2597363",
+		"react": "^19.2.0",
+		"react-dom": "^19.2.0",
+		"tailwindcss": "^4.2.4"
+	},
+	"devDependencies": {
+		"@biomejs/biome": "2.2.4",
+		"@types/node": "^22.10.2",
+		"@types/react": "^19.2.0",
+		"@types/react-dom": "^19.2.0",
+		"@vitejs/plugin-react": "^6.0.1",
+		"@wp-reactor/config-biome": "^0.1.0",
+		"@wp-reactor/config-tsconfig": "^0.1.0",
+		"typescript": "5.9.2",
+		"vite": "^8.0.2"
+	}
+}

package/templates/client/apps/webapp/schemas/cta-banner.json

@@ -0,0 +1,41 @@
+{
+	"$schema": "https://wp-reactor.dev/block-contract.schema.json",
+	"schemaVersion": "1.0.0",
+	"slug": "cta-banner",
+	"title": "CTA Banner",
+	"category": "design",
+	"icon": "megaphone",
+	"description": "Bannière d'appel à l'action",
+	"attributes": {
+		"heading": {
+			"ui": "TextInput",
+			"default": "Titre",
+			"label": "Titre"
+		},
+		"body": {
+			"ui": "RichText",
+			"label": "Texte"
+		},
+		"inverted": {
+			"ui": "Toggle",
+			"default": false,
+			"label": "Thème inversé"
+		},
+		"items": {
+			"ui": "ArrayRepeater",
+			"label": "Liens",
+			"fields": [
+				{
+					"key": "label",
+					"ui": "TextInput",
+					"label": "Libellé"
+				},
+				{
+					"key": "url",
+					"ui": "TextInput",
+					"label": "URL"
+				}
+			]
+		}
+	}
+}

package/templates/client/apps/webapp/src/authOps.ts

@@ -0,0 +1,17 @@
+import type { AuthOperations } from "@wp-reactor/auth";
+import {
+	getCurrentUserServerFn,
+	loginServerFn,
+	logoutServerFn,
+} from "./server/auth";
+
+/**
+ * Opérations injectées dans `AuthProvider` : la coque branche le provider du
+ * package sur SES serverFns (Option B). Le transform Start retire le handler
+ * serveur du bundle client — importer la référence serverFn ici est sûr.
+ */
+export const authOperations: AuthOperations = {
+	getCurrentUser: () => getCurrentUserServerFn(),
+	login: (input) => loginServerFn({ data: input }),
+	logout: () => logoutServerFn(),
+};

package/templates/client/apps/webapp/src/blocks.tsx

@@ -0,0 +1,29 @@
+import { createBlockRegistry } from "@wp-reactor/editorial";
+import { isDev } from "./env";
+import { CtaBannerBlock } from "./renderers/CtaBannerBlock";
+
+// Bloc démo du starter. Un vrai client a un bloc par `block.json` ; gen-block
+// écrit les `register*` ci-dessous depuis ces block.json (source unique).
+function HeroBlock({ attributes }: { attributes: { title?: unknown } }) {
+	return (
+		<section className="bg-neutral-900 px-6 py-20 text-center text-white">
+			<h1 className="text-4xl font-bold">
+				{attributes.title ? String(attributes.title) : "Hero"}
+			</h1>
+		</section>
+	);
+}
+
+/**
+ * Registre de blocs DU CLIENT. Le framework fournit le mécanisme
+ * (`createBlockRegistry`) ; ce fichier déclare le set propre au site. gen-block
+ * insère ses renderers au marqueur, dans la chaîne, avant le `;`.
+ */
+export const blockRegistry = createBlockRegistry({
+	namespace: "wp-reactor",
+	dev: isDev,
+})
+	.registerAttributeBlock("hero", HeroBlock)
+	.registerAttributeBlock("cta-banner", CtaBannerBlock, { "heading": "string", "body": "string", "inverted": "boolean", "items": "array" })
+	// @gen:block:block-registry
+	;

package/templates/client/apps/webapp/src/cart.ts

@@ -0,0 +1,28 @@
+import {
+	useWooCart,
+	type UseWooCartResult,
+	type WooCartActions,
+} from "@wp-reactor/commerce";
+import { isSsr } from "./env";
+import {
+	addCartItem,
+	applyCoupon,
+	getCart,
+	removeCartItems,
+	removeCoupons,
+	updateCartItemQuantities,
+} from "./server/cart";
+
+// La coque branche le hook panier du package sur SES serverFns (Option B).
+const actions: WooCartActions = {
+	addCartItem: (input) => addCartItem({ data: input }),
+	updateCartItemQuantities: (items) =>
+		updateCartItemQuantities({ data: { items } }),
+	removeCartItems: (keys) => removeCartItems({ data: { keys } }),
+	applyCoupon: (code) => applyCoupon({ data: { code } }),
+	removeCoupons: (codes) => removeCoupons({ data: { codes } }),
+};
+
+export function useCart(): UseWooCartResult {
+	return useWooCart({ getCart: () => getCart(), ssr: isSsr, actions });
+}