create-middag-ui 0.26.1 → 0.27.0

package/cli.js

@@ -20,7 +20,7 @@
  */
 
 import { join } from "node:path";
-import { detectHost, detectMoodleComponent, HOSTS } from "./lib/detect.js";
+import { detectHost, detectMoodleComponent, detectPhpHost, HOSTS } from "./lib/detect.js";
 import { ask, confirm, select } from "./lib/prompts.js";
 import { runTokenFlow } from "./lib/auth.js";
 import {
@@ -92,6 +92,32 @@ if (hostKey) {
 
 const host = HOSTS[hostKey];
 
+// Custom host: probe for a PHP backend so the production build targets the
+// PHP doc-root (public/build) with a base-href that keeps lazy chunks resolving.
+let phpHost = null;
+if (hostKey === "custom") {
+  const php = detectPhpHost(cwd);
+  if (php && php.docRoot) {
+    const fwLabel = php.framework ? ` (${php.framework})` : "";
+    if (nonInteractive) {
+      phpHost = php;
+      success(`PHP host detected${fwLabel} → build to public/build (--yes mode)`);
+    } else {
+      const docRel = php.docRoot.replace(cwd, ".");
+      const ok = await confirm(
+        `PHP backend detected${fwLabel}. Build assets into ${docRel}/build?`,
+        true,
+      );
+      if (ok) {
+        phpHost = php;
+        success("Production build will target the PHP doc-root (public/build)");
+      } else {
+        info("Keeping generic custom build (../dist)");
+      }
+    }
+  }
+}
+
 // Moodle: detect frankenstyle component name (e.g. "local_middag", "mod_assign")
 let moodleComponent = null;
 if (hostKey === "moodle") {
@@ -249,7 +275,7 @@ if (isPro) {
 
 // Host-specific production files (entry, vite config, theme CSS)
 scaffoldHostEntry(targetDir, hostKey);
-scaffoldHostViteConfig(targetDir, hostKey, host, withLicensing);
+scaffoldHostViteConfig(targetDir, hostKey, host, withLicensing, phpHost);
 scaffoldHostThemeCSS(targetDir, hostKey, host);
 
 // Moodle-specific: AMD plugin + Moodle adapters (ajax, strings, notification)

package/lib/detect.js

@@ -113,3 +113,31 @@ export function detectHost(cwd) {
 
   return null;
 }
+
+/**
+ * Detect a PHP host and its doc-root, walking cwd + ancestors.
+ *
+ * Used to refine the 'custom' host: a PHP backend's production build must
+ * target the doc-root (public/build) with a proper base-href so lazy chunks
+ * resolve. PHP marker priority: composer.json (universal) → public/ doc-root;
+ * bin/console (Symfony) / artisan (Laravel) only refine the framework hint.
+ *
+ * @param {string} cwd - Directory the scaffold runs in (ui/ goes under here)
+ * @returns {{ lang: 'php', framework: string|null, appRoot: string, docRoot: string|null } | null}
+ */
+export function detectPhpHost(cwd) {
+  let dir = cwd;
+  for (let i = 0; i <= MAX_DEPTH; i++) {
+    if (existsSync(join(dir, "composer.json"))) {
+      const docRoot = existsSync(join(dir, "public")) ? join(dir, "public") : null;
+      let framework = null;
+      if (existsSync(join(dir, "artisan"))) framework = "laravel";
+      else if (existsSync(join(dir, "bin", "console"))) framework = "symfony";
+      return { lang: "php", framework, appRoot: dir, docRoot };
+    }
+    const parent = dirname(dir);
+    if (parent === dir) break;
+    dir = parent;
+  }
+  return null;
+}

package/lib/scaffold.js

@@ -8,7 +8,7 @@
  */
 
 import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
-import { basename, dirname, join } from "node:path";
+import { basename, dirname, join, relative } from "node:path";
 import { fileURLToPath } from "node:url";
 import { error, success, warn } from "./ui.js";
 
@@ -1435,7 +1435,7 @@ ${postMountCode}
  * @param {object} host - HOSTS[hostKey] object
  * @param {boolean} withLicensing - Whether to emit @middag-io/licensing delivery manifest plugin
  */
-export function scaffoldHostViteConfig(targetDir, hostKey, host, withLicensing = false) {
+export function scaffoldHostViteConfig(targetDir, hostKey, host, withLicensing = false, phpHost = null) {
   const filePath = join(targetDir, `vite.config.${hostKey}.ts`);
   const label = `vite.config.${hostKey}.ts`;
   if (skipIfExists(filePath, label)) return;
@@ -1524,10 +1524,58 @@ export default defineConfig({
     },
   },
 });
+`;
+    writeFile(filePath, content, label);
+    return;
+  } else if (hostKey === "custom" && phpHost && phpHost.docRoot) {
+    // PHP host: app-entry build into the doc-root. base:"/build/" scopes
+    // lazy-chunk import URLs (heavy blocks: ChartPanel, FormPanel, DateField)
+    // to where PHP serves /public/build — without it dynamic imports 404.
+    // entry-custom.tsx self-executes (registerDefaults + createInertiaApp), so
+    // this is an APP build (rollupOptions.input), NOT a library build.
+    const docRootName = basename(phpHost.docRoot);
+    const rel = relative(targetDir, join(phpHost.docRoot, "build")) || "../public/build";
+    const outDirExpr = `resolve(__dirname, ${JSON.stringify(rel)})`;
+    const content = `/**
+ * Vite build config for the custom host (PHP) — production build target.
+ *
+ * Builds src/entry-custom.tsx as an APP entry (self-executes: registerDefaults
+ * + createInertiaApp) so the bundle runs when the PHP shell loads
+ * \`<script type="module" src="/build/app.js">\`. base:"/build/" scopes lazy
+ * chunk import URLs to where the assets are served (${docRootName}/build).
+ *
+ * The dev server (\`npm run dev\`) uses vite.config.ts instead.
+ */
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+${licensingImport.trimEnd()}
+import { resolve } from "path";
+
+export default defineConfig({
+  plugins: [react()${licensingPluginEntry}],
+  define: { "process.env.NODE_ENV": JSON.stringify("production") },
+  resolve: { alias: { "@/": resolve(__dirname, "src") + "/" } },
+  base: "/build/",
+  build: {
+    outDir: ${outDirExpr},
+    emptyOutDir: true,
+    cssCodeSplit: false,
+    rollupOptions: {
+      input: resolve(__dirname, "src/entry-custom.tsx"),
+      output: {
+        entryFileNames: "app.js",
+        chunkFileNames: "[name]-[hash].js",
+        assetFileNames: (assetInfo) =>
+          assetInfo.name?.endsWith(".css") ? "style.css" : "[name]-[hash][extname]",
+      },
+    },
+  },
+});
 `;
     writeFile(filePath, content, label);
     return;
   } else {
+    // Generic custom (non-PHP) or PHP without a public/ doc-root — lib mode.
     outDir = `resolve(__dirname, "../dist")`;
     formats = `["es"]`;
     libName = `"MiddagUI"`;
@@ -2002,7 +2050,7 @@ function readTemplate(relativePath) {
 // ── Shared: register, page-resolver, route helper, demo page ────────────
 
 /**
- * Scaffold FREE register: src/app/register.ts — the 12 standard blocks.
+ * Scaffold FREE register: src/app/register.ts — the 13 standard blocks.
  */
 export function scaffoldFreeRegister(targetDir) {
   ensureDir(join(targetDir, "src", "app"));

package/lib/scaffoldPRO.js

@@ -5,7 +5,7 @@
  * Only available when installed from GitHub Packages.
  *
  * Generates the extended mock harness (mock/, src/app/register.ts)
- * with 19 blocks (12 standard + 7 premium), extracted navigation/data/entities/routes files,
+ * with 19 blocks (13 standard + 6 premium), extracted navigation/data/entities/routes files,
  * and the slim app.tsx that delegates to mock/.
  */
 
@@ -54,7 +54,7 @@ function skipIfExists(filePath, label) {
 // ── 1. PRO register (19 blocks) ────────────────────────────────────────
 
 /**
- * Scaffold `src/app/register.ts` — PRO version with 19 blocks (12 standard + 7 premium).
+ * Scaffold `src/app/register.ts` — PRO version with 19 blocks (13 standard + 6 premium).
  * Overrides any FREE register that may have been scaffolded.
  *
  * @param {string} targetDir - Absolute path to UI project root

package/lib/templates/pro/main.tsx

@@ -12,8 +12,8 @@ import "./theme.css";
 import "@fontsource-variable/figtree";
 import { App } from "./app";
 
-// Dev mode: register the free engine defaults (12 standard blocks + fields +
-// icons + cells) plus the premium runtime (the 7 heavy blocks). Then override
+// Dev mode: register the free engine defaults (13 standard blocks + fields +
+// icons + cells) plus the premium runtime (the 6 heavy blocks). Then override
 // the "product" shell with the host-sim MockProductShell inherited from
 // @middag-io/react-demo (Moodle/WP chrome, host switcher, theme/locale toggles).
 // Dev-only — in production, entry-*.tsx uses the selective register from ./app/register.

package/lib/templates/pro/register-pro.ts

@@ -1,13 +1,16 @@
 /**
  * register — selective registration for this plugin's UI (PRO).
  *
- * Registers the 12 standard blocks (plus shells, layouts, cell renderers, form
+ * Registers the 13 standard blocks (plus shells, layouts, cell renderers, form
  * fields and icons) from @middag-io/react, then calls registerProDefaults()
  * from @middag-io/react-pro to add the premium runtime: the rich ProductShell
- * + chrome panels and the 7 interactive blocks (form_panel, chart_panel,
- * kanban_board, flow_editor, form_builder, condition_tree, sentence_builder).
+ * + chrome panels and the 6 interactive blocks (chart_panel, flow_editor,
+ * condition_tree, sentence_builder, form_builder, kanban_board).
  *
- * Total: 19 blocks (12 standard + 7 premium).
+ * Note: `form_panel` is a standard Community block (registered below); only
+ * `form_builder` is premium.
+ *
+ * Total: 19 blocks (13 standard + 6 premium).
  *
  * Full catalog: https://docs.middag.io/blocks
  */
@@ -26,7 +29,7 @@ import {
   SidebarLayout,
   DashboardLayout,
   WizardLayout,
-  // Blocks (the 12 standard barrel exports)
+  // Blocks (the 13 standard barrel exports)
   DenseTableBlock,
   MetricCardBlock,
   EmptyStateBlock,
@@ -39,6 +42,7 @@ import {
   CardGridBlock,
   ActionGridBlock,
   LinkListBlock,
+  FormPanelBlock,
 } from "@middag-io/react";
 import { registerProDefaults } from "@middag-io/react-pro/runtime";
 
@@ -57,7 +61,7 @@ export function registerDefaults(): void {
   registerLayout("dashboard", DashboardLayout);
   registerLayout("wizard", WizardLayout);
 
-  // Blocks — the 12 standard blocks from the barrel
+  // Blocks — the 13 standard blocks from the barrel
   registerBlock("dense_table", DenseTableBlock);
   registerBlock("metric_card", MetricCardBlock);
   registerBlock("empty_state", EmptyStateBlock);
@@ -70,6 +74,9 @@ export function registerDefaults(): void {
   registerBlock("card_grid", CardGridBlock);
   registerBlock("action_grid", ActionGridBlock);
   registerBlock("link_list", LinkListBlock);
+  // form_panel pulls react-hook-form + zod (lazy-loaded); it is a standard
+  // Community block — drop it if this bundle has no forms.
+  registerBlock("form_panel", FormPanelBlock);
 
   // Cell renderers (status, timestamp, link, boolean, etc.)
   registerDefaultCells();
@@ -80,7 +87,7 @@ export function registerDefaults(): void {
   // Icons (navigation, block, entity type icons)
   registerDefaultIcons();
 
-  // Premium runtime — the rich ProductShell + chrome and the 7 interactive
+  // Premium runtime — the rich ProductShell + chrome and the 6 interactive
   // blocks. Ships in @middag-io/react-pro (GitHub Packages, PRO tier).
   registerProDefaults();
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-middag-ui",
-  "version": "0.26.1",
+  "version": "0.27.0",
   "type": "module",
   "description": "Bootstrap a MIDDAG React UI layer in your Moodle or WordPress plugin",
   "scripts": {