@onetype/framework 2.0.20

package/addons/render/assets/back/functions/scan/directories.js

@@ -0,0 +1,36 @@
+import assets from '../../addon.js';
+import fs from 'fs';
+import path from 'path';
+
+assets.Fn('scan.directories', function(dirPath, ignore = [], recursive = true)
+{
+    const dirs = [];
+
+    if (!fs.existsSync(dirPath))
+    {
+        return dirs;
+    }
+
+    const items = fs.readdirSync(dirPath);
+
+    for (const item of items)
+    {
+        if (item.startsWith('.')) continue;
+        if (ignore.some(str => item.includes(str))) continue;
+
+        const itemPath = path.join(dirPath, item);
+        const stats = fs.statSync(itemPath);
+
+        if (stats.isDirectory())
+        {
+            dirs.push(itemPath);
+
+            if (recursive)
+            {
+                dirs.push(...assets.Fn('scan.directories', itemPath, ignore, recursive));
+            }
+        }
+    }
+
+    return dirs;
+});

package/addons/render/assets/back/functions/scan/files.js

@@ -0,0 +1,56 @@
+import assets from '../../addon.js';
+import fs from 'fs';
+import path from 'path';
+
+assets.Fn('scan.files', function(dirPath, extension = 'css', ignore = [], recursive = true)
+{
+    const results = [];
+
+    if (!fs.existsSync(dirPath))
+    {
+        return results;
+    }
+
+    const items = fs.readdirSync(dirPath);
+    const folders = [];
+    const files = [];
+
+    for (const item of items)
+    {
+        if (item.startsWith('.')) continue;
+
+        const full = path.join(dirPath, item);
+        const stats = fs.statSync(full);
+
+        if (ignore.some(str => full.includes(str))) continue;
+
+        if (stats.isDirectory() && recursive)
+        {
+            folders.push(full);
+        }
+        else if (item.endsWith(`.${extension}`) && !item.endsWith(`.back.${extension}`))
+        {
+            files.push(full);
+        }
+    }
+
+    const addon = files.find(f => f.endsWith('/addon.js'));
+
+    if (addon)
+    {
+        results.push(addon);
+        files.splice(files.indexOf(addon), 1);
+    }
+
+    folders.sort();
+
+    for (const folder of folders)
+    {
+        results.push(...assets.Fn('scan.files', folder, extension, ignore, recursive));
+    }
+
+    files.sort();
+    results.push(...files);
+
+    return results;
+});

package/addons/render/assets/back/functions/utils/read.js

@@ -0,0 +1,24 @@
+import assets from '../../addon.js';
+import fs from 'fs';
+
+assets.Fn('utils.read', function(files)
+{
+    const contents = [];
+
+    for (const file of files)
+    {
+        if(!fs.existsSync(file))
+        {
+            continue;
+        }
+
+        const fileContent = fs.readFileSync(file, 'utf8');
+        
+        if (fileContent)
+        {
+            contents.push(fileContent);
+        }
+    }
+
+    return contents;
+});

package/addons/render/assets/back/functions/utils/transform.js

@@ -0,0 +1,32 @@
+import assets from '../../addon.js';
+
+assets.Fn('utils.transform', function(contents, type = 'js')
+{
+    if (!Array.isArray(contents))
+    {
+        return '';
+    }
+
+    if (type === 'js')
+    {
+        const code = contents.map(code => 
+        {
+            code = code.replace(/^import\s+.*?;?\s*$/gm, '');
+            code = code.replace(/^export\s+.*?;?\s*$/gm, '');
+            code = code.replace(/^\s*[\r\n]/gm, '');
+
+            return code;
+        });
+
+        return code.filter(content => content && content.trim()).join('\n\n');
+    }
+
+    if (type === 'css')
+    {
+        const code = contents.map(code => code ? code.trim() : '');
+
+        return code.filter(content => content && content.trim()).join('\n');
+    }
+
+    return code.filter(content => content && content.trim()).join('\n');
+});

package/addons/render/assets/back/items/commands/css.js

@@ -0,0 +1,18 @@
+import onetype from "#framework/load.js";
+import assets from "#assets/load.js";
+
+onetype.AddonReady('commands', (commands) => 
+{
+    commands.Item({
+        id: 'assets:css',
+        exposed: true,
+        method: 'GET',
+        endpoint: '/assets/build.css',
+        type: 'CSS',
+        callback: async function(properties, resolve)
+        {
+            resolve(await assets.Fn('css'));
+        }
+    });
+});
+

