create-onin-plugin 1.7.0

package/README.md

@@ -0,0 +1,55 @@
+# create-onin-plugin
+
+CLI for bootstrapping Onin plugins with a marketplace-safe release layout.
+
+## Usage
+
+Published usage:
+
+```bash
+npx create-onin-plugin my-plugin
+```
+
+Monorepo usage:
+
+```bash
+pnpm create:plugin my-plugin
+```
+
+Direct package execution inside the repo:
+
+```bash
+pnpm --filter create-onin-plugin start my-plugin
+```
+
+Interactive mode:
+
+```bash
+npx create-onin-plugin
+```
+
+## Current template
+
+The first version ships a single `svelte-view` template with:
+
+- `src/main.ts`
+- `src/lifecycle.ts`
+- `vite.lifecycle.config.ts`
+- `pnpm build`
+- `pnpm pack:plugin`
+
+## Generated project
+
+The generated plugin includes:
+
+- `src/main.ts` for the UI entry
+- `src/lifecycle.ts` for settings, commands, and startup initialization
+- `manifest.json` wired to `dist/lifecycle.js`
+- `pnpm pack:plugin` to create `plugin.zip`
+
+The release zip contains:
+
+- `manifest.json`
+- `icon.svg`
+- `dist/index.html`
+- `dist/lifecycle.js`

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "create-onin-plugin",
+  "version": "1.7.0",
+  "private": false,
+  "description": "CLI for scaffolding Onin plugins with lifecycle and release packaging built in.",
+  "license": "GPL-3.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "bin": {
+    "create-onin-plugin": "./src/cli.js"
+  },
+  "files": [
+    "README.md",
+    "src",
+    "templates"
+  ],
+  "scripts": {
+    "start": "node ./src/cli.js"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/src/cli.js

@@ -0,0 +1,334 @@
+#!/usr/bin/env node
+
+import { stdin as input, stdout as output } from "node:process";
+import { createInterface } from "node:readline/promises";
+import { fileURLToPath } from "node:url";
+import { basename, dirname, join, resolve } from "node:path";
+import { copyFile, mkdir, readdir, readFile, stat, writeFile } from "node:fs/promises";
+
+const TEMPLATE_NAME = "svelte-view";
+const SUPPORTED_TEMPLATES = [TEMPLATE_NAME];
+const CLI_DIR = dirname(fileURLToPath(import.meta.url));
+const TEMPLATE_DIR = resolve(
+  CLI_DIR,
+  "../templates",
+  TEMPLATE_NAME,
+);
+
+function parseArgs(argv) {
+  const options = {
+    targetDir: undefined,
+    pluginName: undefined,
+    pluginId: undefined,
+    withSettings: undefined,
+    yes: false,
+    template: TEMPLATE_NAME,
+  };
+
+  for (let i = 0; i < argv.length; i += 1) {
+    const arg = argv[i];
+
+    if (arg === "--") {
+      continue;
+    }
+
+    if (!arg.startsWith("--") && !options.targetDir) {
+      options.targetDir = arg;
+      continue;
+    }
+
+    if (arg === "--template") {
+      options.template = argv[i + 1] ?? TEMPLATE_NAME;
+      i += 1;
+      continue;
+    }
+
+    if (arg === "--plugin-name") {
+      options.pluginName = argv[i + 1];
+      i += 1;
+      continue;
+    }
+
+    if (arg === "--plugin-id") {
+      options.pluginId = argv[i + 1];
+      i += 1;
+      continue;
+    }
+
+    if (arg === "--yes") {
+      options.yes = true;
+      continue;
+    }
+
+    if (arg === "--with-settings") {
+      options.withSettings = true;
+      continue;
+    }
+
+    if (arg === "--no-with-settings") {
+      options.withSettings = false;
+      continue;
+    }
+  }
+
+  return options;
+}
+
+function printHelp() {
+  console.log("create-onin-plugin");
+  console.log("");
+  console.log("Usage:");
+  console.log("  create-onin-plugin [target-dir] [options]");
+  console.log("");
+  console.log("Options:");
+  console.log("  --template <name>      Template to use (default: svelte-view)");
+  console.log("  --plugin-name <name>   Plugin display name");
+  console.log("  --plugin-id <id>       Plugin manifest id");
+  console.log("  --with-settings        Include settings schema example");
+  console.log("  --no-with-settings     Skip settings schema example");
+  console.log("  --yes                  Use defaults for missing answers");
+  console.log("  --help                 Show this help message");
+}
+
+function toTitleCase(value) {
+  return value
+    .split(/[-_.\s]+/)
+    .filter(Boolean)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(" ");
+}
+
+function slugify(value) {
+  return value
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9.-]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .replace(/-{2,}/g, "-");
+}
+
+function isValidPluginId(value) {
+  return /^[a-z0-9][a-z0-9.-]*[a-z0-9]$/.test(value) && !value.includes("..");
+}
+
+function isValidPackageName(value) {
+  return /^[a-z0-9][a-z0-9.-]*[a-z0-9]$/.test(value);
+}
+
+async function isDirectoryEmpty(dir) {
+  const entries = await readdir(dir);
+  return entries.length === 0;
+}
+
+async function ensureTargetDirectory(targetDir) {
+  try {
+    const targetStat = await stat(targetDir);
+    if (!targetStat.isDirectory()) {
+      throw new Error(
+        `Target path exists and is not a directory: ${targetDir}\nChoose a new directory name and try again.`,
+      );
+    }
+
+    if (!(await isDirectoryEmpty(targetDir))) {
+      throw new Error(
+        `Target directory is not empty: ${targetDir}\nUse an empty directory or choose a new project name.`,
+      );
+    }
+  } catch (error) {
+    if (error && error.code === "ENOENT") {
+      await mkdir(targetDir, { recursive: true });
+      return;
+    }
+
+    throw error;
+  }
+}
+
+function renderTemplate(content, context) {
+  return content
+    .replaceAll("__PLUGIN_NAME__", context.pluginName)
+    .replaceAll("__PLUGIN_ID__", context.pluginId)
+    .replaceAll("__PACKAGE_NAME__", context.packageName)
+    .replaceAll("__PLUGIN_DESCRIPTION__", context.pluginDescription)
+    .replaceAll("__SETTINGS_BLOCK__", context.settingsBlock)
+    .replaceAll("__SETTINGS_IMPORT__", context.settingsImport)
+    .replaceAll("__SETTINGS_NOTE__", context.settingsNote)
+    .replaceAll("__KEYWORD__", context.keyword);
+}
+
+async function copyTemplateDir(sourceDir, targetDir, context) {
+  const entries = await readdir(sourceDir, { withFileTypes: true });
+
+  for (const entry of entries) {
+    const sourcePath = join(sourceDir, entry.name);
+    const outputName = entry.name.endsWith(".tpl")
+      ? entry.name.slice(0, -4)
+      : entry.name;
+    const targetPath = join(targetDir, outputName);
+
+    if (entry.isDirectory()) {
+      await mkdir(targetPath, { recursive: true });
+      await copyTemplateDir(sourcePath, targetPath, context);
+      continue;
+    }
+
+    if (entry.name.endsWith(".tpl")) {
+      const content = await readFile(sourcePath, "utf8");
+      await writeFile(targetPath, renderTemplate(content, context), "utf8");
+      continue;
+    }
+
+    await copyFile(sourcePath, targetPath);
+  }
+}
+
+function buildSettingsBlock(withSettings) {
+  if (!withSettings) {
+    return "  // Add settings.useSettingsSchema(...) here when your plugin needs configurable options.\n";
+  }
+
+  return `  await settings.useSettingsSchema([
+    {
+      key: "accentColor",
+      label: "Accent Color",
+      type: "color",
+      defaultValue: "#111827",
+      description: "Example plugin setting registered during lifecycle onLoad.",
+    },
+  ]);
+`;
+}
+
+async function promptForMissingOptions(initialOptions) {
+  if (initialOptions.yes) {
+    const targetDir = initialOptions.targetDir || "my-onin-plugin";
+    const packageName = slugify(basename(targetDir));
+    const pluginName =
+      initialOptions.pluginName || toTitleCase(packageName) || "My Onin Plugin";
+    const pluginId =
+      initialOptions.pluginId || `com.example.${packageName || "my-onin-plugin"}`;
+
+    return {
+      targetDir,
+      pluginName,
+      pluginId,
+      withSettings: initialOptions.withSettings ?? true,
+    };
+  }
+
+  const rl = createInterface({ input, output });
+
+  try {
+    const targetDirInput =
+      initialOptions.targetDir ||
+      (await rl.question("Project directory name: ")).trim();
+    const targetDir = targetDirInput || "my-onin-plugin";
+    const packageName = slugify(basename(targetDir));
+
+    const pluginNameInput =
+      initialOptions.pluginName ||
+      (await rl.question(
+        `Plugin name (${toTitleCase(packageName) || "My Onin Plugin"}): `,
+      )).trim();
+    const pluginName = pluginNameInput || toTitleCase(packageName) || "My Onin Plugin";
+
+    const defaultPluginId = `com.example.${packageName || "my-onin-plugin"}`;
+    const pluginIdInput =
+      initialOptions.pluginId ||
+      (await rl.question(`Plugin ID (${defaultPluginId}): `)).trim();
+    const pluginId = pluginIdInput || defaultPluginId;
+
+    let withSettings = initialOptions.withSettings;
+    if (withSettings === undefined) {
+      const answer = (
+        await rl.question("Include settings schema example? (Y/n): ")
+      ).trim().toLowerCase();
+      withSettings = answer !== "n";
+    }
+
+    return {
+      targetDir,
+      pluginName,
+      pluginId,
+      withSettings,
+    };
+  } finally {
+    rl.close();
+  }
+}
+
+function printNextSteps(targetDir) {
+  console.log("");
+  console.log("Project created.");
+  console.log("");
+  console.log(`  cd ${targetDir}`);
+  console.log("  pnpm install");
+  console.log("  pnpm dev");
+  console.log("");
+  console.log("To build release artifacts:");
+  console.log("  pnpm build");
+  console.log("  pnpm pack:plugin");
+  console.log("");
+  console.log("To load the plugin in Onin:");
+  console.log("  Open Settings -> Plugins -> Import Local Plugin");
+}
+
+async function main() {
+  const options = parseArgs(process.argv.slice(2));
+
+  if (process.argv.includes("--help")) {
+    printHelp();
+    return;
+  }
+
+  if (!SUPPORTED_TEMPLATES.includes(options.template)) {
+    console.error(
+      `Unsupported template: ${options.template}\nSupported templates: ${SUPPORTED_TEMPLATES.join(", ")}`,
+    );
+    process.exitCode = 1;
+    return;
+  }
+
+  const answers = await promptForMissingOptions(options);
+  const targetDir = resolve(process.cwd(), answers.targetDir);
+  const packageName = slugify(basename(targetDir));
+
+  if (!isValidPackageName(packageName)) {
+    console.error(
+      `Invalid project directory name: ${packageName}\nUse lowercase letters, numbers, dots, or hyphens only.`,
+    );
+    process.exitCode = 1;
+    return;
+  }
+
+  if (!isValidPluginId(answers.pluginId)) {
+    console.error(
+      `Invalid plugin ID: ${answers.pluginId}\nUse lowercase letters, numbers, dots, and hyphens only.`,
+    );
+    process.exitCode = 1;
+    return;
+  }
+
+  await ensureTargetDirectory(targetDir);
+
+  const context = {
+    packageName,
+    pluginName: answers.pluginName,
+    pluginId: answers.pluginId,
+    pluginDescription: `${answers.pluginName} plugin for Onin`,
+    keyword: packageName.split(".").pop() || packageName,
+    settingsImport: answers.withSettings ? ", settings" : "",
+    settingsBlock: buildSettingsBlock(answers.withSettings),
+    settingsNote: answers.withSettings
+      ? "This template includes a sample settings schema registered from lifecycle.ts."
+      : "This template omits settings schema. Add it later in src/lifecycle.ts if needed.",
+  };
+
+  await copyTemplateDir(TEMPLATE_DIR, targetDir, context);
+  printNextSteps(answers.targetDir);
+}
+
+main().catch((error) => {
+  console.error(error instanceof Error ? error.message : String(error));
+  process.exitCode = 1;
+});

