@base-framework/base 2.6.0

package/modules/import/import.js

@@ -0,0 +1,390 @@
+import {builder} from '../layout/layout-builder.js';
+import {Jot} from "../component/jot.js";
+
+/**
+ * This will track previously loaded scripts and styles.
+ */
+const loaded = [];
+
+/**
+ * This will check if a script or style has been loaded.
+ *
+ * @param {string} src
+ * @return {bool}
+ */
+const isLoaded = (src) => loaded.indexOf(src) !== -1;
+
+/**
+ * This will create a script atom.
+ *
+ * @param {object} props
+ * @return {object}
+ */
+const Script = (props) => ({
+    tag: 'script',
+    src: props.src,
+    async: false,
+    load(e)
+    {
+        loaded.push(props.src);
+
+        const callBack = props.load;
+        if(callBack)
+        {
+            callBack();
+        }
+    }
+});
+
+/**
+ * This will create a style atom.
+ *
+ * @param {object} props
+ * @return {object}
+ */
+const Style = (props) => ({
+    tag: 'link',
+    rel: 'stylesheet',
+    type: 'text/css',
+    href: props.src,
+    load(e)
+    {
+        loaded.push(props.src);
+
+        const callBack = props.load;
+        if(callBack)
+        {
+            callBack();
+        }
+    }
+});
+
+/**
+ * Group
+ *
+ * This will setup a depends group to load all
+ * dependencies before loaded the script.
+ */
+class Group
+{
+    constructor(callBack)
+    {
+        this.percent = 0;
+        this.loaded = 0;
+        this.total = 0;
+        this.callBack = callBack || null;
+    }
+
+    /**
+     * This will add the resource to the document.
+     *
+     * @param {string} src
+     */
+    add(src)
+    {
+        this.total++;
+        let atom;
+
+        const load = this.update.bind(this);
+        if(src.indexOf('.css') !== -1)
+        {
+            atom = Style({
+                load,
+                src
+            });
+        }
+        else
+        {
+            atom = Script({
+                load,
+                src
+            });
+        }
+
+        builder.build(atom, document.head);
+    }
+
+    /**
+     * This will add the dependencies to the document.
+     *
+     * @param {array} files
+     */
+    addFiles(files)
+    {
+        if(!files)
+        {
+            return;
+        }
+
+        for(var i = 0, length = files.length; i < length; i++)
+        {
+            var src = files[i];
+            if(!isLoaded(src))
+            {
+                this.add(src);
+            }
+        }
+    }
+
+    update()
+    {
+        const percent = this.updateProgress();
+        if(percent >= 100)
+        {
+            var callBack = this.callBack;
+            if(callBack)
+            {
+                callBack();
+            }
+        }
+    }
+
+    updateProgress()
+    {
+        ++this.loaded;
+        return (this.percent = Math.floor(this.loaded / this.total * 100));
+    }
+}
+
+/**
+ * This will load the module.
+ *
+ * @param {string} src
+ * @param {function} callBack
+ * @return {object}
+ */
+const loadModule = (src, callBack) =>
+{
+    import(src).then(module =>
+    {
+        if(callBack)
+        {
+            callBack(module);
+        }
+    });
+};
+
+/**
+ * This will check if an object is a contructor.
+ *
+ * @param {object|function} object
+ * @returns {bool}
+ */
+const isConstructor = (object) =>
+{
+    if(!object)
+    {
+        return false;
+    }
+
+    return (typeof object?.prototype?.constructor === 'function');
+};
+
+/**
+ * This will render the module.
+ *
+ * @param {object} layout
+ * @param {object} ele
+ * @param {object} parent
+ * @param {function} callBack
+ * @return {object}
+ */
+const render = (layout, ele, parent) =>
+{
+    const frag = builder.build(layout, null, parent);
+    const firstChild = frag.firstChild;
+    ele.after(frag);
+    return firstChild;
+};
+
+/**
+ * This will create a comment.
+ *
+ * @param {object} props
+ * @returns {object}
+ */
+const Comment = (props) => ({
+    tag: 'comment',
+    text: 'import placeholder',
+    onCreated: props.onCreated
+});
+
+/**
+ * This will create an import wrapper component that
+ * will wrap the comment atom to pass route to the
+ * imported layout.
+ *
+ * @param {object} props
+ * @returns {object}
+ */
+const ImportWrapper = Jot(
+{
+    render()
+    {
+        return Comment(
+        {
+            onCreated: (ele) =>
+            {
+                const src = this.src;
+                if(!src)
+                {
+                    return;
+                }
+
+                /**
+                 * This will set up a resource group to load the
+                 * depends before the module.
+                 */
+                if(this.depends)
+                {
+                    const group = new Group(() =>
+                    {
+                        this.loadAndRender(ele);
+                    });
+
+                    group.addFiles(this.depends);
+                    return;
+                }
+
+                this.loadAndRender(ele);
+            }
+        });
+    },
+
+    /**
+     * This will get the layout.
+     *
+     * @param {object} module
+     * @returns {object|null}
+     */
+    getLayout(module)
+    {
+        let layout = module.default;
+        if(!layout)
+        {
+            return null;
+        }
+
+        /**
+         * This will check if the import is useing a custom
+         * callback to set up the module.
+         */
+        const callBack = this.callBack;
+        if(callBack)
+        {
+            layout = callBack(layout);
+        }
+        else
+        {
+            if(isConstructor(layout))
+            {
+                /**
+                 * This will set up the layout as a component and pass
+                 * the import props like persist and route.
+                 */
+                layout = new layout();
+                layout.route = this.route;
+
+                if(this.persist)
+                {
+                    layout.persist = true;
+                }
+            }
+            else
+            {
+                /**
+                 * This will set up the layout as a n atom.
+                 */
+                layout = layout();
+            }
+        }
+
+        return (this.layout = layout);
+    },
+
+    /**
+     * This will load the module and render the layout.
+     *
+     * @param {object} ele
+     */
+    loadAndRender(ele)
+    {
+        loadModule(this.src, (module) =>
+        {
+            this.loaded = true;
+            const layout = this.layout || this.getLayout(module);
+            this.layoutRoot = render(layout, ele, this.parent);
+        });
+    },
+
+    /**
+     * This will check if the layout should be updated.
+     *
+     * @param {object} layout
+     * @returns {bool}
+     */
+    shouldUpdate(layout)
+    {
+        if(this.updateLayout === true)
+        {
+            return true;
+        }
+
+        return (this.updateLayout = (layout && layout.isUnit && typeof layout.update === 'function'));
+    },
+
+    /**
+     * This will update the module layout.
+     *
+     * @param {object} params
+     */
+    updateModuleLayout(params)
+    {
+        const layout = this.layout;
+        if(this.shouldUpdate(layout))
+        {
+            layout.update(params);
+        }
+    },
+
+    /**
+     * This will call if the import is added to a route. This will pass
+     * the update params to the imported layout.
+     *
+     * @param {object} params
+     */
+    update(params)
+    {
+        if(this.loaded === true)
+        {
+            this.updateModuleLayout(params);
+        }
+    },
+
+    /**
+     * This will remove the imported layout when the
+     * comment is being removed.
+     *
+     * @returns {void}
+     */
+    beforeDestroy()
+    {
+        if(!this.layoutRoot)
+        {
+            return;
+        }
+
+        builder.removeElement(this.layoutRoot);
+    }
+});
+
+/**
+ * This will import a module.
+ *
+ * @param {object} props
+ * @returns {object}
+ */
+export const Import = (props) =>
+{
+    return new ImportWrapper(props);
+};