feat: bring back shadowRoot

examples/oc10/index.html

@@ -6,10 +6,6 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="/favicon.ico">
     <title>File Picker dev demo</title>
-    <link rel="stylesheet" href="/css/uikit.min.css" />
-    <link rel="stylesheet" href="/style.css" />
-    <script src="/js/uikit.min.js"></script>
-    <script src="/js/uikit-icons.min.js"></script>
     <script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
     <script src="/file-picker.iife.js"></script>
   </head>

examples/ocis/index.html

@@ -6,10 +6,6 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="/favicon.ico">
     <title>File Picker dev demo</title>
-    <link rel="stylesheet" href="/css/uikit.min.css" />
-    <link rel="stylesheet" href="/style.css" />
-    <script src="/js/uikit.min.js"></script>
-    <script src="/js/uikit-icons.min.js"></script>
     <script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
     <script src="/file-picker.iife.js"></script>
   </head>

patches/@vue__web-component-wrapper@1.3.0.patch

@@ -1,26 +1,41 @@
 diff --git a/dist/vue-wc-wrapper.js b/dist/vue-wc-wrapper.js
-index 721bf1f13b0deca95e11d8b6803ccedda0a77cfc..71698d43bb0277214f7f30c1a3c58fa7aeb99cef 100644
+index 721bf1f13b0deca95e11d8b6803ccedda0a77cfc..87a7f33b2ab70b68a9929e092673c0a14437ba5a 100644
 --- a/dist/vue-wc-wrapper.js
 +++ b/dist/vue-wc-wrapper.js
