The use of UI frameworks has been discussed in #4058 and #5779 (comment). This has been on my mind for quite some time and just now I did some brief investigation.

Start from https://www.solidjs.com/guides/getting-started#buildless-options, get these modules first:

npm i solid-js
npm i hyper-dom-expressions -D # For types

Then create a helper function:

import {render} from 'solid-js/web';
import type {JSX} from 'solid-js';

export default function solidFragment(code: () => JSX.Element): DocumentFragment {
	const fragment = document.createDocumentFragment();
	render(code, fragment);
	return fragment;
}

Now we can author our features in Solid:

/* @jsx h */
/* @jsxImportSource solid-js */
/* eslint "react/no-unknown-property": ['error', {ignore: ['class']}] */

// @ts-expect-error Required
import h from 'solid-js/h';
import {createSignal} from 'solid-js'
import {solidFragment} from './solid-fragment'
import select from 'select-dom'

function init() {
	const [count, setCount] = createSignal(0)
	select('.some-class').append(
		solidFragment(() => (
			<button onClick={() => setCount(count() + 1)}>{() => count()}</button>
		)
	))
}

Pros:

• We can use Solid on a per-file/feature basis, no need to change any build config
• Still use JSX and types are kinda fine
• Performance is non-issue
• Interoperable since Solid renders to native elements
• Ergonomic is the final goal

Cons:

• More ceremony just to attach elements
• Buildless trade-offs as mentioned in Solid docs
• Haven't figured out how to use @primer/octicons-react yet
• Slightly increased bundle size (~7 KB)

I'm sharing my thoughts here in case we do find a UI framework helpful.