From d771b7d4445e86ea9d4056f8319a5e02a662066c Mon Sep 17 00:00:00 2001 From: bluwy Date: Mon, 7 Nov 2022 16:10:28 +0800 Subject: [PATCH] Improve astro demo --- playground/astro/astro.config.js | 2 +- playground/astro/package.json | 1 - playground/astro/public/astro.svg | 1 + playground/astro/src/assets/whyframe.svg | 1 + .../astro/src/components/Counter.module.css | 21 --- .../astro/src/components/Counter.svelte | 46 ----- playground/astro/src/components/Counter.vue | 51 ------ .../astro/src/components/CounterPreact.jsx | 23 --- .../astro/src/components/CounterReact.jsx | 23 --- .../astro/src/components/CounterSolid.jsx | 24 --- .../astro/src/components/Popup.module.css | 44 +++++ playground/astro/src/components/Popup.svelte | 67 +++++++ playground/astro/src/components/Popup.vue | 69 +++++++ .../astro/src/components/PopupPreact.jsx | 27 +++ .../astro/src/components/PopupReact.jsx | 27 +++ .../astro/src/components/PopupSolid.jsx | 27 +++ playground/astro/src/components/Story.astro | 9 - playground/astro/src/components/Story.svelte | 103 +++++++++++ playground/astro/src/layouts/Layout.astro | 23 +-- .../astro/src/pages/frames/default.astro | 15 ++ .../{basic/index.astro => special.astro} | 33 ++-- playground/astro/src/pages/index.astro | 171 +++++++++++++----- .../vite-preact/src/components/Popup.jsx | 2 +- .../playground-astro/playground-astro.spec.js | 2 +- 24 files changed, 528 insertions(+), 284 deletions(-) create mode 100644 playground/astro/public/astro.svg create mode 100644 playground/astro/src/assets/whyframe.svg delete mode 100644 playground/astro/src/components/Counter.module.css delete mode 100644 playground/astro/src/components/Counter.svelte delete mode 100644 playground/astro/src/components/Counter.vue delete mode 100644 playground/astro/src/components/CounterPreact.jsx delete mode 100644 playground/astro/src/components/CounterReact.jsx delete mode 100644 playground/astro/src/components/CounterSolid.jsx create mode 100644 playground/astro/src/components/Popup.module.css create mode 100644 playground/astro/src/components/Popup.svelte create mode 100644 playground/astro/src/components/Popup.vue create mode 100644 playground/astro/src/components/PopupPreact.jsx create mode 100644 playground/astro/src/components/PopupReact.jsx create mode 100644 playground/astro/src/components/PopupSolid.jsx delete mode 100644 playground/astro/src/components/Story.astro create mode 100644 playground/astro/src/components/Story.svelte create mode 100644 playground/astro/src/pages/frames/default.astro rename playground/astro/src/pages/frames/{basic/index.astro => special.astro} (90%) diff --git a/playground/astro/astro.config.js b/playground/astro/astro.config.js index 3b48877..3db05ec 100644 --- a/playground/astro/astro.config.js +++ b/playground/astro/astro.config.js @@ -17,7 +17,7 @@ export default defineConfig({ plugins: [ inspect(), whyframe({ - defaultSrc: '/frames/basic', + defaultSrc: '/frames/default', components: [{ name: 'Story', showSource: true }] }), whyframeAstro({ diff --git a/playground/astro/package.json b/playground/astro/package.json index 4f597b4..1c157bd 100644 --- a/playground/astro/package.json +++ b/playground/astro/package.json @@ -28,7 +28,6 @@ "@whyframe/svelte": "^0.1.5", "@whyframe/vue": "^0.1.3", "astro": "^1.6.3", - "preact-render-to-string": "^5.2.6", "svelte": "^3.52.0", "vite-plugin-inspect": "^0.7.7" } diff --git a/playground/astro/public/astro.svg b/playground/astro/public/astro.svg new file mode 100644 index 0000000..d798789 --- /dev/null +++ b/playground/astro/public/astro.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/playground/astro/src/assets/whyframe.svg b/playground/astro/src/assets/whyframe.svg new file mode 100644 index 0000000..f12447b --- /dev/null +++ b/playground/astro/src/assets/whyframe.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/playground/astro/src/components/Counter.module.css b/playground/astro/src/components/Counter.module.css deleted file mode 100644 index 81333c3..0000000 --- a/playground/astro/src/components/Counter.module.css +++ /dev/null @@ -1,21 +0,0 @@ -.counter { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #f9f9f9; - cursor: pointer; - transition: background-color 0.2s, border-color 0.25s; -} - -.counter:hover { - background-color: #ced1ff; - border-color: #646cff; -} - -.counter:focus, -.counter:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} diff --git a/playground/astro/src/components/Counter.svelte b/playground/astro/src/components/Counter.svelte deleted file mode 100644 index d714e7e..0000000 --- a/playground/astro/src/components/Counter.svelte +++ /dev/null @@ -1,46 +0,0 @@ - - - - - diff --git a/playground/astro/src/components/Counter.vue b/playground/astro/src/components/Counter.vue deleted file mode 100644 index 5c65009..0000000 --- a/playground/astro/src/components/Counter.vue +++ /dev/null @@ -1,51 +0,0 @@ - - - - - diff --git a/playground/astro/src/components/CounterPreact.jsx b/playground/astro/src/components/CounterPreact.jsx deleted file mode 100644 index ae8ed44..0000000 --- a/playground/astro/src/components/CounterPreact.jsx +++ /dev/null @@ -1,23 +0,0 @@ -/** @jsxImportSource preact */ -import { useState } from 'preact/hooks' -import { counter } from './Counter.module.css' - -export function Counter({ max = 0, onMax }) { - const [count, setCount] = useState(0) - - const increment = () => { - if (max !== 0 && count >= max) { - onMax?.() - document.body.style.backgroundColor = 'pink' - alert('🚨 YOU HAVE BEEN WARNED 🚨') - return - } - setCount(count + 1) - } - - return ( - - ) -} diff --git a/playground/astro/src/components/CounterReact.jsx b/playground/astro/src/components/CounterReact.jsx deleted file mode 100644 index 08d82ba..0000000 --- a/playground/astro/src/components/CounterReact.jsx +++ /dev/null @@ -1,23 +0,0 @@ -/** @jsxImportSource react */ -import { useState } from 'react' -import { counter } from './Counter.module.css' - -export function Counter({ max = 0, onMax }) { - const [count, setCount] = useState(0) - - const increment = () => { - if (max !== 0 && count >= max) { - onMax?.() - document.body.style.backgroundColor = 'pink' - alert('🚨 YOU HAVE BEEN WARNED 🚨') - return - } - setCount(count + 1) - } - - return ( - - ) -} diff --git a/playground/astro/src/components/CounterSolid.jsx b/playground/astro/src/components/CounterSolid.jsx deleted file mode 100644 index 34067d6..0000000 --- a/playground/astro/src/components/CounterSolid.jsx +++ /dev/null @@ -1,24 +0,0 @@ -/** @jsxImportSource solid-js */ -import { createSignal } from 'solid-js' -import { counter } from './Counter.module.css' - -export function Counter(props) { - const [count, setCount] = createSignal(0) - - const increment = () => { - const newCount = count() + 1 - if (newCount > (props.max ?? Infinity)) { - props.onMax?.() - document.body.style.backgroundColor = 'pink' - alert('🚨 YOU HAVE BEEN WARNED 🚨') - return - } - setCount(newCount) - } - - return ( - - ) -} diff --git a/playground/astro/src/components/Popup.module.css b/playground/astro/src/components/Popup.module.css new file mode 100644 index 0000000..cb3fce9 --- /dev/null +++ b/playground/astro/src/components/Popup.module.css @@ -0,0 +1,44 @@ +.activator { + display: block; + border-radius: 8px; + border: 1px solid transparent; + padding: 0.5em 1em; + font-size: 0.9em; + font-weight: 500; + font-family: inherit; + color: #efefef; + background-color: #1e1e1e; + cursor: pointer; + transition: border-color 0.25s; +} + +.activator:hover { + border-color: #ffed24; +} + +.activator:focus, +.activator:focus-visible { + outline: 4px auto -webkit-focus-ring-color; +} + +.background { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: 0; + background-color: #090909; + color: #efefef; + font-size: 1.5rem; + opacity: 0.8; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; +} + +.background:focus, +.background:focus-visible { + border: 4px solid #ffed24; +} diff --git a/playground/astro/src/components/Popup.svelte b/playground/astro/src/components/Popup.svelte new file mode 100644 index 0000000..add1c49 --- /dev/null +++ b/playground/astro/src/components/Popup.svelte @@ -0,0 +1,67 @@ + + + + +{#if open} + +{/if} + + diff --git a/playground/astro/src/components/Popup.vue b/playground/astro/src/components/Popup.vue new file mode 100644 index 0000000..7f21bb9 --- /dev/null +++ b/playground/astro/src/components/Popup.vue @@ -0,0 +1,69 @@ + + + + + diff --git a/playground/astro/src/components/PopupPreact.jsx b/playground/astro/src/components/PopupPreact.jsx new file mode 100644 index 0000000..c7caee7 --- /dev/null +++ b/playground/astro/src/components/PopupPreact.jsx @@ -0,0 +1,27 @@ +import { useState } from 'preact/hooks' +import style from './Popup.module.css' + +/** + * @param {{ content: string, children: any }} props + */ +export default function Popup({ content, children }) { + const [open, setOpen] = useState(false) + + return ( + <> + + + {open && ( + + )} + + ) +} diff --git a/playground/astro/src/components/PopupReact.jsx b/playground/astro/src/components/PopupReact.jsx new file mode 100644 index 0000000..7c5865e --- /dev/null +++ b/playground/astro/src/components/PopupReact.jsx @@ -0,0 +1,27 @@ +import { useState } from 'react' +import style from './Popup.module.css' + +/** + * @param {{ content: string, children: any }} props + */ +export default function Popup({ content, children }) { + const [open, setOpen] = useState(false) + + return ( + <> + + + {open && ( + + )} + + ) +} diff --git a/playground/astro/src/components/PopupSolid.jsx b/playground/astro/src/components/PopupSolid.jsx new file mode 100644 index 0000000..cb4a217 --- /dev/null +++ b/playground/astro/src/components/PopupSolid.jsx @@ -0,0 +1,27 @@ +import { createSignal, Show } from 'solid-js' +import style from './Popup.module.css' + +/** + * @param {{ content: string, children: any }} props + */ +export default function Popup(props) { + const [open, setOpen] = createSignal(false) + + return ( + <> + + + + + + + ) +} diff --git a/playground/astro/src/components/Story.astro b/playground/astro/src/components/Story.astro deleted file mode 100644 index 525ee11..0000000 --- a/playground/astro/src/components/Story.astro +++ /dev/null @@ -1,9 +0,0 @@ -
-

- This is a story of {Astro.props.title}: -

- - -
diff --git a/playground/astro/src/components/Story.svelte b/playground/astro/src/components/Story.svelte new file mode 100644 index 0000000..364fc9c --- /dev/null +++ b/playground/astro/src/components/Story.svelte @@ -0,0 +1,103 @@ + + +
+
+

{title}

+ +
+ +
+ + {#if showCode} +
+ 
{source}
+
+ {/if} +
+
+ + diff --git a/playground/astro/src/layouts/Layout.astro b/playground/astro/src/layouts/Layout.astro index 6364653..0fdae09 100644 --- a/playground/astro/src/layouts/Layout.astro +++ b/playground/astro/src/layouts/Layout.astro @@ -2,8 +2,9 @@ + - whyframe astro + Astro + Whyframe @@ -21,7 +22,8 @@ html, body { font-family: Inter, Avenir, Helvetica, Arial, sans-serif; - background-color: #efefef; + background-color: #1e1e1e; + color: #efefef; width: 100%; height: 100%; padding: 0; @@ -33,19 +35,14 @@ text-align: center; } - iframe[data-why] { + iframe[data-why], + .story { display: inline-block; - border: none; - box-shadow: 2.7px 3.2px 3.6px rgba(0, 0, 0, 0.024), - 7.5px 8.8px 10px rgba(0, 0, 0, 0.035), - 18.1px 21.1px 24.1px rgba(0, 0, 0, 0.046), - 60px 70px 80px rgba(0, 0, 0, 0.07); - border-radius: 0.4rem; + border: 3px solid #303030; + background-color: #a2a2a2; + border-radius: 0.5rem; width: 400px; - min-height: 200px; - max-height: 400px; - background-color: white; - margin: 0.5rem; + height: 200px; } diff --git a/playground/astro/src/pages/frames/default.astro b/playground/astro/src/pages/frames/default.astro new file mode 100644 index 0000000..98c9252 --- /dev/null +++ b/playground/astro/src/pages/frames/default.astro @@ -0,0 +1,15 @@ + + + + + + Whyframe - Default + + +
+ + + diff --git a/playground/astro/src/pages/frames/basic/index.astro b/playground/astro/src/pages/frames/special.astro similarity index 90% rename from playground/astro/src/pages/frames/basic/index.astro rename to playground/astro/src/pages/frames/special.astro index 67e0ea9..53e2190 100644 --- a/playground/astro/src/pages/frames/basic/index.astro +++ b/playground/astro/src/pages/frames/special.astro @@ -3,15 +3,7 @@ - whyframe - - -
- + Whyframe - Special + + +
+ diff --git a/playground/astro/src/pages/index.astro b/playground/astro/src/pages/index.astro index adc586c..657978e 100644 --- a/playground/astro/src/pages/index.astro +++ b/playground/astro/src/pages/index.astro @@ -1,65 +1,136 @@ --- +import whyframeLogo from '../assets/whyframe.svg' import Layout from '../layouts/Layout.astro' -import Story from '../components/Story.astro' -import CounterSvelte from '../components/Counter.svelte' -import CounterVue from '../components/Counter.vue' -import { Counter as CounterSolid } from '../components/CounterSolid.jsx' -import { Counter as CounterPreact } from '../components/CounterPreact.jsx' -import { Counter as CounterReact } from '../components/CounterReact.jsx' - -const max = 10 +import Story from '../components/Story.svelte' +import PopupSvelte from '../components/Popup.svelte' +import PopupVue from '../components/Popup.vue' +import PopupSolid from '../components/PopupSolid.jsx' +import PopupPreact from '../components/PopupPreact.jsx' +import PopupReact from '../components/PopupReact.jsx' --- - -

Astro

+ +
+ + + + + + +
+ +

Astro + Whyframe

+ +

+ Check out the examples below to see component isolation in action! +
+ You can view the source code at src/pages/index.astro. +
+ Click on the logos above to learn more. +

Svelte

- - +
+ + + +

This is a Story component

+ Open popup + +

Vue

- - +
+ + + +

This is a Story component

+ Open popup + +

Solid

- - +
+ + + +

This is a Story component

+ Open popup + +

Preact

- - +
+ + + +

This is a Story component

+ Open popup + +

React

- - - - -

Click to increment!

- - - - -

Do not go over {max}

- - +
+ + + +

This is a Story component

+ Open popup + +
+ + diff --git a/playground/vite-preact/src/components/Popup.jsx b/playground/vite-preact/src/components/Popup.jsx index 15eff71..c7caee7 100644 --- a/playground/vite-preact/src/components/Popup.jsx +++ b/playground/vite-preact/src/components/Popup.jsx @@ -1,4 +1,4 @@ -import { useState } from 'react' +import { useState } from 'preact/hooks' import style from './Popup.module.css' /** diff --git a/tests/playground-astro/playground-astro.spec.js b/tests/playground-astro/playground-astro.spec.js index 7844ecb..33b3d9b 100644 --- a/tests/playground-astro/playground-astro.spec.js +++ b/tests/playground-astro/playground-astro.spec.js @@ -5,5 +5,5 @@ setup() test('render the page', async ({ page }) => { await page.goto('/') - expect(await page.locator('h1').textContent()).toBe('Astro') + expect(await page.locator('h1').textContent()).toBe('Astro + Whyframe') })