chore: setup vite and typescript #198

LukasHirt · 2023-03-31T18:37:21Z

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:

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

kulmann · 2023-03-31T19:08:23Z

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 · 2023-04-06T17:57:24Z

@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 · 2023-04-06T17:58:00Z

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 · 2023-04-06T18:02:46Z

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

dschmidt

Veeery niice!

README.md

babel.config.cjs

package.json

src/helpers/resources.js

src/main-wc.ts

tsconfig.json

LukasHirt · 2023-04-06T18:18:59Z

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 · 2023-04-07T08:20:00Z

or I didn't actually publish it 😅

scripts/install-ods.sh

src/main-wc.ts

vite.config.ts

patches/@[email protected]

… event emitter

LukasHirt · 2023-04-12T15:25:15Z

@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...

kulmann

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? :-)

Thanks for the modernization, really good to see that here!

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/@[email protected]/node_modules/@volar/vue-language-core/out/utils/ts.js
- /Users/bene/Code/owncloud/web/file-picker/node_modules/.pnpm/@[email protected]/node_modules/@volar/vue-language-core/out/index.js
- /Users/bene/Code/owncloud/web/file-picker/node_modules/.pnpm/[email protected][email protected]/node_modules/vue-tsc/out/index.js
- /Users/bene/Code/owncloud/web/file-picker/node_modules/.pnpm/[email protected]/node_modules/typescript/lib/tsc.js
- /Users/bene/Code/owncloud/web/file-picker/node_modules/.pnpm/[email protected][email protected]/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/@[email protected]/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/@[email protected]/node_modules/@volar/vue-language-core/out/utils/ts.js:18:16)
    at getVueCompilerOptions (/Users/bene/Code/owncloud/web/file-picker/node_modules/.pnpm/[email protected][email protected]/node_modules/vue-tsc/out/index.js:78:28)
    at Object.createProgram (/Users/bene/Code/owncloud/web/file-picker/node_modules/.pnpm/[email protected][email protected]/node_modules/vue-tsc/out/index.js:42:36)
    at Object.createProgram (/Users/bene/Code/owncloud/web/file-picker/node_modules/.pnpm/[email protected]/node_modules/typescript/lib/tsc.js:98754:255)
    at performCompilation (/Users/bene/Code/owncloud/web/file-picker/node_modules/.pnpm/[email protected]/node_modules/typescript/lib/tsc.js:107857:26)
    at executeCommandLineWorker (/Users/bene/Code/owncloud/web/file-picker/node_modules/.pnpm/[email protected]/node_modules/typescript/lib/tsc.js:107731:17)
    at Object.executeCommandLine (/Users/bene/Code/owncloud/web/file-picker/node_modules/.pnpm/[email protected]/node_modules/typescript/lib/tsc.js:107776:20) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/bene/Code/owncloud/web/file-picker/node_modules/.pnpm/@[email protected]/node_modules/@volar/vue-language-core/out/utils/ts.js',
    '/Users/bene/Code/owncloud/web/file-picker/node_modules/.pnpm/@[email protected]/node_modules/@volar/vue-language-core/out/index.js',
    '/Users/bene/Code/owncloud/web/file-picker/node_modules/.pnpm/[email protected][email protected]/node_modules/vue-tsc/out/index.js',
    '/Users/bene/Code/owncloud/web/file-picker/node_modules/.pnpm/[email protected]/node_modules/typescript/lib/tsc.js',
    '/Users/bene/Code/owncloud/web/file-picker/node_modules/.pnpm/[email protected][email protected]/node_modules/vue-tsc/bin/vue-tsc.js'
  ]
}

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

Again, nice one! 💪

dschmidt · 2023-04-13T06:00:29Z

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/@[email protected]/node_modules/@volar/vue-language-core/out/utils/ts.js
- /Users/bene/Code/owncloud/web/file-picker/node_modules/.pnpm/@[email protected]/node_modules/@volar/vue-language-core/out/index.js
- /Users/bene/Code/owncloud/web/file-picker/node_modules/.pnpm/[email protected][email protected]/node_modules/vue-tsc/out/index.js
- /Users/bene/Code/owncloud/web/file-picker/node_modules/.pnpm/[email protected]/node_modules/typescript/lib/tsc.js
- /Users/bene/Code/owncloud/web/file-picker/node_modules/.pnpm/[email protected][email protected]/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/@[email protected]/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/@[email protected]/node_modules/@volar/vue-language-core/out/utils/ts.js:18:16)
    at getVueCompilerOptions (/Users/bene/Code/owncloud/web/file-picker/node_modules/.pnpm/[email protected][email protected]/node_modules/vue-tsc/out/index.js:78:28)
    at Object.createProgram (/Users/bene/Code/owncloud/web/file-picker/node_modules/.pnpm/[email protected][email protected]/node_modules/vue-tsc/out/index.js:42:36)
    at Object.createProgram (/Users/bene/Code/owncloud/web/file-picker/node_modules/.pnpm/[email protected]/node_modules/typescript/lib/tsc.js:98754:255)
    at performCompilation (/Users/bene/Code/owncloud/web/file-picker/node_modules/.pnpm/[email protected]/node_modules/typescript/lib/tsc.js:107857:26)
    at executeCommandLineWorker (/Users/bene/Code/owncloud/web/file-picker/node_modules/.pnpm/[email protected]/node_modules/typescript/lib/tsc.js:107731:17)
    at Object.executeCommandLine (/Users/bene/Code/owncloud/web/file-picker/node_modules/.pnpm/[email protected]/node_modules/typescript/lib/tsc.js:107776:20) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/bene/Code/owncloud/web/file-picker/node_modules/.pnpm/@[email protected]/node_modules/@volar/vue-language-core/out/utils/ts.js',
    '/Users/bene/Code/owncloud/web/file-picker/node_modules/.pnpm/@[email protected]/node_modules/@volar/vue-language-core/out/index.js',
    '/Users/bene/Code/owncloud/web/file-picker/node_modules/.pnpm/[email protected][email protected]/node_modules/vue-tsc/out/index.js',
    '/Users/bene/Code/owncloud/web/file-picker/node_modules/.pnpm/[email protected]/node_modules/typescript/lib/tsc.js',
    '/Users/bene/Code/owncloud/web/file-picker/node_modules/.pnpm/[email protected][email protected]/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!

