divhunt 2.0.0

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 Divhunt'
+    }
+});

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: 'Divhunt 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 = divhunt.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/front/css/page.css

@@ -0,0 +1,17 @@
+/* Base page styles */
+.dh-page
+{
+	display: grid;
+	position: fixed;
+	inset: 0;
+	width: 100vw;
+	height: 100vh;
+	overflow: hidden;
+}
+
+/* Page area containers */
+.dh-page-area
+{
+	position: relative;
+	overflow: auto;
+}

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

@@ -0,0 +1,29 @@
+const pages = divhunt.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]);
+});

package/addons/render/pages/front/js/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/js/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);
+	});
+};
+
+divhunt.EmitOn('document.load', match);
+divhunt.EmitOn('history.popstate', match);

package/addons/render/pages/front/js/functions/change.js

@@ -0,0 +1,119 @@
+pages.Fn('change', function(target, parameters = {}, options = {})
+{
+    this.resolve = null;
+    this.page = null;
+    this.id = null;
+    this.parameters = parameters;
+    this.options = options;
+
+    this.methods.init = async (resolve) =>
+    {
+        this.resolve = resolve;
+
+        if(this.options.path)
+        {
+            this.methods.match();
+        }
+        else
+        {
+            this.page = this.ItemGet(target);
+            this.id = target;
+        }
+
+        if(!this.page)
+        {
+            // Try to find a 404 page
+            const notFoundPage = Object.values(this.Items()).find(p => p.Get('404'));
+
+            if(notFoundPage)
+            {
+                this.page = notFoundPage;
+                this.id = notFoundPage.Get('id');
+            }
+            else
+            {
+                return this.methods.done(null, `Page "${target}" not found.`, 404);
+            }
+        }
+
+        const route = this.page.Get('route');
+        const url = this.methods.url(this.methods.route(route, this.parameters), this.parameters);
+
+        if(this.options.push !== false)
+        {
+            history.pushState(null, '', url);
+        }
+
+        const result = this.Fn('open', this.id, this.parameters);
+
+        if(result === false)
+        {
+            return this.methods.done(null, 'Navigation prevented.', 403);
+        }
+
+        return this.methods.done({ id: this.id, parameters: this.parameters, url }, 'Page changed.', 200);
+    };
+
+    this.methods.match = () =>
+    {
+        const result = this.Fn('match', target);
+
+        if(result)
+        {
+            this.page = result.page;
+            this.id = result.page.Get('id');
+            this.parameters = { ...result.parameters, ...this.parameters };
+        }
+    };
+
+    this.methods.route = (route, parameters) =>
+    {
+        if(!Array.isArray(route))
+        {
+            return route;
+        }
+
+        const keys = Object.keys(parameters);
+
+        for(let i = route.length - 1; i >= 0; i--)
+        {
+            const params = (route[i].match(/:(\w+)/g) || []).map(p => p.slice(1));
+
+            if(params.length && params.every(p => keys.includes(p)))
+            {
+                return route[i];
+            }
+        }
+
+        return route[0];
+    };
+
+    this.methods.url = (route, parameters) =>
+    {
+        let url = route;
+
+        for(const key in parameters)
+        {
+            url = url.replace(`:${key}`, parameters[key]);
+        }
+
+        return url;
+    };
+
+    this.methods.done = (data, message, code) =>
+    {
+        this.resolve({ data, message, code });
+    };
+
+    return new Promise((resolve) =>
+    {
+        try
+        {
+            this.methods.init(resolve);
+        }
+        catch(error)
+        {
+            resolve({ data: null, message: error.message, code: 500 });
+        }
+    });
+});

package/addons/render/pages/front/js/functions/match.js

@@ -0,0 +1,34 @@
+pages.Fn('match', function(path)
+{
+	const items = Object.values(pages.Items());
+
+	for(const item of items)
+	{
+		// Skip 404 pages during normal matching
+		if(item.Get('404'))
+		{
+			continue;
+		}
+
+		const route = item.Get('route');
+
+		if(!route)
+		{
+			continue;
+		}
+
+		const routes = Array.isArray(route) ? route : [route];
+
+		for(const r of routes)
+		{
+			const result = divhunt.RouteMatch(r, path || divhunt.RouteCurrent());
+
+			if(result.match)
+			{
+				return { page: item, parameters: result.params };
+			}
+		}
+	}
+
+	return null;
+});

