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, 150 insertions, 0 deletions

diff --git a/examples/framework-solid/.gitignore b/examples/framework-solid/.gitignore
new file mode 100644
index 000000000..d436c6dad
--- /dev/null
+++ b/examples/framework-solid/.gitignore
@@ -0,0 +1,18 @@
+# build output
+dist
+
+# dependencies
+node_modules/
+.snowpack/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
diff --git a/examples/framework-solid/.npmrc b/examples/framework-solid/.npmrc
new file mode 100644
index 000000000..0cc653b2c
--- /dev/null
+++ b/examples/framework-solid/.npmrc
@@ -0,0 +1,2 @@
+## force pnpm to hoist 
+shamefully-hoist = true
\ No newline at end of file
diff --git a/examples/framework-solid/README.md b/examples/framework-solid/README.md
new file mode 100644
index 000000000..e7afc1b84
--- /dev/null
+++ b/examples/framework-solid/README.md
@@ -0,0 +1,38 @@
+# Using Solid with Astro
+
+This example showcases Astro's built-in support for [Solid](https://www.solidjs.com/).
+
+## Installation
+
+### Automatic
+
+Bootstrap your Astro project with this template!
+
+```shell
+npm init astro --template framework-solid
+```
+
+### Manual
+
+To use Solid components in your Astro project:
+
+1. Install `@astrojs/renderer-solid`
+
+    ```shell
+    npm i @astrojs/renderer-solid
+    ```
+
+2. Add `"@astrojs/renderer-solid"` to your `renderers` in `astro.config.mjs`.
+
+    ```js
+    export default {
+      renderers: [
+        "@astrojs/renderer-solid",
+        // optionally, others...
+      ]
+    }
+    ```
+
+## Usage
+
+Write your Solid components as `.jsx` or `.tsx` files in your project.
diff --git a/examples/framework-solid/astro.config.mjs b/examples/framework-solid/astro.config.mjs
new file mode 100644
index 000000000..d19e07745
--- /dev/null
+++ b/examples/framework-solid/astro.config.mjs
@@ -0,0 +1,17 @@
+export default {
+  // projectRoot: '.',     // Where to resolve all URLs relative to. Useful if you have a monorepo project.
+  // pages: './src/pages', // Path to Astro components, pages, and data
+  // dist: './dist',       // When running `astro build`, path to final static output
+  // public: './public',   // A folder of static files Astro will copy to the root. Useful for favicons, images, and other files that don’t need processing.
+  buildOptions: {
+    // site: 'http://example.com',  // Your public domain, e.g.: https://my-site.dev/. Used to generate sitemaps and canonical URLs.
+    // sitemap: true,      // Generate sitemap (set to "false" to disable)
+  },
+  devOptions: {
+    // 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-solid'
+  ]
+};
diff --git a/examples/framework-solid/package.json b/examples/framework-solid/package.json
new file mode 100644
index 000000000..bd65ab03d
--- /dev/null
+++ b/examples/framework-solid/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "@example/framework-solid",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "start": "astro dev",
+    "build": "astro build"
+  },
+  "devDependencies": {
+    "astro": "^0.18.0-next.1",
+    "@astrojs/renderer-solid": "0.0.1"
+  },
+  "snowpack": {
+    "workspaceRoot": "../.."
+  }
+}
diff --git a/examples/framework-solid/src/components/Counter.tsx b/examples/framework-solid/src/components/Counter.tsx
new file mode 100644
index 000000000..78944a11e
--- /dev/null
+++ b/examples/framework-solid/src/components/Counter.tsx
@@ -0,0 +1,21 @@
+import { createSignal } from "solid-js";
+
+/** */
+export default function SolidCounter({ children }) {
+  const [count, setCount] = createSignal(0);
+  const add = () => setCount(count() + 1);
+  const subtract = () => setCount(count() - 1);
+
+  return (
+    <>
+      <div class="counter">
+        <button onClick={subtract}>-</button>
+        <pre>{count()}</pre>
+        <button onClick={add}>+</button>
+      </div>
+      <div class="children">
+        {children}
+      </div>
+    </>
+  );
+}
diff --git a/examples/framework-solid/src/pages/index.astro b/examples/framework-solid/src/pages/index.astro
new file mode 100644
index 000000000..2c279a7af
--- /dev/null
+++ b/examples/framework-solid/src/pages/index.astro
@@ -0,0 +1,38 @@
+---
+import Counter from '../components/Counter.tsx';
+---
+
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, viewport-fit=cover"
+    />
+    <style>
+      :global(:root) {
+        font-family: system-ui;
+        padding: 2em 0;
+      }
+      :global(.counter) {
+        display: grid;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        place-items: center;
+        font-size: 2em;
+        margin-top: 2em;
+      }
+      :global(.children) {
+        display: grid;
+        place-items: center;
+        margin-bottom: 2em;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <Counter client:visible>
+        <h1>Hello Solid!</h1>
+      </Counter>
+    </main>
+  </body>
+</html>