chore: setup vite and typescript

LukasHirt commented 1 year ago

Motivation

To keep up with the web repo, setup vite. To enable using the web client, setup typescript

Scope

only prepare vite and typescript, do not do any actual typescript rewrite yet
ts oidc client will come in a separate PR
update various dependencies
use Vue version 2.6 because of compatibility with the owncloud-design-system package

TODO:

[x] build a format that can be run in the browser directly without any bundler
[x] build lib as well and not only wc
[x] test that the authorization still works

kulmann commented 1 year ago

When you switch to typescript it probably makes sense to also switch to https://github.com/authts/oidc-client-ts It's a fork and then TS rewrite of the unmaintained oidc-client we used before (and still use here in the file-picker).

LukasHirt commented 1 year ago

@dschmidt @JammingBen I was told you could help me out here with reviewing the code. Could I ask you then to look into it pls? I tried to fill in all the necessary information into the description.

LukasHirt commented 1 year ago

When you switch to typescript it probably makes sense to also switch to https://github.com/authts/oidc-client-ts It's a fork and then TS rewrite of the unmaintained oidc-client we used before (and still use here in the file-picker).

Thanks for the hint! I'll do so in a separate PR because this one is already starting to get blown out of proportion...

dschmidt commented 1 year ago

I'll try to look soon.

Meanwhile: we have @ownclouders/design-dystem which is published from the mono repo (with support for vue 3 I hope)

This repo possibly should use vue-demi. Maybe we should do that for the design-system as well.

Maybe chat me up on rocketchat and we can discuss

LukasHirt commented 1 year ago

Meanwhile: we have @ownclouders/design-dystem which is published from the mono repo (with support for vue 3 I hope)

I am not seeing this package on npm. Trying to install it throws 404 as well. Maybe it is set as a private package?

dschmidt commented 1 year ago

or I didn't actually publish it 😅

LukasHirt commented 1 year ago

@kulmann @JammingBen with Dominik we discussed a second reviewer look. Could I ask either of you? 🙏 I'll look into why the build is failing in CI in the meantime...

dschmidt commented 1 year ago

I assume the uikit files are only added to make this PR as small as possible / not adjusting to the new ODS classes in the same PR, right? :-)

Ah, right, complained about that in chat too 😋

fyi, during the pnpm build or pnpm preview run I get the following error, but it doesn't seem to harm my dev environment...

> vue-tsc --noEmit && vite build --mode web-component

Error: Cannot find module '@ownclouders/tsconfig'
Require stack:
- /Users/bene/Code/owncloud/web/file-picker/node_modules/.pnpm/@volar+vue-language-core@1.2.0/node_modules/@volar/vue-language-core/out/utils/ts.js
- /Users/bene/Code/owncloud/web/file-picker/node_modules/.pnpm/@volar+vue-language-core@1.2.0/node_modules/@volar/vue-language-core/out/index.js
- /Users/bene/Code/owncloud/web/file-picker/node_modules/.pnpm/vue-tsc@1.2.0_typescript@4.9.3/node_modules/vue-tsc/out/index.js
- /Users/bene/Code/owncloud/web/file-picker/node_modules/.pnpm/typescript@4.9.3/node_modules/typescript/lib/tsc.js
- /Users/bene/Code/owncloud/web/file-picker/node_modules/.pnpm/vue-tsc@1.2.0_typescript@4.9.3/node_modules/vue-tsc/bin/vue-tsc.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1075:15)
    at Function.resolve (node:internal/modules/cjs/helpers:116:19)
    at createParsedCommandLineBase (/Users/bene/Code/owncloud/web/file-picker/node_modules/.pnpm/@volar+vue-language-core@1.2.0/node_modules/@volar/vue-language-core/out/utils/ts.js:41:35)
    at Object.createParsedCommandLine (/Users/bene/Code/owncloud/web/file-picker/node_modules/.pnpm/@volar+vue-language-core@1.2.0/node_modules/@volar/vue-language-core/out/utils/ts.js:18:16)
    at getVueCompilerOptions (/Users/bene/Code/owncloud/web/file-picker/node_modules/.pnpm/vue-tsc@1.2.0_typescript@4.9.3/node_modules/vue-tsc/out/index.js:78:28)
    at Object.createProgram (/Users/bene/Code/owncloud/web/file-picker/node_modules/.pnpm/vue-tsc@1.2.0_typescript@4.9.3/node_modules/vue-tsc/out/index.js:42:36)
    at Object.createProgram (/Users/bene/Code/owncloud/web/file-picker/node_modules/.pnpm/typescript@4.9.3/node_modules/typescript/lib/tsc.js:98754:255)
    at performCompilation (/Users/bene/Code/owncloud/web/file-picker/node_modules/.pnpm/typescript@4.9.3/node_modules/typescript/lib/tsc.js:107857:26)
    at executeCommandLineWorker (/Users/bene/Code/owncloud/web/file-picker/node_modules/.pnpm/typescript@4.9.3/node_modules/typescript/lib/tsc.js:107731:17)
    at Object.executeCommandLine (/Users/bene/Code/owncloud/web/file-picker/node_modules/.pnpm/typescript@4.9.3/node_modules/typescript/lib/tsc.js:107776:20) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/bene/Code/owncloud/web/file-picker/node_modules/.pnpm/@volar+vue-language-core@1.2.0/node_modules/@volar/vue-language-core/out/utils/ts.js',
    '/Users/bene/Code/owncloud/web/file-picker/node_modules/.pnpm/@volar+vue-language-core@1.2.0/node_modules/@volar/vue-language-core/out/index.js',
    '/Users/bene/Code/owncloud/web/file-picker/node_modules/.pnpm/vue-tsc@1.2.0_typescript@4.9.3/node_modules/vue-tsc/out/index.js',
    '/Users/bene/Code/owncloud/web/file-picker/node_modules/.pnpm/typescript@4.9.3/node_modules/typescript/lib/tsc.js',
    '/Users/bene/Code/owncloud/web/file-picker/node_modules/.pnpm/vue-tsc@1.2.0_typescript@4.9.3/node_modules/vue-tsc/bin/vue-tsc.js'
  ]
}

vue-tsc needs to be updated to 1.3.x (at least the version we use in oC Web) - 1.3.14 is newest. For some reason 1.2.0 is still tagged as current and 1.3.x is only tagged as next, that's why it doesnt show up on the npmjs.com project page without looking at the versions.

Also, we should change the filepicker idp config in the web dockerized ocis dev container to use port 3000 as well.

Good catch!

owncloud / file-picker