WIP: Make it possible to develop with Vite

.vscode/extensions.json

@@ -6,6 +6,7 @@
     "EditorConfig.EditorConfig",
     "esbenp.prettier-vscode",
     "Orta.vscode-jest",
-    "Vue.volar"
+    "Vue.volar",
+    "ZixuanChen.vitest-explorer"
   ]
 }

config/vite_oc10/config.json

@@ -0,0 +1,17 @@
+{
+  "server": "http://host.docker.internal:8080",
+  "theme": "https://host.docker.internal:8081/themes/owncloud/theme.json",
+  "auth": {
+    "clientId": "AWhZZsxb59ouGg97HsdR7GiN8pnzEYvk1cL6aVJgTQH1Gcdxly1gendLVTZ5zpYC",
+    "clientSecret": "VsrTbbeTPJ56e93eKpCdb6Wf5IGHD2meadlsDT1M9EpS3k7Y1ywTYgOhTkKZ0QTL",
+    "url": "http://host.docker.internal:8080/index.php/apps/oauth2/api/v1/token",
+    "authUrl": "http://host.docker.internal:8080/index.php/apps/oauth2/authorize",
+    "logoutUrl": "http://host.docker.internal:8080/index.php/logout"
+  },
+  "apps": [
+    "files",
+    "text-editor",
+    "pdf-viewer",
+    "search"
+  ]
+}

config/vite_ocis/config.json

@@ -0,0 +1,19 @@
+{
+  "server": "https://host.docker.internal:9200",
+  "theme": "https://host.docker.internal:9201/themes/owncloud/theme.json",
+  "openIdConnect": {
+    "metadata_url": "https://host.docker.internal:9200/.well-known/openid-configuration",
+    "authority": "https://host.docker.internal:9200",
+    "client_id": "web",
+    "response_type": "code",
+    "scope": "openid profile email"
+  },
+  "apps": [
+    "files",
+    "text-editor",
+    "pdf-viewer",
+    "search",
+    "external",
+    "user-management"
+  ]
+}

dev/docker/oc10.entrypoint.sh

@@ -36,6 +36,13 @@ then
       UmCVsEIxdWmssxa6uVRRPC3txYBVN4qqxooJbsPhuuoPmHk9Pt9Oy68N4ZaKXUYy \
       HW1fo6lbtgEERBQufBouJ4HID2QaDfngvIdc2vjDUE46qKB4JRG1YDir41LliReC \
       http://localhost:9100/oidc-callback.html
+    occ oauth2:add-client \
+      web-vite \
+      AWhZZsxb59ouGg97HsdR7GiN8pnzEYvk1cL6aVJgTQH1Gcdxly1gendLVTZ5zpYC \
+      VsrTbbeTPJ56e93eKpCdb6Wf5IGHD2meadlsDT1M9EpS3k7Y1ywTYgOhTkKZ0QTL \
+      http://host.docker.internal:8081/oidc-callback.html \
+      false \
+      true
     occ config:system:set trusted_domains 0 --value="localhost"
     occ config:system:set cors.allowed-domains 0 --value="http://localhost:9100"
 fi

dev/docker/ocis.idp.config.yaml

@@ -7,8 +7,11 @@ clients:
   redirect_uris:
     - https://host.docker.internal:9100/
     - https://host.docker.internal:9200/
+    - https://host.docker.internal:9201/
     - https://host.docker.internal:9100/oidc-callback.html
     - https://host.docker.internal:9200/oidc-callback.html
+    - https://host.docker.internal:9201/oidc-callback.html
   origins:
     - https://host.docker.internal:9100
     - https://host.docker.internal:9200
+    - https://host.docker.internal:9201

docker-compose.yml

@@ -69,23 +69,24 @@ services:
       - 8080:8080
     environment:
       OWNCLOUD_LOCKING_ENABLED: "false"
+      OWNCLOUD_CORS_ALLOWED_DOMAINS: http://host.docker.internal:8081
     volumes:
       - ${OC10_WEB_CONFIG:-./dev/docker/oc10.web.config.json}:/mnt/data/config/config.json
       - ${OC10_CONFIG:-./dev/docker/oc10.config.php}:/mnt/data/config/setup.config.php
       - ./dev/docker/oc10.entrypoint.sh:/usr/bin/entrypoint
       - ./packages/web-integration-oc10/appinfo:/mnt/data/apps/web/appinfo
       - ./packages/web-integration-oc10/lib:/mnt/data/apps/web/lib
