Frameworkless

001-Frameworkless.ts

console.clear();

type model = {
	input: {
		type: 'text',
		class: 'someclass'
	},
	output: ''
}

let start = (): model => {
	return {
		input: {
			type: 'text',
			class: 'someclass'
		},
		output: ''
	}
}

let inputted = (state: model, value: string): model => {
	let clone = Object.assign({}, state);
	clone.output = value;
	return clone;
}

let view = (state: model) => {
	return '<input type="text" value="' + state.output + '" onkeyup="submitEvent(event, \'updateInput\')" /> ' + state.output
}

let resetCursor = (el, val) => {
	el.value = '';
	el.value = val;
	el.focus();
}

window.submitEvent = (e, action) => {
	if (action === 'updateInput' && !e.ctrlKey && e.key !== "Control") {
		app.innerHTML = view(inputted(state, e.target.value));
		let input = app.querySelector('input')
		resetCursor(input, e.target.value)
	}
}

let app = document.querySelector('#app');

let state = start();

app.innerHTML = view(state)