Discover gists

Roadmap Ideas

Virtual DOM Functions

Right now, we have vdom.element() and vdom.text(). Currently they map directly off to Incremental DOM. However, we could create adaptors that could map to any backend. For example, we could serialise data to JSON that could be consumed by a web worker that returns diff / patch instructions for a different virtual DOM implementation.

In the same way we could keep support for Incremental DOM directly via a separate adaptor. This would allow us to create a server-renderer all without changing anything in our components' render() functions. Consumers could leverage whatever vDOM implementation they want via separate modules that they just plug in to their components, or we could just create base-classes / composable functions they call on their definitions to apply support for whatever the plugin is.

Our functions could also attain the same API as Hyperscript / React so it'd inherently be compatible with current JSX transpilers.

To render a component:

electron server.js --html "<x-app></x-app>" --scripts ./entry-point

Where --html is the HTML that you want to render and --scripts is the entry point that will be loaded prior to rendering the HTML. The entry point should contain all your component definitions that you need for the HTML to be rendered.

	const done = () => {}
	const indent = (depth, info) => [...Array(depth)].reduce(p => `${p} `, '') + info;
	const reporter = {
	fail: ({ depth, message, name }) => {
	console.info(indent(depth, `✗ ${name}`));
	console.error(indent(depth + 1, message));
	},
	pass: ({ depth, name }) => console.info(indent(depth, `✓ ${name}`)),
	suite: ({ depth, name }) => console.info(indent(depth, name)),
	test: () => {}

	document.reduce = Element.prototype.reduce = function(cb) {
	const filter = node => cb(node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;

	// Old IE requires a function other browsers require { acceptNode }.
	filter.acceptNode = filter;

	// Old IE requires the last parameter.
	const walker = document.createTreeWalker(this, NodeFilter.SHOW_ELEMENT, null, false);

	const nodels = [];

	const $slotRendered = Symbol();
	const Slot = (props, chren) => {
	const { changed } = props;

	function onSlotchange(e) {
	const slot = e.target;
	if (slot[$slotRendered]) {
	if (changed) {
	changed(slot);
	}

	const jss = window.jss.default;
	const native = fn => (fn \|\| '').toString().indexOf('[native code]') > -1;
	const div = document.createElement('div');
	const supportsShadowDOM = native(ShadowRoot);
	const supportsShadowDOMV0 = div.createShadowRoot && native(HTMLContentElement);
	const supportsShadowDOMV1 = div.attachShadow && native(HTMLSlotElement);

	// Polyfill :host
	// --------------

	# RydMike LINTER Preferences v2.2.0
	#
	# Get this file here: https://gist.github.com/rydmike/fdb53ddd933c37d20e6f3188a936cd4c
	#
	# We include and activate all lint rules, later below we disable the not used or desired ones.
	# You can find a list of all lint rules to put in your all_lint_rules.yaml file here:
	# https://dart.dev/tools/linter-rules/all
	#
	# For a comparison of all lint rules settings in rule styles listed below, please see this Google
	# sheet: https://docs.google.com/spreadsheets/d/1Nc1gFjmCOMubWZD7f2E4fLhWN7LYaOE__tsA7bf2NjA

Discover gists

Roadmap Ideas

Virtual DOM Functions

Nest.js Cheatsheet

Nest CLI

Packages

	function shouldBeProp (item) {
	return typeof item === 'function' \|\| typeof item === 'object';
	}

	window.React = {
	createElement (name, attrs, ...chren) {
	const node = typeof name === 'function' ? name() : document.createElement(name);
	Object.keys(attrs \|\| []).forEach(attr => shouldBeProp(attrs[attr]) ? node[attr] = attrs[attr] : node.setAttribute(attr, attrs[attr]));
	chren.forEach(child => node.appendChild(child instanceof Node ? child : document.createTextNode(child)));
	return node;