Merge pull request #11754 from owncloud/chore/publish-web-pkg-with-im…

…plementation

chore(web-pkg): prepare publish with implementation

packages/web-pkg/README.md

@@ -2,16 +2,16 @@
 
 `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:
 
 ```
-$ npm install @ownclouders/web-pkg
+$ npm install @ownclouders/web-pkg --save-dev
 
-$ pnpm add @ownclouders/web-pkg
+$ pnpm add -D @ownclouders/web-pkg
 
-$ yarn add @ownclouders/web-pkg
+$ yarn add @ownclouders/web-pkg --dev
 ```
+
+It's recommended to install this package as a dev dependency because it's only really needed for providing autocompletion in your IDE and unit tests. In a runtime context, the ownCloud Web runtime provides the actual implementation.

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) {