@inkline/paper/vue/defineComponent.mjs

Paper is a unified interface for defining components for Vue and React using a single code base.

import { provide as nativeProvide, inject as nativeInject } from "vue";
export const defineComponent = (definition) => {
  return {
    name: definition.name || "",
    emits: definition.emits || [],
    slots: definition.slots || [],
    props: definition.props || {},
    setup(props, { attrs, slots, emit }) {
      const slot = (name = "default") => {
        return slots[name]?.();
      };
      const hasSlot = (name = "default") => {
        return !!slots[name];
      };
      const provide = (identifier, value) => nativeProvide(identifier, value);
      const inject = (identifier, defaultValue) => nativeInject(identifier, defaultValue);
      const setupContext = {
        emit,
        provide,
        inject,
        hasSlot
      };
      let state = {
        ...attrs,
        ...props
      };
      if (definition.setup) {
        state = Object.assign(state, definition.setup(state, setupContext));
      }
      const renderContext = {
        slot,
        hasSlot
      };
      return () => definition.render(state, renderContext);
    }
  };
};