diff options
Diffstat (limited to 'examples/with-nanostores')
18 files changed, 351 insertions, 0 deletions
diff --git a/examples/with-nanostores/.gitignore b/examples/with-nanostores/.gitignore new file mode 100644 index 000000000..d436c6dad --- /dev/null +++ b/examples/with-nanostores/.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/with-nanostores/.npmrc b/examples/with-nanostores/.npmrc new file mode 100644 index 000000000..0cc653b2c --- /dev/null +++ b/examples/with-nanostores/.npmrc @@ -0,0 +1,2 @@ +## force pnpm to hoist +shamefully-hoist = true
\ No newline at end of file diff --git a/examples/with-nanostores/README.md b/examples/with-nanostores/README.md new file mode 100644 index 000000000..e74f30fd0 --- /dev/null +++ b/examples/with-nanostores/README.md @@ -0,0 +1,3 @@ +# Astro with [`nanostores`](https://github.com/nanostores/nanostores) + +This example showcases using [`nanostores`](https://github.com/nanostores/nanostores) to provide shared state between components from different frameworks. diff --git a/examples/with-nanostores/astro.config.mjs b/examples/with-nanostores/astro.config.mjs new file mode 100644 index 000000000..e16ed1327 --- /dev/null +++ b/examples/with-nanostores/astro.config.mjs @@ -0,0 +1,14 @@ +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' + }, +}; diff --git a/examples/with-nanostores/package.json b/examples/with-nanostores/package.json new file mode 100644 index 000000000..c1e35f87f --- /dev/null +++ b/examples/with-nanostores/package.json @@ -0,0 +1,18 @@ +{ + "name": "@astrojs/example-with-nanostores", + "version": "0.0.1", + "private": true, + "scripts": { + "start": "astro dev", + "build": "astro build" + }, + "devDependencies": { + "astro": "^0.15.1" + }, + "dependencies": { + "nanostores": "^0.3.3" + }, + "snowpack": { + "workspaceRoot": "../.." + } +} diff --git a/examples/with-nanostores/public/assets/logo.svg b/examples/with-nanostores/public/assets/logo.svg new file mode 100644 index 000000000..d751556b2 --- /dev/null +++ b/examples/with-nanostores/public/assets/logo.svg @@ -0,0 +1,12 @@ +<svg width="193" height="256" fill="none" xmlns="http://www.w3.org/2000/svg"> + <style> + #flame { fill: #FF5D01; } + #a { fill: #000014; } + @media (prefers-color-scheme: dark) { + #a { fill: #fff; } + } + </style> + + <path id="a" fill-rule="evenodd" clip-rule="evenodd" d="M131.496 18.929c1.943 2.413 2.935 5.67 4.917 12.181l43.309 142.27a180.277 180.277 0 00-51.778-17.53L99.746 60.56a3.67 3.67 0 00-7.042.01l-27.857 95.232a180.224 180.224 0 00-52.01 17.557l43.52-142.281c1.989-6.502 2.983-9.752 4.927-12.16a15.999 15.999 0 016.484-4.798c2.872-1.154 6.271-1.154 13.07-1.154h31.085c6.807 0 10.211 0 13.085 1.157a16 16 0 016.488 4.806z" fill="url(#paint0_linear)"/> + <path id="flame" fill-rule="evenodd" clip-rule="evenodd" d="M136.678 180.151c-7.14 6.105-21.39 10.268-37.804 10.268-20.147 0-37.033-6.272-41.513-14.707-1.602 4.835-1.962 10.367-1.962 13.902 0 0-1.055 17.355 11.016 29.426 0-6.268 5.081-11.349 11.349-11.349 10.743 0 10.731 9.373 10.721 16.977v.679c0 11.542 7.054 21.436 17.086 25.606a23.27 23.27 0 01-2.339-10.2c0-11.008 6.463-15.107 13.973-19.87 5.977-3.79 12.616-8.001 17.192-16.449a31.013 31.013 0 003.744-14.82c0-3.299-.513-6.479-1.463-9.463z" /> +</svg> diff --git a/examples/with-nanostores/public/favicon.svg b/examples/with-nanostores/public/favicon.svg new file mode 100644 index 000000000..542f90aec --- /dev/null +++ b/examples/with-nanostores/public/favicon.svg @@ -0,0 +1,11 @@ +<svg width="256" height="256" fill="none" xmlns="http://www.w3.org/2000/svg"> + <style> + #flame { fill: #FF5D01; } + #a { fill: #000014; } + @media (prefers-color-scheme: dark) { + #a { fill: #fff; } + } + </style> + <path id="a" fill-rule="evenodd" clip-rule="evenodd" d="M163.008 18.929c1.944 2.413 2.935 5.67 4.917 12.181l43.309 142.27a180.277 180.277 0 00-51.778-17.53l-28.198-95.29a3.67 3.67 0 00-7.042.01l-27.857 95.232a180.225 180.225 0 00-52.01 17.557l43.52-142.281c1.99-6.502 2.983-9.752 4.927-12.16a15.999 15.999 0 016.484-4.798c2.872-1.154 6.271-1.154 13.07-1.154h31.085c6.807 0 10.211 0 13.086 1.157a16.004 16.004 0 016.487 4.806z" /> + <path id="flame" fill-rule="evenodd" clip-rule="evenodd" d="M168.19 180.151c-7.139 6.105-21.39 10.268-37.804 10.268-20.147 0-37.033-6.272-41.513-14.707-1.602 4.835-1.961 10.367-1.961 13.902 0 0-1.056 17.355 11.015 29.426 0-6.268 5.081-11.349 11.349-11.349 10.743 0 10.731 9.373 10.721 16.977v.679c0 11.542 7.054 21.436 17.086 25.606a23.27 23.27 0 01-2.339-10.2c0-11.008 6.463-15.107 13.974-19.87 5.976-3.79 12.616-8.001 17.192-16.449a31.024 31.024 0 003.743-14.82c0-3.299-.513-6.479-1.463-9.463z" /> +</svg> diff --git a/examples/with-nanostores/public/robots.txt b/examples/with-nanostores/public/robots.txt new file mode 100644 index 000000000..1f53798bb --- /dev/null +++ b/examples/with-nanostores/public/robots.txt @@ -0,0 +1,2 @@ +User-agent: * +Disallow: / diff --git a/examples/with-nanostores/public/style/global.css b/examples/with-nanostores/public/style/global.css new file mode 100644 index 000000000..e1a3a6bd1 --- /dev/null +++ b/examples/with-nanostores/public/style/global.css @@ -0,0 +1,28 @@ +* { + box-sizing: border-box; + margin: 0; +} + +:root { + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; + font-size: 1rem; + --user-font-scale: 1rem - 16px; + font-size: clamp(0.875rem, 0.4626rem + 1.0309vw + var(--user-font-scale), 1.125rem); +} + +body { + padding: 4rem 2rem; + width: 100%; + min-height: 100vh; + display: grid; + justify-content: center; + background: #f9fafb; + color: #111827; +} + +@media (prefers-color-scheme: dark) { + body { + background: #111827; + color: #fff; + } +} diff --git a/examples/with-nanostores/public/style/home.css b/examples/with-nanostores/public/style/home.css new file mode 100644 index 000000000..c4271a845 --- /dev/null +++ b/examples/with-nanostores/public/style/home.css @@ -0,0 +1,38 @@ +:root { + --font-mono: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace; + --color-light: #F3F4F6; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-light: #1F2937; + } +} + +a { + color: inherit; +} + +header > div { + font-size: clamp(2rem, -0.4742rem + 6.1856vw, 2.75rem); +} + +header > div { + display: flex; + flex-direction: column; + align-items: center; +} + +header h1 { + font-size: 1em; + font-weight: 500; +} +header img { + width: 2em; + height: 2.667em; +} + +h2 { + font-weight: 500; + font-size: clamp(1.5rem, 1rem + 1.25vw, 2rem); +} diff --git a/examples/with-nanostores/src/components/AdminsPreact.jsx b/examples/with-nanostores/src/components/AdminsPreact.jsx new file mode 100644 index 000000000..93fecd878 --- /dev/null +++ b/examples/with-nanostores/src/components/AdminsPreact.jsx @@ -0,0 +1,29 @@ +import { h, Fragment } from 'preact'; +import { useStore } from 'nanostores/preact'; + +import { admins } from '../store/admins.js'; +import { counter, increaseCounter, decreaseCounter } from '../store/counter.js'; + +const AdminsPreact = () => { + const list = useStore(admins); + const count = useStore(counter); + + return ( + <> + <h1>Preact</h1> + <ul> + {list.map((user) => ( + <li key={user.name}>{JSON.stringify(user, null, 2)}</li> + ))} + </ul> + <div> + <h3>Counter</h3> + <p>{count}</p> + <button onClick={decreaseCounter}>-1</button> + <button onClick={increaseCounter}>+1</button> + </div> + </> + ); +}; + +export default AdminsPreact; diff --git a/examples/with-nanostores/src/components/AdminsReact.jsx b/examples/with-nanostores/src/components/AdminsReact.jsx new file mode 100644 index 000000000..a03df1f47 --- /dev/null +++ b/examples/with-nanostores/src/components/AdminsReact.jsx @@ -0,0 +1,29 @@ +import React from 'react'; +import { useStore } from 'nanostores/react'; + +import { admins } from '../store/admins.js'; +import { counter, increaseCounter, decreaseCounter } from '../store/counter.js'; + +const AdminsReact = () => { + const list = useStore(admins); + const count = useStore(counter); + return ( + <> + <h1>React</h1> + <ul> + {list.map((user) => ( + <li key={user.name}>{JSON.stringify(user, null, 2)}</li> + ))} + </ul> + <div> + <h3>Counter</h3> + <p>{count}</p> + <button onClick={decreaseCounter}>-1</button> + <button onClick={increaseCounter}>+1</button> + </div> + <br /> + </> + ); +}; + +export default AdminsReact; diff --git a/examples/with-nanostores/src/components/AdminsSvelte.svelte b/examples/with-nanostores/src/components/AdminsSvelte.svelte new file mode 100644 index 000000000..a98444b4f --- /dev/null +++ b/examples/with-nanostores/src/components/AdminsSvelte.svelte @@ -0,0 +1,24 @@ +<script> + import { getValue } from 'nanostores' + + import { users } from '../store/users.js'; + import { counter, increaseCounter, decreaseCounter } from '../store/counter.js'; + + const list = getValue(users).filter(user => user.isAdmin); +</script> + +<h1>Svelte</h1> +<ul> + {#each list as user} + <li>{JSON.stringify(user, null, 2)}</li> + {/each} +</ul> +<div> + <h3>Counter</h3> + <p>{$counter}</p> + <button on:click={decreaseCounter}>-1</button> + <button on:click={increaseCounter}>+1</button> +</div> +<br /> +<!-- Just to get rid of a warning --> +<slot /> diff --git a/examples/with-nanostores/src/components/AdminsVue.vue b/examples/with-nanostores/src/components/AdminsVue.vue new file mode 100644 index 000000000..68dcd2065 --- /dev/null +++ b/examples/with-nanostores/src/components/AdminsVue.vue @@ -0,0 +1,30 @@ +<template> + <h1>Vue</h1> + <ul> + <li v-for="user in list" :key="user.name"> + {{JSON.stringify(user, null, 2)}} + </li> + </ul> + <div> + <h3>Counter</h3> + <p>{{count}}</p> + <button @click="decreaseCounter">-1</button> + <button @click="increaseCounter">+1</button> + </div> + <br /> +</template> + +<script> + import { useStore } from 'nanostores/vue' + + import { admins } from '../store/admins.js' + import { counter, increaseCounter, decreaseCounter } from '../store/counter.js' + + export default { + setup() { + const list = useStore(admins) + const count = useStore(counter) + return { list, count, increaseCounter, decreaseCounter } + } + } +</script> diff --git a/examples/with-nanostores/src/pages/index.astro b/examples/with-nanostores/src/pages/index.astro new file mode 100644 index 000000000..3d7e1d4d6 --- /dev/null +++ b/examples/with-nanostores/src/pages/index.astro @@ -0,0 +1,44 @@ +--- +import AdminsReact from '../components/AdminsReact.jsx'; +import AdminsSvelte from '../components/AdminsSvelte.svelte'; +import AdminsVue from '../components/AdminsVue.vue'; +import AdminsPreact from '../components/AdminsPreact.jsx'; +--- + +<!doctype html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>Astro</title> + + <link rel="icon" type="image/svg+xml" href="/favicon.svg"> + + <link rel="stylesheet" href="/style/global.css"> + <link rel="stylesheet" href="/style/home.css"> + + <style> + header { + display: flex; + flex-direction: column; + gap: 1em; + max-width: min(100%, 68ch); + } + </style> +</head> +<body> + <main> + <header> + <div> + <img width="60" height="80" src="/assets/logo.svg" alt="Astro logo"> + <h1>Welcome to <a href="https://astro.build/">Astro</a> - + <a href="https://github.com/nanostores/nanostores">nanostores</a></h1> + </div> + </header> + <AdminsReact:load /> + <AdminsSvelte:load /> + <AdminsVue:load /> + <AdminsPreact:load /> + </main> +</body> +</html> diff --git a/examples/with-nanostores/src/store/admins.js b/examples/with-nanostores/src/store/admins.js new file mode 100644 index 000000000..91215470b --- /dev/null +++ b/examples/with-nanostores/src/store/admins.js @@ -0,0 +1,7 @@ +import { createDerived } from 'nanostores'; + +import { users } from './users.js'; + +const admins = createDerived(users, (list) => list.filter((user) => user.isAdmin)); + +export { admins }; diff --git a/examples/with-nanostores/src/store/counter.js b/examples/with-nanostores/src/store/counter.js new file mode 100644 index 000000000..a57d8e2c3 --- /dev/null +++ b/examples/with-nanostores/src/store/counter.js @@ -0,0 +1,15 @@ +import { createStore, getValue } from 'nanostores'; + +const counter = createStore(() => { + counter.set(0); +}); + +function increaseCounter() { + counter.set(getValue(counter) + 1); +} + +function decreaseCounter() { + counter.set(getValue(counter) - 1); +} + +export { counter, increaseCounter, decreaseCounter }; diff --git a/examples/with-nanostores/src/store/users.js b/examples/with-nanostores/src/store/users.js new file mode 100644 index 000000000..719f75cd1 --- /dev/null +++ b/examples/with-nanostores/src/store/users.js @@ -0,0 +1,27 @@ +import { createStore, getValue } from 'nanostores'; + +const users = createStore(() => { + users.set([ + { + name: 'Imanadmin', + age: 2, + isAdmin: true, + }, + { + name: 'Imnotadmin', + age: 35, + isAdmin: false, + }, + { + name: 'Wowsomuchadmin', + age: 3634, + isAdmin: true, + }, + ]); +}); + +const addUser = function addUser(user) { + users.set([...getValue(users), user]); +}; + +export { users, addUser }; |
