[lit-html] Add dev mode warning when static values are detected in non static templates

[AndrewJakubowicz]

Fixes #4332

Why

Given:

import { html, render } from 'lit'; // This should be the html imported from 'lit/static-html.js'
import { unsafeStatic } from 'lit/static-html.js';

// Does not throw warning/error, and renders `attribute="[object Object]"`
render(html`<h1 attribute="${unsafeStatic('test')}">test</h1>`, document.body);

The example ends up rendering attribute="[object Object]", when it should throw a dev mode warning.

Fix

Check that values do not have _$litStatic$ and raise a dev mode warning if the key is present.

New warning is:

Static values 'literal' or 'unsafeStatic' cannot be used as values to non-static templates.
Please use the static 'html' template. See https://lit.dev/docs/templates/expressions/#static-expressions

[changeset-bot]

🦋 Changeset detected

Latest commit: 7b858da

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
lit	Patch
lit-html	Patch

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

[github-actions]

📊 Tachometer Benchmark Results

Summary

⏳ Benchmarks are currently running. Results below are out of date.

nop-update

• this-change, tip-of-tree, previous-release: slower ❌ 0% - 13% (0.08ms - 1.92ms)
  ^{this-change vs tip-of-tree}

render

• this-change: 63.16ms - 65.85ms
• this-change, tip-of-tree, previous-release: unsure 🔍 -8% - +2% (-2.00ms - +0.43ms)
  ^{this-change vs tip-of-tree}
• this-change, tip-of-tree, previous-release: unsure 🔍 -3% - +1% (-1.49ms - +0.44ms)
  ^{this-change vs tip-of-tree}
• this-change, tip-of-tree, previous-release: unsure 🔍 -3% - +2% (-1.35ms - +0.80ms)
  ^{this-change vs tip-of-tree}

update

• this-change: 639.85ms - 648.29ms
• this-change, tip-of-tree, previous-release: unsure 🔍 -6% - +1% (-3.59ms - +0.33ms)
  ^{this-change vs tip-of-tree}
• this-change, tip-of-tree, previous-release: unsure 🔍 -2% - +2% (-1.75ms - +1.49ms)
  ^{this-change vs tip-of-tree}
• this-change, tip-of-tree, previous-release: unsure 🔍 -1% - +0% (-7.02ms - +0.74ms)
  ^{this-change vs tip-of-tree}

update-reflect

• this-change: 627.59ms - 632.80ms
• this-change, tip-of-tree, previous-release: slower ❌ 0% - 2% (0.15ms - 10.57ms)
  ^{this-change vs tip-of-tree}

Results

⏳ Benchmarks are currently running. Results below are out of date.

this-change

• Browser: chrome-headless 118.0.5993.117
• Sample size: 50
• Built by: Benchmarks #5785

• Commit: f3d2250

render

Version	Avg time	vs
	63.16ms - 65.85ms	-

update

Version	Avg time	vs
	639.85ms - 648.29ms	-

update-reflect

Version	Avg time	vs
	627.59ms - 632.80ms	-

this-change, tip-of-tree, previous-release

• Browser: chrome-headless 118.0.5993.117
• Sample size: 30
• Built by: Benchmarks #5785

• Commit: f3d2250

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	24.10ms - 25.84ms	-	unsure 🔍 -8% - +2% -2.00ms - +0.43ms	unsure 🔍 -5% - +5% -1.33ms - +1.31ms
tip-of-tree tip-of-tree	24.91ms - 26.61ms	unsure 🔍 -2% - +8% -0.43ms - +2.00ms	-	unsure 🔍 -2% - +8% -0.53ms - +2.08ms
previous-release previous-release	23.99ms - 25.98ms	unsure 🔍 -5% - +5% -1.31ms - +1.33ms	unsure 🔍 -8% - +2% -2.08ms - +0.53ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	54.50ms - 57.44ms	-	unsure 🔍 -6% - +1% -3.59ms - +0.33ms	unsure 🔍 -4% - +2% -2.34ms - +1.40ms
tip-of-tree tip-of-tree	56.31ms - 58.89ms	unsure 🔍 -1% - +6% -0.33ms - +3.59ms	-	unsure 🔍 -1% - +5% -0.58ms - +2.90ms
previous-release previous-release	55.27ms - 57.61ms	unsure 🔍 -3% - +4% -1.40ms - +2.34ms	unsure 🔍 -5% - +1% -2.90ms - +0.58ms	-

