@mostajs/init

CLI tool and visual designers for the @mostajs ecosystem. Discovers installed modules, generates configuration reports, scaffolds API routes, DAL services, CRUD pages, and provides graphical tools for database schema design and page layout.

Installation

npm install @mostajs/init
# or use directly
npx @mostajs/init

CLI Usage

Report (default)

Discover all @mostajs modules and show a configuration report:

npx @mostajs/init           # Markdown report
npx @mostajs/init --json    # JSON report

Output includes:

• Installed modules with capabilities (routes, schemas, repositories, components)
• Available modules on npm (not yet installed)
• Suggested actions (routes to create, schemas to register, DAL entries)

Install all modules

npx @mostajs/init --install

Generate code

Generates src/dal/registry.ts, src/dal/service.ts, and API route stubs:

npx @mostajs/init --generate

Reverse engineer database

Introspects your database via @mostajs/orm and generates EntitySchema definitions:

npx @mostajs/init --reverse-engineer

Reads .env.local for DB_DIALECT and SGBD_URI, connects via @mostajs/orm, and exports schema code to generated-schemas.ts.

Generate CRUD pages

Generates a complete CRUD (list page + form page + API routes) for any entity:

npx @mostajs/init --crud Client
npx @mostajs/init --crud Activity

This creates 4 files:

• src/app/dashboard/<entity>/page.tsx — List page with table, search, pagination
• src/app/dashboard/<entity>/[id]/page.tsx — Create/Edit form
• src/app/api/<entity>/route.ts — GET (list) + POST (create)
• src/app/api/<entity>/[id]/route.ts — GET (detail) + PUT (update) + DELETE

The CRUD generator automatically detects the EntitySchema from installed @mostajs modules and uses:

• @mostajs/ui components (Card, Table, Button, Input, Select, Badge)
• @mostajs/orm repository pattern
• App Router (Next.js 14+)
• Permission-based auth checks

Combine options

npx @mostajs/init --install --generate
npx @mostajs/init --reverse-engineer --crud Client

Visual Designers (React Components)

Schema Designer

Graphical tool to design @mostajs/orm EntitySchema definitions. Drag entities, add fields/relations, export TypeScript code.

import SchemaDesigner from '@mostajs/init/components/SchemaDesigner'

export default function SchemaDesignerPage() {
  return (
    <div style={{ height: '100vh' }}>
      <SchemaDesigner
        initial={[]}
        onChange={(entities) => console.log('Schema changed:', entities)}
        onExport={(code) => {
          console.log('Generated code:', code)
          // code is a complete TypeScript file with EntitySchema definitions
        }}
      />
    </div>
  )
}

Features:

• Visual entity cards with fields and relations
• Drag to reposition entities
• Relation lines drawn between related entities
• Property panel for editing fields (type, required, unique, enum, default)
• Property panel for editing relations (target, type, nullable)
• Export button generates @mostajs/orm EntitySchema TypeScript code
• Auto-generates collection name from entity name

Props:

| Prop | Type | Description | |------|------|-------------| | initial | EntityDef[] | Initial entities to load | | onChange | (entities) => void | Called when schema changes | | onExport | (code: string) => void | Called when user clicks Export |

Page Designer

Visual page layout builder. Drag components from palette, configure properties, export Next.js page code.

import PageDesigner from '@mostajs/init/components/PageDesigner'

export default function PageDesignerPage() {
  return (
    <div style={{ height: '100vh' }}>
      <PageDesigner
        entities={['Client', 'Activity', 'Ticket']}
        onChange={(page) => console.log('Page changed:', page)}
        onExport={(code) => {
          console.log('Generated code:', code)
        }}
      />
    </div>
  )
}

Component palette: Heading, Text, Card, Data Table, Form, Button, Badge, Stat Card, Tabs, Grid, Separator, Custom

Features:

• Three layout modes: single column, two columns, sidebar + content
• Component palette with click-to-add
• Property panel for each component
• Reorder components (up/down)
• Entity selector for Table and Form components
• Export generates a complete Next.js page with @mostajs/ui imports

