@opencloud-eu/extension-sdk 6.0.0 → 6.2.0

package/README.md

@@ -18,23 +18,13 @@ $ yarn add @opencloud-eu/extension-sdk --dev
 
 ## Usage
 
-You can use the OpenCloud vite config via the `defineConfig` method provided by this package. The following example showcases how your `vite.config.ts` file could look like:
+You can use the OpenCloud vite config via the `defineConfig` method provided by this package. The following example showcases what your `vite.config.ts` file could look like:
 
 ```ts
 import { defineConfig } from '@opencloud-eu/extension-sdk'
 
 export default defineConfig({
-  name: 'your-app',
-  server: {
-    port: 9700
-  },
-  build: {
-    rollupOptions: {
-      output: {
-        entryFileNames: 'your-app.js'
-      }
-    }
-  }
+  name: 'your-app'
 })
 ```
 

package/dist/extension-sdk.js

@@ -0,0 +1,228 @@
+import { mergeConfig as e, searchForWorkspaceRoot as t } from "vite";
+import { join as n } from "path";
+import { cwd as r } from "process";
+import { existsSync as i, readFileSync as a, watch as o } from "fs";
+import s from "@tailwindcss/vite";
+import c from "@vitejs/plugin-basic-ssl";
+import l from "@vitejs/plugin-vue";
+import { federation as u } from "@module-federation/vite";
+import d from "https";
+import f from "http";
+//#region src/externalModules.ts
+var p = [
+	"vue",
+	"luxon",
+	"pinia",
+	"vue3-gettext",
+	"@opencloud-eu/web-pkg",
+	"@opencloud-eu/web-client",
+	"@opencloud-eu/web-client/graph",
+	"@opencloud-eu/web-client/graph/generated",
+	"@opencloud-eu/web-client/ocs",
+	"@opencloud-eu/web-client/sse",
+	"@opencloud-eu/web-client/webdav"
+];
+//#endregion
+//#region src/plugins/federationRegistrationClient.ts
+function m(e, { method: t = "GET", body: n } = {}) {
+	return new Promise((r, i) => {
+		let a = (new URL(e).protocol === "https:" ? d : f).request(e, {
+			method: t,
+			rejectUnauthorized: !1
+		}, (e) => {
+			let t = "";
+			e.on("data", (e) => t += e), e.on("end", () => r({
+				ok: e.statusCode >= 200 && e.statusCode < 300,
+				status: e.statusCode,
+				data: t
+			}));
+		});
+		a.on("error", i), n && (a.setHeader("Content-Type", "application/json"), a.write(n)), a.end();
+	});
+}
+function h({ hostUrl: e, name: t, entryPoint: n, getMetadata: r, interval: i = 5e3, path: a = "/_dev/remotes", metadataWatchFiles: s = [] }) {
+	return {
+		name: "federation-registration-client",
+		apply: "serve",
+		configureServer(c) {
+			if (c.config.mode === "test") return;
+			let l = null, u = "", d = [];
+			async function f() {
+				if (!u) return;
+				let n = r?.(), i = `${e}${a}`;
+				try {
+					let e = await m(i, {
+						method: "POST",
+						body: JSON.stringify({
+							id: t,
+							path: u,
+							...n && { metadata: n }
+						})
+					});
+					e.ok || console.warn(`[federation-registration] Registration failed: ${e.status}`);
+				} catch {}
+			}
+			c.httpServer?.on("listening", () => {
+				let e = c.httpServer.address(), t = typeof e == "object" ? e?.port : e;
+				u = `https://${typeof c.config.server.host == "string" ? c.config.server.host : "localhost"}:${t}/${n}`, f(), l = setInterval(f, i);
+				for (let e of s) try {
+					let t = o(e, { persistent: !1 }, () => {
+						console.log(`[federation-registration] ${e} changed, re-registering...`), f();
+					});
+					d.push(t);
+				} catch {}
+			}), c.httpServer?.on("close", () => {
+				l &&= (clearInterval(l), null);
+				for (let e of d) e.close();
+			});
+		}
+	};
+}
+//#endregion
+//#region src/plugins/manifest.ts
+var g = "manifest.json", _ = n("./src/", g);
+function v(e) {
+	let t = "";
+	return {
+		name: "manifest",
+		apply: "build",
+		configResolved(e) {
+			t = e.build.outDir;
+		},
+		buildStart() {
+			this.addWatchFile(_);
+		},
+		generateBundle(r, o) {
+			let s = n(t, g);
+			if (i(s)) {
+				this.warn(`${s} already exists in output directory (likely from public/), skipping generation\nConsider using --emptyOutDir if outDir is outside of project root.`);
+				return;
+			}
+			let c = Object.values(o).find((t) => t.type === "chunk" && t.name === e);
+			c || this.error("No entry chunk found");
+			let l = {};
+			if (i(_)) try {
+				l = JSON.parse(a(_).toString());
+			} catch (e) {
+				this.error(`Failed to parse manifest.json at ${_}: ${e.message}\nPlease ensure manifest.json contains a valid JSON object.`);
+			}
+			l.entrypoint = c.fileName, this.emitFile({
+				type: "asset",
+				fileName: g,
+				source: JSON.stringify(l, null, 2)
+			});
+		}
+	};
+}
+//#endregion
+//#region src/utils.ts
+function y(e, t) {
+	let n = { ...e };
+	for (let r of Object.keys(t)) {
+		let i = e[r], a = t[r];
+		a && typeof a == "object" && !Array.isArray(a) && i && typeof i == "object" && !Array.isArray(i) ? n[r] = y(i, a) : n[r] = a;
+	}
+	return n;
+}
+//#endregion
+//#region src/index.ts
+var b = process.env.OPENCLOUD_EXTENSION_DIST_DIR || "dist", x = process.env.OPENCLOUD_CERTS_DIR, S = x ? {
+	key: a(n(x, "server.key")),
+	cert: a(n(x, "server.crt"))
+} : null, C = n("./src/", "config.json"), w = "remoteEntry", T = ".mjs";
+function E(o = {}) {
+	return ({ mode: d }) => {
+		let f = d === "production", m = d === "test", g = JSON.parse(a(n(t(r()), "package.json")).toString()), x = o.name || g.name, { port: E = 9210 } = o?.server || {}, D = o?.opencloudWebHostUrl || process.env.OPENCLOUD_WEB_HOST_URL || "https://host.docker.internal:9201";
+		function O() {
+			let e = {};
+			if (i(_)) try {
+				let t = JSON.parse(a(_).toString());
+				t.config && (e = t.config);
+			} catch {}
+			if (i(C)) try {
+				let t = JSON.parse(a(C).toString());
+				e = y(e, t);
+			} catch {}
+			return Object.keys(e).length > 0 ? e : void 0;
+		}
+		return e({
+			base: "./",
+			build: {
+				cssCodeSplit: !0,
+				minify: f,
+				outDir: b,
+				rollupOptions: {
+					input: { [x]: "./src/index.ts" },
+					output: {
+						entryFileNames: n("js", `[name]${f ? "-[hash]" : ""}${T}`),
+						chunkFileNames: n("js", `[name]-[hash]${T}`)
+					}
+				}
+			},
+			plugins: [
+				l({
+					customElement: !1,
+					...m && { template: { compilerOptions: { whitespace: "preserve" } } }
+				}),
+				...S ? [] : [c({ name: "opencloud" })],
+				{
+					name: "fix-sec-fetch-dest",
+					configureServer(e) {
+						e.middlewares.use((e, t, n) => {
+							(e.url?.endsWith(".js") || e.url?.endsWith(".mjs")) && e.headers["sec-fetch-dest"] === "document" && (e.headers["sec-fetch-dest"] = "script"), n();
+						});
+					}
+				},
+				...m ? [] : [u({
+					name: x,
+					exposes: { ".": "./src/index.ts" },
+					filename: `${w}${f ? "-[hash]" : ""}${T}`,
+					shared: Object.fromEntries(p.map((e) => [e, {
+						singleton: !0,
+						import: !1
+					}])),
+					manifest: !1,
+					dts: !1
+				})],
+				s(),
+				v(w),
+				h({
+					hostUrl: D,
+					name: x,
+					entryPoint: `${w}${T}`,
+					getMetadata: O,
+					metadataWatchFiles: [_, C]
+				})
+			],
+			server: {
+				origin: `https://host.docker.internal:${E}`,
+				host: "host.docker.internal",
+				port: E,
+				cors: !0,
+				...S && { https: S }
+			},
+			test: {
+				globals: !0,
+				environment: "happy-dom",
+				clearMocks: !0,
+				include: ["**/*.spec.ts"],
+				exclude: [
+					"**/node_modules/**",
+					"**/dist/**",
+					"**/cypress/**",
+					"**/.{idea,git,cache,output,temp}/**",
+					"**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build}.config.*",
+					".pnpm-store/*",
+					"**/e2e/**"
+				],
+				coverage: {
+					provider: "v8",
+					reportsDirectory: "./coverage",
+					reporter: "lcov"
+				}
+			}
+		}, o);
+	};
+}
+//#endregion
+export { E as defineConfig };

