@eclipse-lyra/create-app 0.0.0

package/README.md

@@ -0,0 +1,69 @@
+# @eclipse-lyra/create-app
+
+Scaffold a new Eclipse Lyra app with a single command.
+
+## Testing locally
+
+From the Eclipse Lyra monorepo root, run the CLI with Node (no publish needed):
+
+```bash
+node packages/create-app/index.js my-app
+# or non-interactive:
+node packages/create-app/index.js my-app --yes
+```
+
+Or use `npx` with the package path:
+
+```bash
+npx file:./packages/create-app my-app --yes
+```
+
+Then `cd my-app && npm run dev` to run the scaffolded app.
+
+## Usage (published package)
+
+```bash
+npm create @eclipse-lyra/app
+```
+
+With a project name (directory):
+
+```bash
+npm create @eclipse-lyra/app my-app
+```
+
+To skip prompts when a project name is provided:
+
+```bash
+npm create @eclipse-lyra/app my-app -- --yes
+```
+
+## Next steps
+
+After scaffolding:
+
+```bash
+cd my-app
+npm run dev
+```
+
+From the created project root, `npm run dev` runs the app (Vite). Use `npm run build` and `npm run preview` to build and preview.
+
+## What you get
+
+- A **monorepo** with two workspace packages:
+  - **`packages/app`** – the Lyra app (Vite, core + extensions from npm).
+  - **`packages/example-extension`** – a minimal example extension you can copy or extend.
+- The app registers a **logo contribution** on the left main toolbar (slot `start`) with the text `my!app`; you can change it in `packages/app/src/main.ts`.
+- The example extension is loaded by the app and adds an "Example" view in the left side panel.
+
+## Example extension
+
+The template includes an example extension in **`packages/example-extension`** to show how to build your own extensions without publishing a separate npm package.
+
+- **`src/index.ts`** – Registers the extension with `extensionRegistry.registerExtension()` (id, name, description, loader, icon). Same pattern as published extensions like `@eclipse-lyra/extension-howto-system` and `@eclipse-lyra/extension-utils`.
+- **`src/example-extension-loader.ts`** – Loaded when the extension is activated. Registers a **TabContribution** to `SIDEBAR_MAIN` (the left side panel), so the "Example" tab appears alongside the workspace file browser.
+- **`tsconfig.json`** – TypeScript config for the extension (IDE and type-checking).
+- **`vite.config.ts`** – Vite lib build; run `npm run build -w example-extension` to output `dist/` when you want to publish the extension.
+
+You can edit `packages/example-extension` in place, add more views or contributions, or copy it to start a new extension. The app depends on it via `"example-extension": "*"` in `packages/app/package.json` (npm links the workspace package). The app compiles the extension from source in dev; use the extension’s build script if you publish it as a separate package.

package/index.js

