feat: support import statements and directives (#101)

* feat: Support directives

Signed-off-by: Ferdinand Thiessen <rpm@fthiessen.de>

* fix: Support `import` statements

Signed-off-by: Ferdinand Thiessen <rpm@fthiessen.de>

* fix typings

---------

Signed-off-by: Ferdinand Thiessen <rpm@fthiessen.de>
Co-authored-by: Ferdinand Thiessen <rpm@fthiessen.de>

Author: elevatebart

src/Preview.vue

@@ -44,6 +44,15 @@ export default defineComponent({
       type: Object,
       default: () => { },
     },
+    /**
+     * Hashtable of auto-registered directives
+     * @example { Tooltip: VueTooltip }
+     * @example { VueTooltip }
+     */
+    directives: {
+      type: Object,
+      default: () => { },
+    },
     /**
      * Hashtable of modules available in require and import statements
      * in the code prop
@@ -84,7 +93,7 @@ export default defineComponent({
     };
   },
   computed: {
-    requiresPlusVue() {
+    requiresPlusVue(): Record<string, any> {
       return { vue: Vue, ...this.requires };
     },
   },
@@ -131,7 +140,7 @@ export default defineComponent({
         this.removeScopedStyle();
       }
     },
-    renderComponent(code: string) {
+    async renderComponent(code: string) {
       let options: Record<string, any> = {};
       let style;
       try {
@@ -155,11 +164,15 @@ export default defineComponent({
           // it can be:
           // - a script setting up variables => we set up the data property of renderedComponent
           // - a `new Vue()` script that will return a full config object
-          const calcOptions = () => {
+          const calcOptions = async () => {
             const script = renderedComponent.script;
+            const requires: typeof this.requires = {}
+            await Promise.allSettled(Object.keys(this.requiresPlusVue).map(async (key) => {
+              requires[key] = this.requiresPlusVue[key] instanceof Promise ? (await this.requiresPlusVue[key]).default : this.requiresPlusVue[key]
+				    }))
             options = (evalInContext(
               script,
-              (filepath) => requireAtRuntime(this.requiresPlusVue, filepath),
+              (filepath) => requireAtRuntime(requires, filepath),
               adaptCreateElement,
               concatenate,
               h
@@ -178,7 +191,7 @@ export default defineComponent({
             }
             options.name = "VueLiveCompiledExample";
           };
-          calcOptions();
+          await calcOptions();
 
           // In case the template is inlined in the script,
           // we need to compile it
@@ -214,6 +227,14 @@ export default defineComponent({
         }
       }
 
+      if (this.directives) {
+        if (!options.directives) {
+          options.directives = this.directives;
+        } else {
+          options.directives = { ...options.directives, ...this.directives };
+        }
+      }
+
       this.removeStyle();
 
       if (style) {

src/VueLive.vue

@@ -13,7 +13,7 @@
         * @property { Error } - the error thrown
       -->
       <Preview :key="codeKey" :code="model" @detect-language="switchLanguage" @error="handleError"
-        @success="handleSuccess" :components="components" :requires="requires" :jsx="jsx" :data-scope="dataScope"
+        @success="handleSuccess" :components="components" :directives="directives" :requires="requires" :jsx="jsx" :data-scope="dataScope"
         :check-variable-availability="checkVariableAvailability" />
     </template>
   </component>
@@ -60,11 +60,20 @@ export default defineComponent({
       type: Object,
       default: () => { },
     },
+    /**
+     * Hashtable of auto-registered directives
+     * @example { Tooltip: VueTooltip }
+     * @example { VueTooltip }
+     */
+    directives: {
+      type: Object,
+      default: () => { },
+    },
     /**
      * Hashtable of modules available in require and import statements
      * in the Preview component
      * @example { lodash: require("lodash") }
-     * @example { moment: require("moment") }
+     * @example { "foo/bar.js": import("foo/bar.js") }
      */
     requires: {
       type: Object,