npm - mycelia-kernel-plugin - Versions diffs - 1.2.0 → 1.4.0 - Mend

mycelia-kernel-plugin 1.2.0 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (33) hide show

package/README.md +89 -6
package/bin/cli.js +769 -3
package/package.json +15 -5
package/src/angular/builders.js +37 -0
package/src/angular/helpers.js +102 -0
package/src/angular/index.js +189 -0
package/src/angular/services.js +32 -0
package/src/builder/dependency-graph.js +65 -9
package/src/builder/hook-processor.js +26 -4
package/src/builder/utils.js +78 -22
package/src/core/facet.js +16 -3
package/src/index.js +18 -0
package/src/manager/facet-manager.js +10 -2
package/src/qwik/builders.js +39 -0
package/src/qwik/index.js +178 -0
package/src/qwik/listeners.js +96 -0
package/src/qwik/queues.js +87 -0
package/src/qwik/signals.js +32 -0
package/src/react/README.md +3 -0
package/src/solid/README.md +69 -0
package/src/solid/index.js +387 -0
package/src/svelte/builders.js +43 -0
package/src/svelte/index.js +183 -0
package/src/svelte/listeners.js +96 -0
package/src/svelte/queues.js +114 -0
package/src/svelte/stores.js +36 -0
package/src/utils/instrumentation.js +204 -0
package/src/utils/use-base.js +205 -30
package/src/vue/builders.js +40 -0
package/src/vue/composables.js +37 -0
package/src/vue/index.js +252 -0
package/src/vue/listeners.js +78 -0
package/src/vue/queues.js +113 -0

package/bin/cli.js CHANGED Viewed

