From 81c01d121ff64210882eb491143266f35cead895 Mon Sep 17 00:00:00 2001 From: Agustin Mulet <31162600+agustinmulet@users.noreply.github.com> Date: Thu, 24 Jun 2021 19:39:17 -0300 Subject: [PATCH] Added example of Astro usage with nanostores (#539) * Adding astro-nanostores example * Changed package name and removed lock file --- examples/astro-nanostores/.gitignore | 18 ++++++++ examples/astro-nanostores/.npmrc | 2 + examples/astro-nanostores/README.md | 40 +++++++++++++++++ examples/astro-nanostores/astro.config.mjs | 14 ++++++ examples/astro-nanostores/package.json | 15 +++++++ .../astro-nanostores/public/assets/logo.svg | 12 +++++ examples/astro-nanostores/public/favicon.svg | 11 +++++ examples/astro-nanostores/public/robots.txt | 2 + .../astro-nanostores/public/style/global.css | 28 ++++++++++++ .../astro-nanostores/public/style/home.css | 38 ++++++++++++++++ .../src/components/AdminsPreact.jsx | 27 ++++++++++++ .../src/components/AdminsReact.jsx | 27 ++++++++++++ .../src/components/AdminsSvelte.svelte | 24 ++++++++++ .../src/components/AdminsVue.vue | 30 +++++++++++++ .../astro-nanostores/src/pages/index.astro | 44 +++++++++++++++++++ examples/astro-nanostores/src/store/admins.js | 11 +++++ .../astro-nanostores/src/store/counter.js | 19 ++++++++ examples/astro-nanostores/src/store/users.js | 30 +++++++++++++ 18 files changed, 392 insertions(+) create mode 100644 examples/astro-nanostores/.gitignore create mode 100644 examples/astro-nanostores/.npmrc create mode 100644 examples/astro-nanostores/README.md create mode 100644 examples/astro-nanostores/astro.config.mjs create mode 100644 examples/astro-nanostores/package.json create mode 100644 examples/astro-nanostores/public/assets/logo.svg create mode 100644 examples/astro-nanostores/public/favicon.svg create mode 100644 examples/astro-nanostores/public/robots.txt create mode 100644 examples/astro-nanostores/public/style/global.css create mode 100644 examples/astro-nanostores/public/style/home.css create mode 100644 examples/astro-nanostores/src/components/AdminsPreact.jsx create mode 100644 examples/astro-nanostores/src/components/AdminsReact.jsx create mode 100644 examples/astro-nanostores/src/components/AdminsSvelte.svelte create mode 100644 examples/astro-nanostores/src/components/AdminsVue.vue create mode 100644 examples/astro-nanostores/src/pages/index.astro create mode 100644 examples/astro-nanostores/src/store/admins.js create mode 100644 examples/astro-nanostores/src/store/counter.js create mode 100644 examples/astro-nanostores/src/store/users.js diff --git a/examples/astro-nanostores/.gitignore b/examples/astro-nanostores/.gitignore new file mode 100644 index 000000000..d436c6dad --- /dev/null +++ b/examples/astro-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/astro-nanostores/.npmrc b/examples/astro-nanostores/.npmrc new file mode 100644 index 000000000..0cc653b2c --- /dev/null +++ b/examples/astro-nanostores/.npmrc @@ -0,0 +1,2 @@ +## force pnpm to hoist +shamefully-hoist = true \ No newline at end of file diff --git a/examples/astro-nanostores/README.md b/examples/astro-nanostores/README.md new file mode 100644 index 000000000..ad3eab67e --- /dev/null +++ b/examples/astro-nanostores/README.md @@ -0,0 +1,40 @@ +# Welcome to [Astro](https://astro.build) - [nanostores](https://github.com/nanostores/nanostores) + +This is a test of a shared store between components from different frameworks/libs using [nanostores](https://github.com/nanostores/nanostores). + +## πŸš€ Project Structure + +Inside of your Astro project, you'll see the following folders and files: + +``` +/ +β”œβ”€β”€ public/ +β”‚ β”œβ”€β”€ robots.txt +β”‚ └── favicon.ico +β”œβ”€β”€ src/ +β”‚ β”œβ”€β”€ components/ +β”‚ β”‚ └── Tour.astro +β”‚ └── pages/ +β”‚ └── index.astro +└── package.json +``` + +Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name. + +There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components. + +Any static assets, like images, can be placed in the `public/` directory. + +## 🧞 Commands + +All commands are run from the root of the project, from a terminal: + +| Command | Action | +|:----------------|:--------------------------------------------| +| `npm install` | Installs dependencies | +| `npm run start` | Starts local dev server at `localhost:3000` | +| `npm run build` | Build your production site to `./dist/` | + +## πŸ‘€ Want to learn more? + +Feel free to check [our documentation](https://github.com/snowpackjs/astro) or jump into our [Discord server](https://astro.build/chat). diff --git a/examples/astro-nanostores/astro.config.mjs b/examples/astro-nanostores/astro.config.mjs new file mode 100644 index 000000000..e16ed1327 --- /dev/null +++ b/examples/astro-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/astro-nanostores/package.json b/examples/astro-nanostores/package.json new file mode 100644 index 000000000..d3248403b --- /dev/null +++ b/examples/astro-nanostores/package.json @@ -0,0 +1,15 @@ +{ + "name": "@astrojs/with-nanostores", + "version": "0.0.1", + "private": true, + "scripts": { + "start": "astro dev", + "build": "astro build" + }, + "devDependencies": { + "astro": "^0.14.0" + }, + "dependencies": { + "nanostores": "^0.3.3" + } +} diff --git a/examples/astro-nanostores/public/assets/logo.svg b/examples/astro-nanostores/public/assets/logo.svg new file mode 100644 index 000000000..d751556b2 --- /dev/null +++ b/examples/astro-nanostores/public/assets/logo.svg @@ -0,0 +1,12 @@ + + + + + + diff --git a/examples/astro-nanostores/public/favicon.svg b/examples/astro-nanostores/public/favicon.svg new file mode 100644 index 000000000..542f90aec --- /dev/null +++ b/examples/astro-nanostores/public/favicon.svg @@ -0,0 +1,11 @@ + + + + + diff --git a/examples/astro-nanostores/public/robots.txt b/examples/astro-nanostores/public/robots.txt new file mode 100644 index 000000000..1f53798bb --- /dev/null +++ b/examples/astro-nanostores/public/robots.txt @@ -0,0 +1,2 @@ +User-agent: * +Disallow: / diff --git a/examples/astro-nanostores/public/style/global.css b/examples/astro-nanostores/public/style/global.css new file mode 100644 index 000000000..e1a3a6bd1 --- /dev/null +++ b/examples/astro-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/astro-nanostores/public/style/home.css b/examples/astro-nanostores/public/style/home.css new file mode 100644 index 000000000..c4271a845 --- /dev/null +++ b/examples/astro-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/astro-nanostores/src/components/AdminsPreact.jsx b/examples/astro-nanostores/src/components/AdminsPreact.jsx new file mode 100644 index 000000000..6c4a126ea --- /dev/null +++ b/examples/astro-nanostores/src/components/AdminsPreact.jsx @@ -0,0 +1,27 @@ +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 ( + <> +

Preact

+ +
+

Counter

+

{count}

+ + +
+ + ); +} + +export default AdminsPreact \ No newline at end of file diff --git a/examples/astro-nanostores/src/components/AdminsReact.jsx b/examples/astro-nanostores/src/components/AdminsReact.jsx new file mode 100644 index 000000000..4feb8c0fd --- /dev/null +++ b/examples/astro-nanostores/src/components/AdminsReact.jsx @@ -0,0 +1,27 @@ +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 ( + <> +

React

+ +
+

Counter

+

{count}

+ + +
+
+ + ); +} + +export default AdminsReact; \ No newline at end of file diff --git a/examples/astro-nanostores/src/components/AdminsSvelte.svelte b/examples/astro-nanostores/src/components/AdminsSvelte.svelte new file mode 100644 index 000000000..a98444b4f --- /dev/null +++ b/examples/astro-nanostores/src/components/AdminsSvelte.svelte @@ -0,0 +1,24 @@ + + +