-@@ -167,12 +167,10 @@ function wrap (Vue, Component) {
-   class CustomElement extends HTMLElement {
-     constructor () {
+@@ -95,7 +95,7 @@ function getAttributes (node) {
+   return res
+ }
+
+-function wrap (Vue, Component) {
++function wrap (Vue, Component, styles) {
+   const isAsync = typeof Component === 'function' && !Component.cid;
+   let isInitialized = false;
+   let hyphenatedPropsList;
+@@ -169,6 +169,13 @@ function wrap (Vue, Component) {
        const self = super();
--      self.attachShadow({ mode: 'open' });
+       self.attachShadow({ mode: 'open' });
 
++      if (styles) {
++        const style = document.createElement("style");
++        style.textContent = styles;
++
++        self.shadowRoot.appendChild(style);
++      }
++
        const wrapper = self._wrapper = new Vue({
          name: 'shadow-root',
          customElement: self,
--        shadowRoot: self.shadowRoot,
-         data () {
-           return {
-             props: {},
-@@ -246,7 +244,7 @@ function wrap (Vue, Component) {
-           this.childNodes
-         ));
-         wrapper.$mount();
--        this.shadowRoot.appendChild(wrapper.$el);
-+        this.appendChild(wrapper.$el);
-       } else {
-         callHooks(this.vueComponent, 'activated');
-       }
+diff --git a/types/index.d.ts b/types/index.d.ts
+index 8b67b7b2d18a46cd8bbc99b41029e8e103f3b80d..d2c44980eaff6cfbc3605dd9511cf3e0443a7275 100644
+--- a/types/index.d.ts
++++ b/types/index.d.ts
+@@ -2,7 +2,8 @@ import _Vue, { Component, AsyncComponent } from 'vue'
+
+ declare function wrap(
+   Vue: typeof _Vue,
+-  Component: Component | AsyncComponent
++  Component: Component | AsyncComponent,
++  styles: string
+ ): HTMLElement
+
+ export default wrap

src/App.vue

@@ -353,13 +353,3 @@ export default {
   }
 }
 </script>
-
-<style>
-/* Import oC CI font and design system styles */
-@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700&display=swap');
-@import '../node_modules/owncloud-design-system/dist/system/system.css';
-
-* {
-  font-family: 'Source Sans Pro', sans-serif;
-}
-</style>

src/components/ListHeader.vue

@@ -4,7 +4,7 @@
       <button
         v-if="currentFolder !== null"
         data-testid="btn-return"
-        class="btn-return"
+        class="oc-file-picker-btn-return"
         :aria-label="$gettext('Go back')"
         @click="emitGoBack"
       >
@@ -136,17 +136,3 @@ export default defineComponent({
   }
 })
 </script>
-
-<style lang="scss" scoped>
-.btn-return {
-  align-items: center;
-  background: transparent;
-  border: none;
-  display: flex;
-  padding: 0;
-
-  &:hover {
-    cursor: pointer;
-  }
-}
-</style>

src/components/ListResources.vue

@@ -20,7 +20,7 @@
         />
         <button
           v-else-if="isLocationPicker && resource.type === 'folder'"
-          class="file-picker-btn-sr-select"
+          class="oc-file-picker-file-picker-btn-sr-select"
           tabindex="0"
           @click="() => selectLocation(resource)"
           v-text="selectLabel(resource.name)"
@@ -130,7 +130,7 @@ export default defineComponent({
       }
 
       isRowDisabled(resource)
-        ? classes.push('files-list-row-disabled')
+        ? classes.push('oc-file-picker-files-list-row-disabled')
         : classes.push('oc-cursor-pointer')
 
       return classes
@@ -158,26 +158,3 @@ export default defineComponent({
   }
 })
 </script>
-
-<style lang="scss">
-.files-list-row-disabled {
-  opacity: 0.3;
-  pointer-events: none;
-}
-
-.file-picker-btn-sr-select {
-  position: absolute;
-  z-index: -1;
-  top: var(--oc-space-xsmall);
-  left: var(--oc-space-xsmall);
-  opacity: 0;
-  white-space: nowrap;
-  pointer-events: none;
-
-  &:focus {
-    opacity: 1;
-    z-index: 1;
-    pointer-events: auto;
-  }
-}
-</style>

src/components/SpacesList.vue

@@ -1,19 +1,25 @@
 <template>
   <oc-list>
     <li class="oc-px-m oc-py-s">
-      <button class="btn-space" @click="() => openSpace('personal', $gettext('Personal'))">
+      <button
+        class="oc-file-picker-btn-space"
+        @click="() => openSpace('personal', $gettext('Personal'))"
+      >
         <oc-icon name="resource-type-folder" size="large" />
         <span v-text="$gettext('Personal')" />
       </button>
     </li>
     <li class="oc-border-t oc-p-m">
-      <button class="btn-space" @click="() => openSpace('shares', $gettext('Shares'))">
+      <button
+        class="oc-file-picker-btn-space"
+        @click="() => openSpace('shares', $gettext('Shares'))"
+      >
         <oc-icon name="share-forward" size="large" />
         <span v-text="$gettext('Shares')" />
       </button>
     </li>
     <li v-for="space in spaces" :key="space.id" class="oc-border-t oc-p-m">
-      <button class="btn-space" @click="() => openSpace(space.id, space.name)">
+      <button class="oc-file-picker-btn-space" @click="() => openSpace(space.id, space.name)">
         <oc-icon name="layout-grid" size="large" />
         <span v-text="space.name" />
       </button>
@@ -43,19 +49,3 @@ export default defineComponent({
   }
 })
 </script>
-
-<style scoped lang="scss">
-.btn-space {
-  align-items: center;
-  background: transparent;
-  border: none;
-  display: flex;
-  gap: 0.5rem;
-  padding: 0;
-
-  &:hover {
-    cursor: pointer;
-    text-decoration: underline;
-  }
-}
-</style>

src/main.lib.ts

@@ -1,3 +1,4 @@
 import FilePicker from './App.vue'
+import './style.css'
 
 export default FilePicker

src/main.wc.ts

@@ -3,6 +3,7 @@ import wrap from '@vue/web-component-wrapper'
 import { Buffer } from 'buffer'
 import EventEmitter from 'events'
 import process from 'process'
+import styles from './style.css'
 
 import App from './App.vue'
 
@@ -13,7 +14,7 @@ window.process = process
 
 Vue.config.productionTip = false
 
-const FilePicker = wrap(Vue, App)
+const FilePicker = wrap(Vue, App, styles)
 
 // @ts-expect-error mismatch in type comes from the wrapper library
 customElements.define('file-picker', FilePicker)

src/style.css

@@ -1,5 +1,7 @@
+@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700&display=swap');
+@import '../node_modules/owncloud-design-system/dist/system/system.css';
+
 :root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
 
@@ -14,6 +16,10 @@
   -webkit-text-size-adjust: 100%;
 }
 
+* {
+  font-family: 'Source Sans Pro', sans-serif;
+}
+
 a {
   font-weight: 500;
   color: #646cff;
@@ -66,6 +72,53 @@ button:focus-visible {
   text-align: center;
 }
 
+.oc-file-picker-btn-return {
+  align-items: center;
+  background: transparent;
+  border: none;
+  display: flex;
+  padding: 0;
+}
+
+.oc-file-picker-btn-return:hover {
+  cursor: pointer;
+}
+
+.oc-file-picker-files-list-row-disabled {
+  opacity: 0.3;
+  pointer-events: none;
+}
+
+.oc-file-picker-file-picker-btn-sr-select {
+  position: absolute;
+  z-index: -1;
+  top: var(--oc-space-xsmall);
+  left: var(--oc-space-xsmall);
+  opacity: 0;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+.oc-file-picker-file-picker-btn-sr-select:focus {
+  opacity: 1;
+  z-index: 1;
+  pointer-events: auto;
+}
+
+.oc-file-picker-btn-space {
+  align-items: center;
+  background: transparent;
+  border: none;
+  display: flex;
+  gap: 0.5rem;
+  padding: 0;
+}
+
+.oc-file-picker-btn-space:hover {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;

vite.config.ts

@@ -56,7 +56,6 @@ export default defineConfig(({ mode }) => {
     },
     build: {
       outDir: mode === 'library' ? './dist/lib' : './dist/wc',
-      cssCodeSplit: false,
       lib: mode === 'library' ? lib : wc,
       emptyOutDir: false,
       minify: false,