@@ -62,8 +62,28 @@ function handleCreate(args) {
  * Handle 'init' command
  */
 function handleInit(args) {
-  const projectName = args[0] || 'my-plugin-system';
-  initProject(projectName);
+  if (args.length === 0) {
+    const projectName = 'my-plugin-system';
+    initProject(projectName);
+  } else if (args[0] === 'react') {
+    const projectName = args[1] || 'my-react-app';
+    initReactProject(projectName);
+  } else if (args[0] === 'vue') {
+    const projectName = args[1] || 'my-vue-app';
+    initVueProject(projectName);
+  } else if (args[0] === 'svelte') {
+    const projectName = args[1] || 'my-svelte-app';
+    initSvelteProject(projectName);
+  } else if (args[0] === 'angular') {
+    const projectName = args[1] || 'my-angular-app';
+    initAngularProject(projectName);
+  } else if (args[0] === 'qwik') {
+    const projectName = args[1] || 'my-qwik-app';
+    initQwikProject(projectName);
+  } else {
+    const projectName = args[0];
+    initProject(projectName);
+  }
 }
 /**
@@ -368,6 +388,742 @@ main().catch(console.error);
   console.log(`  npm start`);
 }
+/**
+ * Initialize a React project with Mycelia bindings
+ */
+function initReactProject(projectName) {
+  const projectDir = projectName;
+  if (existsSync(projectDir)) {
+    console.error(`Error: Directory already exists: ${projectDir}`);
+    process.exit(1);
+  }
+  console.log(`Creating React project: ${projectName}...`);
+  // Create directory structure
+  mkdirSync(projectDir, { recursive: true });
+  mkdirSync(join(projectDir, 'src'), { recursive: true });
+  mkdirSync(join(projectDir, 'src/hooks'), { recursive: true });
+  mkdirSync(join(projectDir, 'src/components'), { recursive: true });
+  // Create package.json
+  const packageJson = {
+    name: projectName,
+    version: '1.0.0',
+    type: 'module',
+    scripts: {
+      dev: 'vite',
+      build: 'vite build',
+      preview: 'vite preview'
+    },
+    dependencies: {
+      'mycelia-kernel-plugin': '^1.2.0',
+      'react': '^18.2.0',
+      'react-dom': '^18.2.0'
+    },
+    devDependencies: {
+      '@vitejs/plugin-react': '^4.2.0',
+      'vite': '^5.0.0'
+    }
+  };
+  writeFileSync(
+    join(projectDir, 'package.json'),
+    JSON.stringify(packageJson, null, 2),
+    'utf8'
+  );
+  // Create vite.config.js
+  const viteConfig = `import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+export default defineConfig({
+  plugins: [react()],
+});
+`;
+  writeFileSync(join(projectDir, 'vite.config.js'), viteConfig, 'utf8');
+  // Create index.html
+  const indexHtml = `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${projectName}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
+`;
+  writeFileSync(join(projectDir, 'index.html'), indexHtml, 'utf8');
+  // Create main.jsx
+  const mainJsx = `import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { MyceliaProvider } from 'mycelia-kernel-plugin/react';
+import { useBase } from 'mycelia-kernel-plugin';
+import App from './App.jsx';
+const buildSystem = () =>
+  useBase('${projectName}')
+    .build();
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <MyceliaProvider build={buildSystem}>
+      <App />
+    </MyceliaProvider>
+  </React.StrictMode>
+);
+`;
+  writeFileSync(join(projectDir, 'src/main.jsx'), mainJsx, 'utf8');
+  // Create App.jsx
+  const appJsx = `import React from 'react';
+import { useMycelia } from 'mycelia-kernel-plugin/react';
+function App() {
+  const system = useMycelia();
+  return (
+    <div>
+      <h1>${projectName}</h1>
+      <p>System: {system?.name}</p>
+    </div>
+  );
+}
+export default App;
+`;
+  writeFileSync(join(projectDir, 'src/App.jsx'), appJsx, 'utf8');
+  // Create README.md
+  const readme = `# ${projectName}
+A React application built with Mycelia Plugin System.
+## Getting Started
+\`\`\`bash
+npm install
+npm run dev
+\`\`\`
+## Creating Plugins
+Use the CLI to scaffold new plugins:
+\`\`\`bash
+npx mycelia-kernel-plugin create hook my-plugin
+\`\`\`
+## Structure
+- \`src/hooks/\` - Plugin hooks
+- \`src/components/\` - React components
+- \`src/App.jsx\` - Main app component
+- \`src/main.jsx\` - Entry point
+`;
+  writeFileSync(join(projectDir, 'README.md'), readme, 'utf8');
+  // Create .gitignore
+  const gitignore = `node_modules/
+dist/
+*.log
+.DS_Store
+`;
+  writeFileSync(join(projectDir, '.gitignore'), gitignore, 'utf8');
+  console.log(`✅ React project created: ${projectDir}`);
+  console.log(`\nNext steps:`);
+  console.log(`  cd ${projectDir}`);
+  console.log(`  npm install`);
+  console.log(`  npm run dev`);
+}
+/**
+ * Initialize a Vue project with Mycelia bindings
+ */
+function initVueProject(projectName) {
+  const projectDir = projectName;
+  if (existsSync(projectDir)) {
+    console.error(`Error: Directory already exists: ${projectDir}`);
+    process.exit(1);
+  }
+  console.log(`Creating Vue project: ${projectName}...`);
+  // Create directory structure
+  mkdirSync(projectDir, { recursive: true });
+  mkdirSync(join(projectDir, 'src'), { recursive: true });
+  mkdirSync(join(projectDir, 'src/hooks'), { recursive: true });
+  mkdirSync(join(projectDir, 'src/components'), { recursive: true });
+  // Create package.json
+  const packageJson = {
+    name: projectName,
+    version: '1.0.0',
+    type: 'module',
+    scripts: {
+      dev: 'vite',
+      build: 'vite build',
+      preview: 'vite preview'
+    },
+    dependencies: {
+      'mycelia-kernel-plugin': '^1.2.0',
+      'vue': '^3.4.0'
+    },
+    devDependencies: {
+      '@vitejs/plugin-vue': '^5.0.0',
+      'vite': '^5.0.0'
+    }
+  };
+  writeFileSync(
+    join(projectDir, 'package.json'),
+    JSON.stringify(packageJson, null, 2),
+    'utf8'
+  );
+  // Create vite.config.js
+  const viteConfig = `import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+export default defineConfig({
+  plugins: [vue()],
+});
+`;
+  writeFileSync(join(projectDir, 'vite.config.js'), viteConfig, 'utf8');
+  // Create index.html
+  const indexHtml = `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${projectName}</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
+`;
+  writeFileSync(join(projectDir, 'index.html'), indexHtml, 'utf8');
+  // Create main.js
+  const mainJs = `import { createApp } from 'vue';
+import { MyceliaPlugin } from 'mycelia-kernel-plugin/vue';
+import { useBase } from 'mycelia-kernel-plugin';
+import App from './App.vue';
+const buildSystem = () =>
+  useBase('${projectName}')
+    .build();
+const app = createApp(App);
+app.use(MyceliaPlugin, { build: buildSystem });
+app.mount('#app');
+`;
+  writeFileSync(join(projectDir, 'src/main.js'), mainJs, 'utf8');
+  // Create App.vue
+  const appVue = `<template>
+  <div>
+    <h1>${projectName}</h1>
+    <p>System: {{ system?.name }}</p>
+  </div>
+</template>
+<script setup>
+import { useMycelia } from 'mycelia-kernel-plugin/vue';
+const system = useMycelia();
+</script>
+`;
+  writeFileSync(join(projectDir, 'src/App.vue'), appVue, 'utf8');
+  // Create README.md
+  const readme = `# ${projectName}
+A Vue 3 application built with Mycelia Plugin System.
+## Getting Started
+\`\`\`bash
+npm install
+npm run dev
+\`\`\`
+## Creating Plugins
+Use the CLI to scaffold new plugins:
+\`\`\`bash
+npx mycelia-kernel-plugin create hook my-plugin
+\`\`\`
+## Structure
+- \`src/hooks/\` - Plugin hooks
+- \`src/components/\` - Vue components
+- \`src/App.vue\` - Main app component
+- \`src/main.js\` - Entry point
+`;
+  writeFileSync(join(projectDir, 'README.md'), readme, 'utf8');
+  // Create .gitignore
+  const gitignore = `node_modules/
+dist/
+*.log
+.DS_Store
+`;
+  writeFileSync(join(projectDir, '.gitignore'), gitignore, 'utf8');
+  console.log(`✅ Vue project created: ${projectDir}`);
+  console.log(`\nNext steps:`);
+  console.log(`  cd ${projectDir}`);
+  console.log(`  npm install`);
+  console.log(`  npm run dev`);
+}
+/**
+ * Initialize a Svelte project with Mycelia bindings
+ */
+function initSvelteProject(projectName) {
+  const projectDir = projectName;
+  if (existsSync(projectDir)) {
+    console.error(`Error: Directory already exists: ${projectDir}`);
+    process.exit(1);
+  }
+  console.log(`Creating Svelte project: ${projectName}...`);
+  // Create directory structure
+  mkdirSync(projectDir, { recursive: true });
+  mkdirSync(join(projectDir, 'src'), { recursive: true });
+  mkdirSync(join(projectDir, 'src/hooks'), { recursive: true });
+  mkdirSync(join(projectDir, 'src/components'), { recursive: true });
+  // Create package.json
+  const packageJson = {
+    name: projectName,
+    version: '1.0.0',
+    type: 'module',
+    scripts: {
+      dev: 'vite dev',
+      build: 'vite build',
+      preview: 'vite preview'
+    },
+    dependencies: {
+      'mycelia-kernel-plugin': '^1.2.0',
+      'svelte': '^4.2.0'
+    },
+    devDependencies: {
+      '@sveltejs/vite-plugin-svelte': '^3.0.0',
+      'vite': '^5.0.0'
+    }
+  };
+  writeFileSync(
+    join(projectDir, 'package.json'),
+    JSON.stringify(packageJson, null, 2),
+    'utf8'
+  );
+  // Create vite.config.js
+  const viteConfig = `import { defineConfig } from 'vite';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+export default defineConfig({
+  plugins: [svelte()],
+});
+`;
+  writeFileSync(join(projectDir, 'vite.config.js'), viteConfig, 'utf8');
+  // Create svelte.config.js
+  const svelteConfig = `import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+export default {
+  preprocess: vitePreprocess(),
+};
+`;
+  writeFileSync(join(projectDir, 'svelte.config.js'), svelteConfig, 'utf8');
+  // Create index.html
+  const indexHtml = `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${projectName}</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
+`;
+  writeFileSync(join(projectDir, 'index.html'), indexHtml, 'utf8');
+  // Create main.js
+  const mainJs = `import App from './App.svelte';
+const app = new App({
+  target: document.getElementById('app'),
+});
+export default app;
+`;
+  writeFileSync(join(projectDir, 'src/main.js'), mainJs, 'utf8');
+  // Create App.svelte
+  const appSvelte = `<script>
+  import { onMount } from 'svelte';
+  import { setMyceliaSystem, useMycelia } from 'mycelia-kernel-plugin/svelte';
+  import { useBase } from 'mycelia-kernel-plugin';
+  let system;
+  onMount(async () => {
+    system = await useBase('${projectName}').build();
+    setMyceliaSystem(system);
+  });
+  const systemStore = useMycelia();
+  $: currentSystem = $systemStore;
+</script>
+<div>
+  <h1>${projectName}</h1>
+  {#if currentSystem}
+    <p>System: {currentSystem.name}</p>
+  {:else}
+    <p>Loading system...</p>
+  {/if}
+</div>
+`;
+  writeFileSync(join(projectDir, 'src/App.svelte'), appSvelte, 'utf8');
+  // Create README.md
+  const readme = `# ${projectName}
+A Svelte application built with Mycelia Plugin System.
+## Getting Started
+\`\`\`bash
+npm install
+npm run dev
+\`\`\`
+## Creating Plugins
+Use the CLI to scaffold new plugins:
+\`\`\`bash
+npx mycelia-kernel-plugin create hook my-plugin
+\`\`\`
+## Structure
+- \`src/hooks/\` - Plugin hooks
+- \`src/components/\` - Svelte components
+- \`src/App.svelte\` - Main app component
+- \`src/main.js\` - Entry point
+`;
+  writeFileSync(join(projectDir, 'README.md'), readme, 'utf8');
+  // Create .gitignore
+  const gitignore = `node_modules/
+dist/
+*.log
+.DS_Store
+`;
+  writeFileSync(join(projectDir, '.gitignore'), gitignore, 'utf8');
+  console.log(`✅ Svelte project created: ${projectDir}`);
+  console.log(`\nNext steps:`);
+  console.log(`  cd ${projectDir}`);
+  console.log(`  npm install`);
+  console.log(`  npm run dev`);
+}
+/**
+ * Initialize an Angular project with Mycelia bindings
+ */
+function initAngularProject(projectName) {
+  const projectDir = projectName;
+  if (existsSync(projectDir)) {
+    console.error(`Error: Directory already exists: ${projectDir}`);
+    process.exit(1);
+  }
+  console.log(`Creating Angular project: ${projectName}...`);
+  console.log(`\nNote: This creates a basic Angular project structure.`);
+  console.log(`You may need to run 'ng new' separately for a full Angular CLI setup.`);
+  // Create directory structure
+  mkdirSync(projectDir, { recursive: true });
+  mkdirSync(join(projectDir, 'src'), { recursive: true });
+  mkdirSync(join(projectDir, 'src/app'), { recursive: true });
+  mkdirSync(join(projectDir, 'src/app/services'), { recursive: true });
+  mkdirSync(join(projectDir, 'src/app/components'), { recursive: true });
+  mkdirSync(join(projectDir, 'src/mycelia'), { recursive: true });
+  // Create package.json
+  const packageJson = {
+    name: projectName,
+    version: '1.0.0',
+    type: 'module',
+    scripts: {
+      start: 'ng serve',
+      build: 'ng build',
+      test: 'ng test'
+    },
+    dependencies: {
+      'mycelia-kernel-plugin': '^1.3.0',
+      '@angular/core': '^17.0.0',
+      '@angular/common': '^17.0.0',
+      'rxjs': '^7.8.0'
+    },
+    devDependencies: {
+      '@angular/cli': '^17.0.0',
+      '@angular/compiler-cli': '^17.0.0',
+      'typescript': '^5.0.0'
+    }
+  };
+  writeFileSync(
+    join(projectDir, 'package.json'),
+    JSON.stringify(packageJson, null, 2),
+    'utf8'
+  );
+  // Create Mycelia service
+  const myceliaService = `import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { createMyceliaService } from 'mycelia-kernel-plugin/angular';
+import { buildSystem } from '../mycelia/system.builder.js';
+@Injectable({ providedIn: 'root' })
+export class MyceliaService {
+  private service = createMyceliaService(buildSystem);
+  get system$(): Observable<any> {
+    return this.service.system$;
+  }
+  getSystem() {
+    return this.service.getSystem();
+  }
+  useFacet(kind: string) {
+    return this.service.useFacet(kind);
+  }
+  useListener(eventName: string, handler: Function) {
+    return this.service.useListener(eventName, handler);
+  }
+  async dispose() {
+    await this.service.dispose();
+  }
+}
+`;
+  writeFileSync(join(projectDir, 'src/app/services/mycelia.service.ts'), myceliaService, 'utf8');
+  // Create system builder
+  const systemBuilder = `import { useBase } from 'mycelia-kernel-plugin';
+import { useListeners } from 'mycelia-kernel-plugin';
+export async function buildSystem() {
+  return useBase('${projectName}')
+    .use(useListeners)
+    .build();
+}
+`;
+  writeFileSync(join(projectDir, 'src/mycelia/system.builder.ts'), systemBuilder, 'utf8');
+  // Create README
+  const readme = `# ${projectName}
+An Angular application built with Mycelia Plugin System.
+## Getting Started
+\`\`\`bash
+npm install
+ng serve
+\`\`\`
+## Structure
+- \`src/app/services/\` - Angular services (including MyceliaService)
+- \`src/app/components/\` - Angular components
+- \`src/mycelia/\` - Mycelia plugin code (framework-agnostic)
+`;
+  writeFileSync(join(projectDir, 'README.md'), readme, 'utf8');
+  console.log(`✅ Angular project created: ${projectDir}`);
+  console.log(`\nNext steps:`);
+  console.log(`  cd ${projectDir}`);
+  console.log(`  npm install`);
+  console.log(`  ng serve`);
+}
+/**
+ * Initialize a Qwik project with Mycelia bindings
+ */
+function initQwikProject(projectName) {
+  const projectDir = projectName;
+  if (existsSync(projectDir)) {
+    console.error(`Error: Directory already exists: ${projectDir}`);
+    process.exit(1);
+  }
+  console.log(`Creating Qwik project: ${projectName}...`);
+  // Create directory structure
+  mkdirSync(projectDir, { recursive: true });
+  mkdirSync(join(projectDir, 'src'), { recursive: true });
+  mkdirSync(join(projectDir, 'src/components'), { recursive: true });
+  mkdirSync(join(projectDir, 'src/mycelia'), { recursive: true });
+  // Create package.json
+  const packageJson = {
+    name: projectName,
+    version: '1.0.0',
+    type: 'module',
+    scripts: {
+      dev: 'vite',
+      build: 'vite build',
+      preview: 'vite preview'
+    },
+    dependencies: {
+      'mycelia-kernel-plugin': '^1.3.0',
+      '@builder.io/qwik': '^1.0.0',
+      '@builder.io/qwik-city': '^1.0.0'
+    },
+    devDependencies: {
+      'vite': '^5.0.0',
+      '@vitejs/plugin-qwik': '^1.0.0'
+    }
+  };
+  writeFileSync(
+    join(projectDir, 'package.json'),
+    JSON.stringify(packageJson, null, 2),
+    'utf8'
+  );
+  // Create App component
+  const appComponent = `import { component$ } from '@builder.io/qwik';
+import { MyceliaProvider } from 'mycelia-kernel-plugin/qwik';
+import { buildSystem } from './mycelia/system.builder.js';
+import { TodoApp } from './components/TodoApp';
+export default component$(() => {
+  return (
+    <MyceliaProvider build={buildSystem}>
+      <TodoApp />
+    </MyceliaProvider>
+  );
+});
+`;
+  writeFileSync(join(projectDir, 'src/App.tsx'), appComponent, 'utf8');
+  // Create system builder
+  const systemBuilder = `import { useBase } from 'mycelia-kernel-plugin';
+import { useListeners } from 'mycelia-kernel-plugin';
+export async function buildSystem() {
+  return useBase('${projectName}')
+    .use(useListeners)
+    .build();
+}
+`;
+  writeFileSync(join(projectDir, 'src/mycelia/system.builder.ts'), systemBuilder, 'utf8');
+  // Create example component
+  const todoComponent = `import { component$ } from '@builder.io/qwik';
+import { useFacet, useListener } from 'mycelia-kernel-plugin/qwik';
+export const TodoApp = component$(() => {
+  const todos = useFacet('todos');
+  useListener('todos:changed', (msg) => {
+    console.log('Todos changed:', msg.body);
+  });
+  return (
+    <div>
+      <h1>Todo App</h1>
+      {todos.value && <p>Todos facet loaded</p>}
+    </div>
+  );
+});
+`;
+  writeFileSync(join(projectDir, 'src/components/TodoApp.tsx'), todoComponent, 'utf8');
+  // Create README
+  const readme = `# ${projectName}
+A Qwik application built with Mycelia Plugin System.
+## Getting Started
+\`\`\`bash
+npm install
+npm run dev
+\`\`\`
+## Structure
+- \`src/components/\` - Qwik components
+- \`src/mycelia/\` - Mycelia plugin code (framework-agnostic)
+`;
+  writeFileSync(join(projectDir, 'README.md'), readme, 'utf8');
+  console.log(`✅ Qwik project created: ${projectDir}`);
+  console.log(`\nNext steps:`);
+  console.log(`  cd ${projectDir}`);
+  console.log(`  npm install`);
+  console.log(`  npm run dev`);
+}
 /**
  * Show help message
  */
@@ -381,13 +1137,23 @@ Usage:
 Commands:
   create hook <name>      Create a new hook file
   create contract <name>  Create a new contract file
-  init [name]             Initialize a new project
+  init [name]             Initialize a new project (vanilla JS)
+  init react [name]       Initialize a React project with Mycelia bindings
+  init vue [name]         Initialize a Vue 3 project with Mycelia bindings
+  init svelte [name]      Initialize a Svelte project with Mycelia bindings
+  init angular [name]     Initialize an Angular project with Mycelia bindings
+  init qwik [name]        Initialize a Qwik project with Mycelia bindings
   help                    Show this help message
 Examples:
   mycelia-kernel-plugin create hook database
   mycelia-kernel-plugin create contract database
   mycelia-kernel-plugin init my-app
+  mycelia-kernel-plugin init react my-react-app
+  mycelia-kernel-plugin init vue my-vue-app
+  mycelia-kernel-plugin init svelte my-svelte-app
+  mycelia-kernel-plugin init angular my-angular-app
+  mycelia-kernel-plugin init qwik my-qwik-app
 For more information, visit:
   https://github.com/lesfleursdelanuitdev/mycelia-kernel-plugin-system