@madgex/design-system-ce 5.1.0-alpha.0

package/temp-define-custom-element.js

@@ -0,0 +1,332 @@
+/* eslint-disable no-cond-assign */
+/* eslint-disable no-param-reassign */
+/* eslint-disable promise/catch-or-return */
+/* eslint-disable guard-for-in */
+/* eslint-disable no-nested-ternary */
+/* eslint-disable no-restricted-syntax */
+/* eslint-disable no-undef */
+/* eslint-disable no-underscore-dangle */
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable max-classes-per-file */
+import { createVNode, defineComponent, nextTick, warn } from '@vue/runtime-core';
+import { camelize, extend, hyphenate, isArray, toNumber } from '@vue/shared';
+import HTMLParsedElement from 'html-parsed-element';
+import { hydrate, render } from '@vue/runtime-dom';
+
+const BaseClass = typeof HTMLElement !== 'undefined' ? HTMLParsedElement : class {};
+
+const __DEV__ = process.env.NODE_ENV !== 'production';
+
+export class VueElement extends BaseClass {
+  constructor(_def, _props = {}, _config = {}, _hydrate) {
+    super();
+    this._def = _def;
+    this._props = _props;
+    this._config = _config;
+    /**
+     * @internal
+     */
+    this._instance = null;
+    this._connected = false;
+    this._resolved = false;
+    this._numberProps = null;
+    this._config = extend(
+      {
+        shadowRoot: true,
+      },
+      this._config
+    );
+    if (this._config.shadowRoot) {
+      if (this.shadowRoot && _hydrate) {
+        _hydrate(this._createVNode(), this._root);
+      } else {
+        if (__DEV__ && this.shadowRoot) {
+          warn(
+            `Custom element has pre-rendered declarative shadow root but is not ` +
+              `defined as hydratable. Use \`defineSSRCustomElement\`.`
+          );
+        }
+
+        this.attachShadow({ mode: 'open' });
+      }
+    } else if (_hydrate) {
+      _hydrate(this._createVNode(), this._root);
+    }
+  }
+
+  get _root() {
+    return this._config.shadowRoot ? this.shadowRoot : this;
+  }
+
+  connectedCallback() {
+    if (this._config.shadowRoot) {
+      this._connect();
+    } else {
+      super.connectedCallback();
+    }
+  }
+
+  // use of parsedCallback when shadowRoot is disabled
+  // to wait for slots to be parsed
+  // see https://stackoverflow.com/a/52884370
+  parsedCallback() {
+    if (!this._config.shadowRoot) {
+      this._connect();
+    }
+  }
+
+  _connect() {
+    this._connected = true;
+    if (!this._instance) {
+      this._resolveDef();
+    }
+  }
+
+  disconnectedCallback() {
+    this._connected = false;
+    nextTick(() => {
+      if (!this._connected) {
+        render(null, this._root);
+        this._instance = null;
+      }
+    });
+  }
+
+  /**
+   * resolve inner component definition (handle possible async component)
+   */
+  _resolveDef() {
+    if (this._resolved) {
+      return;
+    }
+
+    this._resolved = true;
+    // set initial attrs
+    for (let i = 0; i < this.attributes.length; i++) {
+      this._setAttr(this.attributes[i].name);
+    }
+
+    // watch future attr changes
+    new MutationObserver((mutations) => {
+      for (const m of mutations) {
+        this._setAttr(m.attributeName);
+      }
+    }).observe(this, { attributes: true });
+    const resolve = (def) => {
+      const { props, styles } = def;
+      const hasOptions = !isArray(props);
+      const rawKeys = props ? (hasOptions ? Object.keys(props) : props) : [];
+      // cast Number-type props set before resolve
+      let numberProps;
+
+      // add props check to fix https://github.com/vuejs/core/issues/5326
+      if (hasOptions && props) {
+        for (const key in this._props) {
+          const opt = props[key];
+
+          if (opt === Number || (opt && opt.type === Number)) {
+            this._props[key] = toNumber(this._props[key]);
+            (numberProps || (numberProps = Object.create(null)))[key] = true;
+          }
+        }
+      }
+
+      this._numberProps = numberProps;
+      // check if there are props set pre-upgrade or connect
+      for (const key of Object.keys(this)) {
+        if (key[0] !== '_') {
+          this._setProp(key, this[key], true, false);
+        }
+      }
+
+      // defining getter/setters on prototype
+      for (const key of rawKeys.map(camelize)) {
+        Object.defineProperty(this, key, {
+          get() {
+            return this._getProp(key);
+          },
+          set(val) {
+            this._setProp(key, val);
+          },
+        });
+      }
+
+      // replace slot
+      if (!this._config.shadowRoot) {
+        this._slots = Array.from(this.children).map((n) => n.cloneNode(true));
+        this.replaceChildren();
+      }
+
+      // apply CSS
+      this._applyStyles(styles);
+      // initial render
+      this._update();
+    };
+    const asyncDef = this._def.__asyncLoader;
+
+    if (asyncDef) {
+      asyncDef().then(resolve);
+    } else {
+      resolve(this._def);
+    }
+  }
+
+  _setAttr(key) {
+    let value = this.getAttribute(key);
+
+    if (this._numberProps && this._numberProps[key]) {
+      value = toNumber(value);
+    }
+
+    this._setProp(camelize(key), value, false);
+  }
+
+  /**
+   * @internal
+   */
+  _getProp(key) {
+    return this._props[key];
+  }
+
+  /**
+   * @internal
+   */
+  _setProp(key, val, shouldReflect = true, shouldUpdate = true) {
+    if (val !== this._props[key]) {
+      this._props[key] = val;
+      if (shouldUpdate && this._instance) {
+        this._update();
+      }
+
+      // reflect
+      if (shouldReflect) {
+        if (val === true) {
+          this.setAttribute(hyphenate(key), '');
+        } else if (typeof val === 'string' || typeof val === 'number') {
+          this.setAttribute(hyphenate(key), `${val}`);
+        } else if (!val) {
+          this.removeAttribute(hyphenate(key));
+        }
+      }
+    }
+  }
+
+  _update() {
+    render(this._createVNode(), this._root);
+  }
+
+  _createVNode() {
+    let childs = null;
+
+    // web components without shadow DOM do not supports native slot
+    // so, we create a VNode based on the content of child nodes.
+    // NB: named slots are currently not supported
+    if (!this._config.shadowRoot) {
+      childs = () => {
+        const toObj = (a) => {
+          const res = {};
+
+          for (let i = 0, l = a.length; i < l; i++) {
+            const attr = a[i];
+
+            res[attr.nodeName] = attr.nodeValue;
+          }
+
+          return res;
+        };
+
+        return this._slots.map((n) => {
+          const attrs = n.attributes ? toObj(n.attributes) : {};
+
+          attrs.innerHTML = n.innerHTML;
+          return createVNode(n.tagName, attrs, null);
+        });
+      };
+    }
+
+    const vnode = createVNode(this._def, extend({}, this._props), childs);
+
+    if (!this._instance) {
+      vnode.ce = (instance) => {
+        this._instance = instance;
+        if (this._config.shadowRoot) {
+          instance.isCE = true;
+        }
+
+        // HMR
+        if (__DEV__) {
+          instance.ceReload = (newStyles) => {
+            // always reset styles
+            if (this._styles) {
+              this._styles.forEach((s) => this._root.removeChild(s));
+              this._styles.length = 0;
+            }
+
+            this._applyStyles(newStyles);
+            // if this is an async component, ceReload is called from the inner
+            // component so no need to reload the async wrapper
+            if (!this._def.__asyncLoader) {
+              // reload
+              this._instance = null;
+              this._update();
+            }
+          };
+        }
+
+        // intercept emit
+        instance.emit = (event, ...args) => {
+          this.dispatchEvent(
+            new CustomEvent(event, {
+              detail: args,
+            })
+          );
+        };
+
+        // locate nearest Vue custom element parent for provide/inject
+        let parent = this;
+
+        while ((parent = parent && (parent.parentNode || parent.host))) {
+          if (parent instanceof VueElement) {
+            instance.parent = parent._instance;
+            break;
+          }
+        }
+      };
+    }
+
+    return vnode;
+  }
+
+  _applyStyles(styles) {
+    if (styles) {
+      styles.forEach((css) => {
+        const s = document.createElement('style');
+
+        s.textContent = css;
+        this._root.appendChild(s);
+        // record for HMR
+        if (__DEV__) {
+          (this._styles || (this._styles = [])).push(s);
+        }
+      });
+    }
+  }
+}
+
+export function defineCustomElement(options, config, hydrate_) {
+  const Comp = defineComponent(options);
+
+  class VueCustomElement extends VueElement {
+    constructor(initialProps) {
+      super(Comp, initialProps, config, hydrate_);
+    }
+  }
+
+  VueCustomElement.def = Comp;
+  return VueCustomElement;
+}
+
+export const defineSSRCustomElement = (options, config) => {
+  // @ts-expect-error
+  return defineCustomElement(options, config, hydrate);
+};

package/vite.config.js

@@ -0,0 +1,46 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import path from 'path';
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import legacy from '@vitejs/plugin-legacy';
+
+const input =
+  process.env.NODE_ENV === 'production'
+    ? path.resolve(__dirname, './index.js')
+    : path.resolve(__dirname, './index.html');
+
+export default defineConfig({
+  server: {
+    port: 8112,
+  },
+  plugins: [
+    vue(),
+    legacy({
+      targets: ['defaults', 'not IE 11'],
+    }),
+  ],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+  },
+  resolve: {
+    alias: {
+      vue: require.resolve('vue/dist/vue.esm-bundler.js'),
+    },
+  },
+
+  build: {
+    manifest: true,
+    // assetsDir: './dist/',
+    outDir: path.resolve(__dirname, './dist/'),
+    rollupOptions: {
+      // overwrite default .html entry
+      input,
+      output: {
+        entryFileNames: `[name].js`,
+        chunkFileNames: `[name].js`,
+        assetFileNames: `[name].[ext]`,
+      },
+    },
+  },
+});