@onetype/framework 2.0.20

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

@@ -0,0 +1,12 @@
+const elements = onetype.Addon('elements', (addon) =>
+{
+    addon.Field('id', ['string']);
+    addon.Field('icon', ['string', 'extension']);
+    addon.Field('name', ['string', '']);
+    addon.Field('description', ['string', '']);
+    addon.Field('category', ['string', '']);
+    addon.Field('collection', ['string', '']);
+    addon.Field('config', ['object', {}]);
+    addon.Field('example', ['array', []]);
+    addon.Field('render', ['function']);
+});

package/addons/render/elements/front/item/catch/add.js

@@ -0,0 +1,9 @@
+elements.ItemOn('add', (item) =>
+{
+    elements.RenderAdd(item.Get('id'), function()
+    {
+        this.Define(item.Get('config'));
+
+        return item.Get('render').call(this);
+    });
+})

package/addons/render/elements/front/items/directives/element.js

@@ -0,0 +1,76 @@
+onetype.AddonReady('directives', (directives) =>
+{
+	directives.ItemAdd({
+		id: 'jt-element',
+		icon: 'auto_awesome',
+		name: 'Element Load',
+		description: 'Load and render elements using custom tag syntax. Automatically detects <e-{name}> tags and renders corresponding elements.',
+		trigger: 'node',
+		order: 1100,
+		strict: false,
+		type: '1',
+		code: function(data, item, compile, node, identifier)
+		{
+			if (!node.tagName || !node.tagName.toLowerCase().startsWith('e-') || node.tagName.toLowerCase() === 'e-bind')
+			{
+				return;
+			}
+
+			const tagName = node.tagName.toLowerCase();
+			const elementName = tagName.substring(2);
+
+			const attributes = {
+				wrapper: {},
+				data: {}
+			};
+
+			for (let i = 0; i < node.attributes.length; i++)
+			{
+				const attr = node.attributes[i];
+
+				if (attr.name.startsWith('#'))
+				{
+					attributes.wrapper[attr.name.substring(1)] = attr.value;
+				}
+				else if(attr.name.startsWith(':'))
+				{
+					attributes.data[attr.name.substring(1)] = onetype.Function(attr.value, compile.data, false);
+				}
+				else
+				{
+					attributes.data[attr.name] = attr.value;
+				}
+			}
+
+			const slots = {};
+
+			if(node.hasChildNodes())
+			{
+				Array.from(node.childNodes).forEach(child =>
+				{
+					if(child.nodeType === Node.ELEMENT_NODE)
+					{
+						const slot = child.getAttribute('slot');
+
+						if(slot)
+						{
+							child.removeAttribute('slot');
+							slots[slot] = { html: child.outerHTML, data: compile.data };
+						}
+					}
+				});
+			}
+
+			const render = onetype.Addon('elements').Render(elementName, attributes.data, attributes.wrapper, slots);
+
+			if(render)
+			{
+				node.replaceWith(render.Element);
+			}
+			else
+			{
+				node.innerText = 'Element ' + elementName + ' does not exist.';
+			}
+		}
+	});
+});

package/addons/render/html/addon.js

@@ -0,0 +1,13 @@
+import onetype from '#framework/load.js';
+
+const html = onetype.Addon('html', (addon) =>
+{
+    addon.Field('id', ['string']);
+    addon.Field('tag', ['string', 'div']);
+    addon.Field('position', ['string', 'head']);
+    addon.Field('parent', ['string']);
+    addon.Field('content', ['string']);
+    addon.Field('attributes', ['object', {}]);
+});
+
+export default html;

package/addons/render/html/functions/render.js

