-
Notifications
You must be signed in to change notification settings - Fork 891
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[labs/analyzer] Add template parser to analyzer #4267
base: main
Are you sure you want to change the base?
Conversation
🦋 Changeset detectedLatest commit: 547fd74 The changes in this PR will be included in the next version bump. This PR includes changesets to release 8 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
📊 Tachometer Benchmark ResultsSummarynop-update
render
update
update-reflect
Resultsthis-change
render
update
update-reflect
this-change, tip-of-tree, previous-release
render
update
nop-update
this-change, tip-of-tree, previous-release
render
update
this-change, tip-of-tree, previous-release
render
update
update-reflect
|
The size of lit-html.js and lit-core.min.js are as expected. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Very quick initial look.
Is it worth finding ways to reduce the number of type assertions?
Also love the idea of having one great analyzer that we can share.
export const parseLitTemplate = ( | ||
node: ts.TaggedTemplateExpression, | ||
ts: TypeScript, | ||
_checker: ts.TypeChecker |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Worth removing as not used currently?
@@ -11,8 +11,24 @@ | |||
*/ | |||
|
|||
import type ts from 'typescript'; | |||
import {_$LH} from 'lit-html/private-ssr-support.js'; | |||
import {parseFragment} from 'parse5'; | |||
// import type {Attribute} from 'parse5/dist/common/token.js'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Intended to leave in?
const values = ts.isNoSubstitutionTemplateLiteral(node.template) | ||
? [] | ||
: node.template.templateSpans.map((s) => s.expression); | ||
const parts: Array<PartInfo> = []; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It might be good to clarify the use cases for the API's here. i.e. whether we intend the DOM AST that comes out to be mutable or not, since the parts
list will only be the "as-parsed" values.
This could either be made a getter that reifies the parts list each access (slower), or could add an "invalidateParts" API?
And are you planning on adding something to go from a LitTemplate
back to a ts.TaggedTemplateExpression
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It's obv fine for some use cases, where you just want to statically analyze only, but for others the parts
sort of seems not that useful.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
fwiw in the lint side of things, we don't need to mutate nodes but we do need a way to translate between nodes or positions. i.e. we need a way to go for a parse5 node to an estree node (whether by reference or just by knowing the position)
|
||
type TypeScript = typeof ts; | ||
// TODO (justinfagnani): use the real type from parse5? | ||
type Attribute = Element['attrs'][number]; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
you can probably import Token
from parse5 and use Token.Attribute
48032bd
to
b4c6ae2
Compare
ff05c9c
to
21a62dd
Compare
a853ce1
to
ec459b9
Compare
ec459b9
to
547fd74
Compare
Builds on #4261
Adds a
parseLitTemplate()
function tolib/lit-html/template.ts
. This returns an extension of a parse5 DocumentFragment that contains parts and strings, and where some nodes like comments and attributes are annotated with Lit parts. The parts have references to their expressions to allow easy traversal into nested expressions and templates.I didn't yet port over the similar code in SSR or the compiler. These might have some different requirements (like parallel traversal or re-writing comment markers). Other future extensions could be detecting common invalid binding locations for linting.