@ynput/ayon-addon-dev 0.0.0-stage → 0.1.1

package/dist/shell/style.css

@@ -0,0 +1,416 @@
+html,
+body,
+#root {
+  height: 100%;
+  margin: 0;
+}
+body {
+  background: var(--md-sys-color-surface-container-lowest);
+  color: var(--md-sys-color-on-surface);
+  font-family: 'Nunito Sans', sans-serif;
+  font-size: 14px;
+  overflow: hidden;
+}
+main {
+  display: flex;
+  flex: 1;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+/* AYON's own full-page layouts (the login page), as in its index.scss */
+main.center {
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.ayon-shell.p-splitter {
+  height: 100%;
+  border: none;
+  border-radius: 0;
+  background: none;
+}
+.ayon-shell-panel {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  background: var(--md-sys-color-surface-container-low);
+}
+.ayon-shell-panel-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  flex-shrink: 0;
+  border-bottom: 1px solid var(--md-sys-color-outline-variant);
+}
+.ayon-shell-panel-header > .icon {
+  font-size: 22px;
+  color: var(--md-sys-color-primary);
+}
+.ayon-shell-panel-header > div {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.ayon-shell-panel-header strong span {
+  font-weight: normal;
+  color: var(--md-sys-color-outline);
+}
+.ayon-shell-panel-header small {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: var(--md-sys-color-outline);
+}
+/* AYON's gutters are transparent: the darker background behind them sets the halves apart */
+.ayon-shell-panel-split.p-splitter {
+  flex: 1;
+  min-height: 0;
+  border: none;
+  border-radius: 0;
+  background: var(--md-sys-color-surface-container-lowest);
+}
+/* each half scrolls on its own; a long half scrolls instead of squeezing its parts
+   (.p-splitter: AYON's theme makes splitter panels transparent) */
+.p-splitter > .ayon-shell-section {
+  background: var(--md-sys-color-surface-container-low);
+}
+.ayon-shell-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+  padding: 12px;
+  overflow: auto;
+}
+.ayon-shell-section .ayon-addon-error {
+  overflow-wrap: anywhere;
+}
+.ayon-shell-section > * {
+  flex-shrink: 0;
+}
+.ayon-shell-panel h3 {
+  margin: 4px 0 0;
+  font-size: 12px;
+  text-transform: uppercase;
+  color: var(--md-sys-color-outline);
+}
+.ayon-shell-panel code {
+  font-size: 11px;
+  color: var(--md-sys-color-outline);
+}
+.ayon-shell-note {
+  color: var(--md-sys-color-outline);
+}
+/* contributions: an area of AYON, its slots (with the part of the area), one line each */
+.ayon-shell-area {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 4px;
+}
+.ayon-shell-area + .ayon-shell-area {
+  padding-top: 4px;
+  border-top: 1px solid var(--md-sys-color-outline-variant);
+}
+.ayon-shell-area-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 32px;
+  padding: 0 8px;
+  border: none;
+  border-radius: 4px;
+  background: none;
+  color: inherit;
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+}
+.ayon-shell-area-header:hover {
+  background: var(--md-sys-color-surface-container-high);
+}
+.ayon-shell-area-header .icon {
+  font-size: 18px;
+  color: var(--md-sys-color-outline);
+}
+.ayon-shell-area-header small {
+  margin-left: auto;
+  font-weight: normal;
+  color: var(--md-sys-color-outline);
+}
+.ayon-shell-slot {
+  display: flex;
+  flex-direction: column;
+}
+.ayon-shell-slot-label {
+  padding: 6px 8px 2px 34px;
+  font-size: 12px;
+  color: var(--md-sys-color-outline);
+  cursor: help;
+}
+.ayon-shell-slot-label span::after {
+  content: ' › ';
+}
+.ayon-shell-panel .contribution {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 30px;
+  padding: 0 8px 0 34px;
+  border: none;
+  border-radius: 4px;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.ayon-shell-panel .contribution span {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.ayon-shell-panel .contribution .icon {
+  font-size: 18px;
+  color: var(--md-sys-color-outline);
+}
+.ayon-shell-panel .contribution:hover {
+  background: var(--md-sys-color-surface-container-high);
+}
+.ayon-shell-panel .contribution.selected {
+  background: var(--md-sys-color-primary-container);
+  color: var(--md-sys-color-on-primary-container);
+}
+.ayon-shell-panel .contribution.selected .icon {
+  color: inherit;
+}
+/* the context pickers: a label, then the control */
+.ayon-shell-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.ayon-shell-field {
+  display: grid;
+  grid-template-columns: 64px minmax(0, 1fr);
+  align-items: start;
+  gap: 8px;
+}
+.ayon-shell-field > label {
+  line-height: 32px;
+  color: var(--md-sys-color-outline);
+}
+.ayon-shell-field > div {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+.ayon-shell-entities {
+  display: flex;
+  gap: 4px;
+}
+.ayon-shell-entities > :first-child {
+  flex: 1;
+  min-width: 0;
+}
+.ayon-shell-entity {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  height: 28px;
+  padding-left: 8px;
+  border-radius: 4px;
+  background: var(--md-sys-color-surface-container);
+}
+.ayon-shell-entity span {
+  flex: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.ayon-shell-subheader {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-height: 28px;
+  padding: 0;
+  border: none;
+  background: none;
+  color: var(--md-sys-color-outline);
+  font: inherit;
+  font-size: 12px;
+}
+.ayon-shell-subheader > .label {
+  flex: 1;
+  text-align: left;
+}
+button.ayon-shell-subheader {
+  cursor: pointer;
+}
+.ayon-shell-subheader .icon {
+  font-size: 18px;
+}
+.ayon-shell-passed {
+  display: flex;
+  flex-direction: column;
+}
+.ayon-shell-fixtures {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-top: auto;
+  padding-top: 8px;
+  border-top: 1px solid var(--md-sys-color-outline-variant);
+}
+.ayon-shell-link {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: inherit;
+  text-decoration: none;
+}
+.ayon-shell-link:hover,
+.ayon-shell-link.selected {
+  color: var(--md-sys-color-primary);
+}
+.ayon-shell-link .icon {
+  font-size: 16px;
+}
+.ayon-shell-code {
+  margin: 0;
+  padding: 8px;
+  font-size: 11px;
+  white-space: pre-wrap;
+  word-break: break-all;
+  background: var(--md-sys-color-surface-container-lowest);
+  border-radius: 4px;
+}
+/* a few lines of the context: the whole of it opens in a dialog */
+.ayon-shell-context {
+  position: relative;
+  max-height: 64px;
+  padding: 0;
+  overflow: hidden;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  background: none;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.ayon-shell-context:not(:disabled):hover {
+  border-color: var(--md-sys-color-outline-variant);
+}
+.ayon-shell-context::after {
+  content: '';
+  position: absolute;
+  inset: auto 0 0;
+  height: 24px;
+  background: linear-gradient(transparent, var(--md-sys-color-surface-container-lowest));
+}
+.ayon-shell-stage {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+main.ayon-shell-stage {
+  height: auto;
+}
+/* the shell's line above the stage: not part of AYON, so it looks like the developer panel */
+.ayon-shell-caption {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 16px;
+  flex-shrink: 0;
+  background: var(--md-sys-color-surface-container-low);
+  border-bottom: 1px solid var(--md-sys-color-outline-variant);
+}
+.ayon-shell-caption > .icon {
+  font-size: 22px;
+  color: var(--md-sys-color-outline);
+}
+.ayon-shell-caption-text {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+.ayon-shell-caption-text > div {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+}
+.ayon-shell-caption-text small {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: var(--md-sys-color-outline);
+}
+.ayon-shell-caption-text code {
+  font-size: 11px;
+}
+.ayon-shell-caption-path {
+  color: var(--md-sys-color-outline);
+}
+.ayon-shell-caption-path span + span::before {
+  content: ' › ';
+}
+.ayon-shell-chip {
+  flex-shrink: 0;
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-size: 12px;
+  background: var(--md-sys-color-surface-container-high);
+  color: var(--md-sys-color-outline);
+}
+.ayon-shell-chip.live {
+  background: var(--md-sys-color-primary-container);
+  color: var(--md-sys-color-on-primary-container);
+}
+.ayon-shell-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 48px;
+  padding: 0 8px;
+  flex-shrink: 0;
+  background: var(--md-sys-color-surface-container-low);
+  border-bottom: 1px solid var(--md-sys-color-outline-variant);
+}
+.ayon-shell-bar .spacer {
+  flex: 1;
+}
+.ayon-shell-tabs {
+  display: flex;
+  gap: 4px;
+  padding: 4px 8px;
+  flex-shrink: 0;
+  border-bottom: 1px solid var(--md-sys-color-outline-variant);
+}
+.ayon-shell-body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+.ayon-shell-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+.ayon-shell-table th,
+.ayon-shell-table td {
+  height: 34px;
+  padding: 0 8px;
+  text-align: left;
+  border-bottom: 1px solid var(--md-sys-color-outline-variant);
+}
+.ayon-shell-table tr.selected td {
+  background: var(--md-sys-color-primary-container);
+}

package/dist/standalone.d.ts

@@ -0,0 +1,12 @@
+import type { Plugin } from 'vite';
+import type { AddonProject } from './project.js';
+export declare const STANDALONE_ENV = "AYON_ADDON_STANDALONE";
+interface StandaloneOptions {
+    root: string;
+    project: AddonProject;
+    remote: string;
+    manifest: string;
+    fixtures: string;
+}
+export declare const standalonePlugin: (options: StandaloneOptions) => Plugin;
+export {};

package/dist/standalone.js

@@ -0,0 +1,176 @@
+// `ayon-addon dev` (the default): the Vite dev server (hot reload) with the dev shell from
+// @ynput/ayon-addon-dev/shell instead of the addon's own index.html. AYON's requests go through
+// the dev server to the real server, signed in with the API key; preview fixtures are read and
+// written under dev/fixtures.
+import { existsSync, mkdirSync, readdirSync, readFileSync, writeFileSync } from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { findConnection, findPackageDir } from './project.js';
+export const STANDALONE_ENV = 'AYON_ADDON_STANDALONE';
+const ENTRY = '/@ayon-addon/shell-entry';
+const VIRTUAL_ENTRY = '\0ayon-addon-shell-entry';
+const FIXTURES_URL = '/__ayon-addon/fixtures';
+// what AYON serves itself: proxied to the server
+const PROXIED = ['/api', '/graphql', '/ws', '/addons', '/static', '/AYON.svg'];
+const SHARED = '@ynput/ayon-frontend-shared';
+const DEDUPE = ['@tanstack/react-table'];
+// served from their source: one registry for the addon, the shell and the shared package
+const LINKED = ['@ynput/ayon-addon', '@ynput/ayon-addon-dev'];
+// the built shell next to this file (dist/shell)
+const SHELL_BUNDLE = fileURLToPath(new URL('./shell/index.js', import.meta.url));
+const HTML = (title) => `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="/AYON.svg" />
+    <title>${title}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="${ENTRY}"></script>
+  </body>
+</html>
+`;
+// the global styles AYON loads (src/index.tsx in ayon-frontend), from where the addon has them
+const globalStyles = (root) => {
+    const sharedDir = findPackageDir(root, SHARED);
+    const candidates = [
+        ['@ynput/ayon-react-components', 'dist/style.css'],
+        // the shared components' own styles (the context menu's)
+        [SHARED, 'dist/style.css'],
+        ['react-toastify', 'dist/ReactToastify.css'],
+        ['primereact', 'resources/primereact.min.css'],
+        ['primeicons', 'primeicons.css'],
+    ];
+    return candidates.flatMap(([pkg, file]) => {
+        const dir = findPackageDir(root, pkg) || (sharedDir && findPackageDir(sharedDir, pkg));
+        const css = dir && path.join(dir, file);
+        return css && existsSync(css) ? [css] : [];
+    });
+};
+const packageOf = (id) => id.split('/').slice(0, id.startsWith('@') ? 2 : 1).join('/');
+// the packages the shell imports (its bundle keeps every package import as is)
+const shellImports = (root) => {
+    if (!existsSync(SHELL_BUNDLE))
+        return [];
+    const bundle = readFileSync(SHELL_BUNDLE, 'utf8');
+    const ids = [...bundle.matchAll(/^(?:import|export)\b[^'"]*["']([^'"./][^'"]*)["']/gm)].map((m) => m[1]);
+    return [...new Set(ids)].filter((id) => !LINKED.includes(packageOf(id)) && !id.endsWith('.css') && findPackageDir(root, packageOf(id)));
+};
+const sendJson = (res, status, body) => {
+    res.statusCode = status;
+    res.setHeader('Content-Type', 'application/json');
+    res.end(JSON.stringify(body));
+};
+const readRequest = (req) => new Promise((resolve, reject) => {
+    let body = '';
+    req.on('data', (chunk) => (body += chunk));
+    req.on('end', () => resolve(body));
+    req.on('error', reject);
+});
+export const standalonePlugin = (options) => {
+    const { root, project, remote, fixtures } = options;
+    const fixturesDir = path.resolve(root, fixtures);
+    const connection = findConnection(root);
+    // relative to the root, as a path in the page and a glob for Vite's scan
+    const manifest = path.posix.normalize(options.manifest).replace(/^\.?\//, '');
+    return {
+        name: 'ayon-addon:standalone',
+        apply: (_config, { command }) => command === 'serve' && process.env[STANDALONE_ENV] === '1',
+        config() {
+            const headers = connection.apiKey ? { 'x-api-key': connection.apiKey } : {};
+            const proxy = Object.fromEntries(PROXIED.map((prefix) => [
+                prefix,
+                { target: connection.serverUrl, changeOrigin: true, ws: prefix === '/ws', headers },
+            ]));
+            const sharedDir = findPackageDir(root, SHARED);
+            const sharedEntries = sharedDir
+                ? Object.entries(JSON.parse(readFileSync(path.join(sharedDir, 'package.json'), 'utf8')).exports)
+                    // entries the package lists but doesn't ship
+                    .filter(([, entry]) => entry.import && existsSync(path.join(sharedDir, entry.import)))
+                    .map(([subpath]) => path.posix.join(SHARED, subpath))
+                : [];
+            return {
+                // the shell's page comes from the middleware below, not from index.html
+                appType: 'custom',
+                server: { proxy },
+                resolve: { dedupe: DEDUPE.filter((pkg) => findPackageDir(root, pkg)) },
+                optimizeDeps: {
+                    exclude: LINKED,
+                    // all known up front: a dependency found while the page loads re-optimizes and reloads
+                    // it. The addon's are found by scanning from its manifest (pieces are imports of it).
+                    include: [...new Set([...sharedEntries, ...shellImports(root)])],
+                    entries: [manifest],
+                },
+            };
+        },
+        resolveId(id) {
+            if (id === ENTRY)
+                return VIRTUAL_ENTRY;
+        },
+        load(id) {
+            if (id !== VIRTUAL_ENTRY)
+                return;
+            const shellOptions = {
+                addon: { name: project.name, version: project.version, remote },
+                serverUrl: connection.serverUrl,
+                signedInWithKey: !!connection.apiKey,
+            };
+            return [
+                ...globalStyles(root).map((css) => `import ${JSON.stringify(css)}`),
+                `import '@ynput/ayon-addon-dev/shell/style.css'`,
+                `import manifest from ${JSON.stringify(`/${manifest}`)}`,
+                `import { startShell } from '@ynput/ayon-addon-dev/shell'`,
+                `startShell({ ...${JSON.stringify(shellOptions)}, manifest })`,
+            ].join('\n');
+        },
+        configureServer(server) {
+            server.middlewares.use(async (req, res, next) => {
+                const url = new URL(req.url || '/', 'http://localhost');
+                // preview fixtures: list, read, write (the developer panel's "Save")
+                if (url.pathname === FIXTURES_URL) {
+                    const names = existsSync(fixturesDir)
+                        ? readdirSync(fixturesDir)
+                            .filter((file) => file.endsWith('.json'))
+                            .map((file) => file.replace(/\.json$/, ''))
+                        : [];
+                    return sendJson(res, 200, names);
+                }
+                if (url.pathname.startsWith(`${FIXTURES_URL}/`)) {
+                    const name = decodeURIComponent(url.pathname.slice(FIXTURES_URL.length + 1));
+                    if (!/^[\w-]+$/.test(name))
+                        return sendJson(res, 400, { detail: 'fixture names: letters, digits, - and _' });
+                    const file = path.join(fixturesDir, `${name}.json`);
+                    if (req.method === 'POST') {
+                        const body = await readRequest(req);
+                        try {
+                            JSON.parse(body);
+                        }
+                        catch {
+                            return sendJson(res, 400, { detail: 'not JSON' });
+                        }
+                        mkdirSync(fixturesDir, { recursive: true });
+                        writeFileSync(file, body.endsWith('\n') ? body : `${body}\n`);
+                        return sendJson(res, 200, { saved: path.relative(root, file) });
+                    }
+                    if (!existsSync(file))
+                        return sendJson(res, 404, { detail: `no ${path.relative(root, file)}` });
+                    res.setHeader('Content-Type', 'application/json');
+                    return res.end(readFileSync(file));
+                }
+                // the shell's page, for every navigation that isn't AYON's
+                const isPage = req.method === 'GET' &&
+                    req.headers.accept?.includes('text/html') &&
+                    !PROXIED.some((prefix) => url.pathname.startsWith(prefix)) &&
+                    !url.pathname.startsWith('/@') &&
+                    !url.pathname.startsWith('/__');
+                if (!isPage)
+                    return next();
+                const html = await server.transformIndexHtml(req.url || '/', HTML(`${project.name} (AYON dev shell)`));
+                res.setHeader('Content-Type', 'text/html');
+                res.end(html);
+            });
+        },
+    };
+};

package/dist/vite.d.ts

@@ -0,0 +1,31 @@
+import type { PluginOption } from 'vite';
+import type { RestOptions } from './rest.js';
+export type { RestOptions } from './rest.js';
+export interface AyonAddonOptions {
+    /** the federation remote name: the key in the server's `frontend_modules` */
+    name: string;
+    /** the manifest module, exposed as ./manifest (default ./src/manifest.ts) */
+    manifest?: string;
+    /** more modules to expose, e.g. keyword modules kept for AYON versions without slots */
+    exposes?: Record<string, string>;
+    /** more packages to share with AYON as singletons */
+    shared?: string[];
+    /** where `ayon-addon preview` reads fixtures (default dev/fixtures) */
+    fixtures?: string;
+    /** `ayon-addon generate-rest`: where the endpoints of the addon's server go */
+    rest?: RestOptions;
+}
+/** What `ayon-addon dev --ayon` serves next to the build, read by AYON's dev override. */
+export interface AddonDevInfo {
+    name: string;
+    version: string;
+    remote: string;
+    modules: string[];
+    buildId: string;
+}
+export declare const HOST_PACKAGES: string[];
+export declare const SHARED_PACKAGE = "@ynput/ayon-frontend-shared";
+export declare const ADDON_API = "@ynput/ayon-addon";
+/** The Vite plugins of an AYON addon frontend. Use with @vitejs/plugin-react. */
+export declare const ayonAddon: (options: AyonAddonOptions) => Promise<PluginOption[]>;
+export default ayonAddon;