nop-update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	15.56ms - 17.02ms	-	slower ❌ 0% - 13% 0.08ms - 1.92ms	slower ❌ 0% - 12% 0.02ms - 1.81ms
tip-of-tree tip-of-tree	14.73ms - 15.85ms	faster ✔ 1% - 12% 0.08ms - 1.92ms	-	unsure 🔍 -5% - +4% -0.85ms - +0.67ms
previous-release previous-release	14.86ms - 15.89ms	faster ✔ 0% - 11% 0.02ms - 1.81ms	unsure 🔍 -4% - +6% -0.67ms - +0.85ms	-

this-change, tip-of-tree, previous-release

• Browser: chrome-headless 118.0.5993.117
• Sample size: 50
• Built by: Benchmarks #5785

• Commit: f3d2250

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	45.12ms - 46.31ms	-	unsure 🔍 -3% - +1% -1.49ms - +0.44ms	unsure 🔍 -4% - +1% -1.91ms - +0.71ms
tip-of-tree tip-of-tree	45.48ms - 47.01ms	unsure 🔍 -1% - +3% -0.44ms - +1.49ms	-	unsure 🔍 -3% - +3% -1.47ms - +1.32ms
previous-release previous-release	45.15ms - 47.49ms	unsure 🔍 -2% - +4% -0.71ms - +1.91ms	unsure 🔍 -3% - +3% -1.32ms - +1.47ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	96.87ms - 99.34ms	-	unsure 🔍 -2% - +2% -1.75ms - +1.49ms	unsure 🔍 -2% - +2% -1.52ms - +1.70ms
tip-of-tree tip-of-tree	97.18ms - 99.28ms	unsure 🔍 -2% - +2% -1.49ms - +1.75ms	-	unsure 🔍 -1% - +2% -1.25ms - +1.69ms
previous-release previous-release	96.98ms - 99.05ms	unsure 🔍 -2% - +2% -1.70ms - +1.52ms	unsure 🔍 -2% - +1% -1.69ms - +1.25ms	-

this-change, tip-of-tree, previous-release

• Browser: chrome-headless 118.0.5993.117
• Sample size: 50
• Built by: Benchmarks #5785

• Commit: f3d2250

render

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	43.63ms - 45.12ms	-	unsure 🔍 -3% - +2% -1.35ms - +0.80ms	unsure 🔍 -3% - +2% -1.21ms - +0.84ms
tip-of-tree tip-of-tree	43.88ms - 45.42ms	unsure 🔍 -2% - +3% -0.80ms - +1.35ms	-	unsure 🔍 -2% - +3% -0.96ms - +1.14ms
previous-release previous-release	43.85ms - 45.27ms	unsure 🔍 -2% - +3% -0.84ms - +1.21ms	unsure 🔍 -3% - +2% -1.14ms - +0.96ms	-

update

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	640.95ms - 646.52ms	-	unsure 🔍 -1% - +0% -7.02ms - +0.74ms	unsure 🔍 -1% - +1% -3.51ms - +4.67ms
tip-of-tree tip-of-tree	644.18ms - 649.58ms	unsure 🔍 -0% - +1% -0.74ms - +7.02ms	-	unsure 🔍 -0% - +1% -0.31ms - +7.76ms
previous-release previous-release	640.16ms - 646.15ms	unsure 🔍 -1% - +1% -4.67ms - +3.51ms	unsure 🔍 -1% - +0% -7.76ms - +0.31ms	-

update-reflect

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree	vs previous-release previous-release
this-change	650.56ms - 658.80ms	-	slower ❌ 0% - 2% 0.15ms - 10.57ms	slower ❌ 0% - 2% 2.01ms - 11.89ms
tip-of-tree tip-of-tree	646.13ms - 652.51ms	faster ✔ 0% - 2% 0.15ms - 10.57ms	-	unsure 🔍 -0% - +1% -2.60ms - +5.79ms
previous-release previous-release	645.00ms - 650.45ms	faster ✔ 0% - 2% 2.01ms - 11.89ms	unsure 🔍 -1% - +0% -5.79ms - +2.60ms	-

_{tachometer-reporter-action v2 for Benchmarks}

[github-actions]

The size of lit-html.js and lit-core.min.js are as expected.

[justinfagnani]

So, more that I think about this some more, I'm not sure if this is the right check. Static values are just strings that are tagged so we can differentiate them in static templates. They actually could be usable in regular templates if used in allowed binding positions. So checks for disallowed binding positions should suffice. In those we could suggest static templates.

The question is if we need to do anything to support static values, it of doing so would be confusing.

@rictic ?