package/addons/render/pages/front/js/functions/open.js

@@ -0,0 +1,19 @@
+pages.Fn('open', async function(id, parameters = {})
+{
+	const page = pages.ItemGet(id);
+
+	if(!page)
+	{
+		console.warn(`Page with id "${id}" not found`);
+		return false;
+	}
+
+	const active = pages.StoreGet('active');
+
+	if(active && active.Fn('leave') === false)
+	{
+		return false;
+	}
+
+	return await page.Fn('enter', parameters);
+});

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

@@ -0,0 +1,24 @@
+pages.ItemOn('add', (item) =>
+{
+	const map = item.Get('areas');
+
+	if(map)
+	{
+		Object.keys(map).forEach(name =>
+		{
+			const id = map[name];
+
+			if(typeof id === 'function')
+			{
+				pages.RenderAdd(item.Get('id') + ':' + name, function(parameters)
+				{
+					this.Define({
+						parameters: ['object', {}]
+					});
+
+					return id.call(this, parameters);
+				});
+			}
+		});
+	}
+});

package/addons/render/pages/front/js/item/catch/remove.js

@@ -0,0 +1,17 @@
+pages.ItemOn('removed', (item) =>
+{
+	const map = item.Get('layouts');
+
+	if(map)
+	{
+		Object.keys(map).forEach(name =>
+		{
+			const id = map[name];
+
+			if(typeof id === 'function')
+			{
+				pages.RenderRemove(item.Get('id') + ':' + name);
+			}
+		});
+	}
+});

package/addons/render/pages/front/js/item/functions/enter.js

@@ -0,0 +1,45 @@
+pages.Fn('item.enter', async function(item, parameters = {})
+{
+	const onEnter = item.Get('onEnter');
+	const onBeforeEnter = item.Get('onBeforeEnter');
+
+	const data = {};
+
+	if(item.Get('data'))
+	{
+		Object.assign(data, await item.Get('data').call(item, parameters));
+	}
+
+	if(onBeforeEnter && onBeforeEnter.call(item, parameters, data) === false)
+	{
+		return false;
+	}
+
+	pages.StoreSet('active', item);
+
+	const title = item.Get('title');
+
+	if(title)
+	{
+		if(typeof title === 'function')
+		{
+			document.title = title.call(item, parameters, data);
+		}
+		else
+		{
+			document.title = title;
+		}
+	}
+
+	const element = item.Fn('render', parameters, data);
+	item.Set('element', element);
+
+	document.body.appendChild(element);
+
+	if(onEnter)
+	{
+		onEnter.call(item, parameters, data);
+	}
+
+	return true;
+});

package/addons/render/pages/front/js/item/functions/leave.js

@@ -0,0 +1,27 @@
+pages.Fn('item.leave', function(item)
+{
+	const onLeave = item.Get('onLeave');
+	const onBeforeLeave = item.Get('onBeforeLeave');
+
+	if(onBeforeLeave && onBeforeLeave.call(item) === false)
+	{
+		return false;
+	}
+
+	pages.StoreSet('active', null);
+
+	if(onLeave)
+	{
+		onLeave.call(item);
+	}
+
+	const element = item.Get('element');
+
+	if(element)
+	{
+		element.remove();
+		item.Set('element', null);
+	}
+
+	return true;
+});

package/addons/render/pages/front/js/item/functions/render.js

@@ -0,0 +1,33 @@
+pages.Fn('item.render', function(item, parameters = {}, data = null)
+{
+	const grid = item.Get('grid');
+	const element = document.createElement('div');
+
+	element.classList.add('dh-page');
+	element.setAttribute('data-page', item.Get('id'));
+	element.style.cssText = [
+		`grid-template-areas: ${grid.template}`,
+		`grid-template-columns: ${grid.columns}`,
+		`grid-template-rows: ${grid.rows}`,
+		`gap: ${grid.gap}`
+	].join('; ');
+
+	const template = grid.template;
+	const areas = [...new Set(template.match(/[\w-]+/g) || [])];
+
+	areas.forEach(name =>
+	{
+		const container = document.createElement('div');
+
+		container.classList.add('dh-page-area');
+		container.setAttribute('data-area', name);
+		container.style.gridArea = name;
+
+		const render = pages.Render(item.Get('id') + ':' + name, {parameters, data});
+
+		container.appendChild(render.Element);
+		element.appendChild(container);
+	});
+
+	return element;
+});