@dxos/plugin-template 0.6.7 → 0.6.8-main.046e6cf

package/src/.npmignore.t.ts

@@ -1,5 +0,0 @@
-import template from './template.t';
-
-export default template.define.text({
-  content: `composer`
-})

package/src/README.md.t.ts

@@ -1,22 +0,0 @@
-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/composer/config.ts.t.ts

@@ -1,11 +0,0 @@
-import { plate } from '@dxos/plate';
-import template from '../template.t';
-
-export default template.define.script({
-  content: ({ input: { defaultPlugins } }) => defaultPlugins && plate/* javascript */ `
-    import { Config, Defaults, Envs, Local, Storage } from '@dxos/config';
-    export const createConfig = async () => {
-      return new Config(await Storage(), Envs(), Local(), Defaults());
-    };
-  `,
-});

package/src/composer/dx.yml

@@ -1,11 +0,0 @@
-version: 1
-runtime:
-  client:
-    storage:
-      persistent: true
-  services:
-    signaling: [server: wss://kube.dxos.org/.well-known/dx/signal]
-    ice:
-      - urls: turn:kube.dxos.org:3478
-        username: dxos
-        credential: dxos

package/src/composer/index.html

@@ -1,50 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" style="overscroll-behavior: none">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,interactive-widget=resizes-content" />
-    <title>Composer</title>
-    <meta name="description" content="DXOS Composer Application" />
-    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
-    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#003E70" />
-    <meta name="msapplication-TileColor" content="#003E70" />
-    <meta name="theme-color" content="#003E70" />
-    <meta
-      http-equiv="Content-Security-Policy"
-      content="
-        connect-src https: file: ipc: socket: wss://*.dxos.org ws://localhost:* http://localhost:*;
-        script-src https: socket: http://localhost:* 'unsafe-eval' 'unsafe-inline';
-        frame-src https: socket: http://localhost:* composer:;
-        worker-src https: socket: http://localhost:*;
-        img-src https: data: file: http://localhost:*;
-        child-src 'none';
-        object-src 'none';
-      "
-    />
-    <script>
-      function setTheme(darkMode) {
-        document.documentElement.classList[darkMode ? 'add' : 'remove']('dark');
-      }
-      setTheme(window.matchMedia('(prefers-color-scheme: dark)').matches);
-      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function (event) {
-        setTheme(event.matches);
-      });
-    </script>
-    <style>
-      html {
-        font-size: 18px;
-      }
-      @media (min-width: 768px) {
-        html {
-          font-size: 16px;
-        }
-      }
-    </style>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="main.tsx"></script>
-  </body>
-</html>

package/src/composer/main.tsx.t.ts

