From 519a1c4e8407c7abcb8d879b67a9f4b960652cae Mon Sep 17 00:00:00 2001
From: Matthew Phillips <matthew@skypack.dev>
Date: Fri, 11 Aug 2023 10:05:02 -0400
Subject: JSX refactor (#7924)

* JSX refactor

* Get preact/compat test to pass

* Use include config

* Remove old astro flavored markdown test

* Move babel dep to preact

* Remove errant debugger

* Update lockfile

* Update the multi-framework example

* Update e2e tests

* Fix nested-in-vue tests

* Add back in astro check

* Update packages/astro/src/core/create-vite.ts

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>

* Update packages/astro/src/core/create-vite.ts

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>

* Update packages/integrations/solid/src/index.ts

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>

* Update packages/integrations/solid/src/index.ts

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>

* Update .changeset/perfect-horses-tell.md

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>

* Move the comment about the include config

* Remove redundant alias config

* Use react's own preamble code

* Use the base for the preamble

* Remove solid redundancy

* Update .changeset/perfect-horses-tell.md

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

* Update based on review comments

* Oops

---------

Co-authored-by: Fred K. Schott <fkschott@gmail.com>
Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
---
 .../src/components/PreactCounter.tsx               | 21 --------------
 .../src/components/ReactCounter.tsx                | 19 -------------
 .../src/components/SolidCounter.tsx                | 21 --------------
 .../src/components/SvelteCounter.svelte            | 23 ---------------
 .../src/components/VueCounter.vue                  | 33 ----------------------
 .../src/components/preact/PreactCounter.tsx        | 21 ++++++++++++++
 .../src/components/react/ReactCounter.tsx          | 19 +++++++++++++
 .../src/components/solid/SolidCounter.tsx          | 21 ++++++++++++++
 .../src/components/svelte/SvelteCounter.svelte     | 23 +++++++++++++++
 .../src/components/vue/VueCounter.vue              | 33 ++++++++++++++++++++++
 examples/framework-multiple/src/pages/index.astro  | 10 +++----
 11 files changed, 122 insertions(+), 122 deletions(-)
 delete mode 100644 examples/framework-multiple/src/components/PreactCounter.tsx
 delete mode 100644 examples/framework-multiple/src/components/ReactCounter.tsx
 delete mode 100644 examples/framework-multiple/src/components/SolidCounter.tsx
 delete mode 100644 examples/framework-multiple/src/components/SvelteCounter.svelte
 delete mode 100644 examples/framework-multiple/src/components/VueCounter.vue
 create mode 100644 examples/framework-multiple/src/components/preact/PreactCounter.tsx
 create mode 100644 examples/framework-multiple/src/components/react/ReactCounter.tsx
 create mode 100644 examples/framework-multiple/src/components/solid/SolidCounter.tsx
 create mode 100644 examples/framework-multiple/src/components/svelte/SvelteCounter.svelte
 create mode 100644 examples/framework-multiple/src/components/vue/VueCounter.vue

(limited to 'examples/framework-multiple/src')

diff --git a/examples/framework-multiple/src/components/PreactCounter.tsx b/examples/framework-multiple/src/components/PreactCounter.tsx
deleted file mode 100644
index 2fb0a54b9..000000000
--- a/examples/framework-multiple/src/components/PreactCounter.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/** @jsxImportSource preact */
-
-import { useState } from 'preact/hooks';
-
-/** A counter written with Preact */
-export function PreactCounter({ children }) {
-	const [count, setCount] = useState(0);
-	const add = () => setCount((i) => i + 1);
-	const subtract = () => setCount((i) => i - 1);
-
-	return (
-		<>
-			<div class="counter">
-				<button onClick={subtract}>-</button>
-				<pre>{count}</pre>
-				<button onClick={add}>+</button>
-			</div>
-			<div class="counter-message">{children}</div>
-		</>
-	);
-}
diff --git a/examples/framework-multiple/src/components/ReactCounter.tsx b/examples/framework-multiple/src/components/ReactCounter.tsx
deleted file mode 100644
index 1cff97917..000000000
--- a/examples/framework-multiple/src/components/ReactCounter.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { useState } from 'react';
-
-/** A counter written with React */
-export function Counter({ children }) {
-	const [count, setCount] = useState(0);
-	const add = () => setCount((i) => i + 1);
-	const subtract = () => setCount((i) => i - 1);
-
-	return (
-		<>
-			<div className="counter">
-				<button onClick={subtract}>-</button>
-				<pre>{count}</pre>
-				<button onClick={add}>+</button>
-			</div>
-			<div className="counter-message">{children}</div>
-		</>
-	);
-}
diff --git a/examples/framework-multiple/src/components/SolidCounter.tsx b/examples/framework-multiple/src/components/SolidCounter.tsx
deleted file mode 100644
index 153feaddc..000000000
--- a/examples/framework-multiple/src/components/SolidCounter.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/** @jsxImportSource solid-js */
-
-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="counter-message">{children}</div>
-		</>
-	);
-}
diff --git a/examples/framework-multiple/src/components/SvelteCounter.svelte b/examples/framework-multiple/src/components/SvelteCounter.svelte
deleted file mode 100644
index 01e58574a..000000000
--- a/examples/framework-multiple/src/components/SvelteCounter.svelte
+++ /dev/null
@@ -1,23 +0,0 @@
-<!-- @component
-A counter written with Svelte
--->
-<script lang="ts">
-	let count = 0;
-
-	function add() {
-		count += 1;
-	}
-
-	function subtract() {
-		count -= 1;
-	}
-</script>
-
-<div class="counter">
-	<button on:click={subtract}>-</button>
-	<pre>{count}</pre>
-	<button on:click={add}>+</button>
-</div>
-<div class="counter-message">
-	<slot />
-</div>
diff --git a/examples/framework-multiple/src/components/VueCounter.vue b/examples/framework-multiple/src/components/VueCounter.vue
deleted file mode 100644
index 74820f7f0..000000000
--- a/examples/framework-multiple/src/components/VueCounter.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-	<!--
-		Seeing type errors on the word `class`?
-		This unfortunately happens because @types/react's JSX definitions leak into every file due to being declared globally.
-		There's currently no way to prevent this when using both Vue and React with TypeScript in the same project.
-		You can read more about this issue here: https://github.com/johnsoncodehk/volar/discussions/592
-	-->
-	<div class="counter">
-		<button @click="subtract()">-</button>
-		<pre>{{ count }}</pre>
-		<button @click="add()">+</button>
-	</div>
-	<div class="counter-message">
-		<slot />
-	</div>
-</template>
-
-<script lang="ts">
-import { ref } from 'vue';
-export default {
-	setup() {
-		const count = ref(0);
-		const add = () => (count.value = count.value + 1);
-		const subtract = () => (count.value = count.value - 1);
-
-		return {
-			count,
-			add,
-			subtract,
-		};
-	},
-};
-</script>
diff --git a/examples/framework-multiple/src/components/preact/PreactCounter.tsx b/examples/framework-multiple/src/components/preact/PreactCounter.tsx
new file mode 100644
index 000000000..2fb0a54b9
--- /dev/null
+++ b/examples/framework-multiple/src/components/preact/PreactCounter.tsx
@@ -0,0 +1,21 @@
+/** @jsxImportSource preact */
+
+import { useState } from 'preact/hooks';
+
+/** A counter written with Preact */
+export function PreactCounter({ children }) {
+	const [count, setCount] = useState(0);
+	const add = () => setCount((i) => i + 1);
+	const subtract = () => setCount((i) => i - 1);
+
+	return (
+		<>
+			<div class="counter">
+				<button onClick={subtract}>-</button>
+				<pre>{count}</pre>
+				<button onClick={add}>+</button>
+			</div>
+			<div class="counter-message">{children}</div>
+		</>
+	);
+}
diff --git a/examples/framework-multiple/src/components/react/ReactCounter.tsx b/examples/framework-multiple/src/components/react/ReactCounter.tsx
new file mode 100644
index 000000000..1cff97917
--- /dev/null
+++ b/examples/framework-multiple/src/components/react/ReactCounter.tsx
@@ -0,0 +1,19 @@
+import { useState } from 'react';
+
+/** A counter written with React */
+export function Counter({ children }) {
+	const [count, setCount] = useState(0);
+	const add = () => setCount((i) => i + 1);
+	const subtract = () => setCount((i) => i - 1);
+
+	return (
+		<>
+			<div className="counter">
+				<button onClick={subtract}>-</button>
+				<pre>{count}</pre>
+				<button onClick={add}>+</button>
+			</div>
+			<div className="counter-message">{children}</div>
+		</>
+	);
+}
diff --git a/examples/framework-multiple/src/components/solid/SolidCounter.tsx b/examples/framework-multiple/src/components/solid/SolidCounter.tsx
new file mode 100644
index 000000000..153feaddc
--- /dev/null
+++ b/examples/framework-multiple/src/components/solid/SolidCounter.tsx
@@ -0,0 +1,21 @@
+/** @jsxImportSource solid-js */
+
+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="counter-message">{children}</div>
+		</>
+	);
+}
diff --git a/examples/framework-multiple/src/components/svelte/SvelteCounter.svelte b/examples/framework-multiple/src/components/svelte/SvelteCounter.svelte
new file mode 100644
index 000000000..01e58574a
--- /dev/null
+++ b/examples/framework-multiple/src/components/svelte/SvelteCounter.svelte
@@ -0,0 +1,23 @@
+<!-- @component
+A counter written with Svelte
+-->
+<script lang="ts">
+	let count = 0;
+
+	function add() {
+		count += 1;
+	}
+
+	function subtract() {
+		count -= 1;
+	}
+</script>
+
+<div class="counter">
+	<button on:click={subtract}>-</button>
+	<pre>{count}</pre>
+	<button on:click={add}>+</button>
+</div>
+<div class="counter-message">
+	<slot />
+</div>
diff --git a/examples/framework-multiple/src/components/vue/VueCounter.vue b/examples/framework-multiple/src/components/vue/VueCounter.vue
new file mode 100644
index 000000000..74820f7f0
--- /dev/null
+++ b/examples/framework-multiple/src/components/vue/VueCounter.vue
@@ -0,0 +1,33 @@
+<template>
+	<!--
+		Seeing type errors on the word `class`?
+		This unfortunately happens because @types/react's JSX definitions leak into every file due to being declared globally.
+		There's currently no way to prevent this when using both Vue and React with TypeScript in the same project.
+		You can read more about this issue here: https://github.com/johnsoncodehk/volar/discussions/592
+	-->
+	<div class="counter">
+		<button @click="subtract()">-</button>
+		<pre>{{ count }}</pre>
+		<button @click="add()">+</button>
+	</div>
+	<div class="counter-message">
+		<slot />
+	</div>
+</template>
+
+<script lang="ts">
+import { ref } from 'vue';
+export default {
+	setup() {
+		const count = ref(0);
+		const add = () => (count.value = count.value + 1);
+		const subtract = () => (count.value = count.value - 1);
+
+		return {
+			count,
+			add,
+			subtract,
+		};
+	},
+};
+</script>
diff --git a/examples/framework-multiple/src/pages/index.astro b/examples/framework-multiple/src/pages/index.astro
index 94630aa1e..ccf5aaa71 100644
--- a/examples/framework-multiple/src/pages/index.astro
+++ b/examples/framework-multiple/src/pages/index.astro
@@ -4,12 +4,12 @@ import '../styles/global.css';
 
 // Component Imports
 // For JSX components, all the common ways of exporting (under a namespace, specific export, default export etc) are supported!
-import * as react from '../components/ReactCounter';
-import { PreactCounter } from '../components/PreactCounter';
-import SolidCounter from '../components/SolidCounter';
+import * as react from '../components/react/ReactCounter';
+import { PreactCounter } from '../components/preact/PreactCounter';
+import SolidCounter from '../components/solid/SolidCounter';
 
-import VueCounter from '../components/VueCounter.vue';
-import SvelteCounter from '../components/SvelteCounter.svelte';
+import VueCounter from '../components/vue/VueCounter.vue';
+import SvelteCounter from '../components/svelte/SvelteCounter.svelte';
 
 // Full Astro Component Syntax:
 // https://docs.astro.build/core-concepts/astro-components/
-- 
cgit v1.2.3