-      - ./dist/css:/mnt/data/apps/web/css
-      - ./dist/img:/mnt/data/apps/web/img
-      - ./dist/js:/mnt/data/apps/web/js/
+      # - ./dist/css:/mnt/data/apps/web/css
+      # - ./dist/img:/mnt/data/apps/web/img
+      # - ./dist/js:/mnt/data/apps/web/js/
       - ./packages/web-integration-oc10/js/app.js:/mnt/data/apps/web/js/app.js
-      - ./dist/themes:/mnt/data/apps/web/themes
-      - ./dist/icons:/mnt/data/apps/web/icons
-      - ./dist/fonts:/mnt/data/apps/web/fonts
-      - ./dist/index.html:/mnt/data/apps/web/index.html
-      - ./dist/manifest.json:/mnt/data/apps/web/manifest.json
-      - ./dist/oidc-callback.html:/mnt/data/apps/web/oidc-callback.html
-      - ./dist/oidc-silent-redirect.html:/mnt/data/apps/web/oidc-silent-redirect.html
+      # - ./dist/themes:/mnt/data/apps/web/themes
+      # - ./dist/icons:/mnt/data/apps/web/icons
+      # - ./dist/fonts:/mnt/data/apps/web/fonts
+      # - ./dist/index.html:/mnt/data/apps/web/index.html
+      # - ./dist/manifest.json:/mnt/data/apps/web/manifest.json
+      # - ./dist/oidc-callback.html:/mnt/data/apps/web/oidc-callback.html
+      # - ./dist/oidc-silent-redirect.html:/mnt/data/apps/web/oidc-silent-redirect.html
     extra_hosts:
       - host.docker.internal:${DOCKER_HOST:-host-gateway}
     entrypoint: /usr/bin/entrypoint

index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ownCloud</title>
+  </head>
+  <body>
+    <div id="owncloud"></div>
+    <script type="module" src="../packages/web-runtime/src/index.ts"></script>
+  </body>
+</html>

package.json

@@ -15,7 +15,10 @@
     "test:unit": "NODE_OPTIONS=--unhandled-rejections=throw jest --config ./tests/unit/config/jest.config.js",
     "licenses:check": "license-checker-rseidelsohn --summary --relativeLicensePath --onlyAllow 'Python-2.0;Apache*;Apache License, Version 2.0;Apache-2.0;Apache 2.0;Artistic-2.0;BSD;BSD-3-Clause;CC-BY-3.0;CC-BY-4.0;CC0-1.0;ISC;MIT;MPL-2.0;Public Domain;Unicode-TOU;Unlicense;WTFPL' --excludePackages '@ownclouders/babel-preset;@ownclouders/eslint-config;@ownclouders/prettier-config;@ownclouders/tsconfig;@ownclouders/web-client;@ownclouders/web-pkg,draw-io;external;web-app-files;text-editor;preview;@ownclouders/design-system;pdf-viewer;web-app-search;user-management;web-runtime'",
     "licenses:csv": "license-checker-rseidelsohn --relativeLicensePath --csv --out ./third-party-licenses/third-party-licenses.csv",
