@opencloud-eu/extension-sdk 5.1.0 → 6.1.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/externalModules.mjs

@@ -0,0 +1,15 @@
+// Shared dependencies provided by the host to external apps.
+// Keep in sync with sharedModules in packages/web-runtime/src/container/application/index.ts
+export const externalModules = [
+  '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'
+]

package/federationRegistrationClient.mjs

@@ -0,0 +1,122 @@
+// 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.
+
+import https from 'https'
+import http from 'http'
+import { watch } from 'fs'
+
+/**
+ * Minimal fetch helper that accepts self-signed certificates (no extra deps).
+ * @param {string} url
+ * @param {{ method?: string, body?: string }} [options]
+ */
+function devFetch(url, { method = 'GET', body } = {}) {
+  return new Promise((resolve, reject) => {
+    const mod = new URL(url).protocol === 'https:' ? https : http
+    const req = mod.request(url, { method, rejectUnauthorized: false }, (res) => {
+      let data = ''
+      res.on('data', (chunk) => (data += chunk))
+      res.on('end', () =>
+        resolve({ ok: res.statusCode >= 200 && res.statusCode < 300, status: res.statusCode, data })
+      )
+    })
+    req.on('error', reject)
+    if (body) {
+      req.setHeader('Content-Type', 'application/json')
+      req.write(body)
+    }
+    req.end()
+  })
+}
+
+/**
+ * @param {object} options
+ * @param {string} options.hostUrl - Host dev server URL (e.g. 'https://host.docker.internal:9201')
+ * @param {string} options.name - Remote ID used for registration
+ * @param {string} options.entryPoint - Remote entry filename (e.g. 'remoteEntry.mjs'), combined with the server address to form the full URL
+ * @param {() => Record<string, unknown> | undefined} [options.getMetadata] - Returns optional metadata to send with registration
+ * @param {number} [options.interval] - Re-registration interval in ms (default: 5000)
+ * @param {string} [options.path] - Host endpoint path (default: '/_dev/remotes')
+ * @param {string[]} [options.metadataWatchFiles] - File paths to watch for immediate re-registration on metadata change
+ */
+export function federationRegistrationClient({
+  hostUrl,
+  name,
+  entryPoint,
+  getMetadata,
+  interval = 5_000,
+  path = '/_dev/remotes',
+  metadataWatchFiles = []
+}) {
+  return {
+    name: 'federation-registration-client',
+    apply: 'serve',
+
+    /** @param {import('vite').ViteDevServer} server */
+    configureServer(server) {
+      // Skip registration during test runs (Vitest uses serve mode internally)
+      if (server.config.mode === 'test') return
+
+      let registrationInterval = null
+      let entryPointUrl = ''
+      const watchers = []
+
+      async function register() {
+        if (!entryPointUrl) return
+
+        const metadata = getMetadata?.()
+        const url = `${hostUrl}${path}`
+        try {
+          const res = await devFetch(url, {
+            method: 'POST',
+            body: JSON.stringify({
+              id: name,
+              path: entryPointUrl,
+              ...(metadata && { metadata })
+            })
+          })
+          if (!res.ok) {
+            console.warn(`[federation-registration] Registration failed: ${res.status}`)
+          }
+        } catch {
+          // Host is likely down — will retry on next interval
+        }
+      }
+
+      server.httpServer?.on('listening', () => {
+        const address = server.httpServer.address()
+        const port = typeof address === 'object' ? address?.port : address
+        const hostname =
+          typeof server.config.server.host === 'string' ? server.config.server.host : 'localhost'
+        entryPointUrl = `https://${hostname}:${port}/${entryPoint}`
+
+        register()
+        registrationInterval = setInterval(register, interval)
+
+        // Watch files for immediate re-registration on metadata change
+        for (const filePath of metadataWatchFiles) {
+          try {
+            const watcher = watch(filePath, { persistent: false }, () => {
+              console.log(`[federation-registration] ${filePath} changed, re-registering...`)
+              register()
+            })
+            watchers.push(watcher)
+          } catch {
+            // File may not exist yet — that's fine
+          }
+        }
+      })
+
+      server.httpServer?.on('close', () => {
+        if (registrationInterval) {
+          clearInterval(registrationInterval)
+          registrationInterval = null
+        }
+        for (const watcher of watchers) {
+          watcher.close()
+        }
+      })
+    }
+  }
+}

package/index.mjs

@@ -7,20 +7,51 @@ import { join } from 'path'
 import { cwd } from 'process'
 import { readFileSync, existsSync } from 'fs'
 import tailwindcss from '@tailwindcss/vite'
-
+import basicSsl from '@vitejs/plugin-basic-ssl'
 import vue from '@vitejs/plugin-vue'
+import { federation } from '@module-federation/vite'
+import { externalModules } from './externalModules.mjs'
+import { federationRegistrationClient } from './federationRegistrationClient.mjs'
 
 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 customHttps = certsDir
+  ? {
+      key: readFileSync(join(certsDir, 'server.key')),
+      cert: readFileSync(join(certsDir, 'server.crt'))
+    }
+  : null
+
+// Deep merge objects, replace arrays (matches mergo.WithOverride behavior on the Go side).
+function deepMerge(target, source) {
+  const result = { ...target }
+  for (const key of Object.keys(source)) {
+    const tv = target[key]
+    const sv = source[key]
+    if (
+      sv &&
+      typeof sv === 'object' &&
+      !Array.isArray(sv) &&
+      tv &&
+      typeof tv === 'object' &&
+      !Array.isArray(tv)
+    ) {
+      result[key] = deepMerge(tv, sv)
+    } else {
+      result[key] = sv
+    }
   }
+  return result
+}
 
 const manifestFile = 'manifest.json'
 const manifestPath = join('./src/', manifestFile)
