17 add eslint and unit tests

.github/workflows/prettier.yml

@@ -0,0 +1,21 @@
+name: Continuous Integration
+
+on: [pull_request]
+
+jobs:
+  prettier:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          # Make sure the actual branch is checked out when running on pull requests
+          ref: ${{ github.head_ref }}
+          # This is important to fetch the changes to the previous commit
+          fetch-depth: 0
+
+      - name: Prettier Action
+        uses: creyD/[email protected]
+        with:
+          dry: True

.github/workflows/unit-tests.yml

@@ -0,0 +1,26 @@
+name: Runs All Unit tests
+
+on: [pull_request]
+
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "npm"
+
+      - run: npm ci
+
+        name: Execute Unit tests
+      - run: npm run test:unit

.gitignore

@@ -1 +1,3 @@
-node_modules
+node_modules
+.vscode
+.idea

.prettierignore

@@ -0,0 +1,3 @@
+dist
+.vscode
+.idea

App.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <v-runtime-template :template="testMixin"/>
-    <v-runtime-template :template="testLocal"/>
+    <v-runtime-template :template="testMixin" />
+    <v-runtime-template :template="testLocal" />
   </div>
 </template>
 
@@ -16,40 +16,39 @@ export default {
         "<test>Testing Mixins: <ul><li>{{testingProp}}</li><li>{{testingData}}</li><li>{{testingMethod('x')}}</li><li>{{testingComputed}}</li></ul></test>",
       testLocal:
         "<test>Testing Local: <ul><li>{{testingPropLocal}}</li><li>{{testingDataLocal}}</li><li>{{testingMethodLocal('x')}}</li><li>{{testingComputedLocal}}</li></ul></test>",
-      testingDataLocal: "localTest: testingData"
+      testingDataLocal: "localTest: testingData",
     };
   },
   props: {
     testingProp: {
-      default: "should not see"
+      default: "should not see",
     },
     testingPropLocal: {
-      default: "localTest: testingProp"
-    }
+      default: "localTest: testingProp",
+    },
   },
   computed: {
     testingComputedLocal() {
       return "localTest: testingComputed";
     },
     testingComputed() {
       return "should not see";
-    }
+    },
   },
   methods: {
     testingMethodLocal() {
       return "localTest: testingMethod";
     },
     testingMethod() {
       return "Should not see";
-    }
+    },
   },
   components: {
     VRuntimeTemplate,
     // eslint-disable-next-line
-    Test
-  }
+    Test,
+  },
 };
 </script>
 
-<style>
-</style>
+<style></style>

README.md

