1 files changed, 109 insertions, 0 deletions
diff --git a/packages/create-astro/src/frameworks.ts b/packages/create-astro/src/frameworks.ts
new file mode 100644
index 000000000..f7db2e0f6
--- /dev/null
+++ b/packages/create-astro/src/frameworks.ts
@@ -0,0 +1,109 @@
+export const COUNTER_COMPONENTS = {
+  '@astrojs/renderer-preact': {
+    filename: `src/components/PreactCounter.jsx`,
+    content: `import { h } from 'preact';
+import { useState } from 'preact/hooks';
+
+export default function PreactCounter({ children }) {
+  const [count, setCount] = useState(0);
+  const add = () => setCount((i) => i + 1);
+  const subtract = () => setCount((i) => i - 1);
+
+  return (
+    <div id="preact" class="counter">
+      <button onClick={subtract}>-</button>
+      <pre>{count}</pre>
+      <button onClick={add}>+</button>
+    </div>
+  );
+}
+`
+  },
+  '@astrojs/renderer-react': {
+    filename: `src/components/ReactCounter.jsx`,
+    content: `import React, { useState } from 'react';
+
+export default function ReactCounter({ children }) {
+  const [count, setCount] = useState(0);
+  const add = () => setCount((i) => i + 1);
+  const subtract = () => setCount((i) => i - 1);
+
+  return (
+    <div id="react" className="counter">
+      <button onClick={subtract}>-</button>
+      <pre>{count}</pre>
+      <button onClick={add}>+</button>
+    </div>
+  );
+}
+`
+  },
+  '@astrojs/renderer-svelte': {
+    filename: `src/components/SvelteCounter.svelte`,
+    content: `<script>
+  let count = 0;
+
+  function add() {
+    count += 1;
+  }
+
+  function subtract() {
+    count -= 1;
+  }
+</script>
+
+<div id="svelte" class="counter">
+  <button on:click={subtract}>-</button>
+  <pre>{ count }</pre>
+  <button on:click={add}>+</button>
+</div>
+`
+  },
+  '@astrojs/renderer-vue': {
+    filename: `src/components/VueCounter.vue`,
+    content: `<template>
+  <div id="vue" class="counter">
+      <button @click="subtract()">-</button>
+      <pre>{{ count }}</pre>
+      <button @click="add()">+</button>
+  </div>
+</template>
+
+<script>
+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>
+`
+  }
+};
+
+export const FRAMEWORKS = [
+  {
+    title: 'Preact',
+    value: '@astrojs/renderer-preact',
+  },
+  {
+    title: 'React',
+    value: '@astrojs/renderer-react',
+  },
+  {
+    title: 'Svelte',
+    value: '@astrojs/renderer-svelte',
+  },
+  {
+    title: 'Vue',
+    value: '@astrojs/renderer-vue',
+  }
+];