+const appConfigPath = join('./src/', 'config.json')
+const remoteEntryName = 'remoteEntry'
+const remoteEntryExt = '.mjs'
+
+// Generates manifest.json for OpenCloud app discovery.
 const manifestPlugin = () => {
   let outputDir
 
@@ -43,9 +74,9 @@ const manifestPlugin = () => {
         return
       }
 
-      // Find the entry chunk
+      // Find the remote entry chunk (emitted by the federation plugin)
       const entryChunk = Object.values(bundle).find(
-        (chunk) => chunk.type === 'chunk' && chunk.isEntry
+        (chunk) => chunk.type === 'chunk' && chunk.name === remoteEntryName
       )
 
       if (!entryChunk) {
@@ -72,7 +103,7 @@ const manifestPlugin = () => {
       // Add manifest.json to the bundle
       this.emitFile({
         type: 'asset',
-        fileName: 'manifest.json',
+        fileName: manifestFile,
         source: JSON.stringify(manifest, null, 2)
       })
     }
@@ -92,8 +123,35 @@ export const defineConfig = (overrides = {}) => {
     const name = overrides.name || packageJson.name
 
     // set default config
-    const { https = defaultHttps(), port = 9210 } = overrides?.server || {}
-    const isHttps = !!https
+    const { port = 9210 } = overrides?.server || {}
+    const hostUrl =
+      overrides?.opencloudWebHostUrl ||
+      process.env.OPENCLOUD_WEB_HOST_URL ||
+      'https://host.docker.internal:9201'
+
+    // Read merged metadata: manifest.json defaults + config.json overrides
+    function readAppConfig() {
+      let config = {}
+      if (existsSync(manifestPath)) {
+        try {
+          const manifest = JSON.parse(readFileSync(manifestPath).toString())
+          if (manifest.config) {
+            config = manifest.config
+          }
+        } catch {
+          // ignore malformed manifest
+        }
+      }
+      if (existsSync(appConfigPath)) {
+        try {
+          const overrides = JSON.parse(readFileSync(appConfigPath).toString())
+          config = deepMerge(config, overrides)
+        } catch {
+          // ignore malformed config
+        }
+      }
+      return Object.keys(config).length > 0 ? config : undefined
+    }
 
     return mergeConfig(
       {
@@ -103,47 +161,63 @@ export const defineConfig = (overrides = {}) => {
           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`)
+              entryFileNames: join('js', `[name]${isProduction ? '-[hash]' : ''}${remoteEntryExt}`),
+              chunkFileNames: join('js', `[name]-[hash]${remoteEntryExt}`)
             }
           }
         },
         plugins: [
           vue({
-            // set to true when switching to esm
             customElement: false,
             ...(isTesting && { template: { compilerOptions: { whitespace: 'preserve' } } })
           }),
+          ...(customHttps ? [] : [basicSsl({ name: 'opencloud' })]),
+          {
+            name: 'fix-sec-fetch-dest',
+            configureServer(server) {
+              server.middlewares.use((req, res, next) => {
+                // Vite skips its transform middleware for requests with sec-fetch-dest: document,
+                // which breaks direct browser navigation to JS files like remoteEntry.js.
+                if (
+                  (req.url?.endsWith('.js') || req.url?.endsWith('.mjs')) &&
+                  req.headers['sec-fetch-dest'] === 'document'
+                ) {
+                  req.headers['sec-fetch-dest'] = 'script'
+                }
+                next()
+              })
+            }
+          },
+          federation({
+            name,
+            exposes: { '.': './src/index.ts' },
+            filename: `${remoteEntryName}${isProduction ? '-[hash]' : ''}${remoteEntryExt}`,
+            shared: Object.fromEntries(
+              externalModules.map((pkg) => [pkg, { singleton: true, import: false }])
+            ),
+            manifest: false,
+            dts: false
+          }),
+          tailwindcss(),
           manifestPlugin(),
-          tailwindcss()
+          federationRegistrationClient({
+            hostUrl,
+            name,
+            entryPoint: `${remoteEntryName}${remoteEntryExt}`,
+            getMetadata: readAppConfig,
+            metadataWatchFiles: [manifestPath, appConfigPath]
+          })
         ],
         server: {
+          origin: `https://host.docker.internal:${port}`,
+          host: 'host.docker.internal',
           port,
-          strictPort: true,
-          ...(isHttps && https)
+          cors: true,
+          ...(customHttps && { https: customHttps })
         },
         test: {
           globals: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencloud-eu/extension-sdk",
-  "version": "5.1.0",
+  "version": "6.1.0",
   "description": "OpenCloud Web Extension SDK",
   "license": "AGPL-3.0",
   "main": "index.mjs",
@@ -14,10 +14,12 @@
     "directory": "packages/extension-sdk"
   },
   "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"
   },
   "peerDependencies": {
-    "vite": "^7.2.0"
+    "vite": "^7.2.0 || ^8.0.0"
   }
 }