@@ -1,118 +0,0 @@
-import template from '../template.t';
-import { plate } from '@dxos/plate';
-
-export default template.define.script({
-  content: ({ input: { defaultPlugins } }) => plate/* javascript */ `
-    import "@dxosTheme";
-
-    import React from "react";
-    import { registerSignalRuntime } from '@dxos/echo-signals';
-    import { Status, ThemeProvider, Tooltip } from "@dxos/react-ui";
-    import { defaultTx } from "@dxos/react-ui-theme";
-    import { createApp, Plugin } from "@dxos/app-framework";
-    import { createRoot } from "react-dom/client";
-    import translations from "./translations";
-    
-    import ThemeMeta from "@braneframe/plugin-theme/meta";
-    ${
-      defaultPlugins &&
-      plate/* javascript */ `
-    import ClientMeta from "@braneframe/plugin-client/meta";
-    import GraphMeta from "@braneframe/plugin-graph/meta";
-    import DeckMeta from "@braneframe/plugin-deck/meta";
-    import NavTreeMeta from "@braneframe/plugin-navtree/meta";
-    import SpaceMeta from "@braneframe/plugin-space/meta";
-    import StackMeta from "@braneframe/plugin-stack/meta";
-    import SettingsMeta from "@braneframe/plugin-settings/meta";
-    import MetadataMeta from "@braneframe/plugin-metadata/meta";
-    
-    import { createClientServices } from "@dxos/react-client";
-    import { createConfig } from "./config";
-    `
-    }
-    
-    import { meta } from "../src/plugin";
-    
-    (async function () {
-      registerSignalRuntime();
-
-      ${
-        defaultPlugins &&
-        plate/* javascript */ `
-        const config = await createConfig();
-        const services = await createClientServices(
-          config,
-          // () =>
-          //   new SharedWorker(new URL("@dxos/client/shared-worker", import.meta.url), {
-          //     type: "module",
-          //     name: "dxos-client-worker",
-          //   })
-        );`
-      }
-      const App = createApp({
-        fallback: ({ error }) => (
-          <ThemeProvider tx={defaultTx} resourceExtensions={translations}>
-            <Tooltip.Provider>
-              <div className="flex bs-[100dvh] justify-center items-center p-6 text-red-500">
-                {error.message}
-              </div>
-            </Tooltip.Provider>
-          </ThemeProvider>
-        ),
-        placeholder: (
-          <ThemeProvider tx={defaultTx}>
-            <div className="flex bs-[100dvh] justify-center items-center">
-              <Status indeterminate aria-label="Initializing" placeholder="" />
-            </div>
-          </ThemeProvider>
-        ),
-        plugins: {
-          [ThemeMeta.id]: Plugin.lazy(() => import("@braneframe/plugin-theme"), {
-            appName: "Composer",
-          }),
-          ${
-            defaultPlugins &&
-            plate/* javascript */ `
-          [DeckMeta.id]: Plugin.lazy(() => import("@braneframe/plugin-deck")),
-          [NavTreeMeta.id]: Plugin.lazy(() => import("@braneframe/plugin-navTree")),
-          [SettingsMeta.id]: Plugin.lazy(() => import("@braneframe/plugin-settings")),
-          [ClientMeta.id]: Plugin.lazy(() => import("@braneframe/plugin-client"), {
-            appKey: "composer.local",
-            config,
-            services,
-            shell: "./shell.html",
-          }),
-          [SpaceMeta.id]: Plugin.lazy(() => import("@braneframe/plugin-space")),
-          [GraphMeta.id]: Plugin.lazy(() => import("@braneframe/plugin-graph")),
-          [MetadataMeta.id]: Plugin.lazy(
-            () => import("@braneframe/plugin-metadata")
-          ),
-          [StackMeta.id]: Plugin.lazy(() => import("@braneframe/plugin-stack")),
-          `
-          }
-          [meta.id]: Plugin.lazy(() => import("../src/plugin")),
-        },
-        order: [
-          // Outside of error boundary so error dialog is styled.
-          ThemeMeta,
-          ${
-            defaultPlugins &&
-            plate/* javascript */ `
-          DeckMeta,
-          NavTreeMeta,
-          SettingsMeta,
-          ClientMeta,
-          SpaceMeta,
-          GraphMeta,
-          MetadataMeta,
-          StackMeta,
-          `
-          }
-          meta,
-        ],
-      });
-      
-      createRoot(document.getElementById("root")!).render(<App />);
-    })();
-  `,
-});

package/src/composer/shell.html.t.ts

@@ -1,44 +0,0 @@
-import { plate } from '@dxos/plate';
-import template from '../template.t';
-
-export default template.define.text({
-  content: ({ input: { defaultPlugins } }) => defaultPlugins && plate`
-  <!DOCTYPE html>
-  <html lang="en">
-    <head>
-      <meta charset="UTF-8" />
-      <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
-      <meta
-        http-equiv="Content-Security-Policy"
-        content="
-          connect-src https: file: ipc: socket: ws://localhost:* http://localhost:*;
-          script-src https: socket: http://localhost:* 'unsafe-eval' 'unsafe-inline';
-          img-src https: data: file: http://localhost:*;
-          child-src 'none';
-          object-src 'none';
-        "
-      />
-      <style>
-        html,
-        body {
-          background: transparent !important;
-        }
-      </style>
-      <!-- TODO(wittjosiah): Add hash/nonce and remove unsafe-inline from content security policy. -->
-      <script>
-        function setTheme(darkMode) {
-          document.documentElement.classList[darkMode ? 'add' : 'remove']('dark');
-        }
-        setTheme(window.matchMedia('(prefers-color-scheme: dark)').matches);
-        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function (e) {
-          setTheme(e.matches);
-        });
-      </script>
-    </head>
-    <body>
-      <div id="root"></div>
-      <script type="module" src="shell.ts"></script>
-    </body>
-  </html>  
-  `
-});

