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 <nate@skypack.dev>

* 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 <eyelidlessness@users.noreply.github.com>
Co-authored-by: Abdullah Mzaien <s201540830@kfupm.edu.sa>

* 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 <eyelidlessness@users.noreply.github.com>
Co-authored-by: Abdullah Mzaien <s201540830@kfupm.edu.sa>

7 files changed, 47 insertions, 6 deletions

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 (
+    <>
+      <div className="counter">
+        Hello from Preact!
+      </div>
+    </>
+  );
+}
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 (
+    <>
+      <div id="solid" class="counter">
+        <button onClick={subtract}>-</button>
+        <pre>{count()}</pre>
+        <button onClick={add}>+</button>
+      </div>
+      <div class="children">
+        {children}
+      </div>
+    </>
+  );
+}
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';
           <h1>Hello Preact!</h1>
         </PreactCounter>
 
+        <SolidCounter client:visible>
+          <h1>Hello Solid!</h1>
+        </SolidCounter>
+
         <VueCounter client:visible>
             <h1>Hello Vue!</h1>
         </VueCounter>