missing class attributes on wrapper functions

src/utils.js

@@ -21,6 +21,33 @@ export function createObserver(options) {
   return observer;
 }
 
+function unwrapClass(classes) {
+  if (!classes) return [];
+
+  const result = [];
+  if (Array.isArray(classes)) {
+    classes.forEach((cl) => {
+      result.push(...unwrapClass(cl));
+    });
+    return result;
+  } if (typeof classes === `object`) {
+    Object.keys(classes).forEach((key) => {
+      if (classes[key]) result.push(...unwrapClass(classes[key]));
+    });
+    return result;
+  }
+  // string
+  return classes.split(` `);
+}
+
+function getMissingClasses(vnodeClasses, elementClasses) {
+  const vnodes = unwrapClass(vnodeClasses);
+  const elements = unwrapClass(elementClasses);
+
+  // return all classes which are not in the vnode, but in the elements
+  return elements.filter(x => !vnodes.includes(x));
+}
+
 export function loadingComponentFactory(resolvableComponent, options) {
   return {
     render(h) {
@@ -29,7 +56,15 @@ export function loadingComponentFactory(resolvableComponent, options) {
       // eslint-disable-next-line no-underscore-dangle
       if (!this.$el) resolvableComponent._resolve();
 
-      return h(tag);
+      return h(tag, {
+        class: getMissingClasses(
+          [
+            this.$vnode && this.$vnode.data && this.$vnode.data.class,
+            this.$vnode && this.$vnode.data && this.$vnode.data.staticClass,
+          ],
+          this.$el && this.$el.getAttribute(`class`),
+        ),
+      });
     },
     ...options,
   };

test/integration/components/DummyInteractionFct.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="DummyInteraction">
+    Click for more!
+    <br>
+    <button
+      class="button"
+      @click="more = true"
+    >
+      Click me
+    </button>
+    <br>
+    <div
+      v-if="more"
+      class="more"
+    >
+      Just more.
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      more: false,
+    };
+  },
+};
+</script>

test/integration/components/Integration.vue

@@ -4,8 +4,9 @@
       <DummyIdle/>
     </LazyHydrate>
     <LazyHydrate on-interaction>
-      <DummyInteraction/>
+      <DummyInteraction />
     </LazyHydrate>
+    <DummyInteractionFct id="DummyInteractionFct" class="additional" />
     <LazyHydrate ssr-only>
       <DummySsr/>
     </LazyHydrate>
@@ -92,8 +93,9 @@ import DummyIdle from './DummyIdle.vue';
 import DummyInteraction from './DummyInteraction.vue';
 import DummySsr from './DummySsr.vue';
 import DummyVisible from './DummyVisible.vue';
+import DummyInteractionFct from './DummyInteractionFct.vue';
 
-import LazyHydrate from '../../../src/LazyHydrate';
+import LazyHydrate, {hydrateOnInteraction} from '../../../src/LazyHydrate';
 
 export default {
   name: `Integration`,
@@ -103,6 +105,7 @@ export default {
     DummySsr,
     DummyVisible,
     LazyHydrate,
+    DummyInteractionFct: hydrateOnInteraction(async () => DummyInteractionFct)
   },
 };
 </script>

test/integration/integration.test.js

@@ -66,4 +66,34 @@ describe(`integration`, () => {
       expect(moreText).toBe(null);
     });
   });
+
+  describe(`LazyHydrate via import wrappers`, () => {
+    test(`It should apply valid classes while not hydrated.`, async () => {
+      await open(`/integration.html`);
+
+      const classAttribute = await page.$(`#DummyInteractionFct`);
+
+      // eslint-disable-next-line no-underscore-dangle
+      expect(classAttribute._remoteObject.description).toMatch(/#DummyInteractionFct/);
+      // eslint-disable-next-line no-underscore-dangle
+      expect(classAttribute._remoteObject.description).toMatch(/\.additional/);
+      // eslint-disable-next-line no-underscore-dangle
+      expect(classAttribute._remoteObject.description).toMatch(/\.DummyInteraction/);
+    });
+
+    test(`It should hydrate the component when an interaction happens.`, async () => {
+      await open(`/integration.html`);
+
+      let moreText = await page.$(`#DummyInteractionFct .more`);
+      expect(moreText).toBe(null);
+
+      let button = await find(`#DummyInteractionFct button`);
+      await button.click();
+      button = await find(`#DummyInteractionFct button`);
+      await button.click();
+
+      moreText = await find(`#DummyInteractionFct .more`);
+      expect(moreText).not.toBe(null);
+    });
+  });
 });