@dxos/plugin-template 0.4.7-main.4d8eb56

package/project.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "../../../../node_modules/nx/schemas/project-schema.json",
+  "name": "plugin-template",
+  "sourceRoot": "packages/apps/templates/plugin-template/src",
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "options": {
+        "main": "packages/apps/templates/plugin-template/src/config.t.ts",
+        "outputPath": "packages/apps/templates/plugin-template/dist",
+        "tsConfig": "packages/apps/templates/plugin-template/tsconfig.json"
+      }
+    },
+    "lint": {},
+    "test": {
+      "options": {
+        "checkLeaks": false,
+        "ciEnvironments": [
+          "nodejs"
+        ],
+        "forceExit": true
+      }
+    }
+  }
+}

package/src/README.md.t.ts

@@ -0,0 +1,22 @@
+import { plate } from '@dxos/plate';
+import template from './template.t';
+
+export default template.define.text({
+  content: ({ input: { name } }) => plate`
+    # ${name}
+
+    This app was created with a DXOS application template.
+
+    Run the app with \`npm\`:
+    \`\`\`bash
+    npm install
+    npm run dev
+    \`\`\`
+
+    > Warning: pnpm is not supported for now, please use npm. (issue locating css in node_modules).
+
+    - [📚 Composer Documentation](https://docs.dxos.org/composer/)
+    - [📚 Using ECHO with React](https://docs.dxos.org/guide/react)
+    - [📚 DXOS Documentation](https://docs.dxos.org)
+  `
+});

package/src/package.json.t.ts

@@ -0,0 +1,107 @@
+//
+// Copyright 2022 DXOS.org
+//
+import path from 'path';
+import { promises as fs } from 'fs';
+import { InputOf, Slot } from '@dxos/plate';
+import { PackageJson } from './utils.t/packageJson';
+import ownPackageJson from '../package.json';
+import merge from 'lodash.merge';
+
+import template from './template.t';
+
+type Context = { version: string; frameworkVersion: string } & InputOf<typeof template>;
+
+export namespace Features {
+  export const react = (): Partial<PackageJson> => ({
+    dependencies: {
+      react: '^18.2.0',
+      'react-dom': '^18.2.0',
+    },
+    devDependencies: {
+      '@types/react': '~18.2.0',
+      '@types/react-dom': '~18.2.0',
+      '@vitejs/plugin-react': '^4.2.1',
+    },
+  });
+
+  export const dxosUi = ({ frameworkVersion }: Context): Partial<PackageJson> => ({
+    dependencies: {
+      '@phosphor-icons/react': '^2.0.5',
+    },
+    devDependencies: {
+      '@dxos/react-ui': '^' + frameworkVersion,
+      '@dxos/react-ui-theme': '^' + frameworkVersion,
+    },
+  });
+
+  export const defaultPlugins = ({ frameworkVersion }: Context): Partial<PackageJson> => ({
+    devDependencies: {
+      'vite-plugin-wasm': '^3.3.0',
+      'vite-plugin-top-level-await': '^1.3.1',
+      '@dxos/react-client': '^' + frameworkVersion,
+      '@dxos/config': '^' + frameworkVersion,
+      '@dxos/shell': '^' + frameworkVersion,
+      '@braneframe/plugin-space': '^' + frameworkVersion,
+      '@braneframe/plugin-navtree': '^' + frameworkVersion,
+      '@braneframe/plugin-layout': '^' + frameworkVersion,
+      '@braneframe/plugin-graph': '^' + frameworkVersion,
+      '@braneframe/plugin-client': '^' + frameworkVersion,
+      '@braneframe/plugin-stack': '^' + frameworkVersion,
+      '@braneframe/plugin-metadata': '^' + frameworkVersion,
+      '@braneframe/plugin-settings': '^' + frameworkVersion,
+    },
+  });
+}
+
+export const base = ({ name, version, frameworkVersion }: Context): Partial<PackageJson> => {
+  return {
+    name,
+    version: version,
+    description: `${name} - a composer plugin`,
+    private: true,
+    main: 'dist/index.js',
+    types: 'dist/index.d.ts',
+    scripts: {
+      build: 'tsc',
+      dev: 'vite',
+    },
+    dependencies: {
+      '@preact/signals-react': '^1.3.6',
+      '@dxos/app-framework': `^${frameworkVersion}`,
+    },
+    devDependencies: {
+      '@types/node': '^18.11.9',
+      vite: '^5.1.3',
+      typescript: '^5.0.4',
+      '@braneframe/plugin-theme': `^${frameworkVersion}`,
+    },
+  };
+};
+
+export default template.define
+  .slots<{ packageJson?: Slot<Partial<PackageJson>, InputOf<typeof template>, { depVersion?: string }> }>({
+    packageJson: {},
+  })
+  .text({
+    content: async ({ input, slots: { packageJson: slotPackageJson } }) => {
+      const context = {
+        version: '0.0.1',
+        frameworkVersion: ownPackageJson.version,
+        ...input,
+      };
+
+      const [first, ...rest] = [
+        base(context),
+        Features.react(),
+        Features.dxosUi(context),
+        input.defaultPlugins && Features.defaultPlugins(context),
+        slotPackageJson?.() ?? {},
+      ].filter(Boolean);
+
+      const packageJson = merge(first, ...rest);
+
+      const result = JSON.stringify(packageJson, null, 2);
+      return result;
+    },
+  });

