Support children inside of components (#72)

* chore(examples): add kitchen-sink * feat: support children in rendered components * feat: add support for rendering children in Svelte * fix: cleanup p/react fragment children * chore: add @ts-nocheck to svelte files * chore: update lockfiles * fix: types * feat: memoize frontend/renderer/utils * fix: disable eslint for compiled SvelteWrapper * fix: add missing dep Co-authored-by: Nate Moore <[email protected]>
withastro · Apr 15, 2021 · 22ca9e0 · 22ca9e0
1 parent ea33d7b
commit 22ca9e0
Show file tree

Hide file tree

Showing 24 changed files with 6,444 additions and 286 deletions.
diff --git a/examples/kitchen-sink/astro.config.mjs b/examples/kitchen-sink/astro.config.mjs
@@ -0,0 +1,6 @@
+export default {
+ extensions: {
+ '.jsx': 'react',
+ '.tsx': 'preact',
+ }
+};
diff --git a/examples/kitchen-sink/astro/components/PreactCounter.tsx b/examples/kitchen-sink/astro/components/PreactCounter.tsx
@@ -0,0 +1,20 @@
+import { h, Fragment } from 'preact';
+import { useState } from 'preact/hooks';
+
+/** a counter written in Preact */
+export default function PreactCounter({ 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="children">
+ {children}
+ </div>
+ </>
+}
diff --git a/examples/kitchen-sink/astro/components/ReactCounter.jsx b/examples/kitchen-sink/astro/components/ReactCounter.jsx
@@ -0,0 +1,19 @@
+import React, { useState } from 'react';
+
+/** a counter written in 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 className="counter">
+ <button onClick={subtract}>-</button>
+ <pre>{count}</pre>
+ <button onClick={add}>+</button>
+ </div>
+ <div className="children">
+ {children}
+ </div>
+ </>
+}
diff --git a/examples/kitchen-sink/astro/components/SvelteCounter.svelte b/examples/kitchen-sink/astro/components/SvelteCounter.svelte
@@ -0,0 +1,22 @@
+
+<script>
+ let children;
+ 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="children">
+ <slot />
+</div>
diff --git a/examples/kitchen-sink/astro/components/VueCounter.vue b/examples/kitchen-sink/astro/components/VueCounter.vue
@@ -0,0 +1,27 @@
+<template>
+ <div class="counter">
+ <button @click="subtract()">-</button>
+ <pre>{{ count }}</pre>
+ <button @click="add()">+</button>
+ </div>
+ <div class="children">
+ <slot />
+ </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>
diff --git a/examples/kitchen-sink/astro/pages/index.astro b/examples/kitchen-sink/astro/pages/index.astro
@@ -0,0 +1,51 @@
+---
+import ReactCounter from '../components/ReactCounter.jsx';
+import PreactCounter from '../components/PreactCounter.tsx';
+import VueCounter from '../components/VueCounter.vue';
+import SvelteCounter from '../components/SvelteCounter.svelte';
+---
+
+<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>
+ <ReactCounter:load>
+ <h1>Hello React!</h1>
+ <p>What's up?</p>
+ </ReactCounter:load>
+
+ <PreactCounter:load>
+ <h1>Hello Preact!</h1>
+ </PreactCounter:load>
+
+ <VueCounter:load>
+ <h1>Hello Vue!</h1>
+ </VueCounter:load>
+
+ <SvelteCounter:load>
+ <h1>Hello Svelte!</h1>
+ </SvelteCounter:load>
+ </main>
+ </body>
+</html>