@navette-js/cli 1.0.0-beta.3 → 1.0.0-beta.5

package/README.md

@@ -1,6 +1,6 @@
 # @navette-js/cli
 
-Command-line tools for Navette projects: migrations, users, and generators for resources, pages and widgets (npx navette).
+Command-line tools for Navette projects: migrations, users, and generators for resources, pages, widgets and form fields (npx navette).
 
 Part of [Navette](https://github.com/NavetteJS/navette), admin panels for Node.js. Start a project with `npm create navette@latest`, or install the framework with `npm install @navette-js/panels`.
 

package/lib/cli.js

@@ -7,14 +7,15 @@ var __rewriteRelativeImportExtension = (this && this.__rewriteRelativeImportExte
     }
     return path;
 };
-// Project CLI (`npx navette …`): migrations, users, and generators for resources, pages and widgets.
+// Project CLI (`npx navette …`): migrations, users, and generators for resources, pages, widgets and form fields.
 // Run it at the root of a project created with `npm create navette`.
 import { existsSync, mkdirSync, readdirSync, writeFileSync } from 'node:fs';
 import { randomBytes } from 'node:crypto';
 import { join, relative } from 'node:path';
 import { createInterface } from 'node:readline/promises';
 import { pathToFileURL } from 'node:url';
-import { generateResource, generateMigration, generatePage, generateWidget, studly, tableName } from "./generators.js";
+import { readSecret } from "./secret.js";
+import { generateColumn, generateComponent, generateEntry, generateField, generateResource, generateMigration, generatePage, generateWidget, studly, tableName } from "./generators.js";
 const cwd = process.cwd();
 if (existsSync(join(cwd, '.env')))
     process.loadEnvFile(join(cwd, '.env'));
@@ -46,6 +47,24 @@ async function ask(question, fallback = '') {
     rl.close();
     return answer || fallback;
 }