Svelte

+ +
+

Counter

+

{$counter}

+ + +
+
+ + diff --git a/examples/astro-nanostores/src/components/AdminsVue.vue b/examples/astro-nanostores/src/components/AdminsVue.vue new file mode 100644 index 000000000..68dcd2065 --- /dev/null +++ b/examples/astro-nanostores/src/components/AdminsVue.vue @@ -0,0 +1,30 @@ + + + diff --git a/examples/astro-nanostores/src/pages/index.astro b/examples/astro-nanostores/src/pages/index.astro new file mode 100644 index 000000000..3d7e1d4d6 --- /dev/null +++ b/examples/astro-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'; +--- + + + + + + + Astro + + + + + + + + + +
+
+
+ Astro logo +

Welcome to Astro - + nanostores

+
+
+ + + + +
+ + diff --git a/examples/astro-nanostores/src/store/admins.js b/examples/astro-nanostores/src/store/admins.js new file mode 100644 index 000000000..6a0846dfe --- /dev/null +++ b/examples/astro-nanostores/src/store/admins.js @@ -0,0 +1,11 @@ +import { createDerived } from 'nanostores' + +import { users } from './users.js' + +const admins = createDerived(users, list => + list.filter(user => user.isAdmin) +) + +export { + admins +} \ No newline at end of file diff --git a/examples/astro-nanostores/src/store/counter.js b/examples/astro-nanostores/src/store/counter.js new file mode 100644 index 000000000..90cecd560 --- /dev/null +++ b/examples/astro-nanostores/src/store/counter.js @@ -0,0 +1,19 @@ +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 +} \ No newline at end of file diff --git a/examples/astro-nanostores/src/store/users.js b/examples/astro-nanostores/src/store/users.js new file mode 100644 index 000000000..af517e7ad --- /dev/null +++ b/examples/astro-nanostores/src/store/users.js @@ -0,0 +1,30 @@ +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 +} \ No newline at end of file