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>

1 files changed, 27 insertions, 5 deletions

diff --git a/packages/create-astro/src/frameworks.ts b/packages/create-astro/src/frameworks.ts
index 440dc067b..5b1546d48 100644
--- a/packages/create-astro/src/frameworks.ts
+++ b/packages/create-astro/src/frameworks.ts
@@ -1,10 +1,9 @@
 export const COUNTER_COMPONENTS = {
   '@astrojs/renderer-preact': {
     filename: `src/components/PreactCounter.jsx`,
-    content: `import { h } from 'preact';
-import { useState } from 'preact/hooks';
+    content: `import { useState } from 'preact/hooks';
 
-export default function PreactCounter({ children }) {
+export default function PreactCounter() {
   const [count, setCount] = useState(0);
   const add = () => setCount((i) => i + 1);
   const subtract = () => setCount((i) => i - 1);
@@ -21,9 +20,9 @@ export default function PreactCounter({ children }) {
   },
   '@astrojs/renderer-react': {
     filename: `src/components/ReactCounter.jsx`,
-    content: `import React, { useState } from 'react';
+    content: `import { useState } from 'react';
 
-export default function ReactCounter({ children }) {
+export default function ReactCounter() {
   const [count, setCount] = useState(0);
   const add = () => setCount((i) => i + 1);
   const subtract = () => setCount((i) => i - 1);
@@ -38,6 +37,25 @@ export default function ReactCounter({ children }) {
 }
 `,
   },
+  '@astrojs/renderer-solid': {
+    filename: `src/components/SolidCounter.jsx`,
+    content: `import { createSignal } from "solid-js";
+
+export default function SolidCounter() {
+  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>
+  );
+}
+`,
+  },
   '@astrojs/renderer-svelte': {
     filename: `src/components/SvelteCounter.svelte`,
     content: `<script>
@@ -99,6 +117,10 @@ export const FRAMEWORKS = [
     value: '@astrojs/renderer-react',
   },
   {
+    title: 'Solid',
+    value: '@astrojs/renderer-solid',
+  },
+  {
     title: 'Svelte',
     value: '@astrojs/renderer-svelte',
   },