package/addons/render/assets/back/items/commands/js.js

@@ -0,0 +1,17 @@
+import onetype from "#framework/load.js";
+import assets from "#assets/addon.js";
+
+onetype.AddonReady('commands', (commands) => 
+{
+    commands.Item({
+        id: 'assets:js',
+        exposed: true,
+        method: 'GET',
+        endpoint: '/assets/build.js',
+        type: 'JS',
+        callback: async function(properties, resolve)
+        {
+            resolve(await assets.Fn('js', {http: this.http}));
+        }
+    });
+});

package/addons/render/assets/back/items/html/css.js

@@ -0,0 +1,16 @@
+import onetype from "#framework/load.js";
+
+onetype.AddonReady('html', (html) => 
+{
+    html.Item({
+        id: 'assets-css',
+        exposed: true,
+        tag: 'link',
+        position: 'head',
+        order: 90,
+        attributes: {
+            rel: 'stylesheet',
+            href: '/assets/build.css?v=18'
+        }
+    });
+});

package/addons/render/assets/back/items/html/js.js

@@ -0,0 +1,16 @@
+import onetype from "#framework/load.js";
+
+onetype.AddonReady('html', (html) => 
+{
+    html.Item({
+        id: 'assets-js',
+        exposed: true,
+        tag: 'script',
+        position: 'head',
+        order: 90,
+        attributes: {
+            src: '/assets/build.js?v=18',
+            defer: null
+        }
+    });
+});

package/addons/render/assets/back/load.js

@@ -0,0 +1,23 @@
+import assets from './addon.js';
+
+/* Functions */
+import './functions/css.js';
+import './functions/js.js';
+
+import './functions/scan/files.js';
+import './functions/scan/directories.js';
+
+import './functions/utils/read.js';
+import './functions/utils/transform.js';
+
+import './functions/import.js';
+
+/* Items */
+import './items/commands/css.js';
+import './items/commands/js.js';
+
+import './items/html/css.js';
+import './items/html/js.js';
+
+
+export default assets;

package/addons/render/directives/front/js/#register/addon.js

@@ -0,0 +1,32 @@
+const directives = onetype.Addon('directives', (addon) =>
+{
+    addon.Field('id', ['string']);
+    addon.Field('icon', ['string', 'code']);
+    addon.Field('name', ['string', '']);
+    addon.Field('description', ['string', '']);
+    addon.Field('trigger', ['string', 'node']);
+    addon.Field('order', ['number', 1]);
+    addon.Field('code', ['function']);
+    addon.Field('strict', ['boolean', true]);
+
+    addon.Field('tag', ['string']);
+    addon.Field('type', ['string']);
+    addon.Field('attributes', ['object', {}]);
+
+    /* Trigers */
+    
+    onetype.EmitOn('addon.render.compile.before', (...data) =>
+    {
+        directives.Fn('process', 'before', ...data);
+    })
+    
+    onetype.EmitOn('addon.render.compile.after', (...data) =>
+    {
+        directives.Fn('process', 'after', ...data);
+    })
+    
+    onetype.EmitOn('addon.render.compile.node', (...data) =>
+    {
+        directives.Fn('process', 'node', ...data);
+    })
+});

package/addons/render/directives/front/js/functions/process/attributes.js

@@ -0,0 +1,47 @@
+directives.Fn('process.attributes', function(node, compile)
+{
+    if (node.nodeType !== Node.ELEMENT_NODE || !node.__attributes)
+    {
+        return;
+    }
+
+    node.__attributes.forEach(attribute =>
+    {
+        if (!attribute.name.startsWith(':'))
+        {
+            return;
+        }
+
+        const attributeName = attribute.name.substring(1);
+        const expression = attribute.value;
+
+        try
+        {
+            const value = onetype.Function(expression, compile.data, false);
+
+            if (value === null || value === undefined || value === false)
+            {
+                node.removeAttribute(attributeName);
+            }
+            else if (value === true)
+            {
+                node.setAttribute(attributeName, '');
+            }
+            else if (typeof value === 'string' || typeof value === 'number')
+            {
+                node.setAttribute(attributeName, value);
+            }
+            else
+            {
+                node.removeAttribute(attributeName);
+            }
+
+            node.removeAttribute(attribute.name);
+        }
+        catch(error)
+        {
+            console.error('Dynamic attribute error:', error);
+            node.removeAttribute(attribute.name);
+        }
+    });
+});

