Typescript definition changes and explaining Sinuous internals #114
Conversation
| @@ -11,31 +11,34 @@ declare namespace _h { | |||
| Record<string, unknown> | |||
| | null, | |||
| ...children: ElementChildren[] | |||
| ): HTMLElement; | |||
| ): HTMLElement | SVGElement; | |||
There was a problem hiding this comment.
We merged this file earlier in my ts-work branch but really I'm lying to people to say it's only HTMLElement in h/index.d.ts - It's true that later on in src/index.d.ts and jsx/index.d.ts the types are redefined to be more narrow, but until then it's good to define the reviver as generic for both HTML/SVG
| property(el: Node, value: unknown, name: string, isAttr?: boolean, isCss?: boolean): void; | ||
| add(parent: Node, value: Node | string, endMark?: Node): Node; | ||
| add(parent: Node, value: Value | Value[], endMark?: Node): Node | Frag; |
There was a problem hiding this comment.
So... Frag is mostly an internal concept, but for anyone writing wrappers (aka anyone actually bothering to touch api.add) it's probably good to mention
Codecov Report
@@ Coverage Diff @@
## types-api #114 +/- ##
============================================
Coverage ? 97.44%
============================================
Files ? 22
Lines ? 626
Branches ? 0
============================================
Hits ? 610
Misses ? 16
Partials ? 0
Continue to review full report at Codecov.
|
Else SVG components are said to return DocumentFragment because they resolve to the last overload of `hs`
- h(Function, ...) and h([...], ...) can return fragments - sinuous/src's h() is not the same as sinuous/h's api.h() ...Except they are. It depends on api.s. Hard to define
|
Updated the description of the PR. I finished the project (added lifecycles! https://nthm.gitlab.io/stayknit/) I was doing that started all these commits, so I won't keep bothering you :) |
I've been trying to understand how Sinuous works a bit better since I'm writing taping into the API calls, mostly
api.add, to have tracing of its execution. Running into issues where it's hard to understand how data flows through. Some of the JSDoc types aren't as details as they could be, for instance, I believeapi.add(parent, value, endMark)could be given a DocumentFragment or an Array as avaluebut the JSDoc just says "Node" (I understand that a fragment is an instance of Node but it's not super clear).Update: I actually finished the project that prompted all these commits/PRs into Sinuous. I was trying to add onAttach/onDetach hooks without using MutationObserver and needed to better understand how api.add/insert/h worked but I figured it out in the end. Added some comments in this PR for anyone who comes after me...