@onetype/framework 2.0.20

package/lib/src/classes/addon/classes/item/mixins/store.js

@@ -0,0 +1,56 @@
+const AddonItemStore =
+{
+    StoreGet(key, value = undefined)
+    {
+        if(key === undefined)
+        {
+            return this.store;
+        }
+
+        if(value !== undefined)
+        {
+            return onetype.DataDefineOne(this.store[key], [typeof value]);
+        }
+
+        return this.store[key];
+    },
+
+    StoreSet(key, value)
+    {
+        if(typeof key === 'object' && key !== null && value === undefined)
+        {
+            Object.assign(this.store, key);
+            return this;
+        }
+
+        this.store[key] = value;
+        return this;
+    },
+
+    StoreHas(key)
+    {
+        return key in this.store;
+    },
+
+    StoreRemove(key)
+    {
+        if(Array.isArray(key))
+        {
+            key.forEach(k => delete this.store[k]);
+        }
+        else
+        {
+            delete this.store[key];
+        }
+        
+        return this;
+    },
+
+    StoreClear()
+    {
+        this.store = {};
+        return this;
+    }
+};
+
+export default AddonItemStore;

package/lib/src/classes/addon/classes/render/class.js

@@ -0,0 +1,115 @@
+import RenderGet from './mixins/get.js';
+import RenderSet from './mixins/set.js';
+import RenderCompile from './mixins/compile.js';
+import RenderDOM from './mixins/dom.js';
+import RenderProcess from './mixins/process.js';
+import RenderMethods from './mixins/methods.js';
+import RenderEvents from './mixins/events.js';
+
+class OneTypeAddonRender
+{
+    constructor(addon, name, callback)
+    {
+        this.Addon = addon;
+        this.Name = name;
+        this.Callback = callback;
+
+        this._updateTimeout = null;
+        this.Data = { state: addon.onetype.StateGet() };
+        this.Attributes = {};
+        this.Item = null;
+        this.Slots = {};
+
+        this.Element = null;
+        this.Nodes = {};
+        this.Html = '';
+        this.Time = 0;
+
+        this.Events = {
+            init: [],
+            render: [],
+            mount: [],
+            mounted: [],
+            unmount: [],
+            unmounted: [],
+            destroy: [],
+            error: [],
+            ready: [],
+            visible: [],
+            resize: [],
+            compile: []
+        };
+
+        this.State = {
+            ready: false,
+            initialized: false,
+            rendered: false,
+            mounted: false,
+            destroyed: false,
+            rendering: false
+        };
+
+        this.Observer = {
+            visibility: undefined,
+            resize: undefined
+        };
+
+        const proxy = new Proxy(this, {
+            get(target, prop)
+            {
+                if (typeof target[prop] !== 'undefined' || typeof prop === 'symbol')
+                {
+                    return target[prop];
+                }
+
+                return target.Data[prop];
+            },
+
+            set(target, prop, value)
+            {
+                if (prop in target || typeof prop === 'symbol')
+                {
+                    target[prop] = value;
+                }
+                else
+                {
+                    const changed = target.Data[prop] !== value;
+                    target.Data[prop] = value;
+
+                    if(changed && target.State.ready && !target.State.rendering)
+                    {
+                        target._scheduleUpdate();
+                    }
+                }
+
+                return true;
+            }
+        });
+
+        return proxy;
+    }
+
+    _scheduleUpdate()
+    {
+        if(this._updateTimeout)
+        {
+            clearTimeout(this._updateTimeout);
+        }
+
+        this._updateTimeout = setTimeout(() =>
+        {
+            this._updateTimeout = null;
+            this.Update();
+        }, 16);
+    }
+}
+
+Object.assign(OneTypeAddonRender.prototype, RenderGet);
+Object.assign(OneTypeAddonRender.prototype, RenderSet);
+Object.assign(OneTypeAddonRender.prototype, RenderCompile);
+Object.assign(OneTypeAddonRender.prototype, RenderDOM);
+Object.assign(OneTypeAddonRender.prototype, RenderProcess);
+Object.assign(OneTypeAddonRender.prototype, RenderMethods);
+Object.assign(OneTypeAddonRender.prototype, RenderEvents);
+
+export default OneTypeAddonRender;

package/lib/src/classes/addon/classes/render/mixins/compile.js