package/templates/svelte-view/.gitignore.tpl

@@ -0,0 +1,4 @@
+node_modules
+dist
+.svelte-kit
+plugin.zip

package/templates/svelte-view/README.md.tpl

@@ -0,0 +1,30 @@
+# __PLUGIN_NAME__
+
+__PLUGIN_DESCRIPTION__
+
+## Development
+
+```bash
+pnpm install
+pnpm dev
+```
+
+## Build
+
+```bash
+pnpm build
+```
+
+## Pack
+
+```bash
+pnpm pack:plugin
+```
+
+`pnpm pack:plugin` creates a `plugin.zip` that includes:
+
+- `manifest.json`
+- `icon.svg`
+- `dist/`
+
+__SETTINGS_NOTE__

package/templates/svelte-view/icon.svg.tpl

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" fill="none">
+  <rect width="128" height="128" rx="28" fill="#111827" />
+  <path
+    d="M33 88V40h18l13 27 13-27h18v48H81V62L69 86H59L47 62v26H33Z"
+    fill="#F9FAFB"
+  />
+</svg>

package/templates/svelte-view/index.html.tpl

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>__PLUGIN_NAME__</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/templates/svelte-view/manifest.json.tpl

@@ -0,0 +1,24 @@
+{
+  "id": "__PLUGIN_ID__",
+  "name": "__PLUGIN_NAME__",
+  "version": "0.1.0",
+  "description": "__PLUGIN_DESCRIPTION__",
+  "entry": "dist/index.html",
+  "icon": "icon.svg",
+  "type": "webview",
+  "display_mode": "inline",
+  "lifecycle": "dist/lifecycle.js",
+  "commands": [
+    {
+      "code": "open",
+      "name": "Open __PLUGIN_NAME__",
+      "description": "Open the plugin UI",
+      "keywords": [
+        {
+          "name": "__KEYWORD__",
+          "type": "prefix"
+        }
+      ]
+    }
+  ]
+}