package/dist/src/externalModules.d.ts

@@ -0,0 +1 @@
+export declare const externalModules: string[];

package/dist/src/index.d.ts

@@ -0,0 +1,10 @@
+import { ViteUserConfig } from 'vitest/config';
+export interface ExtensionConfigOverrides extends ViteUserConfig {
+    /** Name of the extension, defaults to the package name */
+    name?: string;
+    /** URL of the OpenCloud host web dev server, defaults to 'https://host.docker.internal:9201' */
+    opencloudWebHostUrl?: string;
+}
+export declare function defineConfig(overrides?: ExtensionConfigOverrides): ({ mode }: {
+    mode: string;
+}) => Record<string, any>;

package/dist/src/plugins/federationRegistrationClient.d.ts

@@ -0,0 +1,24 @@
+import type { Plugin } from 'vite';
+interface FederationRegistrationClientOptions {
+    /** Host dev server URL (e.g. 'https://host.docker.internal:9201') */
+    hostUrl: string;
+    /** Remote ID used for registration */
+    name: string;
+    /** Remote entry filename (e.g. 'remoteEntry.mjs'), combined with the server address to form the full URL */
+    entryPoint: string;
+    /** Returns optional metadata to send with registration */
+    getMetadata?: () => Record<string, unknown> | undefined;
+    /** Re-registration interval in ms (default: 5000) */
+    interval?: number;
+    /** Host endpoint path (default: '/_dev/remotes') */
+    path?: string;
+    /** File paths to watch for immediate re-registration on metadata change */
+    metadataWatchFiles?: string[];
+}
+/**
+ * Vite plugin: remote-side periodic registration with a host dev server.
+ * Sends registration data at a fixed interval so the host always knows
+ * about this remote, even after the host restarts.
+ */
+export declare function federationRegistrationClient({ hostUrl, name, entryPoint, getMetadata, interval, path, metadataWatchFiles }: FederationRegistrationClientOptions): Plugin;
+export {};

