Current macro compilation is not compatible with Solid SSR

[yume-chan]

I'm investigating migrating my Solid.js project from Format.js (react-intl) to lingui.

Details about my current setup

Currently I'm not using Format.js's <FormattedMessage> component, I write messages using the formatMessage method, and I have a custom component that's very similar to lingui's real <Trans> component which parses the HTML syntaxes in the message and create components for them.

Lingui's <Trans> macro provides much better DX, so I want to give it a try.

I have tested Azq2/js-lingui-solid, but it doesn't support Solid's SSR mode. I have filed Azq2/js-lingui-solid#1, but since the root cause is in @lingui/babel-plugin-lingui-macro, and the intention seems to be supporting many frameworks natively without requiring forking the code (#2196), I want to get some direct feedback from lingui team.

---

To put it simple, in Solid.js SSR, components are compiled into string concatenations, that generates HTML code directly:

function A() {
    return <div/>
}

<A/>

// becomes

function A() {
    return "<div><div/>"
}

A() // "<div><div/>"

function B(props: { class: string }) {
    return <div class={props.class}/>
}

<B class="b"/>

// becomes

function B(props) {
    return "<div class=\"" + props.class + "\"></div>"
}

B({ "class": "b" }) // "<div class=\"b\"></div>"

function C(props: { children: JSX.Element }) {
	return <div>{props.children}</div>
}

<C>children</C>

// becomes

function C(props) {
	return "<div>" + props.children + "</div>"
}

C({ children: "children" }) // "<div>children</div>"

(code for rehydration, escaping and contexts are omitted)

Also you may notice, it only generates for what you write. If you say an element won't have dynamic children, it will skip generating interpolation for props.children.

---

So when compiling the <Trans> macro:

import { Trans } from "@lingui/solid/macro"; // assume it exists
<Trans>
  Read the <a href="/docs">docs</a>.
</Trans>

// becomes

import { Trans } from "@lingui/solid"; // assume it exists
<Trans id={"mk8bSG"} message="Read the <0>docs</0>." components={{ 0: <a href="/docs" /> }} />;

Then passes through Solid compiler:

import { Trans } from "@lingui/solid"; // assume it exists
Trans({ id: "mk8bSG", message: "Read the <0>docs</0>.", components: { 0: "<a href=\"/docs\"></a>" } })

As components[0] is literally a string, it's not possible to insert its children ("docs") into it. (in this simple case it's possible to parse the string as HTML and insert the children, but it will not work for components that returns multiple elements)

function D(props: { children: JSX.Element }) {
	return <div>
		<span>{props.children}</span>
		<span></span>
	</div>
}

<Trans><D>children</D></Trans>

// becomes

<Trans id="XXX" message="<0>children<0>" components={ 0: <D/> }/>

// then becomes

Trans({ id: "XXX", message: "<0>children<0>", components: { 0: D() } }) // where `D()` evaluates to "<div><span></span><span></span></div>"

---

One way I think should work is Format.js way. The macro compiler needs to create factory methods for each component:

import { Trans } from "@lingui/solid/macro"; // assume it exists
<Trans>
  Read the <a href="/docs">docs</a>.
</Trans>

// becomes

import { Trans } from "@lingui/solid"; // assume it exists
<Trans id={"mk8bSG"} message="Read the <0>docs</0>." components={{ 0:  children => <a href="/docs">{children()}</a> }} />; // `children` needs to be a function to support context

// then becomes

import { Trans } from "@lingui/solid"; // assume it exists
Trans({ id: "mk8bSG", message: "Read the <0>docs</0>.", components: { 0: children => "<a href=\"/docs\">" + children() + "</a>" } })

and an example for components:

<Trans><D>children</D></Trans>

// becomes

<Trans id="XXX" message="<0>children<0>" components={ 0: children => <D>{children()}</D> }/>

// then becomes

Trans({ id: "XXX", message: "<0>children<0>", components: { 0: children => D({ get children() { return children() } }) } })

[timofei-iatsenko]

@yume-chan Thanks for deep dive into this issue. Indeed SolidJs using an interesting method for SSR. Anyway, could you prepare a PoC runtime component which would work both in the react and solid (that caould be 2 diffrent versions) which will accept this signature:

<Trans id="XXX" message="<0>children<0>" components={ 0: children => <D>{children()}</D> }/>

For macro transpiler it's simple change, most of the work would be in the runtime part.

[yume-chan]

main...yume-chan:js-lingui:feat/solid-compatibility (it's a PoC, not production ready)

[yume-chan]

I made a fully working Solid Start project: https://github.com/yume-chan/lingui-solid-start/tree/feat/patch-lingui

I just use pnpm patches to replace @lingui/babel-plugin-lingui-macro, put a very poorly implemented @lingui/react for Solid in lingui folder, and use the deprecated @lingui/macro (interestingly TypeScript didn't complain about it).

One more issue I noticed, values should also be functions, for Solid's fine-gained updates to work. Today it will re-render the whole component.