Merge pull request #5 from AntonHinz/boiler

Refactor core + unit tests; Preparation for moving core parts away

Author: AntonHinz

package-lock.json

@@ -9,7 +9,8 @@
     "test": "jest"
   },
   "dependencies": {
-    "vue": "^3.2.33"
+    "vue": "^3.2.33",
+    "object-hash": "^3.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.18.0",
@@ -37,4 +38,4 @@
     "webpack-cli": "^4.9.2",
     "webpack-dev-server": "^4.9.1"
   }
-}
+}

package.json

@@ -0,0 +1 @@
+export default bus => app => app.provide('$bus', bus);

src/core/boiler-plugins/bus-vue-plugin.js

@@ -0,0 +1,10 @@
+import plugin from './bus-vue-plugin';
+
+describe('bus-vue-plugin', () => {
+  it('should call provide a bus as $bus', () => {
+    const app = { provide: jest.fn() };
+    const bus = 'BUS';
+    plugin(bus)(app);
+    expect(app.provide).toHaveBeenCalledWith('$bus', 'BUS');
+  });
+});

src/core/boiler-plugins/bus-vue-plugin.spec.js

@@ -0,0 +1,38 @@
+import { createApp } from 'vue/dist/vue.esm-bundler';
+import {
+  reactive,
+} from 'vue';
+
+export const rootEmit = (name, detail) => window.dispatchEvent(new CustomEvent(name, { detail }));
+
+export const observe = component => {
+  return Object.keys(component.props || {});
+}
+
+export const create = (boiler, component, storeInstaller) => {
+  const customs = [...(boiler?.settings?.customs || []), 'content'];
+  const state = reactive(boiler.getState());
+  const app = createApp({
+    template: '<widget v-bind="state"></widget>',
+    computed: { state: () => state },
+  });
+
+  storeInstaller(app);
+  app.config.unwrapInjectedRef = true;
+  app.config.compilerOptions.isCustomElement = t => customs.includes(t);
+  app.component('widget', component);
+  app.component('content', { template: boiler.content });
+  app.provide('$boiler', boiler);
+  app.provide('$injector', (type, data) => rootEmit('$injector', { type, data }));
+
+  return {
+    watch: (prop, newVal) => (state[prop] = newVal),
+    mount: () => app.mount(boiler.element),
+    unmount: () => app.unmount(),
+  }
+}
+
+export default {
+  create,
+  observe,
+};

src/core/boiler-plugins/vue-plugin.js