@@ -0,0 +1,85 @@
+import html from '#html/addon.js';
+
+html.Fn('render', function(context = {})
+{
+    this.methods.init = () =>
+    {
+        const sections = { head: [], body: [] };
+        const sortedItems = this.methods.getSortedItems();
+
+        sortedItems.forEach(item => this.methods.processItem(item, sections));
+
+        if (typeof context.head === 'function') sections.head.push(context.head());
+        if (typeof context.body === 'function') sections.body.push(context.body());
+
+        return this.methods.buildHTML(sections);
+    };
+
+    this.methods.getSortedItems = () =>
+    {
+        return Object.values(this.Items()).sort((a, b) =>
+            (a.Get('priority') || 0) - (b.Get('priority') || 0)
+        );
+    };
+
+    this.methods.processItem = (item, sections) =>
+    {
+        const position = item.Get('position').toLowerCase();
+        const content = item.Fn('render');
+
+        if (content && sections[position])
+        {
+            sections[position].push(content);
+        }
+    };
+
+    this.methods.resolveAttributeValue = (item, attrName, value, visited = new Set()) =>
+    {
+        if (value !== 'inherit')
+        {
+            return value;
+        }
+
+        if (visited.has(item.Get('id')))
+        {
+            return undefined;
+        }
+
+        visited.add(item.Get('id'));
+
+        const parentId = item.Get('parent');
+
+        if (!parentId)
+        {
+            return undefined;
+        }
+
+        const parentItem = this.ItemGet(parentId);
+
+        if (!parentItem)
+        {
+            return undefined;
+        }
+
+        const parentAttrs = parentItem.Get('attributes');
+        const parentValue = parentAttrs[attrName];
+
+        return this.methods.resolveAttributeValue(parentItem, attrName, parentValue, visited);
+    };
+
+    this.methods.buildHTML = (sections) =>
+    {
+        return `<!DOCTYPE html>
+<html lang="en">
+    <head>
+        ${sections.head.join('')}
+    </head>
+
+    <body>
+        ${sections.body.join('')}
+    </body>
+</html>`;
+    };
+
+    return this.methods.init();
+});

package/addons/render/html/item/functions/render.js

@@ -0,0 +1,66 @@
+import html from '#html/addon.js';
+import tags from '#tags/load.js';
+
+html.Fn('item.render', function(item)
+{
+    this.methods.init = () =>
+    {
+        const tag = tags.ItemGet(item.Get('tag'));
+
+        if (!tag)
+        {
+            return '';
+        }
+
+        return this.methods.element(item, tag);
+    };
+
+    this.methods.element = (item, tag) =>
+    {
+        const parts = [];
+
+        parts.push('<');
+        parts.push(tag.Get('id'));
+        parts.push(this.methods.attributes(item));
+        parts.push('>');
+
+        if (tag.Get('closeable'))
+        {
+            const content = item.Get('content');
+
+            if (content)
+            {
+                parts.push(content);
+            }
+            
+            parts.push('</');
+            parts.push(tag.Get('id'));
+            parts.push('>');
+        }
+
+        return parts.join('');
+    };
+
+    this.methods.attributes = (item) =>
+    {
+        const attrs = item.Get('attributes');
+        const parts = [];
+
+        Object.entries(attrs).forEach(([key, value]) =>
+        {
+            parts.push(' ');
+            parts.push(this.onetype.StringSanitize(key));
+            
+            if (value !== null && value !== undefined && value !== '')
+            {
+                parts.push('="');
+                parts.push(this.onetype.StringSanitize(value));
+                parts.push('"');
+            }
+        });
+
+        return parts.join('');
+    };
+
+    return this.methods.init();
+});

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

@@ -0,0 +1,12 @@
+import html from '#html/addon.js';
+
+html.Item({
+    id: 'asset-favicon',
+    tag: 'link',
+    position: 'head',
+    priority: -60,
+    attributes: {
+        rel: 'icon',
+        href: '/favicon.png'
+    }
+});

package/addons/render/html/items/fonts/outfit.js

@@ -0,0 +1,12 @@
+import html from '#html/addon.js';
+
+html.Item({
+    id: 'font-outfit',
+    tag: 'link',
+    position: 'head',
+    priority: -40,
+    attributes: {
+        href: 'https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200..800&display=swap',
+        rel: 'stylesheet'
+    }
+});

package/addons/render/html/items/fonts/preconnect.js

@@ -0,0 +1,24 @@
+import html from '#html/addon.js';
+
+html.Item({
+    id: 'font-preconnect-api',
+    tag: 'link',
+    position: 'head',
+    priority: -50,
+    attributes: {
+        rel: 'preconnect',
+        href: 'https://fonts.googleapis.com'
+    }
+});
+
+html.Item({
+    id: 'font-preconnect-static',
+    tag: 'link',
+    position: 'head',
+    priority: -49,
+    attributes: {
+        rel: 'preconnect',
+        href: 'https://fonts.gstatic.com',
+        crossorigin: null
+    }
+});

package/addons/render/html/items/meta/charset.js

@@ -0,0 +1,11 @@
+import html from '#html/addon.js';
+
+html.Item({
+    id: 'meta-charset',
+    tag: 'meta',
+    position: 'head',
+    priority: -100,
+    attributes: {
+        charset: 'UTF-8'
+    }
+});

