Closed Qsppl closed 5 months ago
I don't have time to check every TS error (from all of your issues) - can you confirm if the problem is solved by using TS v4
?
FYI: https://github.com/hybridsjs/hybrids/issues/236#issuecomment-2009222885
Update: In the first case, this is my mistake. I shouldn't have written
function toggleEdit(host: ISecondComponent) {
host.editMode = true
host.draft = host.model
host.content().querySelector('input').focus()
}
but
function toggleEdit(host: Component<ISecondComponent>) {
host.editMode = true
host.draft = host.model
host.content?.(host).querySelector('input').focus()
}
result:
import { Model, define, html, store, Component } from "https://esm.sh/hybrids@8.2.11"
export interface IModel {
prop1: number
}
export const ModelStore: Model<IModel> = {
id: true,
prop1: 1
}
function toggleEdit(host: Component<ISecondComponent>) {
host.editMode = true
host.draft = host.model
host.content?.(host).querySelector('input').focus()
}
export interface ISecondComponent extends HTMLElement {
model: IModel
draft: IModel
editMode: boolean
}
export default define<ISecondComponent>({
tag: "a-second",
model: store(ModelStore),
draft: store(ModelStore, { draft: true }),
editMode: {
get: (host, lastValue) => !host.model || lastValue,
set: (host, value, lastValue) => value,
},
content: ({ draft, model, editMode }) => html`
${editMode ? html`
<form>
<input value="${draft.prop1}" oninput="${html.set(draft, 'prop1')}" />
<button type="submit">Save</button>
</form>
` : html`
${store.ready(model) && html`<div>${model.prop1}</div>`}
<div><button onclick="${toggleEdit}">Edit</button></div>
`}
`
})
With this fix on typescript 4.9.5, another error appears in the same place:
Update your example with (it fixes the TS errors):
function toggleEdit(host: ISecondComponent) {
host.editMode = true;
host.draft = host.model;
host.content().querySelector("input")?.focus();
}
export interface ISecondComponent extends HTMLElement {
model: IModel;
draft: IModel;
editMode: boolean;
content: () => ISecondComponent;
}
The argument of the toogleEdit
is ISecondComponent
, not Component<...>
- this would be a definition, not an instance.
And if you want to use content
or render
directly, you must define those properties too in ISecondComponent
, like you do for the rest of the properites.
Thank you. This solved the problem.
message:
tsconfig.json
typescript version: "5.1.6"