package/addons/render/directives/front/js/functions/process/data.js

@@ -0,0 +1,74 @@
+directives.Fn('process.data', function(attributes, node, compile)
+{
+    const data = {};
+
+    Object.entries(attributes).forEach(([name, definition]) =>
+    {
+        name = name.toLowerCase();
+
+        const find = node.__attributes ? node.__attributes.find(attribute =>
+        {
+            return (attribute.lowerName === name) || attribute.lowerName === (':' + name) || attribute.lowerName.startsWith(name + '.') || attribute.lowerName.startsWith(':' + name + '.');
+        }) : null;
+
+        let attribute;
+
+        if (find)
+        {
+            attribute = {
+                original: { name: find.name, value: find.value }, 
+                name: find.name,
+                value: find.value,
+                dynamic: false,
+                modifiers: []
+            };
+        }
+        else 
+        {
+            attribute = {
+                original: { name: name, value: null }, 
+                name: name,
+                value: null,
+                dynamic: false,
+                modifiers: []
+            };
+        }
+
+        if(attribute.name.split('.').length > 1)
+        {
+            const split = attribute.name.split('.');
+
+            attribute.name = split[0];
+            attribute.modifiers = split.slice(1);
+        }
+
+        if(attribute.name.startsWith(':'))
+        {
+            attribute.dynamic = true;
+            attribute.name = attribute.name.substring(1);
+        }
+
+        if(attribute.dynamic)
+        {
+            try 
+            {
+                attribute.value = onetype.Function(attribute.value, compile.data, false);
+            }
+            catch(error)
+            {
+                attribute.value = null;
+            }
+        }
+
+
+        attribute.value = onetype.DataDefineOne(attribute.value, definition);
+        data[attribute.name] = attribute;
+
+        if(find && node.removeAttribute)
+        {
+            node.removeAttribute(find.name);
+        }
+    });
+
+    return data;
+});

package/addons/render/directives/front/js/functions/process/match.js

@@ -0,0 +1,43 @@
+directives.Fn('process.match', function(directive, node)
+{   
+    const tag = directive.Get('tag');
+    const type = directive.Get('type');
+    const attributes = directive.Get('attributes');
+
+    const matches = {
+        count: 0,
+        total: Object.keys(attributes).length + (tag ? 1 : 0) + (type ? 1 : 0),
+    };
+
+    if (tag && node.tagName && node.tagName.toLowerCase() === tag.toLowerCase())
+    {
+        matches.count++;
+    }
+
+    if (type && node.nodeType.toString() === type)
+    {
+        matches.count++;
+    }
+
+    Object.entries(attributes).forEach(([name]) =>
+    {
+        name = name.toLowerCase();
+
+        const find = node.__attributes && node.__attributes.some(attribute =>
+        {
+            return (attribute.lowerName === name) || attribute.lowerName === (':' + name) || attribute.lowerName.startsWith(name + '.') || attribute.lowerName.startsWith(':' + name + '.');
+        });
+
+        if(find)
+        {
+            matches.count++;
+        }
+    });
+
+    if(directive.Get('strict'))
+    {
+        return matches.count === matches.total && matches.total > 0;
+    }
+
+    return matches.count > 0;
+});

package/addons/render/directives/front/js/functions/process.js

