Created story for collapsible#491
Merged
david-poindexter merged 1 commit intoDNNCommunity:developfrom Mar 13, 2022
Merged
Conversation
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.
david-poindexter
approved these changes
Mar 13, 2022
Contributor
david-poindexter
left a comment
There was a problem hiding this comment.
This is FANTASTIC @valadas - great job figuring out the magic sauce with lit-html. I just discounted it as n/a. 😁
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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.