-    "licenses:save": "license-checker-rseidelsohn --relativeLicensePath --out /dev/null --files ./third-party-licenses/third-party-licenses"
+    "licenses:save": "license-checker-rseidelsohn --relativeLicensePath --out /dev/null --files ./third-party-licenses/third-party-licenses",
+    "vite": "pnpm vite:ocis",
+    "vite:ocis": "vite",
+    "vite:oc10": "OCIS=false vite"
   },
   "browserslist": [
     "last 2 versions",
@@ -29,6 +32,7 @@
   ],
   "dependencies": {
     "keycode": "^2.2.1",
+    "vite-plugin-static-copy": "^0.12.0",
     "vue": "2.7.14"
   },
   "peerDependencies": {
@@ -44,6 +48,8 @@
     "@cucumber/cucumber": "7.3.2",
     "@cucumber/messages": "17.1.1",
     "@cucumber/pretty-formatter": "1.0.0",
+    "@esbuild-plugins/node-globals-polyfill": "^0.1.1",
+    "@esbuild-plugins/node-modules-polyfill": "^0.1.4",
     "@noble/hashes": "1.1.3",
     "@ownclouders/design-system": "workspace:*",
     "@ownclouders/babel-preset": "workspace:*",
@@ -65,6 +71,7 @@
     "@types/lodash-es": "4.17.6",
     "@types/node": "16.18.3",
     "@types/node-fetch": "2.6.2",
+    "@vitejs/plugin-vue2": "2.0.1",
     "@vue/test-utils": "1.3.3",
     "@vue/vue2-jest": "29.2.0",
     "autoprefixer": "10.4.13",
@@ -88,6 +95,7 @@
     "jest-mock-extended": "3.0.1",
     "jest-serializer-vue": "2.0.2",
     "join-path": "1.1.1",
+    "jsdom": "^20.0.2",
     "license-checker-rseidelsohn": "3.1.0",
     "lodash": "4.17.21",
     "node-fetch": "2.6.7",
@@ -103,6 +111,7 @@
     "rollup-plugin-gzip": "3.1.0",
     "rollup-plugin-livereload": "2.0.5",
     "rollup-plugin-modify": "3.0.0",
+    "rollup-plugin-node-polyfills": "0.2.1",
     "rollup-plugin-polyfill-node": "0.11.0",
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-progress": "1.1.2",
@@ -116,6 +125,10 @@
     "typescript": "4.9.3",
     "url-search-params-polyfill": "8.1.1",
     "vue-gettext": "2.1.12",
+    "vite": "3.2.3",
+    "vite-plugin-environment": "^1.1.3",
+    "vitest": "^0.25.2",
+    "vue-tsc": "1.0.9",
     "vuex-mock-store": "0.0.8",
     "wait-for-expect": "3.0.2"
   },

packages/tsconfig/tsconfig.json

@@ -31,8 +31,7 @@
     // "importHelpers": true,                       /* Import emit helpers from 'tslib'. */
     "downlevelIteration": true,
     /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
-    // "isolatedModules": true,                     /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
-
+    "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
     /* Strict Type-Checking Options */
     "strict": false,
     /* Enable all strict type-checking options. */
@@ -65,24 +64,22 @@
     /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
     // "preserveSymlinks": true,                    /* Do not resolve the real path of symlinks. */
     // "allowUmdGlobalAccess": true,                /* Allow accessing UMD globals from modules. */
-
     /* Source Map Options */
     // "sourceRoot": "",                            /* Specify the location where debugger should locate TypeScript files instead of source locations. */
     // "mapRoot": "",                               /* Specify the location where debugger should locate map files instead of generated locations. */
     // "inlineSourceMap": true,                     /* Emit a single file with source maps instead of having a separate file. */
     // "inlineSources": true,                       /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
-
     /* Experimental Options */
     "experimentalDecorators": true,
     /* Enables experimental support for ES7 decorators. */
     //"emitDecoratorMetadata": true,
     /* Enables experimental support for emitting type metadata for decorators. */
-
     /* Advanced Options */
     "skipLibCheck": true,
     /* Skip type checking of declaration files. */
-    "forceConsistentCasingInFileNames": true
+    "forceConsistentCasingInFileNames": true,
     /* Disallow inconsistently-cased references to the same file. */