@@ -0,0 +1,57 @@
+directives.Fn('process', function(trigger, item, compile, node, identifier)
+{
+    if (!node)
+    {
+        return;
+    }
+
+    if(!directives.StoreHas('sorted'))
+    {
+        directives.StoreSet('sorted', Object.values(directives.Items()).sort((a, b) => a.Get('order') - b.Get('order')));
+    }
+
+    if(node.attributes && !node.__attributes)
+    {
+        node.__attributes = Array.from(node.attributes).map(attr => ({
+            name: attr.name,
+            lowerName: attr.name.toLowerCase(),
+            value: attr.value,
+            original: attr
+        }));
+    }
+
+    const items = directives.StoreGet('sorted');
+
+    for (let i = 0; i < items.length; i++)
+    {
+        const directive = items[i];
+
+        if (directive.Get('trigger') !== trigger)
+        {
+            continue;
+        }
+
+        if (!directives.Fn('process.match', directive, node))
+        {
+            continue;
+        }
+
+        const data = directives.Fn('process.data', directive.Get('attributes'), node, compile);
+
+        try
+        {
+            const result = directive.Get('code').call({}, data, item, compile, node, identifier);
+
+            if (result === false)
+            {
+                break;
+            }
+        }
+        catch (error)
+        {
+            console.error('Directive processing error:', error);
+        }
+    }
+
+    directives.Fn('process.attributes', node, compile);
+});

package/addons/render/directives/front/js/items/100-if.js

@@ -0,0 +1,25 @@
+directives.ItemAdd({
+    id: 'ot-if',
+    icon: 'rule',
+    name: 'If',
+    description: 'Conditionally render elements based on expressions. Removes elements from DOM when condition is false.',
+    category: 'control-flow',
+    trigger: 'node',
+    order: 100,
+    strict: false,
+    attributes: {
+        'ot-if': ['string']
+    },
+    code: function(data, item, compile, node, identifier)
+    {
+        const expression = data['ot-if'].value;
+        const result = onetype.Function(expression, compile.data, false);
+
+        if (!result)
+        {
+            const placeholder = document.createComment('ot-if:' + identifier);
+            node.replaceWith(placeholder);
+            return false;
+        }
+    }
+});

package/addons/render/directives/front/js/items/1000-render.js

@@ -0,0 +1,36 @@
+directives.ItemAdd({
+	id: 'ot-render',
+	icon: 'code',
+	name: 'Render',
+	description: 'Render components or elements into the DOM. Use <render name="property"> to inject render instances from the parent context.',
+    category: 'content',
+	trigger: 'node',
+	order: 1000,
+	tag: 'render',
+	attributes: {
+		'name': ['string']
+	},
+	code: function(data, item, compile, node)
+	{
+		const name = data['name'].value;
+
+		if(!name)
+		{
+			console.error('Render directive requires a name attribute');
+			node.remove();
+			return false;
+		}
+
+		if(item[name] && item[name].Element)
+		{
+			node.replaceWith(item[name].Element);
+		}
+		else
+		{
+			console.warn(`Render property "${name}" not found or is not a render instance`);
+			node.remove();
+		}
+
+		return false;
+	}
+});

package/addons/render/directives/front/js/items/110-show.js

@@ -0,0 +1,25 @@
+directives.ItemAdd({
+    id: 'ot-show',
+    icon: 'visibility',
+    name: 'Show',
+    description: 'Toggle element visibility with CSS display property. Hides elements when condition is false without removing from DOM.',
+    category: 'control-flow',
+    trigger: 'node',
+    order: 110,
+    attributes: {
+        'ot-show': ['string']
+    },
+    code: function(data, item, compile, node, identifier)
+    {
+        const originalDisplay = node.style.display || '';
+
+        if (!onetype.Function(data['ot-show'].value, compile.data, false))
+        {
+            node.style.display = 'none';
+        }
+        else if (node.style.display === 'none')
+        {
+            node.style.display = originalDisplay;
+        }
+    }
+});

package/addons/render/directives/front/js/items/160-slot.js

@@ -0,0 +1,32 @@
+directives.ItemAdd({
+    id: 'ot-slot',
+    icon: 'input',
+    name: 'Slot',
+    description: 'Insert slot content. Supports DOM elements and render instances.',
+    category: 'content',
+    trigger: 'node',
+    order: 160,
+    tag: 'slot',
+    attributes: {
+        'name': ['string']
+    },
+    code: function(data, item, compile, node, id)
+    {
+        const name = data['name']?.value || 'default';
+        const slot = item.Slots[name];
+
+        if (slot && slot.Element)
+        {
+            node.replaceWith(slot.Element);
+        }
+        else if (slot && slot.html && slot.data)
+        {
+            const compiled = item.Compile(slot.html, slot.data);
+            node.replaceWith(compiled.element);
+        }
+        else
+        {
+            node.remove();
+        }
+    }
+});