@@ -0,0 +1,79 @@
+#!/usr/bin/env node
+
+import { cpSync, mkdirSync, readFileSync, writeFileSync, existsSync, unlinkSync } from 'fs';
+import { dirname, join, resolve, basename } from 'path';
+import { fileURLToPath } from 'url';
+import { spawnSync } from 'child_process';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const TEMPLATE_DIR = join(__dirname, 'template');
+
+function parseArgs() {
+  const args = process.argv.slice(2).filter((a) => !a.startsWith('--'));
+  const projectDir = args[0] || 'my-lyra-app';
+  const yes = process.argv.includes('--yes') || process.argv.includes('-y');
+  return { projectDir, yes };
+}
+
+function main() {
+  const { projectDir, yes } = parseArgs();
+  const targetDir = resolve(process.cwd(), projectDir);
+  const appName = basename(targetDir);
+
+  if (existsSync(targetDir)) {
+    console.error(`Error: Directory "${projectDir}" already exists.`);
+    process.exit(1);
+  }
+
+  if (!existsSync(TEMPLATE_DIR)) {
+    console.error('Error: Template directory not found. Reinstall @eclipse-lyra/create-app.');
+    process.exit(1);
+  }
+
+  console.log(`Creating app in ${targetDir}...`);
+  mkdirSync(targetDir, { recursive: true });
+  cpSync(TEMPLATE_DIR, targetDir, { recursive: true });
+  const appDescription = `${appName} – Application built with Eclipse Lyra.`;
+
+  const rootPkgPath = join(targetDir, 'package.json');
+  const rootPkg = JSON.parse(readFileSync(rootPkgPath, 'utf8'));
+  rootPkg.name = appName;
+  rootPkg.scripts.dev = `npm run dev -w ${appName}`;
+  rootPkg.scripts.build = `npm run build -w ${appName}`;
+  rootPkg.scripts.preview = `npm run preview -w ${appName}`;
+  writeFileSync(rootPkgPath, JSON.stringify(rootPkg, null, 2) + '\n');
+
+  const appPkgPath = join(targetDir, 'packages', 'app', 'package.json');
+  const appPkg = JSON.parse(readFileSync(appPkgPath, 'utf8'));
+  appPkg.name = appName;
+  appPkg.description = appDescription;
+  writeFileSync(appPkgPath, JSON.stringify(appPkg, null, 2) + '\n');
+
+  const mainTsPath = join(targetDir, 'packages', 'app', 'src', 'main.ts');
+  let mainTs = readFileSync(mainTsPath, 'utf8');
+  mainTs = mainTs.replace(/\{\{APP_NAME\}\}/g, appName);
+  writeFileSync(mainTsPath, mainTs);
+
+  const readmePath = join(targetDir, 'README.md');
+  let readme = readFileSync(readmePath, 'utf8');
+  readme = readme.replace(/\{\{APP_NAME\}\}/g, appName);
+  writeFileSync(readmePath, readme);
+
+  const gitignoreSrc = join(targetDir, '_gitignore');
+  if (existsSync(gitignoreSrc)) {
+    writeFileSync(join(targetDir, '.gitignore'), readFileSync(gitignoreSrc, 'utf8'));
+    unlinkSync(gitignoreSrc);
+  }
+
+  console.log('Installing dependencies...');
+  const install = spawnSync('npm', ['install'], { cwd: targetDir, stdio: 'inherit', shell: true });
+  if (install.status !== 0) {
+    process.exit(install.status ?? 1);
+  }
+
+  console.log('\nDone! Next steps:\n');
+  console.log(`  cd ${projectDir}`);
+  console.log('  npm run dev\n');
+}
+
+main();

package/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@eclipse-lyra/create-app",
+  "version": "0.0.0",
+  "description": "Scaffold a new Eclipse Lyra app (monorepo with app + example extension)",
+  "type": "module",
+  "bin": "index.js",
+  "files": [
+    "index.js",
+    "template"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/eclipse-lyra/core"
+  },
+  "license": "EPL-2.0"
+}

package/template/README.md

@@ -0,0 +1,22 @@
+# {{APP_NAME}}
+
+Application built with [Eclipse Lyra](https://github.com/eclipse-lyra/core).
+
+## Getting started
+
+```bash
+npm run dev
+```
+
+Then open the URL shown in the terminal (e.g. https://localhost:5173/).
+
+## Scripts
+
+- **dev** – Start the development server
+- **build** – Build for production
+- **preview** – Preview the production build locally
+
+## Structure
+
+- **packages/app** – The Lyra app (entry point, extensions, UI)
+- **packages/example-extension** – Example extension; use it as a reference to add your own

package/template/_gitignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+*.local
+.DS_Store

package/template/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "{{APP_NAME}}",
+  "version": "0.0.0",
+  "private": true,
+  "workspaces": ["packages/*"],
+  "scripts": {
+    "dev": "npm run dev -w {{APP_NAME}}",
+    "build": "npm run build -w {{APP_NAME}}",
+    "preview": "npm run preview -w {{APP_NAME}}"
+  }
+}

package/template/packages/app/env.d.ts

@@ -0,0 +1,16 @@
+declare module 'vite-plugin-mkcert' {
+  import type { Plugin } from 'vite';
+  const plugin: () => Plugin;
+  export default plugin;
+}
+
+declare module 'vite-plugin-cross-origin-isolation' {
+  import type { Plugin } from 'vite';
+  const plugin: () => Plugin;
+  export default plugin;
+}
+
+declare module '@eclipse-lyra/core/vite-plugin-resolve-deps' {
+  import type { Plugin } from 'vite';
+  export function resolveDepVersionsPlugin(options?: { includeDevDependencies?: boolean }): Plugin;
+}

package/template/packages/app/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en" class="wa-dark">
+<head>
+    <meta charset="UTF-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>Loading...</title>
+    <script type="module" src="/src/main.ts"></script>
+</head>
+<body>
+</body>
+</html>

package/template/packages/app/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "{{APP_NAME}}",
+  "version": "0.0.0",
+  "description": "{{APP_DESCRIPTION}}",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@eclipse-lyra/core": "^0.x",
+    "@eclipse-lyra/extension-ai-system": "^0.x",
+    "@eclipse-lyra/extension-command-palette": "^0.x",
+    "@eclipse-lyra/extension-md-editor": "^0.x",
+    "@eclipse-lyra/extension-media-viewer": "^0.x",
+    "@eclipse-lyra/extension-memory-usage": "^0.x",
+    "@eclipse-lyra/extension-monaco-editor": "^0.x",
+    "@eclipse-lyra/extension-notebook": "^0.x",
+    "@eclipse-lyra/extension-python-runtime": "^0.x",
+    "@eclipse-lyra/extension-settings-tree": "^0.x",
+    "@eclipse-lyra/extension-utils": "^0.x",
+    "example-extension": "*",
+    "pace-js": "^1.2.4"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.3",
+    "vite": "^7.1.12",
+    "vite-plugin-cross-origin-isolation": "^0.1.6",
+    "vite-plugin-mkcert": "^1.17.9"
+  },
+  "marketplace": {
+    "catalogUrls": [
+      "https://raw.githubusercontent.com/kispace-io/appspace-marketplace/main/catalogs/extensions.json",
+      "https://raw.githubusercontent.com/kispace-io/appspace-marketplace/main/catalogs/apps.json"
+    ]
+  }
+}

