joelalejandro/xhtmlscript.xhtml

## xhtmlscript.xhtml
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
     xmlns:var="http://foo/var"
     xmlns:op="http://foo/op"
     xmlns:window="http://foo/window">

     <body>
          <var:let name="x" type="Number" value="1" />
          <var:let name="y" type="Number" value="2" />
          <op:increment var="y" amount="$x" />
          <window:alert text="Mirá vo', x vale $x e y vale $y" />
     </body>

     <script>
          const variables = {};

          const utils = {
               interpolate: (originalValue) => {
                    const interpolate = /\$(\w+)/g
                    let value = originalValue;

                    while (match = interpolate.exec(value)) {
                         const [interpolation, variableName] = match;
                         value = value.replace(interpolation, variables[variableName][0]);
                    }

                    return value;
               }
          }

          const processors = {
               "var": {
                    "let": (node) => {
                         variables[node.attributes.name.value] = [window[node.attributes.type.value](utils.interpolate(node.attributes.value.value)), "let"];
                    },
               },
               "op": {
                    "increment": (node) => {
                         variables[node.attributes.var.value][0] += Number(utils.interpolate(node.attributes.amount.value));
                    }
               },
               "window": {
                    "alert": (node) => {
                         window.alert(utils.interpolate(node.attributes.text.value));
                    }
               }
          };

          window.requestAnimationFrame(() => {
               [...document.body.childNodes].filter(node => node.nodeType !== node.TEXT_NODE).forEach(node => {
                    if (!node.nodeName.includes(":")) { return; }

                    const [namespace, element] = node.nodeName.split(":");
                    processors[namespace][element](node);
               });
          });
     </script>

</html>
	<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:var="http://foo/var"
	xmlns:op="http://foo/op"
	xmlns:window="http://foo/window">

	<body>
	<var:let name="x" type="Number" value="1" />
	<var:let name="y" type="Number" value="2" />
	<op:increment var="y" amount="$x" />
	<window:alert text="Mirá vo', x vale $x e y vale $y" />
	</body>

	<script>
	const variables = {};

	const utils = {
	interpolate: (originalValue) => {
	const interpolate = /\$(\w+)/g
	let value = originalValue;

	while (match = interpolate.exec(value)) {
	const [interpolation, variableName] = match;
	value = value.replace(interpolation, variables[variableName][0]);
	}

	return value;
	}
	}

	const processors = {
	"var": {
	"let": (node) => {
	variables[node.attributes.name.value] = [window[node.attributes.type.value](utils.interpolate(node.attributes.value.value)), "let"];
	},
	},
	"op": {
	"increment": (node) => {
	variables[node.attributes.var.value][0] += Number(utils.interpolate(node.attributes.amount.value));
	}
	},
	"window": {
	"alert": (node) => {
	window.alert(utils.interpolate(node.attributes.text.value));
	}
	}
	};

	window.requestAnimationFrame(() => {
	[...document.body.childNodes].filter(node => node.nodeType !== node.TEXT_NODE).forEach(node => {
	if (!node.nodeName.includes(":")) { return; }

	const [namespace, element] = node.nodeName.split(":");
	processors[namespace][element](node);
	});
	});
	</script>

	</html>