+async function askSecret(question) {
+    return process.stdin.isTTY ? readSecret(`  ${question}: `) : '';
+}
+/** A password typed twice; empty: `''`, one is generated. */
+async function askPassword() {
+    for (;;) {
+        const password = await askSecret('Password (at least 8 characters; leave empty to generate one)');
+        if (!password)
+            return '';
+        if (password.length < 8) {
+            say('  ✖ At least 8 characters: try again.');
+            continue;
+        }
+        if ((await askSecret('Confirm the password')) === password)
+            return password;
+        say('  ✖ The passwords do not match: try again.');
+    }
+}
 /** Never overwrites an existing file unless `--force` is given. */
 function write(file, content) {
     if (existsSync(file) && !flags.force)
@@ -79,7 +98,7 @@ const commands = {
         },
     },
     'make:user': {
-        usage: 'navette make:user [--admin] [--name=] [--email=] [--password=]   Create a user (role admin with --admin)',
+        usage: 'navette make:user [--admin] [--name=] [--email=] [--password=]   Create a user (role admin with --admin; the password may also come from NAVETTE_PASSWORD)',
         async run() {
             const { db, migrate } = await project();
             await migrate();
@@ -87,7 +106,8 @@ const commands = {
             const email = flag('email') ?? (await ask('Email address', 'admin@example.com'));
             if (!/^[^\s@]+@[^\s@]+$/.test(email))
                 fail(`Invalid email address: ${email}`);
-            let password = flag('password') ?? (await ask('Password (leave empty to generate one)'));
+            // `--password` is visible to the other users of the machine (process list): prefer NAVETTE_PASSWORD, or typing it.
+            let password = flag('password') ?? process.env.NAVETTE_PASSWORD ?? (await askPassword());
             const generated = !password;
             if (generated)
                 password = randomBytes(12).toString('base64url');
@@ -99,7 +119,9 @@ const commands = {
             const user = await knexAuthProvider((table) => db(table)).create({ name, email, password });
             const now = new Date().toISOString().slice(0, 19).replace('T', ' ');
             await db('users').where('id', user.id).update({ role: flags.admin ? 'admin' : 'user', email_verified_at: now });
-            say(`  ✔ ${flags.admin ? 'Admin' : 'User'} ${email} created${generated ? ` — password: ${password}` : ''}`);
+            say(`  ✔ ${flags.admin ? 'Admin' : 'User'} ${email} created`);
+            if (generated)
+                say(`    Password: ${password}   (generated: copy it now, it is not shown again)`);
             await db.destroy();
         },
     },
@@ -132,6 +154,38 @@ const commands = {
             write(join(cwd, 'src', panelOf(), 'pages', `${name}.ts`), generatePage(name));
         },
     },
+    'make:field': {
+        usage: 'navette make:field <Name>                        Create a custom form field (src/fields)',
+        async run() {
+            const name = studly(positional[0] ?? fail('Give the field a name, e.g. RatingInput'));
+            write(join(cwd, 'src', 'fields', `${name}.ts`), generateField(name));
+        },
+    },
+    'make:entry': {
+        usage: 'navette make:entry <Name>                        Create a custom infolist entry (src/entries)',
+        async run() {
+            const name = studly(positional[0] ?? fail('Give the entry a name, e.g. AudioPlayerEntry'));
+            write(join(cwd, 'src', 'entries', `${name}.ts`), generateEntry(name));
+        },
+    },
+    'make:column': {
+        usage: 'navette make:column <Name>                       Create a custom table column (src/columns)',
+        async run() {
+            const name = studly(positional[0] ?? fail('Give the column a name, e.g. ProgressColumn'));
+            write(join(cwd, 'src', 'columns', `${name}.ts`), generateColumn(name));
+        },
+    },
+    'make:component': {
+        usage: 'navette make:component <name>                    Create a view component, used as <x-name> (src/components)',
+        async run() {
+            const raw = positional[0] ?? fail('Give the component a name, e.g. stat-card or forms.hint');
+            const name = raw.split('.').map((part) => part.replace(/([a-z0-9])([A-Z])/g, '$1-$2').replace(/[^A-Za-z0-9-]+/g, '-').toLowerCase().replace(/^-|-$/g, '')).filter(Boolean).join('.');
+            if (!name)
+                fail(`Invalid component name: ${raw}`);
+            write(join(cwd, 'src', 'components', ...name.split('.')) + '.ejs', generateComponent(name));
+            say(`\n  Use it in any view as <x-${name}>…</x-${name}>.`);
+        },
+    },
     'make:widget': {
         usage: 'navette make:widget <Name> [--panel=admin] [--type=stats|chart|table]   Create a dashboard widget',
         async run() {

package/lib/generators.d.ts

@@ -15,3 +15,9 @@ export declare function generateResource(model: string, table: string, columns:
 export declare function generateMigration(name: string): string;
 export declare function generatePage(name: string): string;
 export declare function generateWidget(name: string, type: 'stats' | 'chart' | 'table'): string;
+/** A custom form field: an Alpine.js control entangled with the field's state, validated on the server. */
+export declare function generateField(name: string): string;
+export declare function generateEntry(name: string): string;
+export declare function generateColumn(name: string): string;
+/** Component view: `<x-name>` in any view, after `views.components(directory)` (done by the generated server). */
+export declare function generateComponent(name: string): string;

package/lib/generators.js

@@ -175,3 +175,92 @@ export class ${name} extends StatsOverviewWidget {
 }
 `;
 }
+/** A custom form field: an Alpine.js control entangled with the field's state, validated on the server. */
+export function generateField(name) {
+    return `import { Field, type Rule } from '@navette-js/forms';
+import { configured, e, js } from '@navette-js/support';
+
+/**
+ * ${headline(snake(name))} field. Use it like any field: \`${name}.make('name').required()\`.
+ * The state comes from the browser: check its shape in getValidationRules() before it is saved.
+ */
+export class ${name} extends Field {
+    static make(name: string): ${name} {
+        return configured(new ${name}(name));
+    }
+
+    async getValidationRules(): Promise<Rule[]> {
+        return [
+            ...(await super.getValidationRules()),
+            { name: 'string', passes: (value) => typeof value === 'string', message: (attribute) => \`The \${attribute} field must be a string.\` },
+        ];
+    }
+
+    async toHtml(): Promise<string> {
+        const id = this.getId();
+        const disabled = await this.isDisabled();
+
+        return this.wrap(
+            \`<div class="fi-input-wrp\${this.hasError() ? ' fi-invalid' : ''}" x-data="{ state: $wire.$entangle(\${e(js(this.getStatePath()))}) }">
+                <div class="fi-input-wrp-content-ctn">
+                    <input id="\${e(id)}" type="text" class="fi-input" x-model="state"\${disabled ? ' disabled' : ''}\${this.hasError() ? \` aria-invalid="true" aria-describedby="\${e(id)}-error"\` : ''} />
+                </div>
+            </div>\`,
+        );
+    }
+}
+`;
+}
+export function generateEntry(name) {
+    return `import { ViewEntry } from '@navette-js/infolists';
+import { configured, e } from '@navette-js/support';
+
+/** ${headline(snake(name))} infolist entry: \`${name}.make('field')\`. */
+export class ${name} extends ViewEntry {
+    static make(name: string): ${name} {
+        return configured(new ${name}(name));
+    }
+
+    async toHtml(): Promise<string> {
+        const state = await this.getState();
+
+        // \`wrap()\` adds the label and the entry wrapper. Escape every value you print with \`e()\`.
+        return this.wrap(\`<span>\${e(state ?? '')}</span>\`);
+    }
+}
+`;
+}
+export function generateColumn(name) {
+    return `import { configured, e } from '@navette-js/support';
+import { Column } from '@navette-js/tables';
+
+/** ${headline(snake(name))} table column: \`${name}.make('field')\`. */
+export class ${name}<R = any> extends Column<R> {
+    static make<R = any>(name: string): ${name}<R> {
+        return configured(new ${name}<R>(name));
+    }
+
+    // Returns the HTML of the cell. Escape every value you print with \`e()\`.
+    async toHtml(record: R): Promise<string> {
+        const state = await this.getState(record);
+
+        return \`<div class="fi-ta-text"><span>\${e(state ?? '')}</span></div>\`;
+    }
+}
+`;
+}
+/** Component view: `<x-name>` in any view, after `views.components(directory)` (done by the generated server). */
+export function generateComponent(name) {
+    return `<%#
+    <x-${name} title="…">content</x-${name}>
+    Variables: the tag's props (camelCased), \`slot\` (the content, already rendered), \`slots\` (named slots: <x-slot name="footer">),
+    \`attributes\` (class, id, data-*, x-*, wire:* attributes given on the tag).
+    Output tags: the escaping one (percent sign and equals) for values, the raw one (percent sign and dash) only for slots and trusted markup.
+%>
+<div <%- attributes.class(['${name}']) %>>
+    <% if (locals.title) { %><h3><%= title %></h3><% } %>
+    <%- slot %>
+    <% if (slots.footer) { %><footer><%- slots.footer %></footer><% } %>
+</div>
+`;
+}

package/lib/secret.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Reads a hidden answer in raw mode: each typed character shows as a dot, so the password never appears on screen.
+ * Backspace erases, Enter validates, Ctrl+C quits; escape sequences (arrow keys) are ignored.
+ */
+export declare function readSecret(label: string, input?: NodeJS.ReadStream, output?: NodeJS.WriteStream): Promise<string>;

package/lib/secret.js

@@ -0,0 +1,40 @@
+// Hidden terminal input, for passwords.
+/**
+ * Reads a hidden answer in raw mode: each typed character shows as a dot, so the password never appears on screen.
+ * Backspace erases, Enter validates, Ctrl+C quits; escape sequences (arrow keys) are ignored.
+ */
+export function readSecret(label, input = process.stdin, output = process.stdout) {
+    output.write(label);
+    const wasRaw = input.isRaw === true;
+    input.setRawMode?.(true);
+    input.setEncoding('utf8');
+    input.resume();
+    return new Promise((resolve) => {
+        let value = '';
+        const onData = (chunk) => {
+            if (chunk.startsWith('\x1b'))
+                return;
+            for (const character of chunk) {
+                if (character === '\r' || character === '\n') {
+                    input.off('data', onData);
+                    input.setRawMode?.(wasRaw);
+                    input.pause();
+                    output.write('\n');
+                    resolve(value);
+                    return;
+                }
+                if (character === '\u0003') {
+                    input.setRawMode?.(wasRaw);
+                    output.write('\n');
+                    process.exit(130);
+                }
+                if (character === '\u007f' || character === '\b')
+                    value = value.slice(0, -1);
+                else if (character >= ' ')
+                    value += character;
+            }
+            output.write(`\r\x1b[K${label}${'•'.repeat(value.length)}`);
+        };
+        input.on('data', onData);
+    });
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@navette-js/cli",
-  "version": "1.0.0-beta.3",
-  "description": "Command-line tools for Navette projects: migrations, users, and generators for resources, pages and widgets (npx navette).",
+  "version": "1.0.0-beta.5",
+  "description": "Command-line tools for Navette projects: migrations, users, and generators for resources, pages, widgets and form fields (npx navette).",
   "license": "MIT",
   "type": "module",
   "exports": {
@@ -42,8 +42,8 @@
     "scaffold"
   ],
   "dependencies": {
-    "@navette-js/panels": "1.0.0-beta.3",
-    "@navette-js/database": "1.0.0-beta.3"
+    "@navette-js/panels": "1.0.0-beta.5",
+    "@navette-js/database": "1.0.0-beta.5"
   },
   "publishConfig": {
     "access": "public",