-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
11 changed files
with
1,743 additions
and
265 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| <template> | ||
| <div id="view"> | ||
| <logo /> | ||
| <with-stores v-if="isStoresMounted" /> | ||
| <button @click="executeTest"> | ||
| Execute Test | ||
| </button> | ||
| <button @click="toggleStores"> | ||
| {{ isStoresMounted ? 'Unmount' : 'Mount' }} Stores | ||
| </button> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script lang="ts" setup> | ||
| import { ref } from 'vue'; | ||
| import Logo from './Logo.vue' | ||
| import WithStores from './WithStores.vue'; | ||
| import { run } from '../stores.js' | ||
| const isStoresMounted = ref(false) | ||
| function executeTest() { | ||
| run() | ||
| } | ||
| function toggleStores() { | ||
| isStoresMounted.value = !isStoresMounted.value | ||
| } | ||
| </script> | ||
|
|
||
| <style scoped> | ||
| #view { | ||
| display: grid; | ||
| gap: 1rem; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| <template> | ||
| <svg id="logo" xmlns="http://www.w3.org/2000/svg" width="200" height="200"> | ||
| <path id="p" d="M107.785 154 48.8 112.698 83.353 99.22l50.559 35.401L107.785 154ZM92.415 46l58.984 41.302-34.553 13.478-50.559-35.4L92.414 46Z"/> | ||
| </svg> | ||
| </template> | ||
|
|
||
| <style scoped> | ||
| #logo { | ||
| #p { | ||
| fill: #000; | ||
| } | ||
| @media (prefers-color-scheme: dark) { | ||
| #p { | ||
| fill: #fff; | ||
| } | ||
| } | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| <template></template> | ||
|
|
||
| <script lang="ts" setup> | ||
| import { useStore } from '../../use-store'; | ||
| import { $atom, $map, $deepMap } from '../stores.js' | ||
| const atom = useStore($atom) | ||
| const map = useStore($map) | ||
| const deepMap = useStore($deepMap) | ||
| </script> | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>Nano Stores Demo</title> | ||
| <style> | ||
| html { | ||
| height: 100%; | ||
| } | ||
| body { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| min-height: 100%; | ||
| margin: 0; | ||
| background: #fff; | ||
| } | ||
| @media (prefers-color-scheme: dark) { | ||
| body { | ||
| background: #000; | ||
| } | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div id="app"></div> | ||
| <script type="module" src="./index.ts"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| import { createApp } from "vue"; | ||
|
|
||
| import App from "./components/App.vue"; | ||
|
|
||
| import { devtools } from "../devtools"; | ||
| import { $atom, $deepMap, $map } from "./stores"; | ||
|
|
||
| const app = createApp(App) | ||
|
|
||
| app.use(devtools, { | ||
| $atom, | ||
| $map, | ||
| $deepMap | ||
| }) | ||
|
|
||
| app.mount('#app') |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| import { delay } from 'nanodelay' | ||
| import { atom, deepMap, map, STORE_UNMOUNT_DELAY } from 'nanostores' | ||
|
|
||
| export let $atom = atom() | ||
| export let $map = map({ | ||
| artworks: 213, | ||
| fullname: 'Nikolay Suetin', | ||
| id: 'A10', | ||
| username: 'suetin' | ||
| }) | ||
| export let $deepMap = deepMap<{ | ||
| artists: { | ||
| [key: string]: { | ||
| artworks: string[] | ||
| movement: null | string | ||
| } | ||
| } | ||
| }>({ | ||
| artists: { | ||
| malevich: { | ||
| artworks: ['Black Square'], | ||
| movement: null | ||
| } | ||
| } | ||
| }) | ||
|
|
||
| export async function run(): Promise<void> { | ||
| let unbindAtom = $atom.listen(() => {}) | ||
| $atom.set(100) | ||
| $atom.set(101) | ||
| $atom.set(Number($atom.get()) + 1) | ||
| $atom.set(Number($atom.get()) + 1) | ||
| $atom.set(Number($atom.get()) + 1) | ||
| unbindAtom() | ||
| await delay(STORE_UNMOUNT_DELAY + 10) | ||
|
|
||
| $map.setKey('artworks', 303) | ||
|
|
||
| await delay(STORE_UNMOUNT_DELAY) | ||
| $map.setKey('username', 'chashnik') | ||
| $map.setKey('fullname', 'Ilya Chashnik') | ||
|
|
||
| await delay(STORE_UNMOUNT_DELAY) | ||
| $map.setKey('username', 'malevich') | ||
| $map.setKey('fullname', 'Kazimir Malevich') | ||
|
|
||
| $deepMap.setKey('artists.malevich.movement', 'Suprematism') | ||
|
|
||
| let artworks = ['White on White', 'Suprematist Composition', 'Black Circle'] | ||
| for (let item of artworks) { | ||
| await delay(100) | ||
| let index = $deepMap.get().artists.malevich.artworks.length | ||
| $deepMap.setKey(`artists.malevich.artworks[${index}]`, item) | ||
| } | ||
| await delay(STORE_UNMOUNT_DELAY + 10) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| import { defineConfig } from "vite"; | ||
| import vue from "@vitejs/plugin-vue"; | ||
| import vueDevTools from 'vite-plugin-vue-devtools' | ||
|
|
||
| export default defineConfig({ | ||
| plugins: [ | ||
| vue(), | ||
| vueDevTools() | ||
| ] | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.