@@ -68,33 +68,34 @@ In [Nuxt v3](https://v3.nuxtjs.org/), open the `nuxt.config.js` file and extend
 ```
 
 You can read about different bundles of Vue in the official [help guides](https://v3.vuejs.org/guide/installation.html#with-a-bundler).
+
 ## Usage
 
 You just need to import the `vue3-runtime-template` component, and pass the template you want:
 
 ```html
 <template>
-	<div>
-		<v-runtime-template :template="template"></v-runtime-template>
-	</div>
+  <div>
+    <v-runtime-template :template="template"></v-runtime-template>
+  </div>
 </template>
 
 <script>
-import VRuntimeTemplate from "vue3-runtime-template";
-import AppMessage from "./AppMessage";
+  import VRuntimeTemplate from "vue3-runtime-template";
+  import AppMessage from "./AppMessage";
 
-export default {
-  data: () => ({
-    name: "Mellow",
-    template: `
+  export default {
+    data: () => ({
+      name: "Mellow",
+      template: `
       <app-message>Hello {{ name }}!</app-message>
-    `
-  }),
-  components: {
-    AppMessage,
-    VRuntimeTemplate
-  }
-};
+    `,
+    }),
+    components: {
+      AppMessage,
+      VRuntimeTemplate,
+    },
+  };
 </script>
 ```
 

Test.vue

@@ -1,13 +1,12 @@
 <template>
   <div>
     <slot></slot>
-    <hr>
+    <hr />
   </div>
 </template>
 
 <script>
 export default {};
 </script>
 
-<style scoped>
-</style>
+<style scoped></style>

dist/vue3-runtime-template.modern.mjs

@@ -0,0 +1,2 @@
+import{h as t}from"vue";function e(){return e=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var o=arguments[e];for(var p in o)Object.prototype.hasOwnProperty.call(o,p)&&(t[p]=o[p])}return t},e.apply(this,arguments)}const o=(t,e,o)=>{if(!e.hasOwnProperty(o)){const p=Object.getOwnPropertyDescriptor(t,o);Object.defineProperty(e,o,p)}};var p={props:{template:String,parent:Object,templateProps:{type:Object,default:()=>({})}},render(){if(this.template){const p=this.parent||this.$parent,{$data:r={},$props:s={},$options:c={}}=p,{components:n={},computed:a={},methods:i={}}=c,{$data:d={},$props:m={},$options:{methods:h={},computed:O={},components:$={}}={}}=this,b={$data:{},$props:{},$options:{},components:{},computed:{},methods:{}};Object.keys(r).forEach(t=>{void 0===d[t]&&(b.$data[t]=r[t])}),Object.keys(s).forEach(t=>{void 0===m[t]&&(b.$props[t]=s[t])}),Object.keys(i).forEach(t=>{void 0===h[t]&&(b.methods[t]=i[t])}),Object.keys(a).forEach(t=>{void 0===O[t]&&(b.computed[t]=a[t])}),Object.keys(n).forEach(t=>{void 0===$[t]&&(b.components[t]=n[t])});const f=Object.keys(b.methods||{}),j=Object.keys(b.$data||{}),y=Object.keys(b.$props||{}),u=Object.keys(this.templateProps),v=j.concat(y).concat(f).concat(u),l=((t,e)=>{const p={};return e.forEach(e=>o(t,p,e)),p})(p,f),k=(t=>{const e={};return t.forEach(t=>{t&&Object.getOwnPropertyNames(t).forEach(p=>o(t,e,p))}),e})([b.$data,b.$props,l,this.templateProps]);return t({template:this.template||"<div></div>",props:v,computed:b.computed,components:b.components,provide:this.$parent.$.provides?this.$parent.$.provides:{}},e({},k))}}};export{p as default};
+//# sourceMappingURL=vue3-runtime-template.modern.mjs.map

index.d.ts

@@ -0,0 +1,19 @@
+declare namespace _default {
+  namespace props {
+    const template: StringConstructor;
+    const parent: ObjectConstructor;
+    namespace templateProps {
+      export const type: ObjectConstructor;
+      function _default(): {};
+      export { _default as default };
+    }
+  }
+  function render(): import("vue").VNode<
+    import("vue").RendererNode,
+    import("vue").RendererElement,
+    {
+      [key: string]: any;
+    }
+  >;
+}
+export default _default;

index.js

@@ -1,4 +1,4 @@
-import {h} from 'vue';
+import { h } from "vue";
 
 const defineDescriptor = (src, dest, name) => {
   // eslint-disable-next-line no-prototype-builtins
@@ -13,7 +13,7 @@ const merge = (objs) => {
   objs.forEach((obj) => {
     obj &&
       Object.getOwnPropertyNames(obj).forEach((name) =>
-        defineDescriptor(obj, res, name),
+        defineDescriptor(obj, res, name)
       );
   });
   return res;
@@ -50,7 +50,7 @@ export default {
       const {
         $data = {},
         $props = {},
-        $options: {methods = {}, computed = {}, components = {}} = {},
+        $options: { methods = {}, computed = {}, components = {} } = {},
       } = this;
       const passthrough = {
         $data: {},
@@ -63,27 +63,27 @@ export default {
 
       // build new objects by removing keys if already exists (e.g. created by mixins)
       Object.keys(parentData).forEach((e) => {
-        if (typeof $data[e] === 'undefined') {
+        if (typeof $data[e] === "undefined") {
           passthrough.$data[e] = parentData[e];
         }
       });
       Object.keys(parentProps).forEach((e) => {
-        if (typeof $props[e] === 'undefined') {
+        if (typeof $props[e] === "undefined") {
           passthrough.$props[e] = parentProps[e];
         }
       });
       Object.keys(parentMethods).forEach((e) => {
-        if (typeof methods[e] === 'undefined') {
+        if (typeof methods[e] === "undefined") {
           passthrough.methods[e] = parentMethods[e];
         }
       });
       Object.keys(parentComputed).forEach((e) => {
-        if (typeof computed[e] === 'undefined') {
+        if (typeof computed[e] === "undefined") {
           passthrough.computed[e] = parentComputed[e];
         }
       });
       Object.keys(parentComponents).forEach((e) => {
-        if (typeof components[e] === 'undefined') {
+        if (typeof components[e] === "undefined") {
           passthrough.components[e] = parentComponents[e];
         }
       });
@@ -92,7 +92,10 @@ export default {
       const dataKeys = Object.keys(passthrough.$data || {});
       const propKeys = Object.keys(passthrough.$props || {});
       const templatePropKeys = Object.keys(this.templateProps);
-      const allKeys = dataKeys.concat(propKeys).concat(methodKeys).concat(templatePropKeys);
+      const allKeys = dataKeys
+        .concat(propKeys)
+        .concat(methodKeys)
+        .concat(templatePropKeys);
       const methodsFromProps = buildFromProps(parent, methodKeys);
       const finalProps = merge([
         passthrough.$data,
@@ -104,15 +107,15 @@ export default {
       const provide = this.$parent.$.provides ? this.$parent.$.provides : {}; // Avoids Vue warning
 
       const dynamic = {
-        template: this.template || '<div></div>',
+        template: this.template || "<div></div>",
         props: allKeys,
         computed: passthrough.computed,
         components: passthrough.components,
         provide: provide,
       };
       // debugger;
 
-      return h(dynamic, {...finalProps});
+      return h(dynamic, { ...finalProps });
     }
   },
 };

main.js

@@ -1,10 +1,8 @@
-import Vue from "vue";
+import { createApp } from 'vue'
 import App from "./App.vue";
 
-import testPlugin from "./test.plugin.js"; //testing mixins
+import testPlugin from "./plugin.test.js"; //testing mixins
 
-Vue.use(testPlugin);
-
-new Vue({
-    render: h => h(App)
-}).$mount("#app");
+createApp({
+  render: (h) => h(App),
+}).use(testPlugin).mount("#app");