TreeList Example #107
TreeList Example #107
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
PR Summary
|
| type Node = { id: number; name: string; level: number; children: Node[] }; | ||
|
|
||
| /** | ||
| * An array of nodes containing custom metadata and an array of child nodes | ||
| * @param {Array} nodes - An array of Node Objects each containing a children: Node[] attribute. |
There was a problem hiding this comment.
Should this be @type instead since it's not a function parameter (I'm not a jsdoc expert though).
/** @type {{ name: string; children: Node[] }[]} */Doing so improves the docs (at least how Sveld parses them). See the orange unknown
| Before | After |
|---|---|
 |
 |
There was a problem hiding this comment.
I ment to link to the jsdoc @type docs - https://jsdoc.app/tags-type.html
Also, if we needed to do per-property comments, I think we would need to use this syntax...
/**
* @typedef PropertiesHash
* @type {object}
* @property {string} id - an ID.
* @property {string} name - your name.
* @property {number} age - your age.
*/
/** @type {PropertiesHash} */
var props;but I'm not sure it's worth it over just...
/** @type {{ id: string; name: string; age: number }} */as I don't think it's handled by Sveld (or at least we have a way to show it in the docs). It could improve VSCode developer experience though (but haven't tested).
Thanks again for tackling this.
| export let nodes: Node[]; | ||
|
|
||
| /** | ||
| * Allows for conditional classes to be applied to each tag <ul> and <li> | ||
| * @param {Object} classes - An object containing optional classes for <ul> and <li> tags. |
There was a problem hiding this comment.
Similarily, should this be...
/**
* @type {{ul?: string|Function, li?: string|Function}}
**/It's what I've used for Button, at least as a test to improve how Sveld parses them since it doesn't appear to read the typescript types in this case :(.
See also this comment in LayerChart (which applies to Svelte UX) as well with improving how classes are shown in the docs.
techniq/layerchart#39 (comment)
Basically what you're doing here, we need to do everywhere (unless we can find a way to have Sveld handle this, or another "automated" way to parse the typescript defs.
I also wrote up a little bit in the discord
| <Preview language="typescript" code="{"type Node = { name: string; level: number; children: Node[] };\n\nconst nodes =" + JSON.stringify(nodes, null, 2)}"> | ||
| <pre> | ||
| type Node = { name: string; level: number; children: Node[] }; | ||
| const nodes = {JSON.stringify(nodes, null, 2).slice(0, 300)}... | ||
| </pre> | ||
| </Preview> |
There was a problem hiding this comment.
I wonder if it might be nicer to add "svelte-json-tree as a devDependency like I did for LayerChart recently.
CleanShot.2023-11-03.at.10.01.03.mp4
I would think we would show it inline instead of via a dialog, but just a nice JSON preview. What do you think?
Adding example for TreeList as well as some comments to the source file to help clarify functionality