package/template/packages/app/public/lyra-logo.svg

@@ -0,0 +1,12 @@
+<svg width="140" height="32" viewBox="0 0 140 40" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+  <g transform="translate(4, 4)">
+    <rect x="16" y="6" width="8" height="8" rx="1.5" fill="#0d6efd"/>
+    <g transform="rotate(-12, 20, 20)">
+      <rect x="17" y="15" width="6" height="6" rx="1" fill="#e9ecef" stroke="#6b7280" stroke-width="0.5"/>
+      <rect x="9" y="17" width="6" height="6" rx="1" fill="#e9ecef" stroke="#6b7280" stroke-width="0.5"/>
+      <rect x="17" y="25" width="6" height="6" rx="1" fill="#e9ecef" stroke="#6b7280" stroke-width="0.5"/>
+      <rect x="25" y="17" width="6" height="6" rx="1" fill="#e9ecef" stroke="#6b7280" stroke-width="0.5"/>
+    </g>
+  </g>
+  <text x="45" y="23" font-family="system-ui, sans-serif" font-size="14" font-weight="600" fill="#0d6efd">Eclipse Lyra</text>
+</svg>

package/template/packages/app/src/main.ts

@@ -0,0 +1,42 @@
+import Pace from 'pace-js';
+import 'pace-js/themes/blue/pace-theme-minimal.css';
+
+Pace.start();
+
+import '@eclipse-lyra/extension-md-editor';
+import '@eclipse-lyra/extension-media-viewer';
+import '@eclipse-lyra/extension-memory-usage';
+import '@eclipse-lyra/extension-monaco-editor';
+import '@eclipse-lyra/extension-settings-tree';
+import '@eclipse-lyra/extension-utils';
+import '@eclipse-lyra/extension-ai-system';
+import '@eclipse-lyra/extension-command-palette';
+import '@eclipse-lyra/extension-notebook';
+import '@eclipse-lyra/extension-python-runtime';
+
+import 'example-extension';
+
+import { appLoaderService, contributionRegistry, type HTMLContribution, TOOLBAR_MAIN } from '@eclipse-lyra/core';
+
+contributionRegistry.registerContribution(TOOLBAR_MAIN, {
+  label: 'Brand',
+  slot: 'start',
+  component: '<span style="margin-right: 1rem;">{{APP_NAME}}</span>',
+} as HTMLContribution);
+
+appLoaderService.registerApp(
+  {
+    extensions: [
+      '@eclipse-lyra/extension-utils',
+      '@eclipse-lyra/extension-command-palette',
+      '@eclipse-lyra/extension-md-editor',
+      '@eclipse-lyra/extension-monaco-editor',
+      '@eclipse-lyra/extension-media-viewer',
+      '@eclipse-lyra/extension-settings-tree',
+      '@eclipse-lyra/extension-memory-usage',
+      '@eclipse-lyra/extension-ai-system',
+      'example-extension',
+    ],
+  },
+  { autoStart: true, hostConfig: true }
+);

package/template/packages/app/src/vite-env.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+declare const __RESOLVED_PACKAGE_INFO__: { name: string; version: string; dependencies: Record<string, string> } | undefined;
+
+declare module "pace-js" {
+  const Pace: { start: (options?: unknown) => void };
+  export default Pace;
+}

package/template/packages/app/vite.config.ts

