From f57ad6ff785aae0268b82c7401a172d42f72b3ef Mon Sep 17 00:00:00 2001 From: Jannik Stehle Date: Thu, 10 Oct 2024 12:05:30 +0200 Subject: [PATCH 1/2] 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 - packages/web-pkg/package.json | 71 +++++++++++++++++---------------- packages/web-pkg/types.d.ts | 3 ++ packages/web-pkg/vite.config.ts | 16 +++++++- pnpm-lock.yaml | 38 +++++++++--------- 5 files changed, 72 insertions(+), 58 deletions(-) diff --git a/packages/web-pkg/README.md b/packages/web-pkg/README.md index 1f3949171ea..0461fd005cc 100644 --- a/packages/web-pkg/README.md +++ b/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: diff --git a/packages/web-pkg/package.json b/packages/web-pkg/package.json index ec354b5845a..5c0ad880db9 100644 --- a/packages/web-pkg/package.json +++ b/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@^" } } diff --git a/packages/web-pkg/types.d.ts b/packages/web-pkg/types.d.ts index 8bef0e21017..e2212180e89 100644 --- a/packages/web-pkg/types.d.ts +++ b/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 } } diff --git a/packages/web-pkg/vite.config.ts b/packages/web-pkg/vite.config.ts index c34c875d012..1437602e067 100644 --- a/packages/web-pkg/vite.config.ts +++ b/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,6 +27,15 @@ 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: [ @@ -31,7 +43,7 @@ export default defineConfig({ nodePolyfills({ exclude: ['crypto'] }), - dts({ declarationOnly: true, exclude: ['**/tests'] }), + dts({ exclude: ['**/tests'] }), { name: '@ownclouders/vite-plugin-docs', transform(src, id) { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5a45c3c543c..4e67a698264 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -931,7 +931,7 @@ importers: packages/web-pkg: dependencies: '@casl/ability': - specifier: 6.7.1 + specifier: ^6.7.1 version: 6.7.1 '@casl/vue': specifier: ^2.2.2 @@ -940,10 +940,10 @@ importers: specifier: ^2.0.1 version: 2.0.1 '@ownclouders/web-client': - specifier: workspace:* + specifier: workspace:^ version: link:../web-client '@sentry/vue': - specifier: 8.33.1 + specifier: ^8.33.1 version: 8.33.1(vue@3.5.11(typescript@5.6.3)) '@toast-ui/editor': specifier: ^3.2.2 @@ -967,28 +967,28 @@ importers: specifier: https://github.com/owncloud/uppy/releases/download/v3.12.13-owncloud/uppy-xhr-upload.tgz version: https://github.com/owncloud/uppy/releases/download/v3.12.13-owncloud/uppy-xhr-upload.tgz(@uppy/core@https://github.com/owncloud/uppy/releases/download/v3.12.13-owncloud/uppy-core.tgz) '@vue/shared': - specifier: 3.5.11 + specifier: ^3.5.11 version: 3.5.11 '@vueuse/core': specifier: ^11.0.0 version: 11.1.0(vue@3.5.11(typescript@5.6.3)) axios: - specifier: 1.7.7 + specifier: ^1.7.7 version: 1.7.7 deepmerge: specifier: ^4.2.2 version: 4.3.1 design-system: - specifier: workspace:@ownclouders/design-system@* + specifier: workspace:@ownclouders/design-system@^ version: link:../design-system dompurify: - specifier: 3.1.7 + specifier: ^3.1.7 version: 3.1.7 filesize: specifier: ^10.1.0 version: 10.1.6 fuse.js: - specifier: 7.0.0 + specifier: ^7.0.0 version: 7.0.0 js-generate-password: specifier: ^1.0.0 @@ -997,7 +997,7 @@ importers: specifier: ^4.17.21 version: 4.17.21 luxon: - specifier: 3.5.0 + specifier: ^3.5.0 version: 3.5.0 mark.js: specifier: ^8.11.1 @@ -1012,38 +1012,38 @@ importers: specifier: ^1.1.1 version: 1.1.1 pinia: - specifier: 2.2.4 + specifier: ^2.2.4 version: 2.2.4(typescript@5.6.3)(vue@3.5.11(typescript@5.6.3)) portal-vue: - specifier: 3.0.0 + specifier: ^3.0.0 version: 3.0.0(patch_hash=bogvb64kjdufpa4744k4xkam7u)(vue@3.5.11(typescript@5.6.3)) prismjs: specifier: ^1.29.0 version: 1.29.0 qs: - specifier: 6.13.0 + specifier: ^6.13.0 version: 6.13.0 semver: - specifier: 7.6.3 + specifier: ^7.6.3 version: 7.6.3 uuid: - specifier: 10.0.0 + specifier: ^10.0.0 version: 10.0.0 vue-concurrency: - specifier: 5.0.1 + specifier: ^5.0.1 version: 5.0.1(vue@3.5.11(typescript@5.6.3)) vue-router: - specifier: 4.2.5 + specifier: ^4.2.5 version: 4.2.5(vue@3.5.11(typescript@5.6.3)) vue3-gettext: - specifier: 2.4.0 + specifier: ^2.4.0 version: 2.4.0(patch_hash=x32qkm4z6srz5xuveescagpdyu)(@vue/compiler-sfc@3.5.11)(vue@3.5.11(typescript@5.6.3)) zod: - specifier: 3.23.8 + specifier: ^3.23.8 version: 3.23.8 devDependencies: '@ownclouders/web-test-helpers': - specifier: workspace:* + specifier: workspace:^ version: link:../web-test-helpers '@types/dompurify': specifier: 3.0.5 From 308b59c8a324d650e4f45acdf96d1179b7743fd6 Mon Sep 17 00:00:00 2001 From: Jannik Stehle Date: Fri, 11 Oct 2024 13:15:12 +0200 Subject: [PATCH 2/2] docs: specify web-pkg as dev dependency --- packages/web-pkg/README.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/web-pkg/README.md b/packages/web-pkg/README.md index 0461fd005cc..dc16fa856e4 100644 --- a/packages/web-pkg/README.md +++ b/packages/web-pkg/README.md @@ -7,9 +7,11 @@ 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.