Integrate a view framework

{
	"platforms": ["web", "node"],
	"widget": {
		"element": { "name": "hello-html", "attrs": ["label"] }
	},
	"conditionals": {
		"web": { "entry": "client.ts", "excludes": ["server.ts"] },
		"node": { "entry": "server.ts", "excludes": ["client.ts"] }
	}
}

import { label } from '@testbed/boundaries/shared';

/**
 * The markup of the widget, written the same way by the server and by the browser, so that the browser
 * can keep what the server rendered and only attach its behavior to it
 */
export const markup = (title: string, count: number): string =>
	`<div class="html"><h2 class="title">${title}</h2><p class="shared-label">${label('HTML count', count)}</p><button class="counter">Add</button></div>`;

import { WidgetClientController } from '@beyond-js/widgets/controller';
import { markup } from './markup';

/**
 * A widget without a view framework: the controller writes its markup into the holder of the element and
 * attaches its behavior with plain DOM APIs. It shows what a framework adapter does for a widget: mount the
 * view, adopt the stylesheets the styles manager collects, keep server markup on hydration, refresh after
 * an update of the module and release everything on unmount.
 */
export class Controller extends WidgetClientController {
	#count = 0;
	#listener: () => void;

	#mounted = false;
	get mounted() {
		return this.#mounted;
	}

	get #holder(): HTMLElement {
		return (<any>this.widget).holder;
	}

	get #title(): string {
		return this.attributes.get('label') ?? '';
	}

	/**
	 * A link for each stylesheet of the widget, inside its root, reported to the manager as it loads
	 */
	#stylesheets = () => {
		const root = this.#holder.parentNode as ShadowRoot;
		for (const href of this.styles.resources.keys()) {
			if (root.querySelector(`link[href="${href}"]`)) continue;
			const link = document.createElement('link');
			link.rel = 'stylesheet';
			link.href = href;
			link.onload = () => this.styles.onloaded(href);
			link.onerror = () => this.styles.onerror(href);
			root.insertBefore(link, this.#holder);
		}
	};

	mount() {
		if (this.#mounted) return;
		this.#mounted = true;

		const holder = this.#holder;
		this.#stylesheets();
		this.styles.on('change', this.#stylesheets);

		// Server markup is kept as it is; a fresh mount writes the markup itself
		holder.children.length || (holder.innerHTML = markup(this.#title, this.#count));
		holder.style.display = '';

		this.#listener = () => {
			this.#count++;
			holder.querySelector('.shared-label').textContent = markup(this.#title, this.#count).match(/<p class="shared-label">([^<]*)<\/p>/)[1];
		};
		holder.querySelector('button.counter').addEventListener('click', this.#listener);
	}

	unmount() {
		if (!this.#mounted) return;
		this.#mounted = false;

		this.styles.off('change', this.#stylesheets);
		this.#holder.querySelector('button.counter')?.removeEventListener('click', this.#listener);
		this.#holder.innerHTML = '';
	}
}

import { WidgetServerController } from '@beyond-js/widgets/controller';
import type { IWidgetRendered } from '@beyond-js/widgets/controller';
import { markup } from './markup';

/**
 * The server side of the widget: the same markup as a string, with a link for each stylesheet the
 * dependencies of the module register, which the browser hydrates
 */
export class Controller extends WidgetServerController {
	render(props: { attributes?: Map<string, string> }): IWidgetRendered {
		const title = props.attributes?.get('label') ?? '';
		const links = this.styles.map(href => `<link rel="stylesheet" href="${href}">`).join('');
		return { html: `${links}${markup(title, 0)}` };
	}
}

.title {
	color: rgb(124, 45, 18);
	margin: 0;
}