@opencloud-eu/extension-sdk 4.1.0-alpha.1 → 4.2.0-alpha.1

package/README.md

@@ -37,3 +37,11 @@ export default defineConfig({
   }
 })
 ```
+
+### Tailwind CSS
+
+The extension-sdk comes with a preconfigured Tailwind CSS setup for extension development. To use it, simply import the provided CSS file in your main application file. Note that Tailwind classes need to be prefixed via `ext:` in extensions to avoid style conflicts.
+
+```ts
+import '@opencloud-eu/extension-sdk/tailwind.css'
+```

package/index.mjs

@@ -79,6 +79,37 @@ const manifestPlugin = () => {
   }
 }
 
+// UPSTREAM: https://github.com/vitejs/vite/pull/20861
+// We are trying to upstream this plugin, it can be removed once the PR above or an alternative approach has been merged
+// TL;DR of the issue: vite uses the require variable for certain features but doesn't ensure it's injected into AMD modules
+// thus the global require variable is used which does not have the correct base path set, so relative imports
+// with ?url or ?worker break
+const completeAmdWrapPlugin = () => {
+  const AmdWrapRE = /\bdefine\((?:\s*\[([^\]]*)\],)?\s*(?:\(\s*)?function\s*\(([^)]*)\)\s*\{/
+
+  return {
+    name: 'vite:force-amd-wrap-require',
+    enforce: 'pre',
+    renderChunk(code, _chunk, opts) {
+      if (opts.format !== 'amd') return
+
+      return {
+        code: code.replace(AmdWrapRE, (_, deps, params) => {
+          if (deps?.includes('"require"')) {
+            return `define([${deps}], (function(${params}) {`
+          }
+
+          const newDeps = deps ? `"require", ${deps}` : '"require"'
+          const newParams = params.trim() ? `require, ${params}` : 'require'
+
+          return `define([${newDeps}], (function(${newParams}) {`
+        }),
+        map: null // no need to generate sourcemap as no mapping exists for the wrapper
+      }
+    }
+  }
+}
+
 export const defineConfig = (overrides = {}) => {
   return ({ mode }) => {
     const isProduction = mode === 'production'
@@ -97,11 +128,7 @@ export const defineConfig = (overrides = {}) => {
 
     return mergeConfig(
       {
-        server: {
-          port,
-          strictPort: true,
-          ...(isHttps && https)
-        },
+        base: './', // make asset paths relative so imports work from wherever the extension is loaded
         build: {
           cssCodeSplit: true,
           minify: isProduction,
@@ -136,6 +163,7 @@ export const defineConfig = (overrides = {}) => {
           }
         },
         plugins: [
+          completeAmdWrapPlugin(),
           vue({
             // set to true when switching to esm
             customElement: false,
@@ -144,6 +172,11 @@ export const defineConfig = (overrides = {}) => {
           manifestPlugin(),
           tailwindcss()
         ],
+        server: {
+          port,
+          strictPort: true,
+          ...(isHttps && https)
+        },
         test: {
           globals: true,
           environment: 'happy-dom',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencloud-eu/extension-sdk",
-  "version": "4.1.0-alpha.1",
+  "version": "4.2.0-alpha.1",
   "description": "OpenCloud Web Extension SDK",
   "license": "AGPL-3.0",
   "main": "index.mjs",

package/tailwind.css

@@ -0,0 +1,14 @@
+@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;
+}