package/src/src/index.ts.t.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import template from '../template.t';
+
+export default template.define.text({ content: "export * from './plugin';" });

package/src/src/plugin.tsx.t.ts

@@ -0,0 +1,63 @@
+import { plate } from "@dxos/plate";
+import template from "../template.t";
+
+export default template.define.script({
+  content: ({ input: { name }, imports }) => plate/* javascript */`
+    ${imports}
+    import React from 'react';
+    import { Asterisk } from '@phosphor-icons/react';
+
+    import {
+      PluginDefinition,
+      type SurfaceProvides,
+      type GraphBuilderProvides,
+      type IntentResolverProvides,
+      type TranslationsProvides,
+      pluginMeta,
+    } from '@dxos/app-framework';
+
+    export const PLUGIN_ID = '${name}';
+    
+    export const meta = pluginMeta({
+      id: PLUGIN_ID,
+      name: "",
+      iconComponent: Asterisk,
+    });
+
+    export type TemplatePluginProvides = SurfaceProvides &
+      IntentResolverProvides &
+      GraphBuilderProvides &
+      TranslationsProvides & {};
+
+    /**
+     * See https://docs.dxos.org/composer/plugins/definition
+     */
+    const plugin = (): PluginDefinition<TemplatePluginProvides> => {
+      return { 
+        meta,
+        provides: {
+          root: () => null,
+          surface: {
+            component: ({ data, role }) => null,
+          },
+          intent: {
+            resolver: (intent) => {},
+          },
+          graph: {
+            builder: ({ parent, plugins }) => {},
+          },
+          translations: [
+            {
+              'en-US': {
+                [PLUGIN_ID]: {
+                  'plugin name': 'Template',
+                },
+              },
+            },
+          ],
+        },
+      };
+    };
+    export default plugin;
+  `
+})

package/src/template.t.ts

@@ -0,0 +1,40 @@
+import { z, plate, interactiveDirectory } from '@dxos/plate';
+import sanitize from 'sanitize-filename';
+import path from 'path';
+import chalk from 'chalk';
+
+export default interactiveDirectory({
+  src: __filename.endsWith('.ts') ? __dirname : path.resolve(__dirname, '../../src'),
+  inputShape: z.object({
+    name: z.string().describe('Name the new package').default(path.basename(process.cwd())),
+    createFolder: z.boolean().describe('Create a new folder for the project').default(true),
+    defaultPlugins: z.boolean().describe('Include default plugins').default(true),
+  }),
+  options({ input, outputDirectory, ...rest }) {
+    const { name, createFolder } = {...input};
+    return {
+      input,
+      outputDirectory: createFolder ? path.resolve(outputDirectory, sanitize(name ?? '')) : outputDirectory,
+      ...rest,
+    };
+  },
+  after({ outputDirectory, input: { name } }) {
+    const cwd = process.cwd();
+    const relative = path.relative(cwd, outputDirectory);
+    console.log(plate`
+    
+    Plugin ${chalk.green(chalk.bold(name))} created.
+
+    Run the app:
+    ${!!relative && `$ cd ${relative}`}
+    $ npm install
+    $ npm run dev
+
+    See also:
+    - ${path.join(relative, 'README.md')}
+
+    Warning:
+    - pnpm is not supported for now, please use npm. (issue locating css in node_modules).
+    `);
+  },
+});

package/src/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "jsx": "react",
+    "emitDeclarationOnly": false,
+    "lib": ["DOM", "ESNext"],
+    "module": "ESNext",
+    "outDir": "dist",
+    "skipLibCheck": true,
+    "types": ["node"],
+    "moduleResolution": "node",
+    "isolatedModules": true,
+    "target": "ES2018"
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist", "vite.config.ts"]
+}

package/src/utils.t/packageJson.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type PackageJson as _PackageJson } from 'types-package-json';
+
+export type PackageJson = _PackageJson & { private: boolean; types: string };

package/src/vite.config.ts.t.ts

