@onetype/framework 2.0.42 → 2.0.44

package/lib/load.js

@@ -3,7 +3,7 @@ import OneType from './src/onetype.js';
 const onetype = new OneType();
 
 /* Framework */
-onetype.Assets('framework', import.meta.url, { js: { path: '.', exclude: ['load.js', 'items', 'styles'] } });
+onetype.Assets('framework', import.meta.url, { js: { path: '.', exclude: ['load.js', 'styles'] } });
 onetype.Assets('styles', import.meta.url, { css: 'styles' });
 
 /* Core */
@@ -20,60 +20,22 @@ onetype.Assets('shortcuts', import.meta.url, { js: '../addons/modules/shortcuts/
 onetype.Assets('sources', import.meta.url, { js: '../addons/modules/sources/front' });
 
 /* Render */
-onetype.Assets('directives', import.meta.url, { js: '../addons/render/directives/front' });
-onetype.Assets('directives/items', import.meta.url, { js: 'items/directives' });
-onetype.Assets('transforms', import.meta.url, { js: '../addons/render/transforms' });
+onetype.Assets('directives', import.meta.url, { js: { path: '../addons/render/directives/front', exclude: ['../addons/render/directives/front/items/self'] } });
+onetype.Assets('directives/items', import.meta.url, { js: '../addons/render/directives/front/items/self' });
+onetype.Assets('transforms', import.meta.url, { js: { path: '../addons/render/transforms/js', exclude: ['../addons/render/transforms/js/items/self'] }, css: '../addons/render/transforms/css' });
+onetype.Assets('transforms/items', import.meta.url, { js: '../addons/render/transforms/js/items/self' });
 onetype.Assets('pages', import.meta.url, { js: '../addons/render/pages', css: '../addons/render/pages/front' });
-onetype.Assets('elements', import.meta.url, { js: '../addons/render/elements/front', css: '../addons/render/elements/front' });
+onetype.Assets('elements', import.meta.url, { js: { path: '../addons/render/elements/front', exclude: ['../addons/render/elements/front/items/self'] }, css: { path: '../addons/render/elements/front', exclude: ['../addons/render/elements/front/items/self'] } });
+onetype.Assets('elements/items', import.meta.url, { js: '../addons/render/elements/front/items/self', css: '../addons/render/elements/front/items/self' });
 
 /* Float */
 onetype.Assets('float', import.meta.url, { js: '../addons/float', css: '../addons/float' });
 
 /* AI */
-onetype.Assets('ai', import.meta.url, { js: '../addons/ai' });
-
-/* Elements — Form */
-onetype.Assets('elements/form/button', import.meta.url, { js: 'items/elements/form/button', css: 'items/elements/form/button' });
-onetype.Assets('elements/form/checkbox', import.meta.url, { js: 'items/elements/form/checkbox', css: 'items/elements/form/checkbox' });
-onetype.Assets('elements/form/color', import.meta.url, { js: 'items/elements/form/color', css: 'items/elements/form/color' });
-onetype.Assets('elements/form/date', import.meta.url, { js: 'items/elements/form/date', css: 'items/elements/form/date' });
-onetype.Assets('elements/form/field', import.meta.url, { js: 'items/elements/form/field', css: 'items/elements/form/field' });
-onetype.Assets('elements/form/input', import.meta.url, { js: 'items/elements/form/input', css: 'items/elements/form/input' });
-onetype.Assets('elements/form/radio', import.meta.url, { js: 'items/elements/form/radio', css: 'items/elements/form/radio' });
-onetype.Assets('elements/form/rating', import.meta.url, { js: 'items/elements/form/rating', css: 'items/elements/form/rating' });
-onetype.Assets('elements/form/section', import.meta.url, { js: 'items/elements/form/section', css: 'items/elements/form/section' });
-onetype.Assets('elements/form/select', import.meta.url, { js: 'items/elements/form/select', css: 'items/elements/form/select' });
-onetype.Assets('elements/form/slider', import.meta.url, { js: 'items/elements/form/slider', css: 'items/elements/form/slider' });
-onetype.Assets('elements/form/tags', import.meta.url, { js: 'items/elements/form/tags', css: 'items/elements/form/tags' });
-onetype.Assets('elements/form/textarea', import.meta.url, { js: 'items/elements/form/textarea', css: 'items/elements/form/textarea' });
-onetype.Assets('elements/form/toggle', import.meta.url, { js: 'items/elements/form/toggle', css: 'items/elements/form/toggle' });
-
-/* Elements — Global */
-onetype.Assets('elements/global/code', import.meta.url, { js: 'items/elements/global/code', css: 'items/elements/global/code' });
-onetype.Assets('elements/global/faq', import.meta.url, { js: 'items/elements/global/faq', css: 'items/elements/global/faq' });
-onetype.Assets('elements/global/heading', import.meta.url, { js: 'items/elements/global/heading', css: 'items/elements/global/heading' });
-onetype.Assets('elements/global/markdown', import.meta.url, { js: 'items/elements/global/markdown', css: 'items/elements/global/markdown' });
-onetype.Assets('elements/global/menu', import.meta.url, { js: 'items/elements/global/menu', css: 'items/elements/global/menu' });
-onetype.Assets('elements/global/notice', import.meta.url, { js: 'items/elements/global/notice', css: 'items/elements/global/notice' });
-onetype.Assets('elements/global/parameters', import.meta.url, { js: 'items/elements/global/parameters', css: 'items/elements/global/parameters' });
-onetype.Assets('elements/global/tags', import.meta.url, { js: 'items/elements/global/tags', css: 'items/elements/global/tags' });
-
-/* Elements — Cards */
-onetype.Assets('elements/cards/pricing', import.meta.url, { js: 'items/elements/cards/pricing', css: 'items/elements/cards/pricing' });
-
-/* Elements — Navigation */
-onetype.Assets('elements/navigation/navbar', import.meta.url, { js: 'items/elements/navigation/navbar', css: 'items/elements/navigation/navbar' });
-onetype.Assets('elements/navigation/sidebar', import.meta.url, { js: 'items/elements/navigation/sidebar', css: 'items/elements/navigation/sidebar' });
-onetype.Assets('elements/navigation/tabs', import.meta.url, { js: 'items/elements/navigation/tabs', css: 'items/elements/navigation/tabs' });
-
-/* Elements — AI */
-onetype.Assets('elements/ai/chat', import.meta.url, { js: 'items/elements/ai/chat', css: 'items/elements/ai/chat' });
-
-/* Elements — Status */
-onetype.Assets('elements/status/loading', import.meta.url, { js: 'items/elements/status/loading', css: 'items/elements/status/loading' });
-onetype.Assets('elements/status/empty', import.meta.url, { js: 'items/elements/status/empty', css: 'items/elements/status/empty' });
-onetype.Assets('elements/status/error', import.meta.url, { js: 'items/elements/status/error', css: 'items/elements/status/error' });
-onetype.Assets('elements/status/code', import.meta.url, { js: 'items/elements/status/code', css: 'items/elements/status/code' });
+onetype.Assets('ai', import.meta.url, { js: '../addons/ai', css: '../addons/ai' });
+
+/* Services */
+onetype.Assets('cloudflare/images', import.meta.url, { js: '../addons/services/cloudflare/images/front', css: '../addons/services/cloudflare/images/front' });
 
 global.$ot = onetype.$ot;
 

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

@@ -64,8 +64,7 @@ class OneTypeAddon
                 removed: [],
                 modify: [],
                 modified: [],
-                get: [],
-                set: []
+                get: []
             }
         };
     }

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

@@ -48,13 +48,13 @@ const AddonItemGet =
         }
         catch(error)
         {
-            throw new Error('Error getting value on field ' + key + '. ' + error.message)
+            throw this.addon.onetype.Error(500, 'Error getting value on field :field:.', {field: key});
         }
 
         if(callback)
         {
             this.addon.items.callbacks.get.forEach(callback => callback(this, key, value));
-            this.addon.onetype.Emit('addon.item.get', this, key, value);
+            this.addon.onetype.Emit('@addon.item.get', this, key, value);
         }
 
         return value;
@@ -64,7 +64,7 @@ const AddonItemGet =
     {
         let data = {};
 
-        Object.entries(data).forEach(([key, value]) =>
+        Object.keys(this.data).forEach((key) =>
         {
             data[key] = this.Get(key, callback);
         })

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

@@ -35,15 +35,13 @@ const AddonItemSet =
         }
         catch(error)
         {
-            throw new Error('Error setting value on field ' + key + '. ' + error.message)
+            throw this.addon.onetype.Error(500, 'Error setting value on field :field:.', {field: key});
         }
 
         if(callback)
         {
             this.addon.items.callbacks.modify.forEach(callback => callback(this, key, value, prevValue));
-            this.addon.items.callbacks.set.forEach(callback => callback(this, key, value));
-            this.addon.onetype.Emit('addon.item.modify', this, key, value, prevValue);
-            this.addon.onetype.Emit('addon.item.set', this, key, value, prevValue);
+            this.addon.onetype.Emit('@addon.item.modify', this, key, value, prevValue);
         }
 
         this.data[key] = value;
@@ -51,7 +49,7 @@ const AddonItemSet =
         if(callback)
         {
             this.addon.items.callbacks.modified.forEach(callback => callback(this, key, value, prevValue));
-            this.addon.onetype.Emit('addon.item.modified', this, key, value, prevValue);
+            this.addon.onetype.Emit('@addon.item.modified', this, key, value, prevValue);
         }
     },
 

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

