hybridsjs / hybrids

Extraordinary JavaScript UI framework with unique declarative and functional architecture
https://hybrids.js.org
MIT License
3.03k stars 85 forks source link

Cannot pass an object to the API via the "list" method #252

Closed Qsppl closed 4 months ago

Qsppl commented 5 months ago

Cannot pass an object to the API via the "list" method (example) as shown in the documentation:

const Movie = {
  id: true,
  [store.connect] : {
    // first argument is `undefined`! 
    list: ({ query, year }) => movieApi.search({ query, year }),
  },
};

define({
  tag: "movie-list",
  movies: store([Movie], (host) => ({ query: "", year: 2020 })),
});

It looks like this is a bug or the documentation is outdated.

smalluban commented 5 months ago

Passing a function as a second argument was removed in V7 - https://hybrids.js.org/#/migration?id=identifier. Docs should be updated. Good point.

The TS types are fine.

Use { id: () => ... }

smalluban commented 5 months ago

I was wrong (looking at the docs on my phone). The docs are correct:

store(Model: object, options?: { id?: any | (host) => any, draft?: boolean }): object

Please read docs carefully.

Qsppl commented 4 months ago

This use case doesn't work either: https://codepen.io/qsppl/pen/oNOyJwP?editors=1010

const Movie = {
  id: true,
  [store.connect] : {
    // first argument is `string`
    // but we are expecting an `object`
    list: ({ query, year }) => movieApi.search({ query, year }),
  },
};

define({
  tag: "movie-list",
  movies: store([Movie], (host) => ({ query: "", year: 2020 })),
});
smalluban commented 4 months ago

Of course, it doesn't. The second argument of the store factory is the options object, not a function.

Qsppl commented 4 months ago

Sorry, I made a mistake in the example.

I passed an options object to the second argument of the store, where the parameter "id" is a function and I expect the result of executing that function to be passed to [store.connect].list, but the string was passed: "object Object".

Example: https://codepen.io/qsppl/pen/oNOyJwP?editors=1010

const Movie = {
  id: true,
  [store.connect] : {
    // first argument is `string`
    // but we are expecting an `object`
    list: ({ query, year }) => movieApi.search({ query, year }),
  },
};

define({
  tag: "movie-list",
  movies: store([Movie], { id: (host) => ({ query: "", year: 2020 }) }),
});
smalluban commented 4 months ago

Can you try with 8.2.19? I think when fixing passing numbers I added a string transform, now it's gone.

Qsppl commented 4 months ago

Yes, everything works on version 8.2.19. Thank you.