vue3-face-age/src/vue3-face-age.js

Vue 3 wrapper for Face Age

/* eslint-disable */
import {
  h,
  defineComponent,
  ref,
  getCurrentInstance,
  onMounted,
  onBeforeUnmount,
  watch,
  onBeforeMount,
  nextTick,
  toRefs
} from "vue";
import FaceAge from "face-age";

// define all emitted events in order to better
// document how the component should work
const events = [
  "onload",
];

const vueFaceAge = defineComponent({
  name: "faceage",
  props: {
    options: {
      type: Object
    },
    onLoad: Object
  },

  // events emitted by this component
  emits: events,

  setup(props, { emit }) {
    const __el = ref(null);
    const analyzer = ref(null);

    const isObject = item => {
      return item && typeof item === "object" && !Array.isArray(item) && item != null;
    };

    const extend = (target, source) => {
      if (typeof Object.assign !== "function") {
        (function() {
          Object.assign = function(target) {
            // We must check against these specific cases.
            if (target === undefined || target === null) {
              throw new TypeError("Cannot convert undefined or null to object");
            }

            let output = Object(target);
            for (let index = 1; index < arguments.length; index++) {
              let source = arguments[index];
              if (source !== undefined && source !== null) {
                for (let nextKey in source) {
                  if (source.hasOwnProperty(nextKey)) {
                    output[nextKey] = source[nextKey];
                  }
                }
              }
            }
            return output;
          };
        })();
      }

      let output = Object.assign({}, target);
      if (isObject(target) && isObject(source)) {
        Object.keys(source).forEach(key => {
          if (isObject(source[key])) {
            if (!(key in target)) {
              Object.assign(output, {
                [key]: source[key]
              });
            } else {
              output[key] = extend(target[key], source[key]);
            }
          } else {
            Object.assign(output, {
              [key]: source[key]
            });
          }
        });
      }
      return output;
    };

    const init = async () => {
      await nextTick();

      if (analyzer.value) {
        return;
      }

      analyzer.value = new FaceAge(__el.value, props.options);
      const render = analyzer.value.render();

      if(props.onLoad){
        analyzer.value.onload(props.onLoad);
      }

      return render

    };

    const refresh = () => {
      //destroy();
      return init();

    };

    const destroy = () => {
      //analyzer.value.destroy();
    };


    onBeforeMount(() => {
      window.FaceAge = FaceAge;
    });

    onMounted(() => {
      __el.value = getCurrentInstance().proxy.$el;
      init();

    });

    onBeforeUnmount(() => {
      if (!analyzer.value) {
        return;
      }
      destroy();
    });


    return {
      analyzer,
      init,
      refresh,
      destroy
    };
  },

  render() {
    return h("div", {
      class: "vue-face-age"
    });
  }
});

export default vueFaceAge;