package/addons/render/html/items/meta/description.js

@@ -0,0 +1,12 @@
+import html from '#html/addon.js';
+
+html.Item({
+    id: 'meta-description',
+    tag: 'meta',
+    position: 'head',
+    priority: -70,
+    attributes: {
+        name: 'description',
+        content: 'Modern web application built with OneType'
+    }
+});

package/addons/render/html/items/meta/title.js

@@ -0,0 +1,9 @@
+import html from '#html/addon.js';
+
+html.Item({
+    id: 'meta-title',
+    tag: 'title',
+    content: 'OneType App',
+    position: 'head',
+    priority: -80
+});

package/addons/render/html/items/meta/viewport.js

@@ -0,0 +1,12 @@
+import html from '#html/addon.js';
+
+html.Item({
+    id: 'meta-viewport',
+    tag: 'meta',
+    position: 'head',
+    priority: -90,
+    attributes: {
+        name: 'viewport',
+        content: 'width=device-width, initial-scale=1.0'
+    }
+});

package/addons/render/html/items/seo/robots.js

@@ -0,0 +1,12 @@
+import html from '#html/addon.js';
+
+html.Item({
+    id: 'seo-robots',
+    tag: 'meta',
+    position: 'head',
+    priority: -30,
+    attributes: {
+        name: 'robots',
+        content: 'index, follow'
+    }
+});

package/addons/render/html/items/seo/theme-color.js

@@ -0,0 +1,12 @@
+import html from '#html/addon.js';
+
+html.Item({
+    id: 'seo-theme-color',
+    tag: 'meta',
+    position: 'head',
+    priority: -20,
+    attributes: {
+        name: 'theme-color',
+        content: '#000000'
+    }
+});

package/addons/render/html/load.js

@@ -0,0 +1,26 @@
+import html from '#html/addon.js';
+
+/* Functions */
+import '#html/functions/render.js';
+
+/* Item Functions */
+import '#html/item/functions/render.js';
+
+/* Essential Items - Meta */
+import '#html/items/meta/charset.js';
+import '#html/items/meta/viewport.js';
+// import '#html/items/meta/title.js';
+// import '#html/items/meta/description.js';
+
+/* Essential Items - Assets */
+import '#html/items/assets/favicon.js';
+
+/* Essential Items - Fonts */
+import '#html/items/fonts/preconnect.js';
+import '#html/items/fonts/outfit.js';
+
+/* Essential Items - SEO */
+import '#html/items/seo/robots.js';
+import '#html/items/seo/theme-color.js';
+
+export default html;

package/addons/render/items/js/#register/addon.js

@@ -0,0 +1,14 @@
+const items = onetype.Addon('items', (addon) =>
+{
+    addon.Field('id', ['string|number']);
+
+    addon.Field('group', ['string']);
+    addon.Field('order', ['number', 0]);
+
+    addon.Field('before', ['string|number']);
+    addon.Field('after', ['string|number']);
+
+    addon.Field('data', ['object', {}]);
+    addon.Field('render', ['function']);
+    addon.Field('condition', ['function']);
+});

package/addons/render/items/js/functions/count.js

@@ -0,0 +1,9 @@
+items.Fn('count', function(group = null)
+{
+	if(!group)
+	{
+		return Object.keys(this.Items()).length;
+	}
+
+	return Object.values(this.Items()).filter(item => item.Get('group') === group).length;
+});

package/addons/render/items/js/functions/get.js

@@ -0,0 +1,34 @@
+items.Fn('get', function(group, options = {})
+{
+	const {
+		order = true,
+		data = true,
+		condition = true
+	} = options;
+
+	let result = Object.values(this.Items()).filter(item => item.Get('group') === group);
+
+	// Apply condition filter if enabled
+	if(condition)
+	{
+		result = result.filter(item =>
+		{
+			const cond = item.Get('condition');
+			return !cond || cond(item);
+		});
+	}
+
+	// Sort by order if enabled
+	if(order)
+	{
+		result = result.sort((a, b) => a.Get('order') - b.Get('order'));
+	}
+
+	// Return only data if enabled, otherwise return items
+	if(data)
+	{
+		result = result.map(item => item.Get('data'));
+	}
+
+	return result;
+});

package/addons/render/items/js/functions/groups.js