package/dist/src/plugins/index.d.ts

@@ -0,0 +1,2 @@
+export * from './federationRegistrationClient';
+export * from './manifest';

package/dist/src/plugins/manifest.d.ts

@@ -0,0 +1,6 @@
+import type { Plugin } from 'vite';
+export declare const manifestPath: string;
+/**
+ * Generates manifest.json for OpenCloud app discovery.
+ */
+export declare function manifestPlugin(remoteEntryName: string): Plugin;

package/dist/src/utils.d.ts

@@ -0,0 +1 @@
+export declare function deepMerge(target: Record<string, unknown>, source: Record<string, unknown>): Record<string, unknown>;

package/dist/tailwind.css

@@ -0,0 +1,62 @@
+@layer theme, base, components, utilities;
+@import 'tailwindcss/theme.css' layer(theme) prefix(ext);
+@import 'tailwindcss/utilities.css' layer(utilities) prefix(ext);
+
+@theme {
+  --font-sans: var(--oc-font-family);
+
+  --spacing: 4px;
+  --breakpoint-xs: 580px;
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 960px;
+  --breakpoint-lg: 1200px;
+  --breakpoint-xl: 1600px;
+
+  --z-index-modal: 9999;
+
+  --color-role-background: var(--oc-role-background);
+  --color-role-chrome: var(--oc-role-chrome);
+  --color-role-error: var(--oc-role-error);
+  --color-role-error-container: var(--oc-role-error-container);
+  --color-role-inverse-on-surface: var(--oc-role-inverse-on-surface);
+  --color-role-inverse-primary: var(--oc-role-inverse-primary);
+  --color-role-inverse-surface: var(--oc-role-inverse-surface);
+  --color-role-on-background: var(--oc-role-on-background);
+  --color-role-on-chrome: var(--oc-role-on-chrome);
+  --color-role-on-error: var(--oc-role-on-error);
+  --color-role-on-error-container: var(--oc-role-on-error-container);
+  --color-role-on-primary: var(--oc-role-on-primary);
+  --color-role-on-primary-container: var(--oc-role-on-primary-container);
+  --color-role-on-primary-fixed: var(--oc-role-on-primary-fixed);
+  --color-role-on-secondary: var(--oc-role-on-secondary);
+  --color-role-on-secondary-container: var(--oc-role-on-secondary-container);
+  --color-role-on-secondary-fixed: var(--oc-role-on-secondary-fixed);
+  --color-role-on-surface: var(--oc-role-on-surface);
+  --color-role-on-surface-variant: var(--oc-role-on-surface-variant);
+  --color-role-on-tertiary: var(--oc-role-on-tertiary);
+  --color-role-on-tertiary-container: var(--oc-role-on-tertiary-container);
+  --color-role-on-tertiary-fixed: var(--oc-role-on-tertiary-fixed);
+  --color-role-outline: var(--oc-role-outline);
+  --color-role-outline-variant: var(--oc-role-outline-variant);
+  --color-role-primary: var(--oc-role-primary);
+  --color-role-primary-container: var(--oc-role-primary-container);
+  --color-role-primary-fixed: var(--oc-role-primary-fixed);
+  --color-role-scrim: var(--oc-role-scrim);
+  --color-role-secondary: var(--oc-role-secondary);
+  --color-role-secondary-container: var(--oc-role-secondary-container);
+  --color-role-secondary-fixed: var(--oc-role-secondary-fixed);
+  --color-role-shadow: var(--oc-role-shadow);
+  --color-role-surface: var(--oc-role-surface);
+  --color-role-surface-bright: var(--oc-role-surface-bright);
+  --color-role-surface-container: var(--oc-role-surface-container);
+  --color-role-surface-container-high: var(--oc-role-surface-container-high);
+  --color-role-surface-container-highest: var(--oc-role-surface-container-highest);
+  --color-role-surface-container-low: var(--oc-role-surface-container-low);
+  --color-role-surface-container-lowest: var(--oc-role-surface-container-lowest);
+  --color-role-surface-dim: var(--oc-role-surface-dim);
+  --color-role-surface-tint: var(--oc-role-surface-tint);
+  --color-role-surface-variant: var(--oc-role-surface-variant);
+  --color-role-tertiary: var(--oc-role-tertiary);
+  --color-role-tertiary-container: var(--oc-role-tertiary-container);
+  --color-role-tertiary-fixed: var(--oc-role-tertiary-fixed);
+}

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@opencloud-eu/extension-sdk",
-  "version": "6.0.0",
+  "version": "6.2.0",
   "description": "OpenCloud Web Extension SDK",
   "license": "AGPL-3.0",