package/templates/svelte-view/package.json.tpl

@@ -0,0 +1,23 @@
+{
+  "name": "__PACKAGE_NAME__",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build:index": "vite build",
+    "build:lifecycle": "vite build --config vite.lifecycle.config.ts",
+    "build": "npm run build:index && npm run build:lifecycle",
+    "pack:plugin": "npm run build && bestzip plugin.zip manifest.json icon.svg dist"
+  },
+  "dependencies": {
+    "onin-sdk": "^1.6.0",
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
+    "bestzip": "^2.2.1",
+    "typescript": "^5.5.0",
+    "vite": "^7.3.1"
+  }
+}

package/templates/svelte-view/src/App.svelte.tpl

@@ -0,0 +1,113 @@
+<script lang="ts">
+  export let pluginName = "__PLUGIN_NAME__";
+  export let pluginId = "__PLUGIN_ID__";
+</script>
+
+<main class="shell">
+  <section class="hero">
+    <p class="eyebrow">Onin Plugin</p>
+    <h1>{pluginName}</h1>
+    <p class="lede">
+      This starter includes a dedicated lifecycle build, release pack command,
+      and a manifest wired for marketplace-safe output.
+    </p>
+  </section>
+
+  <section class="card">
+    <h2>What is ready</h2>
+    <ul>
+      <li>Vite app build to <code>dist/</code></li>
+      <li>Standalone <code>lifecycle.js</code> build</li>
+      <li><code>pnpm pack</code> for release zip creation</li>
+      <li>Manifest and lifecycle path already aligned</li>
+    </ul>
+  </section>
+
+  <section class="card">
+    <h2>Plugin ID</h2>
+    <code>{pluginId}</code>
+  </section>
+</main>
+
+<style>
+  :global(body) {
+    margin: 0;
+    font-family:
+      "IBM Plex Sans", "Segoe UI", sans-serif;
+    background:
+      radial-gradient(circle at top left, rgba(59, 130, 246, 0.18), transparent 35%),
+      linear-gradient(180deg, #f7f7f5 0%, #eceae3 100%);
+    color: #161616;
+  }
+
+  code {
+    font-family:
+      "IBM Plex Mono", "Cascadia Code", monospace;
+  }
+
+  .shell {
+    min-height: 100vh;
+    padding: 28px;
+    display: grid;
+    gap: 18px;
+    align-content: start;
+  }
+
+  .hero,
+  .card {
+    background: rgba(255, 255, 255, 0.78);
+    border: 1px solid rgba(22, 22, 22, 0.08);
+    border-radius: 24px;
+    padding: 24px;
+    box-shadow: 0 18px 50px rgba(22, 22, 22, 0.08);
+    backdrop-filter: blur(14px);
+  }
+
+  .eyebrow {
+    margin: 0 0 8px;
+    font-size: 12px;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    color: #5f6368;
+  }
+
+  h1,
+  h2,
+  p,
+  ul {
+    margin: 0;
+  }
+
+  h1 {
+    font-size: 32px;
+    line-height: 1.05;
+  }
+
+  h2 {
+    font-size: 18px;
+    margin-bottom: 12px;
+  }
+
+  .lede {
+    margin-top: 12px;
+    max-width: 48ch;
+    color: #4b5563;
+    line-height: 1.6;
+  }
+
+  ul {
+    padding-left: 18px;
+    color: #374151;
+    line-height: 1.7;
+  }
+
+  @media (max-width: 640px) {
+    .shell {
+      padding: 16px;
+    }
+
+    h1 {
+      font-size: 28px;
+    }
+  }
+</style>

package/templates/svelte-view/src/lifecycle.ts.tpl

@@ -0,0 +1,13 @@
+import { command, lifecycle__SETTINGS_IMPORT__ } from "onin-sdk";
+
+lifecycle.onLoad(async () => {
+__SETTINGS_BLOCK__  await command.handle(async (code) => {
+    if (code === "open") {
+      return {
+        ok: true,
+      };
+    }
+
+    return null;
+  });
+});

package/templates/svelte-view/src/main.ts.tpl

@@ -0,0 +1,12 @@
+import { mount } from "svelte";
+import App from "./App.svelte";
+
+const app = mount(App, {
+  target: document.getElementById("app")!,
+  props: {
+    pluginName: "__PLUGIN_NAME__",
+    pluginId: "__PLUGIN_ID__",
+  },
+});
+
+export default app;

package/templates/svelte-view/svelte.config.js.tpl

@@ -0,0 +1,2 @@
+export default {
+};

package/templates/svelte-view/tsconfig.json.tpl

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "strict": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "types": ["svelte"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.svelte", "vite.config.ts", "vite.lifecycle.config.ts"]
+}

package/templates/svelte-view/vite.config.ts.tpl

@@ -0,0 +1,11 @@
+import { defineConfig } from "vite";
+import { svelte } from "@sveltejs/vite-plugin-svelte";
+
+export default defineConfig({
+  plugins: [svelte()],
+  base: "./",
+  server: {
+    port: 5173,
+    cors: true,
+  },
+});

package/templates/svelte-view/vite.lifecycle.config.ts.tpl

@@ -0,0 +1,20 @@
+import { defineConfig } from "vite";
+import { resolve } from "path";
+
+export default defineConfig({
+  build: {
+    outDir: "dist",
+    emptyOutDir: false,
+    lib: {
+      entry: resolve(__dirname, "src/lifecycle.ts"),
+      formats: ["es"],
+      fileName: () => "lifecycle.js",
+    },
+    rollupOptions: {
+      external: [],
+      output: {
+        inlineDynamicImports: true,
+      },
+    },
+  },
+});