another_javascript_framework/src/a_js_f.js

html&javascript in one place

//https://cdn.jsdelivr.net/npm/another_javascript_framework/dist/a_js_f.es5.min.js

const a_js_f = {
	$(context) {
		let app = document.getElementById(context.element)
		app.innerHTML = context.template
		if (context.mounted) context.mounted()
	},
	_(element, context) {
		const errors = [
			'\\(-_-)/ wow such error: ',
			'MUST BE a function (that returns numbers or strings), numbers or strings',
			'Don\'t use both render and $render'
		]
		var finishedElement
		if (!context) {
			finishedElement = `<${element} />`
		} else {
			if (context === Object(context)) {
				var finalAttrs = ''
				for (const key of Object.keys(context)) {
					if (key === 'render' || key === '$render') {
						if (context.render && context.$render) {
							console.error(errors[0] + errors[2])
						} else {
							if (typeof key === 'string' || typeof key === 'number') {
								finishedElement = `<${element} ${finalAttrs}>${context[key]}</${element}>`
							} else if (typeof key === 'function') {
								finishedElement = `<${element} ${finalAttrs}>${context[key]()}</${element}>`
							} else {
								console.error(errors[0] + 'Render ' + errors[1])
							}
						}
					} else {
						if (typeof context[key] === 'number' || typeof context[key] === 'string') {
							finalAttrs = finalAttrs + key + '="' + context[key] + '" '
						} else if (typeof context[key] === 'function') {
							finalAttrs = finalAttrs + key + '="' + context[key]() + '" '
						} else {
							console.error(errors[0] + 'Atributtes ' + errors[1])
						}
						if (!context.render && !context.$render) {
							finishedElement = `<${element} ${finalAttrs}></${element}>`
						}
					}

				}
			} else {
				finishedElement = `<${element}>${context}</${element}>`
			}
		}
		return finishedElement
	}
}

//shorthands
const createElement = a_js_f._,
	render = a_js_f.$