Skip to content

Created story for collapsible#491

Merged
david-poindexter merged 1 commit intoDNNCommunity:developfrom
valadas:storybook-collapsible
Mar 13, 2022
Merged

Created story for collapsible#491
david-poindexter merged 1 commit intoDNNCommunity:developfrom
valadas:storybook-collapsible

Conversation

@valadas
Copy link
Copy Markdown
Member

@valadas valadas commented Mar 13, 2022

This adds a complete story for dnn-collapsible including actions hooks and supported properties.

Also this brings in lit-html which is not LitElements, it is only a very small independent par of it that allows almost jsx support which allows to dynamically create html from custom elements. Under the hood it creates an html template and keeps a reference to all dynamic parts, then injects a clone of that component with the dynamic parts replaced each time the function get's called.

Soooo, I initially though that the WebComponents docs where made only for LitElements but in fact it just used one independed function from them. See https://lit.dev/docs/v1/lit-html/introduction/ for some intro and https://lit.dev/docs/v1/lit-html/template-reference/ for some more details on the binding types. Basically ? prefix for bolean attributes, . prefix for properties that are not attributes and @ prefix for event listeners. We may just need ? in our use cases though. There is also a vscode extension called lit-html which does syntax highlighting almost like in jsx/tsx.

One more note, I am not totally set on the idea, so we can chat about it, but if the last part of the path matches exactly the only named export (there is a single story), then the component in the list is hoisted up one level so it saves the user to have to expand that level on the left list. But apparently it needs to be a single word, soooo, we can play with variations maybe there is some science to this auto-magic.

collapsible-v2

This adds a complete story for dnn-collapsible including actions hooks and supported properties.

Also this brings in lit-html which is not LitElements, it is only a very small independent par of it that allows almost jsx support which allows to dynamically create html from custom elements. Under the hood it creates an html template and keeps a reference to all dynamic parts, then injects a clone of that component with the dynamic parts replaced each time the function get's called.

Soooo, I initially though that the WebComponents docs where made only for LitElements but in fact it just used one independed function from them. See https://lit.dev/docs/v1/lit-html/introduction/ for some intro and https://lit.dev/docs/v1/lit-html/template-reference/ for some more details on the binding types. Basically `?` prefix for bolean attributes, `.` prefix for properties that are not attributes and `@` prefix for event listeners. We may just need `?` in our use cases though. There is also a vscode extension called lit-html which does syntax highlighting almost like in jsx/tsx.

One more note, I am not totally set on the idea, so we can chat about it, but if the last part of the path matches exactly the only named export (there is a single story), then the component in the list is hoisted up one level so it saves the user to have to expand that level on the left list. But apparently it needs to be a single word, soooo, we can play with variations maybe there is some science to this auto-magic.
@valadas valadas added the documentation Improvements or additions to documentation label Mar 13, 2022
@valadas valadas added this to the 0.14.2 milestone Mar 13, 2022
Copy link
Copy Markdown
Contributor

@david-poindexter david-poindexter left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is FANTASTIC @valadas - great job figuring out the magic sauce with lit-html. I just discounted it as n/a. 😁

@david-poindexter david-poindexter merged commit 3515b85 into DNNCommunity:develop Mar 13, 2022
@valadas valadas modified the milestones: 0.14.2, 0.15.0 Mar 16, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

documentation Improvements or additions to documentation

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants