@onetype/framework 2.0.26 → 2.0.28

package/lib/items/transforms/typed/typed.js

@@ -1,173 +1,172 @@
-onetype.AddonReady('transforms', (transforms) =>
-{
-    transforms.ItemAdd({
-        id: 'typed',
-        icon: 'keyboard',
-        name: 'Typed',
-        description: 'Typewriter text animation effect. Automatically types and deletes text with customizable speed.',
-        js: [
-            'https://cdn.jsdelivr.net/npm/typed.js@2.1.0/dist/typed.umd.js'
-        ],
-        config: {
-            'strings': ['array', []],
-            'type-speed': ['number', 50],
-            'back-speed': ['number', 30],
-            'start-delay': ['number', 0],
-            'back-delay': ['number', 700],
-            'loop': ['boolean', false],
-            'loop-count': ['number', 0],
-            'show-cursor': ['boolean', true],
-            'cursor-char': ['string', '|'],
-            'auto-insert-css': ['boolean', true],
-            'shuffle': ['boolean', false],
-            'smart-backspace': ['boolean', true],
-            'fade-out': ['boolean', false],
-            'fade-out-delay': ['number', 500],
-            'content-type': ['string', 'html']
-        },
-        code: function(data, item, compile, node, identifier)
+transforms.ItemAdd({
+    id: 'typed',
+    icon: 'keyboard',
+    name: 'Typed',
+    description: 'Typewriter text animation effect. Automatically types and deletes text with customizable speed.',
+    js: [
+        'https://cdn.jsdelivr.net/npm/typed.js@2.1.0/dist/typed.umd.js'
+    ],
+    config: {
+        'strings': ['array', []],
+        'type-speed': ['number', 50],
+        'back-speed': ['number', 30],
+        'start-delay': ['number', 0],
+        'back-delay': ['number', 700],
+        'loop': ['boolean', false],
+        'loop-count': ['number', 0],
+        'show-cursor': ['boolean', true],
+        'cursor-char': ['string', '|'],
+        'auto-insert-css': ['boolean', true],
+        'shuffle': ['boolean', false],
+        'smart-backspace': ['boolean', true],
+        'fade-out': ['boolean', false],
+        'fade-out-delay': ['number', 500],
+        'content-type': ['string', 'html']
+    },
+    code: function(data, node, transformer)
+    {
+        const id = 'typed-' + onetype.Generate(8);
+
+        this.setup = () =>
         {
-            this.setup = () =>
-            {
-                node.classList.add('typed');
-                node.classList.add('typed-' + identifier);
+            node.classList.add('typed');
+            node.classList.add(id);
 
-                const strings = data['strings'].value;
-                const children = Array.from(node.children);
+            const strings = data['strings'];
+            const children = Array.from(node.children);
 
-                const stringsArray = [];
+            const stringsArray = [];
 
-                if(strings && strings.length > 0)
-                {
-                    stringsArray.push(...strings);
-                }
-                else if(children.length > 0)
+            if(strings && strings.length > 0)
+            {
+                stringsArray.push(...strings);
+            }
+            else if(children.length > 0)
+            {
+                children.forEach(child =>
                 {
-                    children.forEach(child =>
-                    {
-                        stringsArray.push(child.innerHTML);
-                    });
+                    stringsArray.push(child.innerHTML);
+                });
 
-                    node.innerHTML = '';
-                }
-                else
+                node.innerHTML = '';
+            }
+            else
+            {
+                const existingText = node.textContent || node.innerHTML;
+                if(existingText.trim())
                 {
-                    const existingText = node.textContent || node.innerHTML;
-                    if(existingText.trim())
-                    {
-                        stringsArray.push(existingText);
-                        node.innerHTML = '';
-                    }
+                    stringsArray.push(existingText);
+                    node.innerHTML = '';
                 }
+            }
 
-                if(stringsArray.length === 0)
-                {
-                    stringsArray.push('Type your text here...');
-                }
+            if(stringsArray.length === 0)
+            {
+                stringsArray.push('Type your text here...');
+            }
 
-                this.strings = stringsArray;
+            this.strings = stringsArray;
 
-                const element = document.createElement('span');
-                element.className = 'typed-element';
-                node.appendChild(element);
-            };
+            const element = document.createElement('span');
+            element.className = 'typed-element';
+            node.appendChild(element);
+        };
 
-            this.styles = () =>
+        this.styles = () =>
+        {
+            if(!data['auto-insert-css'])
             {
-                if(!data['auto-insert-css'].value)
-                {
-                    return;
-                }
+                return;
+            }
 
-                const style = document.createElement('style');
-
-                style.textContent = `
-                    .typed-${identifier} {
-                        display: inline-block;
-                    }
-                    .typed-${identifier} .typed-cursor {
-                        opacity: 1;
-                        animation: typedjsBlink 0.7s infinite;
-                        -webkit-animation: typedjsBlink 0.7s infinite;
-                        animation: typedjsBlink 0.7s infinite;
-                    }
-                    @keyframes typedjsBlink {
-                        50% { opacity: 0.0; }
-                    }
-                    @-webkit-keyframes typedjsBlink {
-                        0% { opacity: 1; }
-                        50% { opacity: 0.0; }
-                        100% { opacity: 1; }
-                    }
-                    .typed-${identifier} .typed-fade-out {
-                        opacity: 0;
-                        transition: opacity 0.25s;
-                    }
-                `;
-
-                document.head.appendChild(style);
-            };
-
-            this.config = () =>
-            {
-                const config = {
-                    strings: this.strings,
-                    typeSpeed: data['type-speed'].value,
-                    backSpeed: data['back-speed'].value,
-                    startDelay: data['start-delay'].value,
-                    backDelay: data['back-delay'].value,
-                    loop: data['loop'].value,
-                    showCursor: data['show-cursor'].value,
-                    cursorChar: data['cursor-char'].value,
-                    autoInsertCss: false,
-                    shuffle: data['shuffle'].value,
-                    smartBackspace: data['smart-backspace'].value,
-                    contentType: data['content-type'].value
-                };
+            const style = document.createElement('style');
 
-                if(data['loop-count'].value > 0)
-                {
-                    config.loopCount = data['loop-count'].value;
+            style.textContent = `
+                .typed-${id} {
+                    display: inline-block;
                 }
-
-                if(data['fade-out'].value)
-                {
-                    config.fadeOut = true;
-                    config.fadeOutClass = 'typed-fade-out';
-                    config.fadeOutDelay = data['fade-out-delay'].value;
+                .typed-${id} .typed-cursor {
+                    opacity: 1;
+                    animation: typedjsBlink 0.7s infinite;
+                    -webkit-animation: typedjsBlink 0.7s infinite;
+                    animation: typedjsBlink 0.7s infinite;
+                }
+                @keyframes typedjsBlink {
+                    50% { opacity: 0.0; }
                 }
+                @-webkit-keyframes typedjsBlink {
+                    0% { opacity: 1; }
+                    50% { opacity: 0.0; }
+                    100% { opacity: 1; }
+                }
+                .typed-${id} .typed-fade-out {
+                    opacity: 0;
+                    transition: opacity 0.25s;
+                }
+            `;
+
+            document.head.appendChild(style);
+        };
 
-                return config;
+        this.config = () =>
+        {
+            const config = {
+                strings: this.strings,
+                typeSpeed: data['type-speed'],
+                backSpeed: data['back-speed'],
+                startDelay: data['start-delay'],
+                backDelay: data['back-delay'],
+                loop: data['loop'],
+                showCursor: data['show-cursor'],
+                cursorChar: data['cursor-char'],
+                autoInsertCss: false,
+                shuffle: data['shuffle'],
+                smartBackspace: data['smart-backspace'],
+                contentType: data['content-type']
             };
 
-            this.initialize = () =>
+            if(data['loop-count'] > 0)
             {
-                setTimeout(() =>
-                {
-                    const element = node.querySelector('.typed-element');
+                config.loopCount = data['loop-count'];
+            }
 
-                    if(!element)
-                    {
-                        return;
-                    }
+            if(data['fade-out'])
+            {
+                config.fadeOut = true;
+                config.fadeOutClass = 'typed-fade-out';
+                config.fadeOutDelay = data['fade-out-delay'];
+            }
 
-                    const typedInstance = new Typed(element, this.config());
+            return config;
+        };
 
-                    node._typedInstance = typedInstance;
+        this.initialize = () =>
+        {
+            setTimeout(() =>
+            {
+                const element = node.querySelector('.typed-element');
 
-                    node._typedControl = {
-                        start: () => typedInstance.start(),
-                        stop: () => typedInstance.stop(),
-                        toggle: () => typedInstance.toggle(),
-                        destroy: () => typedInstance.destroy(),
-                        reset: () => typedInstance.reset()
-                    };
-                }, 0);
-            };
+                if(!element)
+                {
+                    return;
+                }
+
+                const typedInstance = new Typed(element, this.config());
 
-            this.setup();
-            this.styles();
-            this.initialize();
-        }
-    });
-});
+                node._typedInstance = typedInstance;
+
+                node._typedControl = {
+                    start: () => typedInstance.start(),
+                    stop: () => typedInstance.stop(),
+                    toggle: () => typedInstance.toggle(),
+                    destroy: () => typedInstance.destroy(),
+                    reset: () => typedInstance.reset()
+                };
+            }, 0);
+        };
+
+        this.setup();
+        this.styles();
+        this.initialize();
+    }
+});

package/lib/load.js

@@ -21,7 +21,9 @@ onetype.Assets('sources', import.meta.url, { js: '../addons/modules/sources/fron
 
 /* 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('transforms/items', import.meta.url, { js: 'items/transforms' });
 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' });
 
@@ -47,14 +49,18 @@ onetype.Assets('elements/global/heading', import.meta.url, { js: 'items/elements
 onetype.Assets('elements/global/markdown', import.meta.url, { js: 'items/elements/global/markdown', css: 'items/elements/global/markdown' });
 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/tabs', import.meta.url, { js: 'items/elements/global/tabs', css: 'items/elements/global/tabs' });
 onetype.Assets('elements/global/tags', import.meta.url, { js: 'items/elements/global/tags', css: 'items/elements/global/tags' });
 
 /* Elements — Sections */
 onetype.Assets('elements/sections/footer', import.meta.url, { js: 'items/elements/sections/footer', css: 'items/elements/sections/footer' });
 onetype.Assets('elements/sections/hero', import.meta.url, { js: 'items/elements/sections/hero', css: 'items/elements/sections/hero' });
-onetype.Assets('elements/sections/navbar', import.meta.url, { js: 'items/elements/sections/navbar', css: 'items/elements/sections/navbar' });
 onetype.Assets('elements/sections/stats', import.meta.url, { js: 'items/elements/sections/stats', css: 'items/elements/sections/stats' });
+onetype.Assets('elements/sections/pricing', import.meta.url, { js: 'items/elements/sections/pricing', css: 'items/elements/sections/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 — Status */
 onetype.Assets('elements/status/loading', import.meta.url, { js: 'items/elements/status/loading', css: 'items/elements/status/loading' });
@@ -62,20 +68,6 @@ onetype.Assets('elements/status/empty', import.meta.url, { js: 'items/elements/s
 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' });
 
-/* Transforms */
-onetype.Assets('transforms/accordion', import.meta.url, { js: 'items/transforms/accordion' });
-onetype.Assets('transforms/chart', import.meta.url, { js: 'items/transforms/chart' });
-onetype.Assets('transforms/codeflask', import.meta.url, { js: 'items/transforms/codeflask' });
-onetype.Assets('transforms/codemirror', import.meta.url, { js: 'items/transforms/codemirror' });
-onetype.Assets('transforms/comparison', import.meta.url, { js: 'items/transforms/comparison' });
-onetype.Assets('transforms/heatmap', import.meta.url, { js: 'items/transforms/heatmap' });
-onetype.Assets('transforms/interact', import.meta.url, { js: 'items/transforms/interact' });
-onetype.Assets('transforms/particles', import.meta.url, { js: 'items/transforms/particles' });
-onetype.Assets('transforms/sparkline', import.meta.url, { js: 'items/transforms/sparkline' });
-onetype.Assets('transforms/swiper', import.meta.url, { js: 'items/transforms/swiper' });
-onetype.Assets('transforms/tabs', import.meta.url, { js: 'items/transforms/tabs' });
-onetype.Assets('transforms/typed', import.meta.url, { js: 'items/transforms/typed' });
-
 global.$ot = onetype.$ot;
 
 process.on('SIGINT', async () =>

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

@@ -62,6 +62,22 @@ const RenderProcess =
         const html = this.GetCallback().call(this, this.GetData());
         this.State.rendering = false;
 
+        if(html && typeof html.then === 'function')
+        {
+            html.then(resolved =>
+            {
+                if(typeof resolved !== 'string')
+                {
+                    throw new Error('Render function must return a string');
+                }
+
+                this.Html = resolved;
+                this.Update();
+            });
+
+            return '';
+        }
+
         if(typeof html !== 'string')
         {
             throw new Error('Render function must return a string');

package/lib/src/mixins/addons.js

@@ -117,22 +117,22 @@ const OneTypeAddons =
             return setTimeout(() => callback(addon));
         }
 
-        let loaded = false;
+        // let loaded = false;
 
-        const timeout = setTimeout(() =>
-        {
-            if(!loaded)
-            {
-                this.LogWarn(`Addon "${name}" might not be loaded.`);
-            }
-        }, 2000);
+        // const timeout = setTimeout(() =>
+        // {
+        //     if(!loaded)
+        //     {
+        //         this.LogWarn(`Addon "${name}" might not be loaded.`);
+        //     }
+        // }, 2000);
 
         this.AddonOn('add', (addon) =>
         {
             if(addon.GetName() === name)
             {
-                loaded = true;
-                clearTimeout(timeout);
+                // loaded = true;
+                // clearTimeout(timeout);
 
                 if(instant)
                 {

package/lib/styles/variables.css

@@ -42,7 +42,7 @@
     --ot-bg-4-hover: rgba(48, 48, 50, 1);
 
     --ot-text-1: rgba(225, 228, 232, 1);
-    --ot-text-2: rgb(159, 165, 177, 1);
+    --ot-text-2: rgba(156, 156, 156, 1);
 
     --ot-brand: rgba(226, 112, 85, 1);
     --ot-brand-border: rgba(236, 142, 120, 1);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@onetype/framework",
-    "version": "2.0.26",
+    "version": "2.0.28",
     "description": "OneType Framework — Full-stack isomorphic JavaScript framework built from scratch. One addon abstraction powers databases, servers, commands, pages, directives, queues, and more.",
     "type": "module",
     "main": "lib/load.js",

package/addons/render/transforms/functions/load/assets.js

@@ -1,49 +0,0 @@
-transforms.Fn('load.assets', async function(item)
-{
-    const loaded = transforms.loaded = transforms.loaded || {js: new Set(), css: new Set()};
-
-    const js = item.Get('js') || [];
-    const css = item.Get('css') || [];
-
-    const jsPromises = js.map(url =>
-    {
-        if (loaded.js.has(url))
-        {
-            return Promise.resolve();
-        }
-
-        loaded.js.add(url);
-
-        return new Promise((resolve, reject) =>
-        {
-            const script = document.createElement('script');
-            script.src = url;
-            script.async = true;
-            script.onload = resolve;
-            script.onerror = () => reject(new Error(`Failed to load script: ${url}`));
-            document.head.appendChild(script);
-        });
-    });
-
-    const cssPromises = css.map(url =>
-    {
-        if (loaded.css.has(url))
-        {
-            return Promise.resolve();
-        }
-
-        loaded.css.add(url);
-
-        return new Promise((resolve, reject) =>
-        {
-            const link = document.createElement('link');
-            link.rel = 'stylesheet';
-            link.href = url;
-            link.onload = resolve;
-            link.onerror = () => reject(new Error(`Failed to load stylesheet: ${url}`));
-            document.head.appendChild(link);
-        });
-    });
-
-    await Promise.all([...jsPromises, ...cssPromises]);
-});