chore(web-pkg): prepare publish with implementation

Prepares `web-pkg` for a publish with the actual implementation, not just the types. This is needed for unit tests in external apps, since the runtime is not present in this context to provide the actual implementation.

Also moves the peer dependencies to regular dependencies because the app that uses this package should not need to provide all the peers.

packages/web-pkg/README.md

@@ -2,8 +2,6 @@
 
 `web-pkg` is a package that provides utilities, most importantly a variety of components and composables, that can be useful when developing apps and extensions for ownCloud Web.
 
-It's important to note that this package solely provides types because `web-pkg` is intended solely for Web extension development. The actual implementation of the utilities is provided by the Web runtime automatically.
-
 ## Installation
 
 Depending on your package manager, run one of the following commands:

packages/web-pkg/package.json

@@ -20,9 +20,10 @@
   "publishConfig": {
     "directory": "package",
     "linkDirectory": false,
-    "types": "./dist/src/index.d.ts",
     "exports": {
       ".": {
+        "import": "./dist/web-pkg.js",
+        "require": "./dist/web-pkg.umd.cjs",
         "types": "./dist/src/index.d.ts"
       }
     }
@@ -33,53 +34,53 @@
     "postpublish": "rm -rf ./package"
   },
   "dependencies": {
+    "@casl/ability": "^6.7.1",
+    "@casl/vue": "^2.2.2",
+    "@microsoft/fetch-event-source": "^2.0.1",
+    "@ownclouders/web-client": "workspace:^",
+    "@sentry/vue": "^8.33.1",
     "@toast-ui/editor-plugin-code-syntax-highlight": "^3.1.0",
     "@toast-ui/editor": "^3.2.2",
-    "dompurify": "3.1.7",
+    "@uppy/core": "^3.3.0",
+    "@uppy/drop-target": "^2.0.0",
+    "@uppy/tus": "^3.1.0",
+    "@uppy/utils": "^5.3.0",
+    "@uppy/xhr-upload": "^3.0.1",
+    "@vue/shared": "^3.5.11",
+    "@vueuse/core": "^11.0.0",
+    "axios": "^1.7.7",
+    "deepmerge": "^4.2.2",
+    "dompurify": "^3.1.7",
     "filesize": "^10.1.0",
+    "fuse.js": "^7.0.0",
     "js-generate-password": "^1.0.0",
+    "lodash-es": "^4.17.21",
+    "luxon": "^3.5.0",
+    "mark.js": "^8.11.1",
+    "oidc-client-ts": "^2.4.0 || ^3.0.0",
+    "p-queue": "^8.0.0",
     "password-sheriff": "^1.1.1",
-    "prismjs": "^1.29.0"
+    "pinia": "^2.2.4",
+    "portal-vue": "^3.0.0",
+    "prismjs": "^1.29.0",
+    "qs": "^6.13.0",
+    "semver": "^7.6.3",
+    "uuid": "^10.0.0",
+    "vue-concurrency": "^5.0.1",
+    "vue-router": "^4.2.5",
+    "vue3-gettext": "^2.4.0",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
+    "@ownclouders/web-test-helpers": "workspace:^",
     "@types/dompurify": "3.0.5",
     "@types/lodash-es": "4.17.12",
     "@vitest/web-worker": "2.1.2",
     "clean-publish": "5.0.0",
     "vite-plugin-dts": "4.2.3",
-    "vite-plugin-node-polyfills": "0.22.0",
-    "@ownclouders/web-test-helpers": "workspace:*"
+    "vite-plugin-node-polyfills": "0.22.0"
   },
   "peerDependencies": {
-    "@casl/ability": "6.7.1",
-    "@casl/vue": "^2.2.2",
-    "@microsoft/fetch-event-source": "^2.0.1",
-    "@ownclouders/web-client": "workspace:*",
-    "@sentry/vue": "8.33.1",
-    "@uppy/core": "^3.3.0",
-    "@uppy/drop-target": "^2.0.0",
-    "@uppy/tus": "^3.1.0",
-    "@uppy/utils": "^5.3.0",
-    "@uppy/xhr-upload": "^3.0.1",
-    "@vue/shared": "3.5.11",
-    "@vueuse/core": "^11.0.0",
-    "axios": "1.7.7",
-    "deepmerge": "^4.2.2",
-    "design-system": "workspace:@ownclouders/design-system@*",
-    "fuse.js": "7.0.0",
-    "lodash-es": "^4.17.21",
-    "luxon": "3.5.0",
-    "mark.js": "^8.11.1",
-    "oidc-client-ts": "^2.4.0 || ^3.0.0",
-    "p-queue": "^8.0.0",
-    "pinia": "2.2.4",
-    "portal-vue": "3.0.0",
-    "qs": "6.13.0",
-    "semver": "7.6.3",
-    "uuid": "10.0.0",
-    "vue-concurrency": "5.0.1",
-    "vue-router": "4.2.5",
-    "vue3-gettext": "2.4.0",
-    "zod": "3.23.8"
+    "design-system": "workspace:@ownclouders/design-system@^"
   }
 }

packages/web-pkg/types.d.ts

@@ -6,6 +6,7 @@ import {
   PreviewService,
   PasswordPolicyService
 } from './src/services'
+import { Route, Router } from 'vue-router'
 
 export * from './src'
 
@@ -17,5 +18,7 @@ declare module 'vue' {
     $loadingService: LoadingService
     $previewService: PreviewService
     $passwordPolicyService: PasswordPolicyService
+    $router: Router
+    $route: Route
   }
 }

packages/web-pkg/vite.config.ts

@@ -3,8 +3,10 @@ import { defineConfig, searchForWorkspaceRoot } from 'vite'
 import dts from 'vite-plugin-dts'
 import { nodePolyfills } from 'vite-plugin-node-polyfills'
 import vue from '@vitejs/plugin-vue'
+import pkg from './package.json' assert { type: 'json' }
 
 const projectRootDir = searchForWorkspaceRoot(process.cwd())
+const external = [...Object.keys(pkg.dependencies), ...Object.keys(pkg.peerDependencies)]
 
 export default defineConfig({
   resolve: {
@@ -15,7 +17,8 @@ export default defineConfig({
   css: {
     preprocessorOptions: {
       scss: {
-        additionalData: `@import "design-system/src/styles/styles";`
+        additionalData: `@import "design-system/src/styles/styles";`,
+        silenceDeprecations: ['legacy-js-api']
       }
     }
   },
@@ -24,14 +27,23 @@ export default defineConfig({
       entry: resolve(__dirname, 'src/index.ts'),
       name: 'web-pkg',
       fileName: 'web-pkg'
+    },
+    rollupOptions: {
+      external: external.filter(
+        (e) =>
+          // we need to include the ODS in the bundle because we don't publish it on npm
+          e !== 'design-system' &&
+          // something is off with this lib, see https://github.com/ahmadjoya/generate-password-lite/issues/8
+          e !== 'js-generate-password'
+      )
     }
   },
   plugins: [
     vue(),
     nodePolyfills({
       exclude: ['crypto']
     }),
-    dts({ declarationOnly: true, exclude: ['**/tests'] }),
+    dts({ exclude: ['**/tests'] }),
     {
       name: '@ownclouders/vite-plugin-docs',
       transform(src, id) {