Added example of Astro usage with nanostores (#539)

* Adding astro-nanostores example

* Changed package name and removed lock file

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

examples/astro-nanostores/.npmrc

@@ -0,0 +1,2 @@
+## force pnpm to hoist 
+shamefully-hoist = true

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).

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'
+  },
+};

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"
+  }
+}

examples/astro-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>

examples/astro-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>

examples/astro-nanostores/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /

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;
+  }
+}

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);
+}

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 (
+    <>
+      <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

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 (
+    <>
+      <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;

examples/astro-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 />

examples/astro-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>

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';
+---
+
+<!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>

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
+}

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
+}

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
+}