chore: setup vite and typescript

LukasHirt force-pushed the chore/setup-vite-and-ts branch 2 times, most recently from 7057abc to c99a696 Compare April 6, 2023 17:55

LukasHirt marked this pull request as ready for review April 6, 2023 17:56

LukasHirt requested review from kulmann and fschade as code owners April 6, 2023 17:56

dschmidt reviewed Apr 6, 2023

View reviewed changes

README.md Outdated Show resolved Hide resolved

babel.config.cjs Show resolved Hide resolved

package.json Show resolved Hide resolved

src/helpers/resources.js Show resolved Hide resolved

src/main-wc.ts Outdated Show resolved Hide resolved

tsconfig.json Show resolved Hide resolved

LukasHirt force-pushed the chore/setup-vite-and-ts branch from c99a696 to 15d00e7 Compare April 7, 2023 17:32

LukasHirt requested a review from dschmidt April 7, 2023 17:34

chore: setup vite and typescript

e1630c1

LukasHirt force-pushed the chore/setup-vite-and-ts branch from 15d00e7 to e1630c1 Compare April 7, 2023 17:49

dschmidt reviewed Apr 11, 2023

View reviewed changes

scripts/install-ods.sh Outdated Show resolved Hide resolved

dschmidt reviewed Apr 11, 2023

View reviewed changes

src/main-wc.ts Outdated Show resolved Hide resolved

dschmidt reviewed Apr 11, 2023

View reviewed changes

vite.config.ts Outdated Show resolved Hide resolved

dschmidt reviewed Apr 11, 2023

View reviewed changes

patches/@[email protected] Outdated Show resolved Hide resolved

feat: use ODS 15, clean up patch, change port and fix type error with…

672148d

… event emitter

dschmidt approved these changes Apr 12, 2023

View reviewed changes

LukasHirt mentioned this pull request Apr 12, 2023

deps: use ts oidc client #199

Merged

1 task

chore: update pnpm lock

8eb7c70

kulmann approved these changes Apr 12, 2023

View reviewed changes

kulmann mentioned this pull request Apr 13, 2023

chore: change filepicker idp ports owncloud/web#8803

Merged

kulmann merged commit f6f277c into owncloud:master Apr 14, 2023

LukasHirt deleted the chore/setup-vite-and-ts branch April 14, 2023 13:17

ownclouders pushed a commit that referenced this pull request Apr 14, 2023

Merge pull request #198 from LukasHirt/chore/setup-vite-and-ts

0b4566c

chore: setup vite and typescript

pascalwengerter mentioned this pull request May 10, 2023

Bump filesize library #84

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: setup vite and typescript #198

chore: setup vite and typescript #198

LukasHirt commented Mar 31, 2023 •

edited

Loading

kulmann commented Mar 31, 2023

LukasHirt commented Apr 6, 2023

LukasHirt commented Apr 6, 2023

dschmidt commented Apr 6, 2023

dschmidt left a comment

LukasHirt commented Apr 6, 2023

dschmidt commented Apr 7, 2023

LukasHirt commented Apr 12, 2023 •

edited

Loading

kulmann left a comment

dschmidt commented Apr 13, 2023

chore: setup vite and typescript #198

chore: setup vite and typescript #198

Conversation

LukasHirt commented Mar 31, 2023 • edited Loading

Motivation

Scope

TODO:

kulmann commented Mar 31, 2023

LukasHirt commented Apr 6, 2023

LukasHirt commented Apr 6, 2023

dschmidt commented Apr 6, 2023

dschmidt left a comment

Choose a reason for hiding this comment

LukasHirt commented Apr 6, 2023

dschmidt commented Apr 7, 2023

LukasHirt commented Apr 12, 2023 • edited Loading

kulmann left a comment

Choose a reason for hiding this comment

dschmidt commented Apr 13, 2023

LukasHirt commented Mar 31, 2023 •

edited

Loading

LukasHirt commented Apr 12, 2023 •

edited

Loading