@@ -9,7 +9,7 @@ const AddonItemStore =
 
         if(value !== undefined)
         {
-            return onetype.DataDefineOne(this.store[key], [typeof value]);
+            return this.addon.onetype.DataDefineOne(this.store[key], [typeof value]);
         }
 
         return this.store[key];

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

@@ -14,7 +14,7 @@ class OneTypeAddonRender
         this.Name = name;
         this.Callback = callback;
 
-        this._updateTimeout = null;
+        this.UpdateFrame = null;
         this.Data = { state: addon.onetype.StateGet() };
         this.Attributes = {};
         this.Item = null;
@@ -35,8 +35,6 @@ class OneTypeAddonRender
             destroy: [],
             error: [],
             ready: [],
-            visible: [],
-            resize: [],
             compile: []
         };
 
@@ -49,10 +47,7 @@ class OneTypeAddonRender
             rendering: false
         };
 
-        this.Observer = {
-            visibility: undefined,
-            resize: undefined
-        };
+        this.Emitters = [];
 
         const proxy = new Proxy(this, {
             get(target, prop)
@@ -76,9 +71,13 @@ class OneTypeAddonRender
                     const changed = target.Data[prop] !== value;
                     target.Data[prop] = value;
 
-                    if(changed && target.State.ready && !target.State.rendering)
+                    if(changed && target.State.ready && !target.State.rendering && !target.UpdateFrame)
                     {
-                        target._scheduleUpdate();
+                        target.UpdateFrame = requestAnimationFrame(() =>
+                        {
+                            target.UpdateFrame = null;
+                            target.Update();
+                        });
                     }
                 }
 
@@ -89,19 +88,6 @@ class OneTypeAddonRender
         return proxy;
     }
 
-    _scheduleUpdate()
-    {
-        if(this._updateTimeout)
-        {
-            clearTimeout(this._updateTimeout);
-        }
-
-        this._updateTimeout = setTimeout(() =>
-        {
-            this._updateTimeout = null;
-            this.Update();
-        }, 16);
-    }
 }
 
 Object.assign(OneTypeAddonRender.prototype, RenderGet);

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

