More examples?

[markpinero]

Hi,

I'm confused as to utilizing nanostores with persistent. Can we get more examples on more complex use cases?

[ai]

Give me some use cases, so will be able to show more scenarios.

[markpinero]

For my use case, I'd like to save a user's shopping cart to the store and then save it to local storage. On reload, I would get from local storage first to populate the store.

[ai]

We have a shopping card example here https://github.com/nanostores/nanostores#persistent

Do you need information about store update and usage? It is a normal store and you can use as it was described https://github.com/nanostores/nanostores#integration

[AndreiEres]

I'd like to have more examples for stores testing.

[marcusstenbeck]

It would be great to have the classic Todo app as reference.

[braebo]

I'm personally struggling to understand how the MapTemplate works. The example is brief and leaves me with many questions. For example, it's unclear to me how I to simply add a complex object entry to a MapTemplate store with optional default values, then subscribe to changes of that particular entry. Perhaps this is a shortcoming on my end due to how different the mental model is (I'm coming from a Svelte stores background where I can append to an array or add an entry to an object). I think the examples could cover the wide range of operations and how to use them.

[ai]

@fractalhq honestly, MapTemplate is a very semi-private store type, which I need for specific need in Logux client.

I am using it to create some sort of ORM models, and it is a very advanced level of using Nano Stores. Regular apps should use just atom and map. You will need MapTemplate only to create libraries on top of Nano Stores.

This is why I am not sure that I will be able to document it in an easy-to-use way.

What is your use case? Should we add a note that most users should just use atom and map?

[JEricaM]

I'm having difficulties to understand how to use persistentMap with nanostore actions so I can initialize my persistent store from a fetch.

For example, right now I have my store like this

export const currentUserState = map<currentUserState>({
    userName: undefined,
    userId: undefined,
    logged: undefined,
    apiKey: undefined,
    userEmail: undefined,
    tenant: undefined,
});


export const checkIfLogged = action(currentUserState,'checkIfLogged', (store) => {
        const userFetch = APIAuthController.whoAmI();
        Promise.all([userFetch]).then(([result]) => {
        let data = result.parsedBody.data;
         store.setKey('userName',data.name);
});

I'm trying to change currentUserState with persistency so I wrote

export const currentuser = persistentMap<currentUserState>('currentuser:', {
    userName: '',
    userId: '',
    logged: '',
    apiKey: '',
    userEmail: '',
    tenant: ''

});

but, if I pass currentuser to the action() method instead of the previous currentUserState , I have an error that says

The argument of type 'MapStore' is not assignable to parameter of type 'WritableStore'.

I don't understand how nanostore and persistency works together.
I think that is the same doubt of @markpinero and @fractalhq

[braebo]

Regular apps should use just atom and map. You will need MapTemplate only to create libraries on top of Nano Stores.

Ah ok! I think the README is a bit misleading in initial description:

Map templates was created for similar stores like for the store for each post in the blog where you have many posts.

This makes it seem like the map templates should be used with any array of similar objects.

[ai]

Ah ok! I think the README is a bit misleading in initial description:

Hope these docs changes fix misleading a little bf564db

[dsomel21]

Hard agree on the TODO app example.

Everything in the README is going over my head :(

[miketests]

Is it possible to access and manipulate Nanostores data from outside of the component in Lit just like with usual props?

Create typical prop in the component:

// my-element.ts
@customElement('my-element')
export class MyElement extends LitElement {
  @property({type: Number})
  aNumber: number = 5;
  /* ... */
}

declare global {
  interface HTMLElementTagNameMap {
    "my-element": MyElement;
  }
}

Then access and change it's value in the document:

// index.html
const myElement = document.createElement('my-element');
myElement.aNumber = 10;

---

The same with Nanostores

// stores/counter.ts
import { atom } from 'nanostores'
export const counter = atom(0)

// my-element.ts
import { LitElement, css, html } from 'lit'
import { customElement, property } from 'lit/decorators.js'
import { useStores } from "@nanostores/lit"
import { counter } from './stores/counter'

@customElement('my-element')
@useStores(counter)
export class MyElement extends LitElement {
  render() {
    return html`<div>${counter.get()}</div>`
  }
}

declare global {
  interface HTMLElementTagNameMap {
    "my-element": MyElement;
  }
}

// index.html
const myElement = document.createElement('my-element');
myElement. // <== How to access Nanostores data here ??

[ai]

myElement. // <== How to access Nanostores data here ??

You need to access to store:

import { counter } from './stores/counter'

counter.set(10)

[miketests]

@ai thank you for the example but it is not exactly what I need.
I am looking for possibility to access the store after project was built already.

For example in Lit I can change standard component properties like that by accessing it in the document:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="module" crossorigin src="/dist/bundle.js"></script>
  </head>
  <body>
    <my-element></my-element>
    <script>
       const myElement = document.createElement('my-element');
       myElement.counter = 10;
    </script>
  </body>
</html>

Is it possible to do the same with Nanostores?

[ai]

Is it possible to do the same with Nanostores?

There is no built-in method and we do not plan to have it (because it is costly, rare to use, and easy to do manually).

For instance, you can do something like:

import { counter } from './stores/counter'

globalThis.counter = counter

And then:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="module" crossorigin src="/dist/bundle.js"></script>
  </head>
  <body>
    <my-element></my-element>
    <script>
       window.counter.set(10);
    </script>
  </body>
</html>

Or you can check Lit API to add property on a component’s object.