[cleanup] Remove our custom implementation of `lit/static-html`.
When we were using `litTagName` heavily, we rolled our own custom
implementation of `lit/static-html`, which was optimized for the
common case in our codebase. With the removal of `litTagName` we
are left with only one place in the codebase where we use, and in
this particular code path our optimization is useless (and even
costs us more), since the `litTagName` changes in every loop
iteration.
Use the upstream `lit/static-html` module instead and remove our
custom logic. This makes all regular calls to `html` faster in
DevTools, since we no longer preprocess the template string
looking for potential static parts.
Drive-by-fix: Fix the build for `front_end/third_party/lit`.
Bug: 370734442
Change-Id: I9dc70ecab8bb224e926776ebc50c1f8189f21b0c
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6126880
Commit-Queue: Nikolay Vitkov <[email protected]>
Commit-Queue: Benedikt Meurer <[email protected]>
Reviewed-by: Nikolay Vitkov <[email protected]>
Auto-Submit: Benedikt Meurer <[email protected]>
diff --git a/front_end/ui/lit-html/i18n-template.test.ts b/front_end/ui/lit-html/i18n-template.test.ts
new file mode 100644
index 0000000..e209041
--- /dev/null
+++ b/front_end/ui/lit-html/i18n-template.test.ts
@@ -0,0 +1,53 @@
+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as i18n from '../../core/i18n/i18n.js';
+import * as i18nRaw from '../../third_party/i18n/i18n.js';
+
+import * as LitHtml from './lit-html.js';
+
+const {html} = LitHtml;
+
+describe('i18nTemplate', () => {
+ const uiStrings = {placeholder: 'a message with a {string} and {template} placeholder'};
+ let i18nInstance: i18nRaw.I18n.I18n;
+
+ beforeEach(() => {
+ i18nInstance = new i18nRaw.I18n.I18n(['en-US'], 'en-US');
+ i18nInstance.registerLocaleData('en-US', {});
+ });
+
+ function setLocale(locale: string) {
+ i18n.DevToolsLocale.DevToolsLocale.instance({
+ create: true,
+ data: {
+ settingLanguage: locale,
+ navigatorLanguage: locale,
+ lookupClosestDevToolsLocale: l => l,
+ },
+ });
+ }
+
+ it('localizes lit templates', () => {
+ const strings = i18nInstance.registerFileStrings('test.ts', uiStrings);
+ setLocale('en-US');
+
+ const result = LitHtml.i18nTemplate(strings, uiStrings.placeholder, {string: 'STRING', template: html`TEMPLATE`});
+ const element = LitHtml.render(result, document.createElement('div'), {host: this});
+ assert.deepEqual(
+ (element.parentNode as HTMLDivElement).innerText, 'a message with a STRING and TEMPLATE placeholder');
+ });
+
+ it('localizes lit templates with translations', () => {
+ i18nInstance.registerLocaleData(
+ 'de', {'test.ts | placeholder': {message: 'a message with a {template} and {string} placeholder'}});
+ const strings = i18nInstance.registerFileStrings('test.ts', uiStrings);
+ setLocale('de');
+
+ const result = LitHtml.i18nTemplate(strings, uiStrings.placeholder, {string: 'STRING', template: html`TEMPLATE`});
+ const element = LitHtml.render(result, document.createElement('div'), {host: this});
+ assert.deepEqual(
+ (element.parentNode as HTMLDivElement).innerText, 'a message with a TEMPLATE and STRING placeholder');
+ });
+});
