New syntax and main module #398

justinfagnani · 2018-07-11T23:33:59Z

This PR adds a new syntax that's like lit-extended, but defaults to setting attributes and requires opting-in to setting properties.

Properties are set with a . prefix:

html`<input .value=${value}>`

The new syntax is the main module of the package now. The unopinionated core has been moved to core.js and the new syntax is in lit-html.js

lit-extended is deprecated and will be removed before 1.0.

Fixes #399

nicolasparada · 2018-07-11T23:59:35Z

I still think lit-html should try to set properties falling back to attributes without any special syntax. Same behavior as preact.

html`<div className="foo"></div>`

That sets the property.

html`<div class="foo"></div>`

And this sets the attribute.

Westbrook · 2018-07-12T00:27:35Z

With this change, do you see any issues with adoption when properties are prefixed:

html`<input .value=${value}>`

But the boolean attribute syntax is postfixed:

html`<input checked?=${checked}>`

The new property syntax seems to make sense, but mixed positional syntax seems like it would be harder to coach into other people's workflow.

Looking forward to implementing this in my team's growing collection of lit-element based components.

justinfagnani · 2018-07-12T01:04:15Z

Let's keep discussion of the options to #399

bgotink · 2018-07-13T19:16:38Z

docs-src/guide/01-getting-started.md

 ```

 The path to use depends on where you've installed lit-html to. Browsers only support importing other modules by path, not by package name, so without other tools involved, you'll have to use paths.

-If you use some tool than can convert package names into paths, then you can import by path:
+If you use a tool than converts package names into paths, then you can import by path:


typo: tha{n => t}

bgotink · 2018-07-13T19:17:20Z

docs/guide/getting-started.html

@@ -3,7 +3,6 @@

  <html>
    <head>
-      <title>Getting Started</title>


All the titles are gone, is that on purpose? (I honestly don't know how the documentation works, this just caught my eye)

Good catch. It's a problem with the generator

sorvell

Just a few nits and a general point: the separation of core and lit-html feels a bit arbitrary and duplicative. Why is there an html tag function in core for example? If we really think it's important to maintain this basic "unopinionated" version it should probably still be mentioned in the documentation; however, I'd suggest not bothering with this distinction and removing the extra module and (admittedly small) duplication.

sorvell · 2018-07-13T21:32:09Z

docs-src/guide/02-writing-templates.md

- * Property bindings: Any type of value
- * Event handler bindings: Event handler functions only
- * Text content bindings: TemplateResults, Nodes. Other types converted to strings.
+Expressions can occur text content or in attribute value positions.


Expressions can occur in text content

sorvell · 2018-07-13T21:42:34Z

src/lit-html.ts

- * To update a container with new values, reevaluate the template literal and
- * call `render` with the new result.
+ * Attribute names in lit-html templates preserve case, so properties are case
+ * sensitive. If an


sorvell · 2018-07-13T21:43:07Z

src/lit-html.ts

 *
- * "\0-\x1F\x7F-\x9F" are Unicode control characters
+ * Event handlers are sset by prefixing an attribute name with `on-`.


typo: sset => set

Change on- to @ right?

sorvell · 2018-07-13T21:44:25Z

src/lit-html.ts

-
-/**
- * A placeholder for a dynamic expression in an HTML template.
+ *     html`<button on-click=${(e)=> this.onClickHandler(e)}>Buy Now</button>`


on- to @

sorvell · 2018-07-13T21:44:47Z

src/lit-html.ts

- * There are two built-in part types: AttributePart and NodePart. NodeParts
- * always represent a single dynamic expression, while AttributeParts may
- * represent as many expressions are contained in the attribute.
+ * Boolean attributes are set by appending `?` to an attribute name.


Change appending to prepending

sorvell · 2018-07-13T21:45:05Z

src/lit-html.ts

- * TODO(justinfagnani): That requirement is a little fragile. A
- * TemplateInstance could instead be more careful about which values it gives
- * to Part.update().
+ *     html`<input type="checkbox" checked?=${value}>`


checked? to ?checked

justinfagnani · 2018-07-19T00:24:24Z

@sorvell regarding the separation / duplication of core and lit-html: I'm open to merging core back into lit-html (and possibly vending a simple.ts module that just contains a PartCallback implementing an opinionated syntax, mostly for reference). I was intending to document core.ts soon. Can we make the call after this PR?

justinfagnani · 2018-07-19T00:32:03Z

@sorvell PTAL

sorvell

LGTM

…fix.

geraldfullam · 2018-07-24T17:59:43Z

Why did you remove so much documentation from the README.md? (See deletions from Lines 61–427).

* Rename lit-html.ts to core.ts * Add new lit-html.ts with lit-extended like syntax. * Update README * Update docs * Deprecate lit-extended * Change event handlers to a @-prefix and boolean attributes to a ?-prefix.

justinfagnani requested review from sorvell and kevinpschaaf July 11, 2018 23:34

bgotink reviewed Jul 13, 2018

View reviewed changes

sorvell reviewed Jul 13, 2018

View reviewed changes

justinfagnani mentioned this pull request Jul 14, 2018

Refactor AttributePart to only have a single value #400

Merged

sorvell approved these changes Jul 19, 2018

View reviewed changes

justinfagnani added 7 commits July 19, 2018 10:57

Rename lit-html.ts to core.ts

eb41dc9

Add new lit-html.ts with lit-extended like syntax.

6a20660

Update README

c7b6423

Update docs

ac04e1c

Deprecate lit-extended

3536a03

Change event handlers to a @-prefix and boolean attributes to a ?-pre…

58e9542

…fix.

Address review comments

ad7b5ca

justinfagnani force-pushed the new-syntax branch from e715f3c to ad7b5ca Compare July 19, 2018 17:59

justinfagnani merged commit 5e8befb into master Jul 19, 2018

justinfagnani mentioned this pull request Jul 19, 2018

Change attribute/property binding syntax to require opt-in to properties. #399

Closed

justinfagnani deleted the new-syntax branch July 19, 2018 19:18

zevdg mentioned this pull request Jan 14, 2019

LitElement Handling Data section is not acurate webcomponents/custom-elements-everywhere#403

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New syntax and main module #398

New syntax and main module #398

justinfagnani commented Jul 11, 2018 •

edited

Loading

nicolasparada commented Jul 11, 2018 •

edited

Loading

Westbrook commented Jul 12, 2018

justinfagnani commented Jul 12, 2018

bgotink Jul 13, 2018

justinfagnani Jul 19, 2018

bgotink Jul 13, 2018

justinfagnani Jul 19, 2018

sorvell left a comment

sorvell Jul 13, 2018

justinfagnani Jul 19, 2018

sorvell Jul 13, 2018

justinfagnani Jul 19, 2018

sorvell Jul 13, 2018

justinfagnani Jul 19, 2018

sorvell Jul 13, 2018

justinfagnani Jul 19, 2018

sorvell Jul 13, 2018

justinfagnani Jul 19, 2018

sorvell Jul 13, 2018

justinfagnani Jul 19, 2018

justinfagnani commented Jul 19, 2018

justinfagnani commented Jul 19, 2018

sorvell left a comment

geraldfullam commented Jul 24, 2018

New syntax and main module #398

New syntax and main module #398

Conversation

justinfagnani commented Jul 11, 2018 • edited Loading

nicolasparada commented Jul 11, 2018 • edited Loading

Westbrook commented Jul 12, 2018

justinfagnani commented Jul 12, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sorvell left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

justinfagnani commented Jul 19, 2018

justinfagnani commented Jul 19, 2018

sorvell left a comment

Choose a reason for hiding this comment

geraldfullam commented Jul 24, 2018

justinfagnani commented Jul 11, 2018 •

edited

Loading

nicolasparada commented Jul 11, 2018 •

edited

Loading