@@ -0,0 +1,80 @@
+const RenderCompile =
+{
+    Compile(html, data = null)
+    {
+        const element = this.DOMCreateElement(html);
+
+        if(element.nodeType === Node.ELEMENT_NODE)
+        {
+            Object.entries(this.GetAttributes()).forEach(([key, value]) =>
+            {
+                element.setAttribute(key, value);
+            });
+
+            const prefix = this.GetAddon().GetName().charAt(0).toLowerCase();
+
+            element.classList.add(prefix + '-' + this.GetOneType().GenerateHash(this.GetAddon().GetName() + '-' + this.GetName()));
+        }
+
+        const compile = {
+            element,
+            data: this.GetData(),
+            nodes: {},
+            time: 0,
+            walk: true,
+            children: true
+        };
+
+        if(data)
+        {
+            compile.data = Object.assign({}, compile.data, data);
+        }
+
+        const start = performance.now();
+
+        this.GetOneType().Emit('addon.render.compile.before', this, compile, element, '0');
+
+        this.CompileWalkNodes(element, '0', compile);
+
+        this.GetOneType().Emit('addon.render.compile.after', this, compile, element, '0');
+
+        compile.time = performance.now() - start;
+
+        return compile;
+    },
+
+    CompileWalkNodes(node, identifier, compile)
+    {
+        if(!compile.walk || !node)
+        {
+            return;
+        }
+
+        compile.nodes[identifier] = node;
+
+        const parent = node.parentNode;
+
+        this.GetOneType().Emit('addon.render.compile.node', this, compile, node, identifier);
+
+        if(node.parentNode !== parent)
+        {
+            return;
+        }
+
+        if(node.hasChildNodes() && compile.children)
+        {
+            const childNodes = Array.from(node.childNodes);
+
+            for(let i = 0; i < childNodes.length; i++)
+            {
+                this.CompileWalkNodes(childNodes[i], identifier + '-' + i, compile);
+            }
+        }
+        else if(node.hasChildNodes())
+        {
+            compile.children = true;
+        }
+    }
+};
+
+export default RenderCompile;

package/lib/src/classes/addon/classes/render/mixins/dom.js

@@ -0,0 +1,16 @@
+const RenderDOM =
+{
+    DOMCreateElement(html)
+    {
+        const div = document.createElement('div');
+        div.innerHTML = html.trim();
+        return div;
+    },
+
+    DOMPatchElement(current, target)
+    {
+        return this.Addon.onetype.DOMPatch(current, target);
+    },
+};
+
+export default RenderDOM;

package/lib/src/classes/addon/classes/render/mixins/events.js

@@ -0,0 +1,150 @@
+const RenderEvents =
+{
+    EventOn(event, callback)
+    {
+        if(!(event in this.Events))
+        {
+            throw new Error('Event ' + event + ' doesn\'t exist.');
+        }
+
+        const run = {
+            init:    () => this.State.initialized,
+            mount:   () => this.State.mounted,
+            mounted: () => this.State.mounted,
+            ready:   () => this.State.ready
+        };
+
+        if(run[event] && run[event]())
+        {
+            callback.call(this);
+        }
+        else
+        {
+            this.Events[event].push(callback);
+        }
+        
+        return this;
+    },
+
+    EventEmit(event, ...args)
+    {
+        if(!(event in this.Events))
+        {
+            throw new Error('Event ' + event + ' doesn\'t exist.');
+        }
+
+        const skip = {
+            init:      () => this.State.initialized,
+            mount:     () => this.State.mounted,
+            unmount:   () => !this.State.mounted,
+            unmounted: () => !this.State.mounted,
+            destroy:   () => this.State.destroyed,
+            ready:     () => this.State.ready
+        };
+
+        if(skip[event] && skip[event]())
+        {
+            return this;
+        }
+
+        this.Events[event].forEach(callback => callback.call(this, ...args));
+
+        const after = {
+            init:      () => { this.State.initialized = true; },
+            mount:     () => { this.State.mounted = true; },
+            render:    () => { this.State.rendered = true; },
+            ready:     () => { this.State.ready = true; },
+            destroy:   () => { this.State.destroyed = true; this.EventCleanup(); },
+            mounted:   () => { this.EventEmit('ready'); },
+            unmounted: () => { this.State.mounted = false; }
+        };
+
+        if(after[event])
+        {
+            after[event]();
+        }
+
+        return this;
+    },
+
+    EventOff(event, callback)
+    {
+         if(!(event in this.Events))
+        {
+            throw new Error('Event ' + event + ' doesn\'t exist.');
+        }
+
+        if(!callback)
+        {
+            this.Events[event] = [];
+            return this;
+        }
+
+        const index = this.Events[event].indexOf(callback);
+        if(index > -1)
+        {
+            this.Events[event].splice(index, 1);
+        }
+
+        return this;
+    },
+
+    EventOnce(event, callback)
+    {
+        const onceWrapper = (...args) =>
+        {
+            callback.call(this, ...args);
+            this.EventOff(event, onceWrapper);
+        };
+
+        return this.EventOn(event, onceWrapper);
+    },
+
+    EventInitObserver(type)
+    {
+        if(this.Observer[type])
+        {
+            return;
+        }
+
+        this.EventOn('mount', () =>
+        {
+            if(type === 'visibility')
+            {
+                this.Observer[type] = new IntersectionObserver(entries =>
+                {
+                    entries.forEach(entry =>
+                    {
+                        if(entry.isIntersecting)
+                        {
+                            this.EventEmit('visible', entry);
+                        }
+                    });
+                }, {threshold: 0.1});
+            }
+            else if(type === 'resize')
+            {
+                this.Observer[type] = new ResizeObserver(entries =>
+                {
+                    entries.forEach(entry => this.EventEmit('resize', entry));
+                });
+            }
+
+            this.Observer[type].observe(this.Element);
+        });
+    },
+    
+    EventCleanup()
+    {
+        Object.keys(this.Observer).forEach(key =>
+        {
+            if(this.Observer[key])
+            {
+                this.Observer[key].disconnect();
+                this.Observer[key] = undefined;
+            }
+        });
+    }
+};
+
+export default RenderEvents;

