From bd18e14a2c05d473b9822ddaf9ebada48e2d75dd Mon Sep 17 00:00:00 2001 From: Nate Moore Date: Wed, 21 Jul 2021 18:10:03 -0500 Subject: Expose JSX compilation to renderers (#588) * feat: add support for `jsxImportSource`, new JSX transform * Renderer: add Solid renderer (#667) * feat: add support for `jsxImportSource`, new JSX transform * WIP: solid renderer * [Renderer] Solid (#656) * feat: add support for `jsxImportSource`, new JSX transform * WIP: solid renderer * Solid renderer: fix SSR of children, hydration (top level) Caveat: cannot hydrate children/descendants of hydrated parents * Fix hydration of fragments * fix: SyntaxError in React/Preact renderers * fix: errors in React/Preact renderers * feat: update react external * chore: update examples * chore: delete old changelog * chore: update astro config Co-authored-by: Nate Moore * Changing the preact to Solid (#669) * chore: use new client:visible syntax * fix: dev script issue * chore: cleanup SolidJS example * docs: update framework example docs * chore: cleanup framework-multiple example * fix: remove SolidJS false-positives from Preact renderer * chore: add changeset Co-authored-by: eyelidlessness Co-authored-by: Abdullah Mzaien * feat(create-astro): add Solid support * docs: add JSX options to renderer reference * chore: add changeset for P/React renderers * fix: move react/server.js to external * chore: remove brewfile * Revert "feat: add support for `jsxImportSource`, new JSX transform" This reverts commit 077c4bfc135c58a85d4ebfca6012e90403694d8d. * fix: remove `react-dom/server` from `external` * chore: remove unused dependency * feat: improve JSX error messages * Revert "Revert "feat: add support for `jsxImportSource`, new JSX transform"" This reverts commit f6c2896b9ec6430611fc0abae7d586c42aca87e5. * docs: update jsxImportSource * feat: improve error message * feat: improve error logging for JSX renderers * tests: add jsx-runtime tests * chore: update snowpack Co-authored-by: eyelidlessness Co-authored-by: Abdullah Mzaien --- examples/framework-multiple/README.md | 2 -- examples/framework-multiple/astro.config.mjs | 8 +++++++- .../src/components/PreactCounter.tsx | 1 - .../framework-multiple/src/components/PreactSFC.tsx | 12 ++++++++++++ .../src/components/ReactCounter.jsx | 2 +- .../src/components/SolidCounter.tsx | 21 +++++++++++++++++++++ examples/framework-multiple/src/pages/index.astro | 7 ++++++- 7 files changed, 47 insertions(+), 6 deletions(-) create mode 100644 examples/framework-multiple/src/components/PreactSFC.tsx create mode 100644 examples/framework-multiple/src/components/SolidCounter.tsx (limited to 'examples/framework-multiple') diff --git a/examples/framework-multiple/README.md b/examples/framework-multiple/README.md index 0556e54af..559e90bc9 100644 --- a/examples/framework-multiple/README.md +++ b/examples/framework-multiple/README.md @@ -7,5 +7,3 @@ npm init astro -- --template framework-multiple This example showcases Astro's built-in support for multiple frameworks ([React](https://reactjs.org), [Preact](https://preactjs.com), [Svelte](https://svelte.dev), and [Vue (`v3.x`)](https://v3.vuejs.org/)). No configuration is needed to enable these frameworks—just start writing components in `src/components`. - -> **Note**: If used, components _must_ include a JSX factory (ex. `import React from "react"`, `import { h } from "preact"`). Astro is unable to determine which framework is used without having the [JSX factory](https://mariusschulz.com/blog/per-file-jsx-factories-in-typescript#what-is-a-jsx-factory) in scope. diff --git a/examples/framework-multiple/astro.config.mjs b/examples/framework-multiple/astro.config.mjs index ce25e5aff..88ceb4f4f 100644 --- a/examples/framework-multiple/astro.config.mjs +++ b/examples/framework-multiple/astro.config.mjs @@ -11,5 +11,11 @@ export default { // port: 3000, // The port to run the dev server on. // tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js' }, - renderers: ['@astrojs/renderer-preact', '@astrojs/renderer-react', '@astrojs/renderer-svelte', '@astrojs/renderer-vue'], + renderers: [ + '@astrojs/renderer-preact', + '@astrojs/renderer-react', + '@astrojs/renderer-svelte', + '@astrojs/renderer-vue', + '@astrojs/renderer-solid', + ] }; diff --git a/examples/framework-multiple/src/components/PreactCounter.tsx b/examples/framework-multiple/src/components/PreactCounter.tsx index be4ddb6ce..bfead53da 100644 --- a/examples/framework-multiple/src/components/PreactCounter.tsx +++ b/examples/framework-multiple/src/components/PreactCounter.tsx @@ -1,4 +1,3 @@ -import { h, Fragment } from 'preact'; import { useState } from 'preact/hooks'; /** a counter written in Preact */ diff --git a/examples/framework-multiple/src/components/PreactSFC.tsx b/examples/framework-multiple/src/components/PreactSFC.tsx new file mode 100644 index 000000000..a92e258f8 --- /dev/null +++ b/examples/framework-multiple/src/components/PreactSFC.tsx @@ -0,0 +1,12 @@ +/** @jsxImportSource preact */ + +/** a counter written in Preact */ +export default function PreactSFC({ children }) { + return ( + <> +
+ Hello from Preact! +
+ + ); +} diff --git a/examples/framework-multiple/src/components/ReactCounter.jsx b/examples/framework-multiple/src/components/ReactCounter.jsx index 06d8f2513..4b7c4bfa3 100644 --- a/examples/framework-multiple/src/components/ReactCounter.jsx +++ b/examples/framework-multiple/src/components/ReactCounter.jsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import { useState } from 'react'; /** a counter written in React */ export function Counter({ children }) { diff --git a/examples/framework-multiple/src/components/SolidCounter.tsx b/examples/framework-multiple/src/components/SolidCounter.tsx new file mode 100644 index 000000000..0ec274bb4 --- /dev/null +++ b/examples/framework-multiple/src/components/SolidCounter.tsx @@ -0,0 +1,21 @@ +import { createSignal } from "solid-js"; + +/** a counter written with Solid */ +export default function SolidCounter({ children }) { + const [count, setCount] = createSignal(0); + const add = () => setCount(count() + 1); + const subtract = () => setCount(count() - 1); + + return ( + <> +
+ + 
{count()}
+ +
+
+ {children} +
+ + ); +} diff --git a/examples/framework-multiple/src/pages/index.astro b/examples/framework-multiple/src/pages/index.astro index c49744b18..1128029c2 100644 --- a/examples/framework-multiple/src/pages/index.astro +++ b/examples/framework-multiple/src/pages/index.astro @@ -3,10 +3,11 @@ import { A, B as Renamed } from '../components'; import * as react from '../components/ReactCounter.jsx'; import { PreactCounter } from '../components/PreactCounter.tsx'; +import PreactSFC from '../components/PreactSFC.tsx'; +import SolidCounter from '../components/SolidCounter.tsx'; import VueCounter from '../components/VueCounter.vue'; import SvelteCounter from '../components/SvelteCounter.svelte'; - // Full Astro Component Syntax: // https://docs.astro.build/core-concepts/astro-components/ --- @@ -45,6 +46,10 @@ import SvelteCounter from '../components/SvelteCounter.svelte';

Hello Preact!

+ +

Hello Solid!

+ +

Hello Vue!

 -- cgit v1.2.3