@@ -0,0 +1,207 @@
+import { createApp } from 'vue/dist/vue.esm-bundler';
+import { reactive } from 'vue';
+import {
+  rootEmit,
+  observe,
+  create,
+} from './vue-plugin';
+
+
+jest.mock('vue/dist/vue.esm-bundler', () => {
+  const app = {
+    component: jest.fn(),
+    provide: jest.fn(),
+    mount: jest.fn(() => app),
+    unmount: jest.fn(),
+    config: {
+      unwrapInjectedRef: false,
+      compilerOptions: {
+        isCustomElement: () => {},
+      },
+    },
+  };
+
+  return {
+    createApp: jest.fn().mockReturnValue(app),
+  };
+});
+
+jest.mock('vue', () => ({
+  reactive: jest.fn(v => v),
+}));
+
+describe('rootEmit', () => {
+  beforeEach(() => {
+    global.window.dispatchEvent = jest.fn();
+
+    global.CustomEvent = jest.fn().mockImplementation(
+      (name, options) => ({ name, options })
+    );
+
+    rootEmit('foo', 'bar');
+  });
+
+  it('should create correct CustomEvent', () => {
+    expect(CustomEvent).toHaveBeenCalledWith('foo', { detail: 'bar' });
+  });
+
+  it('should dispatch requested event on window', () => {
+    expect(window.dispatchEvent).toHaveBeenCalledWith({ name: 'foo', options: { detail: 'bar' } });
+  });
+});
+
+describe('observe', () => {
+  it('should return keys of component props if present', () => {
+    expect(observe({ props: { foo: 'bar', fuz: 'buz' } })).toEqual(['foo', 'fuz']);
+  });
+
+  it('should fallback to an empty array if no props detected', () => {
+    expect(observe({})).toEqual([]);
+  });
+});
+
+describe('create', () => {
+  let call;
+  let result;
+  let boiler;
+  let component;
+  let storeInstaller;
+
+  beforeEach(() => {
+    component = 'COMPONENT';
+    storeInstaller = jest.fn();
+
+    boiler = {
+      settings: {
+        customs: ['foo'],
+      },
+      getState: jest.fn(() => ({ foo: 'bar' })),
+      content: '<foo>bar</foo>',
+      element: 'ELEMENT',
+    };
+    
+    call = () => {
+      result = create(boiler, component, storeInstaller);
+    }
+  });
+
+  it('should set app config.unwrapInjectedRef to true', () => {
+    call();
+    const app = result.mount();
+    expect(app.config.unwrapInjectedRef).toBeTruthy();
+  });
+
+  describe('customs', () => {
+    it.each([
+      [{ customs: ['foo', 'bar'] }, 'foo', true],
+      [{ customs: ['foo', 'bar'] }, 'bar', true],
+      [{ customs: ['foo', 'bar'] }, 'content', true],
+      [{ customs: ['foo'] }, 'bar', false],
+      [{}, 'content', true],
+      [null, 'content', true],
+    ])('for %j customs %j should be %j', (settings, tag, res) => {
+      boiler.settings = settings;
+      call();
+      const app = result.mount();
+      expect(app.config.compilerOptions.isCustomElement(tag)).toBe(res);
+    })
+  });
+
+  describe('state', () => {
+    beforeEach(() => {
+      call();
+    });
+
+    it('should receive state from boiler', () => {
+      expect(boiler.getState).toHaveBeenCalled();
+    });
+
+    it('should vue-based reactivity for requested state', () => {
+      expect(reactive).toHaveBeenCalledWith({ foo: 'bar' });
+    });
+
+    it('should bind state to a newly created app', () => {
+      expect(createApp).toHaveBeenCalledWith({
+        template: '<widget v-bind="state"></widget>',
+        computed: { state: expect.any(Function) },
+      });
+    });
+
+    it('should return state as computed defined in wrapper - to grant correct binding', () => {
+      expect(createApp.mock.calls[0][0].computed.state()).toEqual({ foo: 'bar' });
+    });
+
+    it('should be updated with watch() callback', () => {
+      result.watch('foo', 'buz');
+      expect(createApp.mock.calls[0][0].computed.state()).toEqual({ foo: 'buz' });
+    });
+  });
+
+  describe('storeInstaller', () => {
+    it('should call storeInstaller with app passed', () => {
+      call();
+      const app = result.mount();
+      expect(storeInstaller).toHaveBeenCalledWith(app);
+    });
+  });
+
+  describe('Adding serving components', () => {
+    let app;
+
+    beforeEach(() => {
+      call();
+      app = result.mount();
+    });
+
+    it('should add system "widget" component', () => {
+      expect(app.component).toHaveBeenCalledWith('widget', 'COMPONENT');
+    });
+
+    it('should add system "content" component', () => {
+      expect(app.component).toHaveBeenCalledWith('content', { template: '<foo>bar</foo>' });
+    });
+  });
+
+  describe('Providing tools to an app', () => {
+    let app;
+
+    beforeEach(() => {
+      call();
+      app = result.mount();
+    });
+
+    it('should provide boiler as $boiler', () => {
+      expect(app.provide).toHaveBeenCalledWith('$boiler', boiler);
+    });
+
+    it('should provide $injector emitter', () => {
+      expect(app.provide).toHaveBeenCalledWith('$injector', expect.any(Function));
+    });
+
+    it('should provide rootEmit decorator as an $injector', () => {
+      global.window.dispatchEvent = jest.fn();
+
+      global.CustomEvent = jest.fn().mockImplementation(
+        (name, options) => ({ name, options })
+      );
+
+      app.provide.mock.calls[1][1]('foo', 'bar');
+
+      expect(window.dispatchEvent).toHaveBeenCalledWith(new CustomEvent('$injector', {
+        detail: {
+          type: 'foo',
+          data: 'bar',
+        },
+      }));
+    });
+  });
+
+  describe('unmount', () => {
+    it('should trigger app.unmount', () => {
+      call();
+      const app = result.mount();
+      result.unmount();
+      expect(app.unmount).toHaveBeenCalled();
+    });
+  });
+});

src/core/boiler-plugins/vue-plugin.spec.js

@@ -0,0 +1,80 @@
+import {
+  callAll,
+  $pickAttributes,
+  $updateAttribute,
+  $catch,
+  $emit,
+} from './helpers';
+
+export default (element, component, plugin) => {
+  const subscribers = {};
+  const observed = plugin.observe(component);
+  const settings = element?.$settings;
+  const content = element?.innerHTML;
+
+  return {
+    element,
+    observed,
+    settings,
+    content,
+
+    // Parent allows subscription
+    publishes(name) {
+      $catch(
+        element,
+        `$subscribe:${name}`,
+        (handler) => {
+          if (!subscribers[name]) subscribers[name] = [];
+          subscribers[name].push(handler);
+        },
+      );
+    },
+
+    // Child subscribes for parent (Listen up)
+    subscribe(name, handler) {
+      $emit(element, `$subscribe:${name}`, handler);
+    },
+
+    // Parent publishes for children (Event down)
+    publish(name, data) {
+      if (!subscribers[name]) return;
+      callAll(subscribers[name], data);
+    },
+
+    // Parent subscribes for child (Listen down)
+    listen(name, handler) {
+      $catch(element, `$dispatch:${name}`, handler);
+    },
+
+    // Child emits to parent (Event up)
+    dispatch(name, data) {
+      $emit(element, `$dispatch:${name}`, data);
+    },
+
+    // Apply custom style for a wrapping element
+    style(style) {
+      const stylesObj = typeof style === 'function' ? style(element) : style;
+
+      for (const prop in stylesObj) element.style[prop] = stylesObj[prop];
+    },
+
+    getState(defaults = {}) {
+      return { ...$pickAttributes(element, observed), ...defaults };
+    },
+
+    // Update attributes from inside an app
+    raiseState(state) {
+      Object.keys(state).forEach((attr) => {
+        if (observed.includes(attr)) {
+          $updateAttribute(element, attr, state[attr]);
+
+          const event = new CustomEvent(`update:${attr}`, { bubbles: false, detail: state[attr] });
+          element.dispatchEvent(event);
+        }
+      });
+
+      const event = new CustomEvent('update', { bubbles: false, detail: $pickAttributes(element, observed) });
+      element.dispatchEvent(event);
+    },
+  };
+}