create-middag-ui 0.10.3 → 0.11.0

package/cli.js

@@ -37,6 +37,9 @@ import {
   scaffoldFreeApp,
   scaffoldFreeAdapters,
   scaffoldDevShell,
+  scaffoldHostEntry,
+  scaffoldHostViteConfig,
+  scaffoldHostThemeCSS,
 } from "./lib/scaffold.js";
 import { runNpmInstall } from "./lib/install.js";
 import { log, success, heading, blank, info } from "./lib/ui.js";
@@ -116,7 +119,7 @@ if (!dirCreated) {
 
 heading(5, TOTAL_STEPS, "Scaffolding config files");
 
-scaffoldPackageJson(targetDir, host, cwd, registryPath);
+scaffoldPackageJson(targetDir, host, cwd, registryPath, hostKey);
 scaffoldTsconfig(targetDir);
 scaffoldViteConfig(targetDir, host, registryPath);
 scaffoldEslintConfig(targetDir);
@@ -157,6 +160,11 @@ if (isPro) {
   success("FREE: generated DevShell + local Inertia adapters");
 }
 
+// Host-specific production files (entry, vite config, theme CSS)
+scaffoldHostEntry(targetDir, hostKey);
+scaffoldHostViteConfig(targetDir, hostKey, host);
+scaffoldHostThemeCSS(targetDir, hostKey, host);
+
 // ── Step 9: npm install ──────────────────────────────────────────────────
 
 heading(9, TOTAL_STEPS, "Installing dependencies");
@@ -173,6 +181,10 @@ heading(10, TOTAL_STEPS, "Done!");
 const elapsed = ((Date.now() - startTime) / 1000).toFixed(1);
 blank();
 
+// Determine host-specific build script name for display
+const hostBuildScript = hostKey === "wordpress" ? "build:wp" : hostKey === "moodle" ? "build:moodle" : "build:host";
+const hostWatchScript = hostKey === "wordpress" ? "watch:wp" : hostKey === "moodle" ? "watch:moodle" : "watch:host";
+
 if (installOk) {
   log(`MIDDAG React UI ready in ${dirName}/ (${elapsed}s)\n`);
   console.log("  Start developing:");
@@ -194,6 +206,11 @@ console.log("    src/pages/settings.ts        \u2190 advanced: tabbed_panel + fo
 console.log("    src/blocks/hello-block.tsx    \u2190 custom block example (rename me!)");
 console.log("    src/app.tsx                   \u2190 hash-based page router");
 
+blank();
+console.log(`  Production build for ${host.name}:`);
+console.log(`    npm run ${hostBuildScript}            \u2192 build for ${host.name}`);
+console.log(`    npm run ${hostWatchScript}            \u2192 rebuild on change`);
+
 blank();
 console.log(`  Integrate with your ${host.name} plugin:`);
 console.log("    1. Import { ContractPage } from '@middag-io/react'");

package/lib/detect.js

@@ -1,11 +1,19 @@
 /**
  * detect.js — Host detection (Moodle / WordPress / Custom).
  *
- * Checks for marker files in the working directory.
+ * Detection strategy:
+ *   - Moodle plugin: cwd has version.php with $plugin->component
+ *   - WordPress: wp-config.php found in ancestor dirs (plugin/theme is 3+ levels deep)
+ *   - Moodle root: ancestor has version.php WITHOUT $plugin->component
+ *
+ * Walks up to MAX_DEPTH ancestor directories from cwd.
  */
 
-import { existsSync } from "node:fs";
-import { join } from "node:path";
+import { existsSync, readFileSync } from "node:fs";
+import { join, dirname } from "node:path";
+
+/** Max ancestor levels to walk when searching for platform markers. */
+const MAX_DEPTH = 5;
 
 export const HOSTS = {
   moodle: { name: "Moodle", detect: "version.php", port: 5174, headerHeight: 50 },
@@ -14,16 +22,74 @@ export const HOSTS = {
 };
 
 /**
- * Detect host platform by checking for marker files.
+ * Check if a version.php file contains $plugin->component (Moodle plugin marker).
+ *
+ * @param {string} filePath - Path to version.php
+ * @returns {boolean}
+ */
+function isMoodlePluginVersion(filePath) {
+  try {
+    const content = readFileSync(filePath, "utf-8");
+    return /\$plugin\s*->\s*component\s*=/.test(content);
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Check if a version.php file is a Moodle root version.php.
+ * Root has $version but NOT $plugin->component.
+ *
+ * @param {string} filePath - Path to version.php
+ * @returns {boolean}
+ */
+function isMoodleRootVersion(filePath) {
+  try {
+    const content = readFileSync(filePath, "utf-8");
+    if (/\$plugin\s*->\s*component\s*=/.test(content)) return false;
+    // Moodle root has both $version and $release — distinguishes from generic version.php
+    return /\$version\s*=/.test(content) && /\$release\s*=/.test(content);
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Detect host platform by checking cwd and ancestor directories.
+ *
+ * Priority:
+ *   1. Moodle plugin — cwd has version.php with $plugin->component
+ *   2. WordPress — wp-config.php in any ancestor (up to MAX_DEPTH)
+ *   3. Moodle root — version.php without $plugin->component in any ancestor
  *
  * @param {string} cwd - Directory to check
  * @returns {string|null} Host key ('moodle', 'wordpress') or null
  */
 export function detectHost(cwd) {
-  for (const [key, host] of Object.entries(HOSTS)) {
-    if (host.detect && existsSync(join(cwd, host.detect))) {
-      return key;
+  // 1. Moodle plugin — version.php in cwd with $plugin->component
+  const cwdVersion = join(cwd, "version.php");
+  if (existsSync(cwdVersion) && isMoodlePluginVersion(cwdVersion)) {
+    return "moodle";
+  }
+
+  // 2. Walk ancestors for WordPress (wp-config.php) or Moodle root (version.php)
+  let dir = cwd;
+  for (let i = 0; i < MAX_DEPTH; i++) {
+    const parent = dirname(dir);
+    if (parent === dir) break;
+    dir = parent;
+
+    // WordPress — wp-config.php
+    if (existsSync(join(dir, "wp-config.php"))) {
+      return "wordpress";
+    }
+
+    // Moodle root — version.php without $plugin->component
+    const versionFile = join(dir, "version.php");
+    if (existsSync(versionFile) && isMoodleRootVersion(versionFile)) {
+      return "moodle";
     }
   }
+
   return null;
 }

package/lib/scaffold.js

@@ -77,8 +77,9 @@ export function createTargetDir(targetDir) {
  */
 /**
  * @param {string} registryPath - "github" (PRO) or "public" (FREE)
+ * @param {string} [hostKey] - 'wordpress' | 'moodle' | 'custom' (adds host build scripts)
  */
-export function scaffoldPackageJson(targetDir, host, cwd, registryPath) {
+export function scaffoldPackageJson(targetDir, host, cwd, registryPath, hostKey) {
   const filePath = join(targetDir, "package.json");
   if (skipIfExists(filePath, "package.json")) return;
 
@@ -93,19 +94,33 @@ export function scaffoldPackageJson(targetDir, host, cwd, registryPath) {
     deps["sonner"] = "^2.0.0";
   }
 
+  const scripts = {
+    dev: "vite",
+    build: "vite build",
+    typecheck: "tsc --noEmit",
+    lint: "eslint .",
+    "lint:fix": "eslint . --fix",
+    format: 'prettier --write "src/**/*.{ts,tsx,css}"',
+    "format:check": 'prettier --check "src/**/*.{ts,tsx,css}"',
+  };
+
+  // Add host-specific build/watch scripts
+  if (hostKey === "wordpress") {
+    scripts["build:wp"] = "vite build --config vite.config.wordpress.ts";
+    scripts["watch:wp"] = "vite build --config vite.config.wordpress.ts --watch";
+  } else if (hostKey === "moodle") {
+    scripts["build:moodle"] = "vite build --config vite.config.moodle.ts";
+    scripts["watch:moodle"] = "vite build --config vite.config.moodle.ts --watch";
+  } else if (hostKey === "custom") {
+    scripts["build:host"] = "vite build --config vite.config.custom.ts";
+    scripts["watch:host"] = "vite build --config vite.config.custom.ts --watch";
+  }
+
   const pkg = {
     name: `${projectName}-ui`,
     private: true,
     type: "module",
-    scripts: {
-      dev: "vite",
-      build: "vite build",
-      typecheck: "tsc --noEmit",
-      lint: "eslint .",
-      "lint:fix": "eslint . --fix",
-      format: 'prettier --write "src/**/*.{ts,tsx,css}"',
-      "format:check": 'prettier --check "src/**/*.{ts,tsx,css}"',
-    },
+    scripts,
     dependencies: deps,
     devDependencies: {
       "@types/react": "^19.0.0",
@@ -185,6 +200,9 @@ import { resolve } from "path";
 export default defineConfig({
   plugins: [react()],
   server: { port: ${host.port} },
+  optimizeDeps: {
+    include: ["@middag-io/react", "@middag-io/react/mock"],
+  },
   resolve: {
     alias: {
       "@/": resolve(__dirname, "src") + "/",
@@ -1231,6 +1249,301 @@ export function App() {
   }
 }
 
+// ── Host-specific production files ─────────────────────────────────────
+
+/**
+ * Scaffold production entry point: src/entry-{hostKey}.tsx.
+ * Uses real createInertiaApp — no mocks.
+ *
+ * @param {string} targetDir - Absolute path to UI dir
+ * @param {string} hostKey - 'wordpress' | 'moodle' | 'custom'
+ */
+export function scaffoldHostEntry(targetDir, hostKey) {
+  ensureDir(join(targetDir, "src"));
+
+  const filePath = join(targetDir, "src", `entry-${hostKey}.tsx`);
+  const label = `src/entry-${hostKey}.tsx`;
+  if (skipIfExists(filePath, label)) return;
+
+  // Host-specific setup and post-mount code
+  let setupCode = "";
+  let postMountCode = "";
+
+  if (hostKey === "wordpress") {
+    setupCode = `    document.body.classList.add("middag-active");`;
+    postMountCode = `
+    // Relocate WP admin notices into the product shell content area
+    const noticeContainer = document.createElement("div");
+    noticeContainer.className = "middag-wp-notices";
+    const observer = new MutationObserver(() => {
+      const content = document.querySelector(".product-shell__content");
+      if (!content) return;
+      const notices = document.querySelectorAll(
+        "#wpbody-content > .notice, #wpbody-content > .update-nag, #wpbody-content > .updated, #wpbody-content > .error",
+      );
+      if (notices.length > 0) {
+        notices.forEach((n) => noticeContainer.appendChild(n));
+        if (!noticeContainer.parentElement) {
+          content.prepend(noticeContainer);
+        }
+      }
+    });
+    observer.observe(document.body, { childList: true, subtree: true });`;
+  } else if (hostKey === "moodle") {
+    setupCode = `    document.body.classList.add("middag-active");`;
+  }
+
+  const content = `/**
+ * Production entry point for ${hostKey === "wordpress" ? "WordPress" : hostKey === "moodle" ? "Moodle" : "custom host"}.
+ *
+ * Uses real createInertiaApp — the host platform (${hostKey === "wordpress" ? "WP" : hostKey === "moodle" ? "Moodle" : "your backend"})
+ * serves the HTML and Inertia page props. This file is the build target
+ * for \`npm run build:${hostKey === "custom" ? "host" : hostKey}\`.
+ *
+ * NOT used by \`npm run dev\` — that uses src/main.tsx with mock adapters.
+ */
+import { createRoot } from "react-dom/client";
+import { createInertiaApp } from "@inertiajs/react";
+import {
+  registerDefaults,
+  registerShell,
+  ContractPage,
+  HostProductShell,
+  I18nProvider,
+  ProgressProvider,
+  ptBR,
+} from "@middag-io/react";
+import type { PageContract } from "@middag-io/react";
+import "@middag-io/react/style.css";
+import "./theme.css";
+
+registerDefaults();
+registerShell("product", HostProductShell);
+
+createInertiaApp({
+  id: "middag-app",
+  resolve: () => {
+    const Page = ({ contract }: { contract: PageContract }) => (
+      <I18nProvider overrides={ptBR}>
+        <ProgressProvider>
+          <ContractPage contract={contract} />
+        </ProgressProvider>
+      </I18nProvider>
+    );
+    Page.displayName = "ContractPageWrapper";
+    return Page;
+  },
+  setup({ el, App, props }) {
+    el.classList.add("middag-root");
+${setupCode}
+    createRoot(el).render(<App {...props} />);
+${postMountCode}
+  },
+});
+`;
+
+  writeFile(filePath, content, label);
+}
+
+/**
+ * Scaffold host-specific Vite build config: vite.config.{hostKey}.ts.
+ *
+ * @param {string} targetDir - Absolute path to UI dir
+ * @param {string} hostKey - 'wordpress' | 'moodle' | 'custom'
+ * @param {object} host - HOSTS[hostKey] object
+ */
+export function scaffoldHostViteConfig(targetDir, hostKey, host) {
+  const filePath = join(targetDir, `vite.config.${hostKey}.ts`);
+  const label = `vite.config.${hostKey}.ts`;
+  if (skipIfExists(filePath, label)) return;
+
+  let outDir, formats, libName, fileName, extraRollup;
+
+  if (hostKey === "wordpress") {
+    outDir = `resolve(__dirname, "../assets/dist")`;
+    formats = `["iife"]`;
+    libName = `"MiddagUI"`;
+    fileName = `() => "app.js"`;
+    extraRollup = `
+      output: {
+        assetFileNames: (assetInfo) => {
+          if (assetInfo.name?.endsWith(".css")) return "style.css";
+          return assetInfo.name || "[name]-[hash][extname]";
+        },
+      },`;
+  } else if (hostKey === "moodle") {
+    outDir = `resolve(__dirname, "../amd/build")`;
+    formats = `["iife"]`;
+    libName = `"MiddagUI"`;
+    fileName = `() => "app.js"`;
+    extraRollup = `
+      output: {
+        assetFileNames: (assetInfo) => {
+          if (assetInfo.name?.endsWith(".css")) return "style.css";
+          return assetInfo.name || "[name]-[hash][extname]";
+        },
+      },`;
+  } else {
+    outDir = `resolve(__dirname, "../dist")`;
+    formats = `["es"]`;
+    libName = `"MiddagUI"`;
+    fileName = `() => "app.js"`;
+    extraRollup = `
+      output: {
+        assetFileNames: (assetInfo) => {
+          if (assetInfo.name?.endsWith(".css")) return "style.css";
+          return assetInfo.name || "[name]-[hash][extname]";
+        },
+      },`;
+  }
+
+  const content = `/**
+ * Vite build config for ${host.name} — production build target.
+ *
+ * Usage:
+ *   npm run build:${hostKey === "custom" ? "host" : hostKey}     \u2192 single build
+ *   npm run watch:${hostKey === "custom" ? "host" : hostKey}     \u2192 rebuild on change
+ *
+ * This config builds src/entry-${hostKey}.tsx into a${hostKey === "custom" ? "n ESM" : "n IIFE"} bundle.
+ * The dev server (\`npm run dev\`) uses vite.config.ts instead.
+ */
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import { resolve } from "path";
+
+export default defineConfig({
+  plugins: [react()],
+  define: { "process.env.NODE_ENV": JSON.stringify("production") },
+  resolve: { alias: { "@/": resolve(__dirname, "src") + "/" } },
+  build: {
+    outDir: ${outDir},
+    emptyOutDir: true,
+    lib: {
+      entry: resolve(__dirname, "src/entry-${hostKey}.tsx"),
+      formats: ${formats},
+      name: ${libName},
+      fileName: ${fileName},
+    },
+    cssCodeSplit: false,
+    rollupOptions: {${extraRollup}
+    },
+  },
+});
+`;
+
+  writeFile(filePath, content, label);
+}
+
+/**
+ * Append host-specific CSS to src/theme.css.
+ * If theme.css doesn't exist yet, it will be created by scaffoldDemoFiles.
+ *
+ * @param {string} targetDir - Absolute path to UI dir
+ * @param {string} hostKey - 'wordpress' | 'moodle' | 'custom'
+ * @param {object} host - HOSTS[hostKey] object
+ */
+export function scaffoldHostThemeCSS(targetDir, hostKey, host) {
+  const themePath = join(targetDir, "src", "theme.css");
+
+  let hostSection = "";
+
+  if (hostKey === "wordpress") {
+    hostSection = `
+
+/* \u2500\u2500 WordPress admin integration \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+ * Active when MIDDAG mounts inside wp-admin (body.middag-active).
+ */
+
+body.middag-active #wpbody-content {
+  padding-bottom: 0;
+}
+
+body.middag-active [data-slot="sidebar-container"] {
+  left: 160px !important;
+}
+
+body.folded.middag-active [data-slot="sidebar-container"] {
+  left: 36px !important;
+}
+
+@media screen and (max-width: 782px) {
+  body.middag-active [data-slot="sidebar-container"] {
+    left: 0 !important;
+  }
+}
+
+body.middag-active #wpbody-content > .notice,
+body.middag-active #wpbody-content > .update-nag,
+body.middag-active #wpbody-content > .updated,
+body.middag-active #wpbody-content > .error {
+  display: none !important;
+}
+
+.middag-wp-notices {
+  padding: 0.75rem 1.5rem 0;
+}
+
+.middag-wp-notices .notice {
+  display: block !important;
+  margin: 0 0 0.5rem;
+  border-radius: var(--radius, 0.5rem);
+}
+
+body.middag-active #wpfooter {
+  display: none !important;
+}
+
+body.middag-active {
+  --host-header-height: 32px;
+}
+
+@media screen and (max-width: 782px) {
+  body.middag-active {
+    --host-header-height: 46px;
+  }
+}`;
+  } else if (hostKey === "moodle") {
+    hostSection = `
+
+/* \u2500\u2500 Moodle Boost integration \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+ * Active when MIDDAG mounts inside Moodle admin (body.middag-active).
+ */
+
+body.middag-active {
+  --host-header-height: 50px;
+}
+
+body.middag-active [data-slot="sidebar-container"] {
+  left: 0 !important;
+}`;
+  } else {
+    hostSection = `
+
+/* \u2500\u2500 Host integration \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+ * Set --host-header-height and --host-sidebar-width as needed.
+ */
+
+:root {
+  --host-header-height: 0px;
+  --host-sidebar-width: 0px;
+}`;
+  }
+
+  // If theme.css exists, append; otherwise create with host section only
+  if (existsSync(themePath)) {
+    try {
+      const existing = readFileSync(themePath, "utf-8");
+      writeFileSync(themePath, existing + hostSection + "\n");
+      success(`Appended ${host.name} integration CSS to src/theme.css`);
+    } catch (err) {
+      error(`Failed to append to src/theme.css: ${err.message}`);
+    }
+  } else {
+    ensureDir(join(targetDir, "src"));
+    writeFile(themePath, hostSection.trimStart() + "\n", "src/theme.css (host integration)");
+  }
+}
+
 // ── LEGACY (kept for backward compat, delegates to FREE) ────────────────
 
 /** @deprecated Use scaffoldFreeApp + scaffoldFreeAdapters instead */

package/package.json

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