Props:

| Prop | Type | Description | |------|------|-------------| | entities | string[] | Available entity names (for Table/Form selectors) | | onChange | (page) => void | Called when page config changes | | onExport | (code: string) => void | Called when user clicks Export |

Integration dans le projet hote

Ce module exporte des composants React (SchemaDesigner, PageDesigner) et une contribution menu, mais ne cree pas de pages Next.js. Le projet hote doit creer les pages correspondant aux routes declarees dans le menu (initMenuContribution).

1. Pages a creer

Creez les fichiers suivants dans votre projet Next.js :

src/app/dashboard/dev/schema-designer/page.tsx

'use client'
import SchemaDesigner from '@mostajs/init/components/SchemaDesigner'

export default function SchemaDesignerPage() {
  return (
    <div className="space-y-6">
      <h1 className="text-2xl font-bold">Schema Designer</h1>
      <div style={{ height: 'calc(100vh - 200px)' }}>
        <SchemaDesigner
          initial={[]}
          onChange={(entities) => console.log('Schema:', entities)}
          onExport={(code) => navigator.clipboard.writeText(code)}
        />
      </div>
    </div>
  )
}

src/app/dashboard/dev/page-designer/page.tsx

'use client'
import PageDesigner from '@mostajs/init/components/PageDesigner'

export default function PageDesignerPage() {
  return (
    <div className="space-y-6">
      <h1 className="text-2xl font-bold">Page Designer</h1>
      <div style={{ height: 'calc(100vh - 200px)' }}>
        <PageDesigner
          entities={[]}
          onChange={(page) => console.log('Page:', page)}
          onExport={(code) => navigator.clipboard.writeText(code)}
        />
      </div>
    </div>
  )
}

2. Menu dynamique

Le module exporte initMenuContribution qui declare les 2 routes ci-dessus sous le groupe "Developpement". Importez-le dans votre sidebar via le deep import :

import { initMenuContribution } from '@mostajs/init/lib/menu'

Passez-le a buildMenuConfig() de @mostajs/menu avec les autres contributions de modules.

3. Pourquoi le projet hote doit creer les pages ?

Les modules @mostajs/* sont des bibliotheques npm (composants, hooks, utilitaires), pas des applications. Next.js App Router exige que les fichiers page.tsx soient dans le dossier src/app/ du projet. Un package npm ne peut pas injecter de pages dans le routeur — c'est donc au projet hote de creer ces fichiers wrapper, meme s'ils ne font qu'importer et afficher un composant du module.

Reverse Engineering API

Use programmatically for database introspection:

MongoDB

import { reverseEngineerMongo } from '@mostajs/init'
import { MongoClient } from 'mongodb'

const client = new MongoClient('mongodb://localhost:27017')
await client.connect()
const db = client.db('mydb')

const { entities, code, warnings } = await reverseEngineerMongo(db)
console.log(code)  // Complete EntitySchema TypeScript file

SQL (Postgres, MySQL, etc.)

import { reverseEngineerSQL } from '@mostajs/init'

const { entities, code, warnings } = await reverseEngineerSQL(
  async (sql) => pool.query(sql).then(r => r.rows),
  'public'  // schema name
)
console.log(code)

From installed modules

import { reverseEngineerFromModules } from '@mostajs/init'

const entities = reverseEngineerFromModules(process.cwd())
// Returns IntrospectedEntity[] from all installed @mostajs modules

CRUD Generator API

import { entityToCrudConfig, generateCrud } from '@mostajs/init'
import { ActivitySchema } from '@mostajs/ticketing'

const config = entityToCrudConfig(ActivitySchema)
const crud = generateCrud(config)

// crud.listPage.code   — List page component
// crud.formPage.code   — Form page component
// crud.apiRoute.code   — API GET/POST route
// crud.apiIdRoute.code — API GET/PUT/DELETE route

License

MIT