Initial work on components

packages/reactivity/src/abstracts/ReactivePluginBase.js

@@ -4,7 +4,7 @@ import {
     reactivityMount,
     template,
     mountTo,
-} from './shared';
+} from '../lib/reactivity';
 
 /**
  * Reactive plugin base abstract.

packages/reactivity/src/abstracts/ReactiveSingleton.js

@@ -4,7 +4,7 @@ import {
     reactivityMount,
     template,
     mountTo,
-} from './shared';
+} from '../lib/reactivity';
 
 /**
  * Reactive singleton abstract.

packages/reactivity/src/lib/components.js

@@ -0,0 +1,67 @@
+/**
+ * @typedef {import('petite-vue/dist/types/context').Context} Context
+ * @typedef {import('../abstracts/ReactivePluginBase').default} ReactivePluginBase
+ * @typedef {import('../abstracts/ReactiveSingleton').default} ReactiveSingleton
+ */
+
+/**
+ * Prepares components in a mounted element or template.
+ *
+ * @param {ReactivePluginBase|ReactiveSingleton} parent
+ * @param {HTMLElement} mountElement
+ */
+function prepareComponents(parent, mountElement) {
+    if (!parent.components || !parent.components()) {
+        return;
+    }
+
+    const components = parent.components();
+
+    Object.keys(components).forEach((componentName) => {
+        const componentElements = mountElement.querySelectorAll(componentName);
+
+        // Replace each component holder with a template tag using the correct directive
+        componentElements.forEach((componentElement) => {
+            const templateElement = document.createElement('ins');
+            templateElement.setAttribute('v-component', componentName);
+
+            if (componentElement.hasAttributes()) {
+                const { attributes } = componentElement;
+
+                for (let i = 0; i < attributes.length; i += 1) {
+                    const { name, value } = attributes[i];
+                    templateElement.setAttribute(name, value);
+                }
+            }
+
+            componentElement.replaceWith(templateElement);
+        });
+    });
+}
+
+/**
+ * Cleanup/unmount component
+ *
+ * @param {Context} context
+ */
+function componentCleanup(/* context */) {
+}
+
+/**
+ * Directive to link components to a parent.
+ *
+ * @param {Context} context
+ * @param {ReactivePluginBase|ReactiveSingleton} parent
+ */
+function componentDirective(context /* , parent */) {
+    // const scopeKeys = Object.getOwnPropertyNames(context.ctx.scope);
+
+    return () => {
+        componentCleanup(context);
+    };
+}
+
+export {
+    prepareComponents,
+    componentDirective,
+};

packages/reactivity/src/abstracts/shared.js → packages/reactivity/src/lib/reactivity.js

@@ -1,4 +1,5 @@
 import { createApp, reactive } from 'petite-vue';
+import { componentDirective, prepareComponents } from './components';
 
 /**
  * @typedef {import('../abstracts/ReactivePluginBase').default} ReactivePluginBase
@@ -98,7 +99,12 @@ function reactivityMount(element = null) {
         }
     }
 
-    this.$app = createApp(this.$data).mount(mountedElement);
+    // Prepare components
+    prepareComponents(this, mountedElement);
+
+    this.$app = createApp(this.$data)
+        .directive('component', (context) => componentDirective(context, this))
+        .mount(mountedElement);
     this.$el = mountedElement;
 
     // Import next tick into plugin

packages/reactivity/src/lib/util.js

@@ -0,0 +1,34 @@
+/**
+ * Decimal to hexidecimal
+ *
+ * @param {number} dec
+ * @returns {string}
+ */
+function dec2hex(dec) {
+    return dec.toString(16).padStart(2, '0');
+}
+
+const usedIds = [];
+
+/**
+ * Generates a random ID.
+ *
+ * @param {Number} length
+ * @return {string}
+ */
+function generateId(length = 32) {
+    const arr = new Uint8Array(length / 2);
+    let value = '';
+
+    do {
+        window.crypto.getRandomValues(arr);
+        value = Array.from(arr, dec2hex).join('');
+    } while (usedIds.includes(value));
+
+    return value;
+}
+
+export {
+    generateId,
+    dec2hex,
+};