web component tools · assembly order

Getting started.

Three tools, three separate installs. The one thing that is genuinely sequential is step 1: decide which problem you have. After that, each tool page carries its own steps and its own example.

Commands and output on the tool pages are quoted from the three repositories at the revisions those pages record. The PHP output was produced by running the package. The PHP demo, hydration included, was also run in three browsers. The JSX example was not run.

Work out which problem you have

The three tools are not stages of one pipeline, and none of them installs another. Pick by the thing you are trying to do:

choose by task
If you need to…	Use	Needs
Print a component's markup from PHP	SSR in PHP	PHP 7.1+ and a template file; the client half is separate
Turn server-rendered placeholders into live elements	Hydration in the browser	native custom elements in a browser, plus server markup to hydrate
Write a component as JSX	JSX authoring (WIP)	a JSX compiler, then a bundler

Two of them pair: the PHP renderer prints exactly the attributes hydrate() looks for, so using both is a normal setup — one install on the server, one in the browser. The JSX library stands apart: it renders its own elements and shares no placeholder contract with the other two.

Install only what step 1 named

Each tool page repeats its own install section in full, because the requirements differ and a summary here would go stale first. What is worth knowing before you start:

SSR in PHP: Composer for the autoloader, ext-dom and ext-json, plus web-component-hydration for the client half. Packagist lists one version, dev-master — there is no tagged release, so a stable constraint will not resolve.
Hydration: web-component-hydration from npm at 1.0.5, last published 2019-08-06. No dependencies, no build step: three ES modules imported by relative path.
JSX (WIP): jsx-for-web-components from npm at 1.2.1, last published 2018-12-29, plus the TypeScript and Rollup toolchain its README pins.

Set the template directory, then render

For the PHP path only. The package needs to know where template files live before it renders anything; after that, a call to getTemplate() prints the server half and getClientTemplate() prints the client half. The SSR page shows both calls together with the markup they produced when the package was run.

Register in the browser, then hydrate

For the hydration path. The order is not optional: hydrate(name) returns early when the element is not yet defined or the template-<name> element is missing, so every await register() has to settle before the matching hydrate() call runs. The hydration page quotes the two files that do it.

where to go

after you pick

SSR in PHP
Two functions, the template directory, the demo's commands, and its real output.
Hydration in the browser
The placeholder contract, the decoder, and the register-then-hydrate order.
JSX authoring (WIP)
The h() factory and the TSX example, with the WIP label intact.
The three tools
What the set is, and what none of it claims.