cyan bridge
I want to get a better understanding of how solid exactly works under the hood, so I've been doing some small tests.
I have a pretty basic button increment component (same one everyone has seen 100+ times):
import { render } from 'solid-js/web'
import { createSignal } from 'solid-js'
function Counter() {
const [count, setCount] = createSignal(0)
return (
<button type='button' onClick={() => {setCount(count() + 1)})}>
{count()}
</button>
)
}
render(() => <Counter />, document.getElementById('app')!)
and I compiled it with esbuild. Output is as you'd expect (un-minified):
import { template as _$template } from "solid-js/web";
import { delegateEvents as _$delegateEvents } from "solid-js/web";
import { createComponent as _$createComponent } from "solid-js/web";
import { insert as _$insert } from "solid-js/web";
const _tmpl$ = /*#__PURE__*/_$template(`<button type="button"></button>`, 2);
import { render } from "solid-js/web";
import { createSignal } from "solid-js";
function Counter() {
const [count, setCount] = createSignal(1);
const increment = () => setCount(count() + 1);
return (() => {
const _el$ = _tmpl$.cloneNode(true);
_el$.$$click = increment;
_$insert(_el$, count);
return _el$;
})();
}
render(() => _$createComponent(Counter, {}), document.getElementById("app"));
_$delegateEvents(["click"]);
What exactly does solid do with this stuff? I'd assume it just stuffs it into a *.js file and includes it in a script tag in the html prior to serving it (obviously after bundling), but I feel like this is wrong. Could someone shed some light on what actually happens?
dreamy wave
