noxt-cli 0.1.6

package/README.md

@@ -0,0 +1,42 @@
+# noxt-cli
+
+A command-line interface for [Noxt](https://npmjs.com/package/noxt-server).
+
+## Usage
+
+```sh
+npx noxt-cli 
+npx noxt-cli <recipe>
+```
+
+## Defaults
+If you just run `npx noxt-cli`, it will try to find a `noxt.config.yaml` file in your current directory. If it finds one, it will use it. Otherwise, it will use the default config and try to guess some defaults based on common project structure. 
+
+It will assume the following:
+* `views = "./views"` directory for JSX files, if it exists
+* `static = "./public"` directory for static files, if it exists
+* `port = 3000` port number
+* `hostname = "localhost"` hostname
+* `recipe = "app/main"` if `./units/main.js` exists, it will be used as the recipe
+* `recipe = "noxt-dev"` fallback recipe
+
+## Configuration
+
+You can override these defaults by creating a `noxt.config.yaml` file in your current directory. It should look like this:
+
+```yaml
+views: "./views"
+static: "./public"
+port: 3000
+hostname: "localhost"
+recipe: "app/main"
+```
+
+## Recipes and other units
+
+Noxt uses [MLM](https://npmjs.com/package/mlm-core) to define recipes and other units that make up the noxt stack. You can extend the [noxt](https://npmjs.com/package/noxt-server) stack by creating your own units in your `./units/` directory. 
+
+Any package names beginning with `app/` will be loaded from your `./units/` directory. 
+
+## License
+LGPL-3.0-or-later

package/bin/cmd_create.js

@@ -0,0 +1,56 @@
+import { fileURLToPath } from 'url';
+import { dirname, join, basename, resolve } from 'path';
+import {
+  readdir,
+  readFile,
+  writeFile,
+  copyFile,
+  mkdir,
+} from 'fs/promises';
+import { spawnSync } from 'child_process';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+async function copyDir(src, dest) {
+  await mkdir(dest, { recursive: true });
+  const entries = await readdir(src, { withFileTypes: true });
+  for (const ent of entries) {
+    const s = join(src, ent.name);
+    const d = join(dest, ent.name);
+    if (ent.isDirectory()) await copyDir(s, d);
+    else await copyFile(s, d);
+  }
+}
+
+export async function execute([dir = '.']) {
+  const root = resolve(dir);
+  const files = await readdir(root).catch(() => []);
+  if (files.length) {
+    console.error('Directory is not empty, aborting.');
+    process.exit(1);
+  }
+
+  const name = basename(root);
+  const templateDir = join(__dirname, '..', 'starter');
+  await copyDir(templateDir, root);
+
+  // read the template package.json
+  const pkgPath = join(root, 'package.json');
+  const pkg = JSON.parse(await readFile(pkgPath, 'utf8'));
+
+  // overwrite only the dynamic bits
+  pkg.name = name;
+  pkg.description = name + ': a noxt CLI starter';
+  pkg.private = true;
+  pkg.version ||= '0.0.0';
+  pkg.scripts ||= {};
+
+  // ensure noxt-cli is present
+  pkg.devDependencies ||= {};
+  pkg.devDependencies['noxt-cli'] = 'latest';
+
+  await writeFile(pkgPath, JSON.stringify(pkg, null, 2) + '\n');
+
+  // install prod + peer deps
+  spawnSync('npm', ['install'], { cwd: root, stdio: 'inherit' });
+}

package/bin/cmd_start.js

@@ -0,0 +1,65 @@
+#!/usr/bin/env node
+import fs from 'fs';
+import path from 'path';
+import yaml from 'js-yaml';
+import { startServer } from 'noxt-server';
+//import 'console-with-location';
+
+const __dirname = path.dirname(new URL(import.meta.url).pathname);
+
+export function execute([recipe], options) {
+  // read deafault config
+  let config = yaml.load(fs.readFileSync(path.resolve(__dirname, '../default.config.yaml'), 'utf8'));
+
+  // read local config if exists
+  const configPath = 'noxt.config.yaml';
+  const configFullPath = path.resolve(process.cwd(), configPath);
+
+  if (fs.existsSync(configFullPath)) {
+    console.log(`Using config file: ${configFullPath}`);
+    try {
+      const localConfig = yaml.load(fs.readFileSync(configFullPath, 'utf8'));
+      Object.assign(config, localConfig);
+    } catch (e) {
+      die(`Error loading config file: ${e.message}`);
+    }
+    recipe ??= config.recipe;
+  } else {
+    throw new Error(`Config file not found: ${configPath}`);
+  }
+  
+  // override config with command line options
+  for (const key in options) {
+    if (!(key in config)) {
+      warn(`Unknown config option: ${key}`);
+    }
+    config[key] = options[key] ?? config[key];
+  }
+
+  startServer({ config, recipe }).catch(err => {
+    console.error(`[noxt-server] Error starting server: ${err.message}`);
+    console.log(`[noxt-server]`, err.stack);
+    process.exit(1);
+  });
+
+}
+function cmd_create() {
+  // copy the starter pack from ./starter, but only if it is empty
+  const starterPath = targetPath.resolve(__dirname, '../starter');
+  const pathArg = args.shift();
+  const targetPath = pathArg ? targetPath.resolve(process.cwd(), pathArg) : process.cwd();
+  // if not exists, create recursively
+  if (!fs.existsSync(targetPath)) {
+    fs.mkdirSync(targetPath, { recursive: true });
+  } else {
+    // if not empty, except for node_modules, refuse to overwrite
+    const files = fs.readdirSync(targetPath).filter(file => file !== 'node_modules');
+    if (files.length) {
+      die(`Directory ${targetPath} is not empty. Refusing to overwrite it.`);
+    }
+  }
+  // recursively copy starterPath to targetPath
+  fs.cpSync(starterPath, targetPath, { recursive: true });
+  console.log(`Created noxt starter pack in ${targetPath}\ncd ${targetPath}\nnpx noxt-cli`);
+  process.exit(0);
+}

package/bin/noxt-cli

@@ -0,0 +1,25 @@
+#!/usr/bin/env node
+import minimist from 'minimist';
+//import 'console-with-location';
+
+import  * as cmd_start  from './cmd_start.js';
+import  * as cmd_create  from './cmd_create.js';
+
+const commands = {
+  start: cmd_start,
+  create: cmd_create,
+};
+
+const { _: args, ...options } = minimist(process.argv.slice(2), {
+  string: ['views'],   // treat as strings
+  unknown: (arg) => true
+});
+
+const cmd = args.shift() ?? 'start';
+
+if (cmd in commands) {
+  commands[cmd].execute(args, options);
+} else {
+  console.log(`Usage: noxt-cli <${Object.keys(commands).join('|')}> [options]`);
+  process.exit(1);
+}

package/default.config.yaml

@@ -0,0 +1,7 @@
+port: 3000
+ssl: false
+host: localhost
+logLevel: info
+views: []
+static: []
+context: []

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "noxt-cli",
+  "version": "0.1.6",
+  "description": "CLI starter for noxt-server",
+  "type": "module",
+  "bin": {
+    "noxt-cli": "./bin/noxt-cli"
+  },
+  "repository": "https://github.com/zocky/noxt-cli",
+  "scripts": {
+    "test": "echo \"No tests yet\" && exit 0"
+  },
+  "keywords": [
+    "express",
+    "jsx",
+    "noxt",
+    "server",
+    "ssr",
+    "async",
+    "cli"
+  ],
+  "author": "Zoran Obradović [https://github.com/zocky]",
+  "license": "GPL-3.0-or-later",
+  "dependencies": {
+    "js-yaml": "^4.1.0",
+    "minimist": "^1.2.8",
+    "noxt-server": "^0.1.6"
+  },
+  "devDependencies": {
+    "noxt-server": "../noxt-server"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/starter/noxt.config.yaml

@@ -0,0 +1,9 @@
+recipe: app/main
+port: 3000
+ssl: false
+host: localhost
+logLevel: info
+views: 
+  - views
+static: 
+  public

package/starter/package.json

@@ -0,0 +1,14 @@
+{
+  "type": "module",
+  "name": "starter",
+  "version": "1.0.0",
+  "description": "",
+  "scripts": {
+    "start": "noxt-cli start app/main",
+    "dev": "nodemon noxt-cli start app/main.js",
+    "prod": "NODE_ENV=production noxt-cli start app/main"
+  },
+  "devDependencies": {
+    "nodemon": "^3.0.1"
+  }
+}

package/starter/public/css/main.css

@@ -0,0 +1,31 @@
+* {
+  box-sizing: border-box;
+}
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+}
+article {
+  max-width:1000px;
+  margin: 0 auto;
+  padding: 0 10px;
+  display: grid;
+  grid-template-columns: 1fr max(25%, 200px);
+  grid-template-areas: "header header" "main aside";
+  gap: 20px;
+
+  main {
+    grid-area:main
+  }
+
+  header {
+    grid-area:header
+  }
+
+  aside {
+    grid-area:aside
+  }
+}
+
+

package/starter/public/js/main.js

@@ -0,0 +1 @@
+console.log('Hello from noxt')

package/starter/views/layouts/Layout.jsx

@@ -0,0 +1,52 @@
+export default function Layout({ body }, { slot, Header }) {
+
+  const scripts = slot('script').map(makeScriptTag).join('\n');
+  const styles = slot('style').map(makeStyleTag).join('\n');
+  const inlineJS = slot('js').map(c => `<script>${c}</script>`).join('\n');
+  const inlineCSS = slot('css').map(c => `<style>${c}</style>`).join('\n');
+  const title=slot('title').join (' | ');
+
+  return (<>
+    {{ html: `<!DOCTYPE html>` }}
+    <html>
+      <head>
+        <meta charset="utf-8" />
+        <title>{title}</title>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link href="https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wdth,wght,GRAD@8..144,25..151,100..1000,-200..150&display=swap" rel="stylesheet" />
+        <link rel="stylesheet" href="/css/style.css" />
+        <link rel="icon" href="/img/favicon.png" />
+        {{ html: styles }}
+        {{ html: scripts }}
+        <script type="module" src="/js/main.js"></script>
+        {{ html: inlineCSS }}
+      </head>
+      <body>
+        <Header title={title}/>
+        <div class="skin layout">
+          {{ html: body }}
+        </div>
+        {{ html: inlineJS }}
+      </body>
+    </html>
+  </>);
+}
+
+function makeScriptTag(entry) {
+  if (typeof entry === 'string') return `<script type="module" src="${entry}"></script>`;
+  if (entry && typeof entry === 'object') {
+    const attrs = Object.entries(entry).map(([k, v]) => ` ${k}="${v}"`).join('');
+    return `<script${attrs}></script>`;
+  }
+  return '';
+}
+
+function makeStyleTag(entry) {
+  if (typeof entry === 'string') return `<link rel="stylesheet" href="${entry}">`;
+  if (entry && typeof entry === 'object') {
+    const attrs = Object.entries(entry).map(([k, v]) => ` ${k}="${v}"`).join('');
+    return `<link rel="stylesheet"${attrs}>`;
+  }
+  return '';
+}

package/starter/views/pages/PageIndex.jsx

@@ -0,0 +1,25 @@
+export const route = '/';
+
+export default function PageIndex({ tasks }, {
+  // all components are available here
+  Json, Sidebar,
+  // so are request and response objects
+  req, res, params,
+  // utils are extendable by your units in ../../units
+  utils,
+  // use slot(name,value) and slot(name,key,value) to pass values to the layout
+  slot,
+}) {
+  slot('title', 'Welcome to Noxt');
+  return (
+    <article>
+      <main>
+        <h2>Here are some tasks</h2>
+          <PageTasks.Link text="Tasks" />
+      </main>
+      <aside>
+        <Sidebar />
+      </aside>
+    </article>
+  );
+}

package/starter/views/pages/PageTask.jsx

@@ -0,0 +1,46 @@
+export const route = '/tasks/:taskid';
+
+export const fetch = {
+  task: ({ taskid }) => 'https://jsonplaceholder.typicode.com/todos/' + taskid
+}
+
+export default function PageIndex({ task, taskid }, {
+  // all components are available here
+  Json, Sidebar,
+  // so are request and response objects
+  req, res, params,
+  // utils are extendable by your units in ../../units
+  utils,
+  // use slot(name,value) and slot(name,key,value) to pass values to the layout
+  slot,
+}) {
+  slot('title', 'Task ' + taskid);
+  return (
+    <article>
+      <main>
+        <h2>Here is task {taskid}</h2>
+        <table>
+          <tbody>
+            <tr>
+              <th>Id</th>
+              <td>{taskid}</td>
+            </tr>
+            <tr>
+              <th>Title</th>
+              <td>{task.title}</td>
+            </tr>
+            <tr>
+              <th>Completed</th>
+              <td>{task.completed}</td>
+            </tr>
+          </tbody>
+        </table>
+        <h2>Here's the data</h2>
+        <Json data={task} />
+      </main>
+      <aside>
+        <Sidebar />
+      </aside>
+    </article>
+  );
+}

package/starter/views/pages/PageTasks.jsx

@@ -0,0 +1,48 @@
+export const route = '/tasks';
+
+export const fetch = {
+  tasks: 'https://jsonplaceholder.typicode.com/todos'
+}
+
+export default function PageTasks({ tasks }, {
+  // all components are available here
+  Json, PageTask, Sidebar,
+  // so are request and response objects
+  req, res, params,
+  // utils are extendable by your units in ../../units
+  utils,
+  // use slot(name,value) and slot(name,key,value) to pass values to the layout
+  slot,
+}) {
+  slot('title', 'Welcome to Noxt');
+  return (
+    <article>
+      <main>
+        <h2>Here are some tasks</h2>
+        <table>
+          <thead>
+            <tr>
+              <th>Id</th>
+              <th>Title</th>
+              <th>Completed</th>
+            </tr>
+          </thead>
+          <tbody>
+            {tasks.map(({ id, title, completed }) => (
+              <tr key={id}>
+                <td>{id}</td>
+                <td><PageTasks.Link taskid={id} text={title} /></td>
+                <td>{completed ? 'Yes' : 'No'}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+        <h2>Here's the data</h2>
+        <Json data={tasks} />
+      </main>
+      <aside>
+        <Sidebar />
+      </aside>
+    </article>
+  );
+}

package/starter/views/templates/AlertButton.jsx

@@ -0,0 +1,13 @@
+const jsAlert = `
+  function doAlert(button) {
+    alert('Noxt says: ' + button.dataset.message);
+  }
+`;
+
+export default function AlertButton({ label, message }) {
+  return (
+    <Button onclick="doAlert(this)" data-message={message}>
+      {label}
+    </Button>
+  );
+}

package/starter/views/templates/Header.jsx

@@ -0,0 +1,7 @@
+export default function Header({ title }) {
+  return (
+    <header>
+      <h1>{title}</h1>
+    </header>
+  );
+}

package/starter/views/templates/Sidebar.jsx

@@ -0,0 +1,10 @@
+export default function SideBar({},{ PageIndex, AlertButton }) {
+  return (
+    <nav>
+      <ul>
+        <li><PageIndex.Link text="Go Home" /></li>
+        <li><AlertButton label="Alert" message="Hello" /></li>
+      </ul>
+    </nav>
+  );
+}