@@ -0,0 +1,37 @@
+import { defineConfig } from 'vite';
+import mkcert from 'vite-plugin-mkcert';
+import crossOriginIsolation from 'vite-plugin-cross-origin-isolation';
+import { resolveDepVersionsPlugin } from '@eclipse-lyra/core/vite-plugin-resolve-deps';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig({
+  root: __dirname,
+  base: process.env.VITE_BASE_PATH || '/',
+  resolve: {},
+  optimizeDeps: {
+    include: ['@eclipse-lyra/core'],
+  },
+  plugins: [resolveDepVersionsPlugin(), mkcert(), crossOriginIsolation()],
+  esbuild: {
+    tsconfigRaw: {
+      compilerOptions: {
+        experimentalDecorators: true,
+        useDefineForClassFields: false,
+      },
+    },
+  },
+  worker: {
+    format: 'es',
+  },
+  build: {
+    outDir: path.resolve(__dirname, 'dist'),
+    rollupOptions: {
+      input: {
+        main: path.resolve(__dirname, 'index.html'),
+      },
+    },
+  },
+});

package/template/packages/example-extension/README.md

@@ -0,0 +1,18 @@
+# example-extension
+
+Example Eclipse Lyra extension that adds a view to the **left side panel** – the same tab bar as **Workspace** (file browser). You get an "Example" tab next to the workspace; use it as a reference to build your own extensions.
+
+## What it does
+
+- Registers an extension with the Lyra extension registry.
+- Contributes a tab to `SIDEBAR_MAIN` (the left sidebar). The "Example" view appears in the same folder as the Workspace / file browser tab; switch between them via the sidebar icons.
+- The tab content is a minimal HTML snippet; you can replace it with your own UI.
+
+## Files
+
+- **src/index.ts** – Registers the extension (`extensionRegistry.registerExtension`) and points to the loader.
+- **src/example-extension-loader.ts** – Loaded when the extension starts. Registers a `TabContribution` to `SIDEBAR_MAIN` with name, label, icon, and component.
+
+## Extending
+
+Copy this package or add new contributions in the loader (e.g. more tabs, or contributions to other slots like `TOOLBAR_MAIN_RIGHT`). See [@eclipse-lyra/core](https://github.com/eclipse-lyra/core) and published extensions (e.g. `@eclipse-lyra/extension-utils`) for more patterns.

package/template/packages/example-extension/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "example-extension",
+  "version": "0.0.0",
+  "type": "module",
+  "main": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts"
+    }
+  },
+  "dependencies": {
+    "@eclipse-lyra/core": "^0.x"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.3",
+    "vite": "^7.1.12"
+  },
+  "scripts": {
+    "build": "vite build"
+  }
+}

package/template/packages/example-extension/src/example-extension-loader.ts

@@ -0,0 +1,19 @@
+import { html } from '@eclipse-lyra/core/externals/lit';
+import { contributionRegistry, SIDEBAR_MAIN } from '@eclipse-lyra/core';
+import type { TabContribution } from '@eclipse-lyra/core';
+
+contributionRegistry.registerContribution(SIDEBAR_MAIN, {
+  name: 'example-view',
+  label: 'Example',
+  icon: 'puzzle-piece',
+  closable: true,
+  toolbar: false,
+  component: (_id: string) => html`
+    <div style="padding: var(--wa-space-l);">
+      <h2>Example extension</h2>
+      <p>This view is contributed by the <code>example-extension</code> package to the left side panel.</p>
+    </div>
+  `,
+} as TabContribution);
+
+export default function exampleExtensionLoader() {}

package/template/packages/example-extension/src/index.ts

@@ -0,0 +1,9 @@
+import { extensionRegistry } from '@eclipse-lyra/core';
+
+extensionRegistry.registerExtension({
+  id: 'example-extension',
+  name: 'Example',
+  description: 'Example extension showing how to add a view to the left side panel',
+  loader: () => import('./example-extension-loader'),
+  icon: 'puzzle-piece',
+});

package/template/packages/example-extension/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "skipLibCheck": true,
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false
+  },
+  "include": ["src/**/*"]
+}

package/template/packages/example-extension/vite.config.ts

@@ -0,0 +1,18 @@
+import { defineConfig } from 'vite';
+import path from 'path';
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const isExternal = (id: string): boolean =>
+  !id.startsWith('./') && !id.startsWith('../') && !(path.isAbsolute(id) && id.includes('/src/'));
+
+export default defineConfig({
+  build: {
+    lib: { entry: path.resolve(__dirname, 'src/index.ts'), formats: ['es'], fileName: 'index' },
+    rollupOptions: { external: isExternal, output: { format: 'es' } },
+    outDir: 'dist',
+    sourcemap: true,
+    minify: false,
+  },
+});