-  "main": "index.mjs",
+  "main": "dist/extension-sdk.js",
+  "types": "dist/src/index.d.ts",
   "type": "module",
   "private": false,
   "author": "OpenCloud GmbH <info@opencloud.eu>",
@@ -13,11 +14,31 @@
     "url": "https://github.com/opencloud-eu/web",
     "directory": "packages/extension-sdk"
   },
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "default": "./dist/extension-sdk.js",
+      "types": "./dist/src/index.d.ts"
+    },
+    "./tailwind.css": "./dist/tailwind.css"
+  },
   "dependencies": {
-    "@tailwindcss/vite": "^4.1.11",
-    "@vitejs/plugin-vue": "^6.0.0"
+    "@module-federation/vite": "^1.13.5",
+    "@tailwindcss/vite": "^4.2.2",
+    "@vitejs/plugin-basic-ssl": "^2.3.0",
+    "@vitejs/plugin-vue": "^6.0.5"
+  },
+  "devDependencies": {
+    "vite-plugin-static-copy": "^4.0.0"
   },
   "peerDependencies": {
-    "vite": "^7.2.0"
+    "vite": "^7.2.0 || ^8.0.0",
+    "vitest": "^4.0.0"
+  },
+  "scripts": {
+    "build": "vite build && vue-tsc --project tsconfig.build.json",
+    "check:types": "vue-tsc --declaration --noEmit --project tsconfig.build.json"
   }
 }