@@ -1,3 +1,5 @@
+import onetype from '#framework/load.js';
+
 const RenderCompile =
 {
     Compile(html, data = null)
@@ -13,7 +15,7 @@ const RenderCompile =
 
             const prefix = this.GetAddon().GetName().charAt(0).toLowerCase();
 
-            element.classList.add(prefix + '-' + this.GetOneType().GenerateHash(this.GetAddon().GetName() + '-' + this.GetName()));
+            element.classList.add(prefix + '-' + onetype.GenerateHash(this.GetAddon().GetName() + '-' + this.GetName()));
         }
 
         const compile = {
@@ -32,11 +34,11 @@ const RenderCompile =
 
         const start = performance.now();
 
-        this.GetOneType().Emit('addon.render.compile.before', this, compile, element, '0');
+        onetype.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');
+        onetype.Emit('@addon.render.compile.after', this, compile, element, '0');
 
         compile.time = performance.now() - start;
 
@@ -54,7 +56,7 @@ const RenderCompile =
 
         const parent = node.parentNode;
 
-        this.GetOneType().Emit('addon.render.compile.node', this, compile, node, identifier);
+        onetype.Emit('@addon.render.compile.node', this, compile, node, identifier);
 
         if(node.parentNode !== parent)
         {

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

@@ -1,3 +1,5 @@
+import onetype from '#framework/load.js';
+
 const RenderDOM =
 {
     DOMCreateElement(html)
@@ -9,7 +11,7 @@ const RenderDOM =
 
     DOMPatchElement(current, target)
     {
-        return this.Addon.onetype.DOMPatch(current, target);
+        return onetype.DOMPatch(current, target);
     },
 };
 

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

@@ -1,10 +1,12 @@
+import onetype from '#framework/load.js';
+
 const RenderEvents =
 {
     EventOn(event, callback)
     {
         if(!(event in this.Events))
         {
-            throw new Error('Event ' + event + ' doesn\'t exist.');
+            throw onetype.Error(400, 'Event :event: doesn\'t exist.', {event});
         }
 
         const run = {
@@ -22,7 +24,7 @@ const RenderEvents =
         {
             this.Events[event].push(callback);
         }
-        
+
         return this;
     },
 
@@ -30,7 +32,7 @@ const RenderEvents =
     {
         if(!(event in this.Events))
         {
-            throw new Error('Event ' + event + ' doesn\'t exist.');
+            throw onetype.Error(400, 'Event :event: doesn\'t exist.', {event});
         }
 
         const skip = {
@@ -71,7 +73,7 @@ const RenderEvents =
     {
          if(!(event in this.Events))
         {
-            throw new Error('Event ' + event + ' doesn\'t exist.');
+            throw onetype.Error(400, 'Event :event: doesn\'t exist.', {event});
         }
 
         if(!callback)
@@ -100,51 +102,36 @@ const RenderEvents =
         return this.EventOn(event, onceWrapper);
     },
 
-    EventInitObserver(type)
+    EventCleanup()
     {
-        if(this.Observer[type])
+        /* Global emitters */
+        for(const emitter of this.Emitters)
         {
-            return;
+            onetype.EmitOff(emitter.name, emitter.id);
         }
 
-        this.EventOn('mount', () =>
+        this.Emitters = [];
+
+        /* Visibility / Resize observers */
+        if(this.Element)
         {
-            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 =>
+            onetype.ObserverUnvisible(this.Element);
+            onetype.ObserverUnresize(this.Element);
+        }
+
+        /* Update frame */
+        if(this.UpdateFrame)
         {
-            if(this.Observer[key])
-            {
-                this.Observer[key].disconnect();
-                this.Observer[key] = undefined;
-            }
-        });
+            cancelAnimationFrame(this.UpdateFrame);
+            this.UpdateFrame = null;
+        }
+
+        /* Local events */
+        for(const event in this.Events)
+        {
+            this.Events[event] = [];
+        }
     }
 };
 
-export default RenderEvents;
+export default RenderEvents;

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

@@ -15,11 +15,6 @@ const RenderGet =
         return this.Addon;
     },
 
-    GetOneType()
-    {
-        return this.Addon.onetype;
-    },
-    
     GetData()
     {
         return this.Data;

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

@@ -1,3 +1,5 @@
+import onetype from '#framework/load.js';
+
 const RenderMethods =
 {
     Mount(target)
@@ -6,40 +8,39 @@ const RenderMethods =
         {
             if(!this.Element)
             {
-                throw new Error('Cannot mount - render not processed');
+                throw onetype.Error(400,'Cannot mount - render not processed');
             }
-            
+
             if(this.State.mounted)
             {
-                throw new Error('Already mounted');
+                throw onetype.Error(400,'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');
+                throw onetype.Error(400,'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
@@ -48,19 +49,19 @@ const RenderMethods =
             {
                 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)
@@ -69,17 +70,17 @@ const RenderMethods =
             return this;
         }
     },
-    
+
     Destroy()
     {
         try
         {
             /* Unmount first */
             this.Unmount();
-            
+
             /* Emit destroy */
             this.EventEmit('destroy');
-            
+
             /* Clear references */
             this.Element = null;
             this.Nodes = {};
@@ -94,10 +95,10 @@ const RenderMethods =
     },
 
     /* State Management */
-    
+
     Define(config)
     {
-        const data = this.GetOneType().DataDefine(this, config);
+        const data = onetype.DataDefine(this, config);
 
         for(const key in data)
         {
@@ -105,18 +106,54 @@ const RenderMethods =
         }
     },
 
+    UpdateData(data)
+    {
+        let changed = false;
+
+        for(const key in data)
+        {
+            if(key === 'state')
+            {
+                continue;
+            }
+
+            const value = data[key];
+
+            if(typeof value === 'function')
+            {
+                this.Data[key] = value;
+                continue;
+            }
+
+            if(this.Data[key] !== value)
+            {
+                this.Data[key] = value;
+                changed = true;
+            }
+        }
+
+        if(changed && this.State.ready && !this.State.rendering && !this.UpdateFrame)
+        {
+            this.UpdateFrame = requestAnimationFrame(() =>
+            {
+                this.UpdateFrame = null;
+                this.Update();
+            });
+        }
+    },
+
     Update()
     {
         try
         {
             if(!this.Element)
             {
-                throw new Error('Cannot update - element not rendered');
+                throw onetype.Error(400,'Cannot update - element not rendered');
             }
 
             const compiled = this.Compile(this.Html);
 
-            this.GetOneType().DOMPatch(this.Element, compiled.element);
+            onetype.DOMPatch(this.Element, compiled.element);
 
             this.Nodes = compiled.nodes;
             this.Time = compiled.time;
@@ -131,58 +168,86 @@ const RenderMethods =
     },
 
     /* 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);
+        const render = this;
+
+        this.EventOn('ready', () =>
+        {
+            onetype.ObserverVisible(render.Element, (entry) =>
+            {
+                callback.call(render, entry);
+            });
+        });
     },
-    
+
     OnResize(callback)
     {
-        return this.EventOn('resize', callback);
+        const render = this;
+
+        this.EventOn('ready', () =>
+        {
+            onetype.ObserverResize(render.Element, (entry) =>
+            {
+                callback.call(render, entry);
+            });
+        });
     },
-    
+
     OnError(callback)
     {
         return this.EventOn('error', callback);
     },
-    
+
+    /* Global Emitter */
+
+    Emit(name, ...args)
+    {
+        onetype.Emit(name, ...args);
+    },
+
+    On(name, callback)
+    {
+        const render = this;
+
+        const id = onetype.EmitOn(name, function(...args)
+        {
+            callback.call(render, ...args);
+        });
+
+        this.Emitters.push({ name, id });
+    },
 };
 
-export default RenderMethods;
+export default RenderMethods;