hybridsjs / hybrids

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

'"hybrids"' has no exported member named 'property'. Did you mean 'Property'? #245

Closed JiaJasonLiu closed 7 months ago

JiaJasonLiu commented 7 months ago

I am using Typescript and started using the Hybrids framework recently. I have been searching through the web and it seems that it I want to pass a prop to my component, I need the property function to state what type it is.

Screenshot 2024-03-22 at 16 26 12

Is there a workaround this because I can't seem to be able to use props with hybrids?

Thank you!

JiaJasonLiu commented 7 months ago

Furthermore, I am interpreting a template literal as an HTML template using html`` in typescript. Does this influence how data could be passed through?

smalluban commented 7 months ago

Hi @JiaJasonLiu! Welcome here. I strongly suggest to start with reading the official documentation. Each section has own Typescript page, with describes how to use it with TS.

https://hybrids.js.org

Hybrids a long time ago had a property export, but no more :)

JiaJasonLiu commented 7 months ago

Yes, thank you. (in typescript) <simple-count count="hello"><simple-count> I see that for instance for the simpleCounter type: when count is set as 0, it uses as 0. However, if I set it as undefined, it goes back to "hello" Is there a way to check if it is set beforehand

EDITED: But weird, when I try with strings, it doesn't work

I just want to ASK: Can I have to pass in the props? Or do I have to use the store?

smalluban commented 7 months ago

Code example would be helpful, I am not sure what you mean.

Still, I encourage you to read docs carefully - there is a section, which describes how to define simple properties: https://hybrids.js.org/#/component-model/structure?id=primitives

What you can learn there, is that properties defined as primitives protects the type, so if you set count to 'hello' it then is translated to a number: Number("hello").

Qsppl commented 7 months ago

@JiaJasonLiu We will answer in more detail if you send an example of the problem you are trying to solve.

JiaJasonLiu commented 7 months ago

@Qsppl I figured out some of the other stuff thank you.

One question: I am defining an object as a prop to pass into hybridjs component called session

sessionUser= { id: string lastLogin : number }

passing that into my table `

`


interface Table {
  session: sessionUser[] | string;
}

async function gettingThings(host: any): Promise<string> {
  console.log('getting table', host.session)
  ...
}

export default define<Table>({
  tag: 'user-table',
  session: "undefined",
  user: {
      get: async host => await gettingThings(host),
    },
  render: ({ session}) =>
    html`<p>what is ${session}</p> `,

what I get in the logs are getting table [object Object] (which is just a string) and this Screenshot 2024-03-25 at 12 46 09 So, I can't use it.

What are the whys that I can get objects as a prop?

Thank you!

JiaJasonLiu commented 7 months ago

Nevermind: fixed it

Problem with my setup

Qsppl commented 7 months ago

Fine. Please ask in the future if other questions arise.