package/index.mjs

@@ -1,172 +0,0 @@
-// ATTENTION: this is a .mjs (instead of a .ts) file on purpose,
-// because we don't want to transpile it before publishing
-// c.f. https://github.com/vitejs/vite/issues/5370
-
-import { mergeConfig, searchForWorkspaceRoot } from 'vite'
-import { join } from 'path'
-import { cwd } from 'process'
-import { readFileSync, existsSync } from 'fs'
-import tailwindcss from '@tailwindcss/vite'
-
-import vue from '@vitejs/plugin-vue'
-
-const distDir = process.env.OPENCLOUD_EXTENSION_DIST_DIR || 'dist'
-
-const certsDir = process.env.OPENCLOUD_CERTS_DIR
-const defaultHttps = () =>
-  certsDir && {
-    key: readFileSync(join(certsDir, 'server.key')),
-    cert: readFileSync(join(certsDir, 'server.crt'))
-  }
-
-const manifestFile = 'manifest.json'
-const manifestPath = join('./src/', manifestFile)
-const manifestPlugin = () => {
-  let outputDir
-
-  return {
-    name: 'manifest',
-    apply: 'build',
-    configResolved(config) {
-      outputDir = config.build.outDir
-    },
-    buildStart() {
-      this.addWatchFile(manifestPath)
-    },
-    generateBundle(options, bundle) {
-      const generatedManifestPath = join(outputDir, manifestFile)
-      if (existsSync(generatedManifestPath)) {
-        this.warn(
-          `${generatedManifestPath} already exists in output directory (likely from public/), skipping generation\n` +
-            `Consider using --emptyOutDir if outDir is outside of project root.`
-        )
-        return
-      }
-
-      // Find the entry chunk
-      const entryChunk = Object.values(bundle).find(
-        (chunk) => chunk.type === 'chunk' && chunk.isEntry
-      )
-
-      if (!entryChunk) {
-        this.error('No entry chunk found')
-        return
-      }
-
-      let manifest = {}
-      if (existsSync(manifestPath)) {
-        try {
-          manifest = JSON.parse(readFileSync(manifestPath).toString())
-        } catch (err) {
-          this.error(
-            `Failed to parse manifest.json at ${manifestPath}: ${err.message}\n` +
-              `Please ensure manifest.json contains a valid JSON object.`
-          )
-          return
-        }
-      }
-
-      // set entryPoint
-      manifest.entrypoint = entryChunk.fileName
-
-      // Add manifest.json to the bundle
-      this.emitFile({
-        type: 'asset',
-        fileName: 'manifest.json',
-        source: JSON.stringify(manifest, null, 2)
-      })
-    }
-  }
-}
-
-export const defineConfig = (overrides = {}) => {
-  return ({ mode }) => {
-    const isProduction = mode === 'production'
-    const isTesting = mode === 'test'
-
-    // read package name from vite workspace
-    const packageJson = JSON.parse(
-      readFileSync(join(searchForWorkspaceRoot(cwd()), 'package.json')).toString()
-    )
-
-    const name = overrides.name || packageJson.name
-
-    // set default config
-    const { https = defaultHttps(), port = 9210 } = overrides?.server || {}
-    const isHttps = !!https
-
-    return mergeConfig(
-      {
-        base: './', // make asset paths relative so imports work from wherever the extension is loaded
-        build: {
-          cssCodeSplit: true,
-          minify: isProduction,
-          outDir: distDir,
-          rollupOptions: {
-            // keep in sync with packages/web-runtime/src/container/application/index.ts
-            external: [
-              'vue',
-              'luxon',
-              'pinia',
-              'vue3-gettext',
-
-              '@opencloud-eu/web-client',
-              '@opencloud-eu/web-client/graph',
-              '@opencloud-eu/web-client/graph/generated',
-              '@opencloud-eu/web-client/ocs',
-              '@opencloud-eu/web-client/sse',
-              '@opencloud-eu/web-client/webdav',
-              '@opencloud-eu/web-pkg',
-              'web-client',
-              'web-pkg'
-            ],
-            preserveEntrySignatures: 'strict',
-            input: {
-              [name]: './src/index.ts'
-            },
-            output: {
-              format: 'amd',
-              chunkFileNames: join('js', 'chunks', '[name]-[hash].mjs'),
-              entryFileNames: join('js', `[name]${isProduction ? '-[hash]' : ''}.js`)
-            }
-          }
-        },
-        plugins: [
-          vue({
-            // set to true when switching to esm
-            customElement: false,
-            ...(isTesting && { template: { compilerOptions: { whitespace: 'preserve' } } })
-          }),
-          manifestPlugin(),
-          tailwindcss()
-        ],
-        server: {
-          port,
-          strictPort: true,
-          ...(isHttps && https)
-        },
-        test: {
-          globals: true,
-          environment: 'happy-dom',
-          clearMocks: true,
-          include: ['**/*.spec.ts'],
-          exclude: [
-            '**/node_modules/**',
-            '**/dist/**',
-            '**/cypress/**',
-            '**/.{idea,git,cache,output,temp}/**',
-            '**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build}.config.*',
-            '.pnpm-store/*',
-            '**/e2e/**'
-          ],
-          coverage: {
-            provider: 'v8',
-            reportsDirectory: './coverage',
-            reporter: 'lcov'
-          }
-        }
-      },
-      overrides
-    )
-  }
-}

package/tailwind.css

@@ -1,14 +0,0 @@
-@layer theme, base, components, utilities;
-@import 'tailwindcss/theme.css' layer(theme) prefix(ext);
-@import 'tailwindcss/utilities.css' layer(utilities) prefix(ext);
-
-@theme {
-  --font-sans: var(--oc-font-family);
-
-  --spacing: 4px;
-  --breakpoint-xs: 580px;
-  --breakpoint-sm: 640px;
-  --breakpoint-md: 960px;
-  --breakpoint-lg: 1200px;
-  --breakpoint-xl: 1600px;
-}