create-middag-ui

Bootstrap a MIDDAG React UI layer in your Moodle or WordPress plugin.

Usage

# Community (no auth needed)
npx create-middag-ui

# PRO (source maps, mock SPA, full exports)
npx @middag-io/create-middag-ui

Or specify a custom directory:

npx create-middag-ui mydir

Non-interactive mode

Skip all prompts with --yes (uses defaults: ui/, public registry):

npx create-middag-ui --yes

# PRO path (GitHub Packages) without prompts:
npx create-middag-ui --yes --github

Host platform and Moodle component are still auto-detected. Only interactive prompts are skipped.

Run from your plugin project root. The wizard:

1. Auto-detects your host — finds version.php (Moodle) or wp-config.php (WordPress)
2. Asks for target directory — default ui/, or pass as CLI argument
3. Configures registry — GitHub Packages (with source maps) or npm public (no auth needed)
4. Scaffolds everything — config files, demo components, mock environment
5. Installs dependencies — runs npm install automatically with progress feedback

Then start developing:

cd ui
npm run dev

Your mock opens at http://localhost:5174 (Moodle), 5175 (WordPress), or 5176 (Custom).

What it creates

ui/
  package.json              # Dependencies and scripts
  tsconfig.json             # TypeScript config with path aliases
  vite.config.ts            # Vite dev server + build config
  index.html                # Dev server entry point
  src/
    main.tsx                # React entry with registerDefaults() + ContractPage
    app.tsx                 # App shell wiring
    app/                    # Page resolver + block/shell registration
    blocks/
      hello-block.tsx       # Custom block example (rename me!)
    components/
      greeting.tsx          # Standalone component example (rename me!)
    pages/                  # Example PageContracts (login, tasks, detail, form)
    shells/                 # AdminShell / DevShell examples
    contracts.ts            # PageContract type re-export
    tailwind.css, theme.css # Styling entries
  mock/
    adapters/               # Self-contained Inertia mock adapters (dev only)

Host-specific extras (e.g. plugins/vite-plugin-moodle-amd.ts for Moodle AMD builds) are added based on the detected host.

Community vs PRO

The scaffold comes in two channels:

Community (default, no auth)

Choose "No" when asked about GitHub access. The project scaffolds against the open-source engine @middag-io/react, installed from the public npm registry with zero configuration.

PRO (adds @middag-io/react-pro + dev harness)

Choose "Yes" when asked about GitHub access. The scaffold additionally wires the premium runtime @middag-io/react-pro and the @middag-io/react-demo dev harness from GitHub Packages. The wizard will:

1. Ask for your GitHub Personal Access Token
2. Validate the token against GitHub Packages
3. Save the registry + token to ~/.npmrc (global, not project-local)

Create a token at github.com/settings/tokens with the read:packages scope.

After setup

Once @middag-io/react is installed, more commands become available from inside your UI directory:

npx @middag-io/react doctor        # Validate project setup
npx @middag-io/react dev            # Start mock dev server
npx @middag-io/react add-block <t>  # Scaffold a new block type
npx @middag-io/react upgrade        # Check for updates

Documentation

• Live Demo — 24 screens showing all block types
• Full Documentation — Getting started, host guides, API reference
• GitHub — MIDDAG React UI engine source and issue tracker

License

MIT