package/src/composer/shell.ts.t.ts

@@ -1,13 +0,0 @@
-import { plate } from '@dxos/plate';
-import template from '../template.t';
-
-export default template.define.script({
-  content: ({ input: { defaultPlugins } }) => defaultPlugins && plate/* javascript */`
-    import '@dxosTheme';
-    import { runShell } from '@dxos/shell/react';
-    import { createConfig } from './config';
-
-    // eslint-disable-next-line no-console
-    createConfig().then(runShell).catch(console.error);
-  `
-})

package/src/composer/translations.ts

@@ -1,28 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-export default [
-  {
-    'en-US': {
-      composer: {
-        'show stack label': 'View stack trace',
-        'fatal error title': 'The app encountered an error',
-        'fatal error message':
-          'Please refresh the page to continue. If you keep seeing this error, please create a GitHub issue or ask for help on Discord.',
-        'reset dialog label': 'Reload or reset',
-        'reset dialog message':
-          'If you’re encountering issues, reloading may fix the issue. If reloading doesn’t help, consider resetting the app.',
-        'caught error message': 'Something went wrong; check the console for details.',
-        'copy error label': 'Copy this error',
-        'reload page label': 'Reload',
-        'update and reload page label': 'Update',
-        'reset client label': 'Reset',
-        'reset client confirm label': 'Confirm to wipe ALL DATA from local database',
-        'INVALID_STORAGE_VERSION title': 'Invalid storage version',
-        'INVALID_STORAGE_VERSION message':
-          'The application is not compatible with the current storage version. The data must be migrated to the new protocol in order to be used with this application. The current version is {{actual}} and the expected version is {{expected}}.',
-      },
-    },
-  },
-];

package/src/package.json.t.ts

@@ -1,116 +0,0 @@
-//
-// 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 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-deck': 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',
-      serve: '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,
-    },
-  };
-};
-
-const loadFromPackageRoot = async (moduleRelativePath: string) => {
-  const stepOut = __filename.endsWith('.ts') ? '../' : '../../';
-  const content = await fs.readFile(path.resolve(__dirname, stepOut, moduleRelativePath));
-  return JSON.parse(content.toString());
-};
-
-export default template.define
-  .slots<{ packageJson?: Slot<Partial<PackageJson>, InputOf<typeof template>, { depVersion?: string }> }>({
-    packageJson: {},
-  })
-  .text({
-    content: async ({ input, slots: { packageJson: slotPackageJson } }) => {
-      // TODO(wittjosiah): Importing directly causes package.json to be included in the output.
-      //   Including package.json in the output causes syncpack to fail sometimes.
-      //   Upgrading syncpack will likely fix this but this is simpler for now.
-      const ownPackageJson = await loadFromPackageRoot('package.json');
-      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

@@ -1,7 +0,0 @@
-//
-// 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

@@ -1,63 +0,0 @@
-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: (plugins) => [],
-          },
-          translations: [
-            {
-              'en-US': {
-                [PLUGIN_ID]: {
-                  'plugin name': 'Template',
-                },
-              },
-            },
-          ],
-        },
-      };
-    };
-    export default plugin;
-  `,
-});

package/src/template.t.ts

@@ -1,40 +0,0 @@
-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 serve
-
-    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

@@ -1,17 +0,0 @@
-{
-  "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

@@ -1,7 +0,0 @@
-//
-// 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

@@ -1,65 +0,0 @@
-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: 'composer',
-        build: { outDir: "composer/out", target: "esnext" },
-        optimizeDeps: { esbuildOptions: { target: "esnext" } },
-        plugins: [
-          react(),
-          ThemePlugin({
-            root: __dirname + '/composer',
-            content: [
-              resolve(__dirname, "./composer/index.html"),
-              resolve(__dirname, "./src/**/*.{js,ts,jsx,tsx}"),
-              resolve(__dirname, "./composer/**/*.{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

@@ -1,20 +0,0 @@
-//
-// 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,
-  },
-];