Native support for styled.{{tag}}

[zakybilfagih]

When trying to use styled.{{tag}} on native, got an error Uninterpreted extension 'raw' This is because server-reason-react.melange_ppx doesn't recognize the raw extension

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

| Name | Status | Preview | Comments | Updated (UTC) | | :--- | :----- | :------ | :------- | :------ | | **styled-ppx** | ⬜️ Ignored ([Inspect](https://vercel.com/davesnx/styled-ppx/FjHghU1LKLFtAusPb7ABBp4Bdq1X)) | [Visit Preview](https://styled-ppx-git-fork-zakybilfagih-use-mel-raw-ins-f17dfe-davesnx.vercel.app) | | Mar 30, 2024 3:48pm |

[davesnx]

That's actually a nice improvement, since it fixes the mel.raw issue but you will face other issues with styled.tag in native (mel.raw, bindings such as createVariadicElement).

I would propose to add a flag on the ppx (styled-ppx.lib --native) and have a different creation of elements given the flag.

[zakybilfagih]

I see.. I guess the first step is to add server-reason-react.browser_ppx library to styled-ppx.lib, and set it to add the --js flag when --native flag is not set?

[zakybilfagih]

I see.. I guess the first step is to add server-reason-react.browser_ppx library to styled-ppx.lib, and set it to add the --js flag when --native flag is not set?

aah nvm, this should be handled by the user (?) we just need to emit valid native code right?

[davesnx]

Exactly, would be a different code-generation (not very different) but enough to be a separate code-path

[zakybilfagih]

I felt the build time is quite slow (tried building e2e/melange/native/ui.re and it felt considerably slower than the non native variant with styled.{{tag}}). Can't seem to pin point the slow path.

Is using a lot of ppxlib.metaquot have an impact on build times? It shouldn't affect the build time for the user of the ppx right?

[davesnx]

That should have any effect, while building ui (maybe we copy the node_modules by accident?)

[zakybilfagih]

That should have any effect, while building ui (maybe we copy the node_modules by accident?)

That doesn't seem to be the case, I tried timing the build command. Just adding the styled.{{tag}} call, cause 2x the build

[davesnx]

Maybe the amount of code generated? Can you debug without any prop?

[zakybilfagih]

welp, by virtue of having a dozen of arguments (ReactDOM.domProps) will inevitably effect the build time. nothing we can do about it