package/lib/src/classes/addon/classes/render/mixins/get.js

@@ -0,0 +1,54 @@
+const RenderGet =
+{
+    GetName()
+    {
+        return this.Name;
+    },
+
+    GetCallback()
+    {
+        return this.Callback;
+    },
+    
+    GetAddon()
+    {
+        return this.Addon;
+    },
+
+    GetOneType()
+    {
+        return this.Addon.onetype;
+    },
+    
+    GetData()
+    {
+        return this.Data;
+    },
+    
+    GetAttributes()
+    {
+        return this.Attributes;
+    },
+
+    GetItem()
+    {
+        return this.Item;
+    },
+    
+    GetElement()
+    {
+        return this.Element;
+    },
+    
+    GetNodes()
+    {
+        return this.Nodes;
+    },
+
+    GetReady()
+    {
+        return this.State.ready;
+    }
+}
+
+export default RenderGet;

package/lib/src/classes/addon/classes/render/mixins/methods.js

@@ -0,0 +1,188 @@
+const RenderMethods =
+{
+    Mount(target)
+    {
+        try
+        {
+            if(!this.Element)
+            {
+                throw new Error('Cannot mount - render not processed');
+            }
+            
+            if(this.State.mounted)
+            {
+                throw new Error('Already mounted');
+            }
+            
+            /* Before mount */
+            this.EventEmit('mount');
+            
+            /* Insert into DOM */
+            target = typeof target === 'string' ? document.querySelector(target) : target;
+
+            if(!target)
+            {
+                throw new Error('Target element not found');
+            }
+
+            target.appendChild(this.Element);
+            
+            /* After mount */
+            this.EventEmit('mounted');
+            
+            return this;
+        }
+        catch(error)
+        {
+            console.log(error);
+            this.EventEmit('error', error);
+            return this;
+        }
+    },
+    
+    Unmount()
+    {
+        try
+        {
+            if(!this.State.mounted)
+            {
+                return this;
+            }
+            
+            /* Before unmount */
+            this.EventEmit('unmount');
+            
+            /* Remove from DOM */
+            if(this.Element && this.Element.parentNode)
+            {
+                this.Element.parentNode.removeChild(this.Element);
+            }
+            
+            /* After unmount */
+            this.EventEmit('unmounted');
+            
+            return this;
+        }
+        catch(error)
+        {
+            this.EventEmit('error', error);
+            return this;
+        }
+    },
+    
+    Destroy()
+    {
+        try
+        {
+            /* Unmount first */
+            this.Unmount();
+            
+            /* Emit destroy */
+            this.EventEmit('destroy');
+            
+            /* Clear references */
+            this.Element = null;
+            this.Nodes = {};
+
+            return this;
+        }
+        catch(error)
+        {
+            this.EventEmit('error', error);
+            return this;
+        }
+    },
+
+    /* State Management */
+    
+    Define(config)
+    {
+        const data = this.GetOneType().DataDefine(this, config);
+
+        for(const key in data)
+        {
+            this.Data[key] = data[key];
+        }
+    },
+
+    Update()
+    {
+        try
+        {
+            if(!this.Element)
+            {
+                throw new Error('Cannot update - element not rendered');
+            }
+
+            const compiled = this.Compile(this.Html);
+
+            this.GetOneType().DOMPatch(this.Element, compiled.element);
+
+            this.Nodes = compiled.nodes;
+            this.Time = compiled.time;
+
+            return this;
+        }
+        catch(error)
+        {
+            this.EventEmit('error', error);
+            return this;
+        }
+    },
+
+    /* Lifecycle Hooks */
+    
+    OnInit(callback)
+    {
+        return this.EventOn('init', callback);
+    },
+    
+    OnMount(callback)
+    {
+        return this.EventOn('mount', callback);
+    },
+    
+    OnMounted(callback)
+    {
+        return this.EventOn('mounted', callback);
+    },
+    
+    
+    OnBeforeUnmount(callback)
+    {
+        return this.EventOn('unmount', callback);
+    },
+    
+    OnUnmount(callback)
+    {
+        return this.EventOn('unmount', callback);
+    },
+    
+    OnDestroy(callback)
+    {
+        return this.EventOn('destroy', callback);
+    },
+    
+    OnReady(callback)
+    {
+        return this.EventOn('ready', callback);
+    },
+    
+    OnVisible(callback)
+    {
+        return this.EventOn('visible', callback);
+    },
+    
+    OnResize(callback)
+    {
+        return this.EventOn('resize', callback);
+    },
+    
+    OnError(callback)
+    {
+        return this.EventOn('error', callback);
+    },
+    
+};
+
+export default RenderMethods;