search

developit / htm

Hyperscript Tagged Markup: JSX alternative using standard tagged templates, with compiler support.
Apache License 2.0
8.67k stars 170 forks source link

Does it support lazy suspense for dynamic import component under codesplitting? #182

Closed X-neuron closed 3 years ago

X-neuron commented 3 years ago

when useing jsx component, the reference must point to a component

In some scenarios, use the template function of 'html' to generate route components dynamically with react lazy suspense functions

Is there a way to solve this with this tool?

https://codesandbox.io/s/babel-codegen-test-836r5?file=/app/pages/page3/index.js

developit commented 3 years ago

I'm not sure I understand the question here. HTM doesn't change anything about how JSX components work, it just makes component references explicit:

<div /> === html`<div />`
<Foo /> === html`<${Foo} />`
<a.b /> === html`<${a.b} />`
const A = x[y];<A /> === html`<${x[y]} />`

The last case is valid in HTM - maybe that's what you were referring to? The component reference is completely opaque to HTM, it's just the result of any JS expression. You could even do html`<${(await getComponents())[42]}>`.