@@ -0,0 +1,72 @@
+import template from './template.t';
+import { plate } from '@dxos/plate';
+
+export default template.define.script({
+  content: ({ input: { defaultPlugins } }) => {
+    return plate/* javascript */`
+      import { defineConfig } from "vite";
+      import { resolve } from "path";
+      import react from "@vitejs/plugin-react";
+      import { ThemePlugin } from "@dxos/react-ui-theme/plugin";
+    
+      ${defaultPlugins && plate/* javascript */`
+      import { ConfigPlugin } from "@dxos/config/vite-plugin";
+      import TopLevelAwaitPlugin from 'vite-plugin-top-level-await';
+      import WasmPlugin from 'vite-plugin-wasm';
+      `}
+      
+      // https://vitejs.dev/config/
+      export default defineConfig({
+        server: {
+          host: true,
+        },
+        root: 'dev',
+        build: { outDir: "dev/out", target: "esnext" },
+        optimizeDeps: { esbuildOptions: { target: "esnext" } },
+        define: {
+          process: {
+            env: {
+              NODE_ENV: JSON.stringify(process.env.NODE_ENV),
+            },
+          },
+        },
+        plugins: [
+          react(),
+          ThemePlugin({
+            root: __dirname + '/dev',
+            content: [
+              resolve(__dirname, "./dev/index.html"),
+              resolve(__dirname, "./src/**/*.{js,ts,jsx,tsx}"),
+              resolve(__dirname, "./dev/**/*.{js,ts,jsx,tsx}"),
+              ${defaultPlugins && plate/* javascript */`
+              resolve(__dirname, "node_modules/@dxos/react-ui/dist/**/*.mjs"),
+              resolve(__dirname, "node_modules/@dxos/react-ui-theme/dist/**/*.mjs"),
+              resolve(
+                __dirname,
+                "node_modules/@dxos/react-ui-mosaic/dist/lib/**/*.mjs"
+              ),
+              resolve(
+                __dirname,
+                "node_modules/@dxos/react-ui-stack/dist/lib/**/*.mjs"
+              ),
+              resolve(
+                __dirname,
+                "node_modules/@dxos/react-ui-navtree/dist/lib/**/*.mjs"
+              ),
+              resolve(
+                __dirname,
+                "node_modules/@braneframe/plugin-*/dist/lib/**/*.mjs"
+              ),
+              `}
+            ],
+          }),
+          ${defaultPlugins && plate/* javascript */`
+          ConfigPlugin(),
+          TopLevelAwaitPlugin(),
+          WasmPlugin(),
+          `}
+        ],
+      });
+    `
+  }
+})

package/test/scenarios.ts

@@ -0,0 +1,20 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type InputOf } from '@dxos/plate';
+
+import type template from '../src/template.t';
+
+export const scenarios: InputOf<typeof template>[] = [
+  {
+    name: 'default',
+    createFolder: true,
+    defaultPlugins: true,
+  },
+  {
+    name: 'default-bare',
+    createFolder: true,
+    defaultPlugins: false,
+  },
+];

package/test/template.test.ts

@@ -0,0 +1,40 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import chai, { expect } from 'chai';
+import chaiAsPromised from 'chai-as-promised';
+import path from 'path';
+import tmp from 'tmp-promise';
+
+import { scenarios } from './scenarios';
+import packageJson from '../package.json';
+import template from '../src/template.t';
+
+chai.use(chaiAsPromised);
+
+describe('plugin template', () => {
+  it('exists', () => {
+    expect(true).to.be.true;
+  });
+
+  it('execute with permuted inputs', async () => {
+    console.log('executing', scenarios.length, 'scenarios...');
+    const tempFolder = await tmp.dir({ unsafeCleanup: false, keep: true, prefix: 'plugin-template' });
+
+    const promises = scenarios.map(async (scenario) => {
+      const outputDirectory = path.resolve(tempFolder.path);
+
+      const results = await template.apply({
+        input: { ...scenario, name: `${packageJson.name.split('/')[1]}-${scenario.name}` },
+        outputDirectory,
+        after: false, // do not print messages
+      });
+
+      return await results.apply();
+    });
+    await Promise.all(promises);
+    console.log('done executing scenarios');
+    console.log(`temp folder: ${tempFolder.path}`);
+  });
+});

package/tsconfig.json

@@ -0,0 +1,40 @@
+{
+  "extends": "../../../../tsconfig.json",
+  "compilerOptions": {
+    "emitDeclarationOnly": false,
+    "lib": [
+      "DOM",
+      "ESNext"
+    ],
+    "outDir": "dist",
+    "types": [
+      "@dxos/test",
+      "node"
+    ]
+  },
+  "exclude": [
+    "dist",
+    "node_modules"
+  ],
+  "include": [
+    "package.json",
+    "src",
+    "src/.storybook/*",
+    "src/.vscode/*",
+    "test"
+  ],
+  "references": [
+    {
+      "path": "../../../common/plate"
+    },
+    {
+      "path": "../../../sdk/app-framework"
+    },
+    {
+      "path": "../../../sdk/config"
+    },
+    {
+      "path": "../../../sdk/shell"
+    }
+  ]
+}

package/tsconfig.plate.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "rootDir": "../../.."
+  },
+  "include": [
+    "apps/templates/plugin-template/**/*.t.ts",
+    "apps/templates/plugin-template/package.json",
+    "./tsconfig.json"
+  ]
+}