search

QwikDev / astro

Qwik + Astro integration
209 stars 13 forks source link

How to integrate Qwik and React integrations when jsxImportSource is a single valued string? #135

Closed laurencefass closed 3 months ago

laurencefass commented 3 months ago

I think that there may be a conflict between React and Qwik astro integrations. Im following through the install

https://qwik.dev/docs/integrations/astro/

on an existing astro site in which i have previously installed the React integration

https://docs.astro.build/en/guides/integrations-guide/react/

The documented qwik react integration updates tsconfig.json.

{ "extends": "astro/tsconfigs/strict", "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "react" } }

The qwik astro integation requires a manual update:

"compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "@builder.io/qwik" }

As jsxImportSource is not an array it can only have one reference.

Does this mean we cant install React alongside Qwik?

Is it possible to use a combo of folder and file extensions e..g. components/react/..react.tsx and components/qwik/.qwik.tsx to process both?

siguici commented 3 months ago

You can see the using multiple JSX frameworks section from the README.

laurencefass commented 3 months ago

you referenced 

integrations: [
    qwik({ include: "**/qwik/*" }),
    react({ include: "**/react/*" }),
    solid({ include: "**/solid/*" }),
  ],

but i still need to include /* @jsxImportSource @builder.io/[integration-id] / in all of my files so what does this integration config do? i.e. it works with or without it using the pragmas.

It also invalidates the tsconfig setting as its not entirely true. I realise this is probably an issue for astro, not your integration.

siguici commented 3 months ago

Hey @laurencefass. Indeed, you will have to define your preferred TSX framework in your tsconfig.json then specify the TSX for each third-party component although you specified it in your Astro configuration file. This is due to the fact that you may want to mix various TSX components in the same directory. Astro must know which rule to apply for each component.