@@ -0,0 +1,16 @@
+items.Fn('groups', function()
+{
+	const groups = new Set();
+
+	Object.values(this.Items()).forEach(item =>
+	{
+		const group = item.Get('group');
+		
+		if(group)
+		{
+			groups.add(group);
+		}
+	});
+
+	return Array.from(groups).sort();
+});

package/addons/render/items/js/functions/render.js

@@ -0,0 +1,44 @@
+items.Fn('renderGroup', function(group, options = {})
+{
+	const {
+		order = true,
+		condition = true,
+		wrapper = null
+	} = options;
+
+	let result = Object.values(this.Items())
+		.filter(item => item.Get('group') === group && item.Get('render'));
+
+	// Apply condition filter if enabled
+	if(condition)
+	{
+		result = result.filter(item =>
+		{
+			const cond = item.Get('condition');
+			return !cond || cond(item);
+		});
+	}
+
+	// Sort by order if enabled
+	if(order)
+	{
+		result = result.sort((a, b) => a.Get('order') - b.Get('order'));
+	}
+
+	// Render all items
+	const rendered = result.map(item =>
+	{
+		const render = this.Render(item.Get('id'));
+		return render ? render.Element : null;
+	}).filter(el => el !== null);
+
+	// Wrap in container if specified
+	if(wrapper)
+	{
+		const container = document.createElement(wrapper);
+		rendered.forEach(el => container.appendChild(el));
+		return container;
+	}
+
+	return rendered;
+});

package/addons/render/items/js/item/catch/add.js

@@ -0,0 +1,18 @@
+items.ItemOn('add', (item) =>
+{
+	if(item.Get('render'))
+	{
+		items.RenderAdd(item.Get('id'), function()
+		{
+			const data = item.Get('data');
+
+			// Merge data into render context
+			for(const key in data)
+			{
+				this.Data[key] = data[key];
+			}
+
+			return item.Get('render').call(this);
+		});
+	}
+});

package/addons/render/pages/core/addon.js

@@ -0,0 +1,33 @@
+import onetype from '#framework/load.js';
+
+const pages = onetype.Addon('pages', (addon) =>
+{
+	addon.Field('id', ['string']);
+	addon.Field('route', ['string|array']);
+	addon.Field('title', ['string|function']);
+	addon.Field('meta', ['object', {}]);
+	addon.Field('data', ['function']);
+
+	addon.Field('grid', {
+		type: 'object',
+		value: {},
+		config: {
+			template: ['string', '"main"'],
+			columns: ['string', '1fr'],
+			rows: ['string', '1fr'],
+			gap: ['string', '0']
+		}
+	});
+
+	addon.Field('areas', ['object', {}]);
+
+	addon.Field('onBeforeLeave', ['function']);
+	addon.Field('onLeave', ['function']);
+	addon.Field('onBeforeEnter', ['function']);
+	addon.Field('onEnter', ['function']);
+
+	addon.Field('element', ['object']);
+	addon.Field('404', ['boolean', false]);
+});
+
+export default pages;

package/addons/render/pages/core/load.js

@@ -0,0 +1,9 @@
+import onetype from '#framework/load.js';
+import pages from './addon.js';
+
+onetype.$ot.page = function(route, parameters = {})
+{
+	return pages.Fn('change', route, parameters, { path: true });
+};
+
+export default pages;

package/addons/render/pages/front/events/click.js

@@ -0,0 +1,27 @@
+document.addEventListener('click', (e) =>
+{
+	const a = e.target.closest('a');
+
+	if(!a || !a.href)
+	{
+		return;
+	}
+
+	const url = new URL(a.href);
+
+	if(url.origin !== window.location.origin)
+	{
+		return;
+	}
+
+	const match = pages.Fn('match', url.pathname);
+
+	if(!match)
+	{
+		return;
+	}
+
+	e.preventDefault();
+
+	pages.Fn('change', match.page.Get('id'), match.parameters);
+});

package/addons/render/pages/front/events/load.js

@@ -0,0 +1,25 @@
+const match = () =>
+{
+	setTimeout(() =>
+	{
+		const result = pages.Fn('match');
+
+		if(!result)
+		{
+			// Try to find a 404 page
+			const notFoundPage = Object.values(pages.Items()).find(p => p.Get('404'));
+
+			if(notFoundPage)
+			{
+				pages.Fn('open', notFoundPage.Get('id'), {});
+			}
+
+			return;
+		}
+
+		pages.Fn('open', result.page.Get('id'), result.parameters);
+	});
+};
+
+onetype.EmitOn('document.load', match);
+onetype.EmitOn('history.popstate', match);