+    "resolveJsonModule": true
   },
   "exclude": [
     "node_modules"

packages/web-app-files/src/components/AppBar/AppBar.vue

@@ -66,7 +66,7 @@ import { defineComponent, PropType } from 'vue'
 import { Resource } from 'web-client'
 import { BreadcrumbItem } from '../../helpers/breadcrumbs'
 import { SpaceResource } from 'web-client/src/helpers'
-import { isLocationTrashActive } from 'web-app-files/src/router'
+import { isLocationTrashActive } from '../../../src/router'
 
 export default defineComponent({
   components: {

packages/web-app-files/src/router/index.ts

@@ -27,7 +27,7 @@ import {
   isLocationTrashActive,
   createLocationTrash
 } from './trash'
-import { ActiveRouteDirectorFunc } from './utils'
+import type { ActiveRouteDirectorFunc } from './utils'
 
 const ROOT_ROUTE = {
   path: '/',

packages/web-app-files/src/services/folder.ts

@@ -12,7 +12,7 @@ import {
   FolderLoaderSharedWithMe,
   FolderLoaderSharedWithOthers,
   FolderLoaderTrashbin
-} from './folder/'
+} from './folder/index'
 
 export * from './folder/types'
 

packages/web-client/src/index.ts

@@ -2,12 +2,12 @@ import { AxiosInstance } from 'axios'
 import { graph, Graph } from './graph'
 import { ocs, OCS } from './ocs'
 
-export { Graph } from './graph'
-export { OCS } from './ocs'
+export type { Graph } from './graph'
+export type { OCS } from './ocs'
 
 export * as helpers from './helpers'
 
-export { Resource, User } from './helpers'
+export type { Resource, User } from './helpers'
 
 interface Client {
   graph: Graph

packages/web-client/src/ocs/index.ts

@@ -1,7 +1,7 @@
 import { Capabilities, GetCapabilitiesFactory } from './capabilities'
 import { AxiosInstance } from 'axios'
 
-export { Capabilities } from './capabilities'
+export type { Capabilities } from './capabilities'
 
 export interface OCS {
   getCapabilities: () => Promise<Capabilities>

packages/web-runtime/src/container/application/index.ts

@@ -17,12 +17,12 @@ export { NextApplication } from './next'
 const { requirejs, define } = window as any
 
 // register modules with requirejs to provide them to applications
-define('vuex', () => {
-  return vuex
-})
-define('luxon', () => {
-  return luxon
-})
+// define('vuex', () => {
+//   return vuex
+// })
+// define('luxon', () => {
+//   return luxon
+// })
 
 /**
  * sniffs arguments and decides if given manifest is of next or current application style.
@@ -46,16 +46,14 @@ export const buildApplication = async ({
     throw new RuntimeError('application already announced', applicationPath)
   }
 
-  const applicationScript: ClassicApplicationScript = await new Promise((resolve, reject) =>
-    requirejs(
-      [applicationPath],
-      (app) => resolve(app),
-      (err) => reject(err)
-    )
-  ).catch((e) => {
+  let applicationScript: ClassicApplicationScript
+  try {
+    let modulePath = `/packages/${applicationPath}/src/index`
+    applicationScript = (await import(modulePath)).default
+  } catch(e) {
     console.error(e)
-    throw new RuntimeError('cannot load application', applicationPath)
-  })
+    throw new RuntimeError('cannot load application', applicationPath, e)
+  }
 
   let application: NextApplication
 

packages/web-runtime/src/container/versions.ts

@@ -1,8 +1,7 @@
 import { Store } from 'vuex'
 
 export const getWebVersion = (): string => {
-  const version = process.env.PACKAGE_VERSION
-  return `ownCloud Web UI ${version}`
+  return `ownCloud Web UI ${process.env.PACKAGE_VERSION}`
 }
 
 export const getBackendVersion = ({ store }: { store: Store<unknown> }): string => {

packages/web-runtime/src/index.ts

@@ -195,3 +195,6 @@ export const renderFailure = async (err: Error): Promise<void> => {
     render: (h) => h(pages.failure)
   })
 }
+
+
+bootstrap('config.json').then(renderSuccess).catch(renderFailure)

packages/web-runtime/src/layouts/Loading.vue

@@ -8,7 +8,7 @@
     <oc-spinner size="xlarge" :aria-label="$gettext('Loading')" />
   </div>
 </template>
-<script>
+<script lang="ts">
 import { mapGetters } from 'vuex'
 
 export default {

packages/web-runtime/src/pages/logout.vue

@@ -15,7 +15,7 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
 import { useRouter, useStore, useTranslations } from 'web-pkg'
-import { authService } from 'web-runtime/src/services/auth'
+import { authService } from '../services/auth'
 
 export default defineComponent({
   name: 'LogoutPage',

packages/web-runtime/src/pages/oidcCallback.vue

@@ -18,7 +18,7 @@
 <script lang="ts">
 import { computed, defineComponent, onMounted, ref, unref } from 'vue'
 import { useRoute, useStore } from 'web-pkg'
-import { authService } from 'web-runtime/src/services/auth'
+import { authService } from '../services/auth'
 
 export default defineComponent({
   name: 'OidcCallbackPage',