.torx Comments - Answer Overflow

module.exports = defineConfig({
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/index.ts'),
      name: 'solidjs',
      fileName: 'solidjs'
    }
  },
  plugins: [dts({
    insertTypesEntry: true
  }), solidPlugin()],
});

module.exports = defineConfig({
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/index.ts'),
      name: 'solidjs',
      fileName: 'solidjs'
    }
  },
  plugins: [dts({
    insertTypesEntry: true
  }), solidPlugin()],
});

It's my first non vanilla library, why should I exclude solid ?

39 replies

SSolidJS

•Created by .torx on 2/10/2023 in #support

How to preserve reactivity in a multilevel object stored in a nanostore map ?

My other solid related logic works, so it must be bundled

39 replies

SSolidJS

•Created by .torx on 2/10/2023 in #support

How to preserve reactivity in a multilevel object stored in a nanostore map ?

Let me recontextualize, I created nanostores in a library to handle some logic shared between every websites we develop library/core. This library is used by a second library that handle framework specificity : library/solidjs, library/react, etc. In my final project, I install "library/core" and library/solidjs, and Creates a component that need the cart store. The problem is, I must also install @nanostores/solid to read the store via useStore, which, you'r right, creates a solid store. When I use useStore inside my component, it works well, no problem about it. But, I don't want to tell people they will need to install @nanostores/solid to use the logic inside my library, I'd prefer to have a function in library/solidjs that would return the return value of useStore, but if I do it, I loose the reactivity.

39 replies

SSolidJS

•Created by .torx on 2/10/2023 in #support

How to preserve reactivity in a multilevel object stored in a nanostore map ?

So, it's impossible to use a hook between useStore and a component ?

39 replies

SSolidJS

•Created by .torx on 2/10/2023 in #support

How to preserve reactivity in a multilevel object stored in a nanostore map ?

Like that ?

export const useCart = () => {
  return {
    get items() { return useStore(getCartItems)}
  }
}

export const useCart = () => {
  return {
    get items() { return useStore(getCartItems)}
  }
}

39 replies

SSolidJS

•Created by .torx on 2/10/2023 in #support

How to preserve reactivity in a multilevel object stored in a nanostore map ?

Same as the rest, I really think the problem is in the useCart function but I don't get what

39 replies

SSolidJS

•Created by .torx on 2/10/2023 in #support

How to preserve reactivity in a multilevel object stored in a nanostore map ?

It doesn't work, (don't even gets the initial value)

39 replies

SSolidJS

•Created by .torx on 2/10/2023 in #support

How to preserve reactivity in a multilevel object stored in a nanostore map ?

By "doesn't works" I mean it gets the initial value, but loose reactivity

39 replies

SSolidJS

•Created by .torx on 2/10/2023 in #support

How to preserve reactivity in a multilevel object stored in a nanostore map ?

I don't think the problem is from the .values(), otherwise using the useStore function wouldn't work either, it is like the useCart function makes solid lost the track of the signal.

const CartItem = () => {
  const $items = useStore(getCartItems)
  const $total = useStore(getCartTotal)

  // It doesn't work either with useCart destructuring.
  const [items, rest] = splitProps(useCart(), ['items'])

  return (
    <div>
      <h1 class="text-3xl bold pb-6">{$total()}</h1>

      // This doesn't works.
      <div class="pb-2">
        <h1>useCart Items</h1>
        
        <For each={Object.values(items.items())}>
            {(item) => (
              <span><b>id</b>{item.id}, <b>quantity</b>: {item.quantity}</span>
            )}
        </For>

        <p>{items.items()[1].quantity}</p>
      </div>

      // this works
      <div class="pb-2">
        <h1>useStore Items</h1>
        <For each={Object.values($items())}>
            {(item) => (
              <span><b>id</b>{item.id}, <b>quantity</b>: {item.quantity}</span>
            )}
        </For>
      </div>
    </div>
  )
}

const CartItem = () => {
  const $items = useStore(getCartItems)
  const $total = useStore(getCartTotal)

  // It doesn't work either with useCart destructuring.
  const [items, rest] = splitProps(useCart(), ['items'])

  return (
    <div>
      <h1 class="text-3xl bold pb-6">{$total()}</h1>

      // This doesn't works.
      <div class="pb-2">
        <h1>useCart Items</h1>
        
        <For each={Object.values(items.items())}>
            {(item) => (
              <span><b>id</b>{item.id}, <b>quantity</b>: {item.quantity}</span>
            )}
        </For>

        <p>{items.items()[1].quantity}</p>
      </div>

      // this works
      <div class="pb-2">
        <h1>useStore Items</h1>
        <For each={Object.values($items())}>
            {(item) => (
              <span><b>id</b>{item.id}, <b>quantity</b>: {item.quantity}</span>
            )}
        </For>
      </div>
    </div>
  )
}

I don't really understand why deriving the signal doesn't work in that situation,

39 replies

SSolidJS

•Created by .torx on 2/10/2023 in #support

How to preserve reactivity in a multilevel object stored in a nanostore map ?

Should I use the splitProps function ?

39 replies

SSolidJS

•Created by .torx on 2/10/2023 in #support

How to preserve reactivity in a multilevel object stored in a nanostore map ?

(<div class="pb-2">
  <h1>lib</h1>
  <For each={Object.values(useCart().items())}>
    {(item) => (
      <span><b>id</b>{item.id}, <b>quantity</b>: {item.quantity}</span>
    )}
  </For>
</div>)

(<div class="pb-2">
  <h1>lib</h1>
  <For each={Object.values(useCart().items())}>
    {(item) => (
      <span><b>id</b>{item.id}, <b>quantity</b>: {item.quantity}</span>
    )}
  </For>
</div>)

39 replies

SSolidJS

•Created by .torx on 2/10/2023 in #support

How to preserve reactivity in a multilevel object stored in a nanostore map ?

Reactivity is lost like the other exemples,

39 replies

SSolidJS

•Created by .torx on 2/10/2023 in #support

How to preserve reactivity in a multilevel object stored in a nanostore map ?

Thanks, 1) is solved! any idea about the 2) ?

39 replies

Gaming

Programming