lit · aomarks · Apr 21, 2021 · Feb 28, 2021 · Apr 20, 2021 · Apr 20, 2021
diff --git a/packages/lit-dev-content/package-lock.json b/packages/lit-dev-content/package-lock.json
diff --git a/packages/lit-dev-content/package.json b/packages/lit-dev-content/package.json
@@ -53,8 +53,9 @@
     "@material/mwc-icon-button-toggle": "^0.20.0",
     "@material/mwc-snackbar": "^0.20.0",
     "@material/mwc-switch": "^0.20.0",
-    "lit": "^2.0.0-pre.1",
+    "@lit/localize": "^0.10.0",
     "@lit-labs/task": "1.0.0-pre.2",
+    "lit": "^2.0.0-pre.1",
     "lit-element": "^2.3.1",
     "lit-html": "^1.2.1",
     "playground-elements": "^0.9.1",

diff --git a/packages/lit-dev-content/samples/docs/libraries/localization/runtime/index.html b/packages/lit-dev-content/samples/docs/libraries/localization/runtime/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<head>
+  <title>lit-localize runtime example</title>
+  <script type="module" src="./index.js"></script>
+  <style>
+    [hidden] {
+      visibility: hidden;
+    }
+    #spinner {
+      position: absolute;
+    }
+  </style>
+</head>
+<body>
+  <locale-picker></locale-picker>
+  <mwc-circular-progress
+    id="spinner"
+    indeterminate
+    hidden
+  ></mwc-circular-progress>
+  <main></main>
+</body>
diff --git a/packages/lit-dev-content/samples/docs/libraries/localization/runtime/index.ts b/packages/lit-dev-content/samples/docs/libraries/localization/runtime/index.ts
@@ -0,0 +1,50 @@
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import {setLocaleFromUrl} from './localization.js';
+import {LOCALE_STATUS_EVENT} from '@lit/localize';
+import {html, render} from 'lit';
+import './locale-picker.js';
+import './x-greeter.js';
+import '@material/mwc-circular-progress';
+
+const main = document.querySelector('main')!;
+const spinner = document.querySelector('#spinner')!;
+
+// Update the locale to match the URL when the user moves backwards or forwards
+// through history.
+window.addEventListener('popstate', () => {
+  setLocaleFromUrl();
+});
+
+// Display a spinner whenever a new locale is loading.
+window.addEventListener(LOCALE_STATUS_EVENT, ({detail}) => {
+  if (detail.status === 'loading') {
+    console.log(`Loading new locale: ${detail.loadingLocale}`);
+    spinner.removeAttribute('hidden');
+  } else if (detail.status === 'ready') {
+    console.log(`Loaded new locale: ${detail.readyLocale}`);
+    spinner.setAttribute('hidden', '');
+  } else if (detail.status === 'error') {
+    console.error(
+      `Error loading locale ${detail.errorLocale}: ` + detail.errorMessage
+    );
+    spinner.setAttribute('hidden', '');
+  }
+});
+
+(async () => {
+  try {
+    // Defer first render until our initial locale is ready, to avoid a flash of
+    // the wrong locale.
+    await setLocaleFromUrl();
+  } catch (e) {
+    // Either the URL locale code was invalid, or there was a problem loading
+    // the locale module.
+    console.error(`Error loading locale: ${e.message}`);
+  }
+  render(html` <x-greeter></x-greeter> `, main);
+})();
diff --git a/packages/lit-dev-content/samples/docs/libraries/localization/runtime/locale-codes.ts b/packages/lit-dev-content/samples/docs/libraries/localization/runtime/locale-codes.ts
@@ -0,0 +1,18 @@
+// Do not modify this file by hand!
+// Re-generate this file by running lit-localize.
+
+/**
+ * The locale code that templates in this source code are written in.
+ */
+export const sourceLocale = `en`;
+
+/**
+ * The other locale codes that this application is localized into. Sorted
+ * lexicographically.
+ */
+export const targetLocales = [`es-419`, `zh_CN`] as const;
+
+/**
+ * All valid project locale codes. Sorted lexicographically.
+ */
+export const allLocales = [`en`, `es-419`, `zh_CN`] as const;
diff --git a/packages/lit-dev-content/samples/docs/libraries/localization/runtime/locale-picker.ts b/packages/lit-dev-content/samples/docs/libraries/localization/runtime/locale-picker.ts
@@ -0,0 +1,49 @@
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import {LitElement, html} from 'lit';
+import {customElement} from 'lit/decorators.js';
+import {getLocale, setLocaleFromUrl} from './localization.js';
+import {allLocales} from './locale-codes.js';
+import {localized} from '@lit/localize';
+
+const localeNames: {
+  [L in typeof allLocales[number]]: string;
+} = {
+  en: 'English',
+  'es-419': 'Español (Latinoamérica)‎',
+  zh_CN: '中文 (简体)',
+};
+
+// Note we use updateWhenLocaleChanges here so that we're always up to date with
+// the active locale (the result of getLocale()) when the locale changes via a
+// history navigation.
+@localized()
+@customElement('locale-picker')
+export class LocalePicker extends LitElement {
+  render() {
+    return html`
+      <select @change=${this.localeChanged}>
+        ${allLocales.map(
+          (locale) =>
+            html`<option value=${locale} ?selected=${locale === getLocale()}>
+              ${localeNames[locale]}
+            </option>`
+        )}
+      </select>
+    `;
+  }
+
+  localeChanged(event: Event) {
+    const newLocale = (event.target as HTMLSelectElement).value;
+    if (newLocale !== getLocale()) {
+      const url = new URL(window.location.href);
+      url.searchParams.set('locale', newLocale);
+      window.history.pushState(null, '', url.toString());
+      setLocaleFromUrl();
+    }
+  }
+}
diff --git a/packages/lit-dev-content/samples/docs/libraries/localization/runtime/locales/es-419.ts b/packages/lit-dev-content/samples/docs/libraries/localization/runtime/locales/es-419.ts
@@ -0,0 +1,11 @@
+// Do not modify this file by hand!
+// Re-generate this file by running lit-localize
+
+import {html} from 'lit';
+
+/* eslint-disable no-irregular-whitespace */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+export const templates = {
+  h3c44aff2d5f5ef6b: html`Hola <b>Mundo</b>!`,
+};
diff --git a/packages/lit-dev-content/samples/docs/libraries/localization/runtime/locales/zh_CN.ts b/packages/lit-dev-content/samples/docs/libraries/localization/runtime/locales/zh_CN.ts
@@ -0,0 +1,11 @@
+// Do not modify this file by hand!
+// Re-generate this file by running lit-localize
+
+import {html} from 'lit';
+
+/* eslint-disable no-irregular-whitespace */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+export const templates = {
+  h3c44aff2d5f5ef6b: html`你好, <b>世界!</b>`,
+};
diff --git a/packages/lit-dev-content/samples/docs/libraries/localization/runtime/localization.ts b/packages/lit-dev-content/samples/docs/libraries/localization/runtime/localization.ts
@@ -0,0 +1,14 @@
+import {configureLocalization} from '@lit/localize';
+import {sourceLocale, targetLocales} from './locale-codes.js';
+
+export const {getLocale, setLocale} = configureLocalization({
+  sourceLocale,
+  targetLocales,
+  loadLocale: (locale: string) => import(`./locales/${locale}.js`),
+});
+
+export const setLocaleFromUrl = async () => {
+  const url = new URL(window.location.href);
+  const locale = url.searchParams.get('locale') || sourceLocale;
+  await setLocale(locale);
+};
diff --git a/packages/lit-dev-content/samples/docs/libraries/localization/runtime/project.json b/packages/lit-dev-content/samples/docs/libraries/localization/runtime/project.json
@@ -0,0 +1,13 @@
+{
+  "extends": "/samples/base.json",
+  "files": {
+    "x-greeter.ts": {},
+    "locale-picker.ts": {},
+    "index.ts": {},
+    "index.html": {},
+    "locales/es-419.ts": {},
+    "locales/zh_CN.ts": {},
+    "localization.ts": {},
+    "locale-codes.ts": {}
+  }
+}
diff --git a/packages/lit-dev-content/samples/docs/libraries/localization/runtime/x-greeter.ts b/packages/lit-dev-content/samples/docs/libraries/localization/runtime/x-greeter.ts
@@ -0,0 +1,11 @@
+import {LitElement, html} from 'lit';
+import {customElement} from 'lit/decorators.js';
+import {msg, localized} from '@lit/localize';
+
+@localized()
+@customElement('x-greeter')
+export class XGreeter extends LitElement {
+  render() {
+    return html`<p>${msg(html`Hello <b>World</b>!`)}</p>`;
+  }
+}
diff --git a/packages/lit-dev-content/site/css/docs-api.css b/packages/lit-dev-content/site/css/docs-api.css
@@ -78,29 +78,6 @@ copy-button:hover {
   padding-left: 0 !important;
 }
 
-/* Parameter lists */
-.params {
-  display: grid;
-  grid-template-columns: minmax(min-content, 12em) 1fr;
-  border-top: 1px solid #ccc;
-}
-.params > * {
-  padding: 0.5em 1em;
-  border-bottom: 1px solid #ccc;
-}
-.params > .paramName {
-  margin: 0;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: var(--playground-code-font-family);
-  background: var(--color-light-gray);
-  border-right: 1px solid rgb(230, 230, 230);
-  color: rgb(37, 37, 37);
-}
-.params > .paramDetails {
-  margin-left: 0;
-}
-
 /* View source links */
 .viewSourceLink {
   font-size: 13px;
@@ -139,17 +116,6 @@ h3 {
     /* Allow long URLs to break */
     word-break: break-all;
   }
-  .params {
-    display: block;
-    border: none;
-  }
-  .params > * {
-    border: none;
-    background: transparent !important;
-  }
-  .params > .paramName {
-    font-weight: 600;
-  }
   .heading {
     display: block;
   }

diff --git a/packages/lit-dev-content/site/css/docs.css b/packages/lit-dev-content/site/css/docs.css
@@ -233,6 +233,29 @@ article h4 {
    padding-inline: 0.5em 10%;
  }
 
+/* API parameter lists */
+.params {
+  display: grid;
+  grid-template-columns: minmax(min-content, 12em) 1fr;
+  border-top: 1px solid #ccc;
+}
+.params > * {
+  padding: 0.5em 1em;
+  border-bottom: 1px solid #ccc;
+}
+.params > .paramName {
+  margin: 0;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: var(--playground-code-font-family);
+  background: var(--color-light-gray);
+  border-right: 1px solid rgb(230, 230, 230);
+  color: rgb(37, 37, 37);
+}
+.params > .paramDetails {
+  margin-left: 0;
+}
+
 /* ------------------------------------
  * Tables
  * ------------------------------------ */
@@ -304,6 +327,10 @@ td {
   content: url(/images/alerts/warning.svg);
 }
 
+.alert.alert-labs::before {
+  content: url(/images/alerts/labs.svg);
+}
+
 .alert-todo {
   display: none;
 }
@@ -656,6 +683,18 @@ td {
   .anchor {
     left: -1.1rem;
   }
+
+  .params {
+    display: block;
+    border: none;
+  }
+  .params > * {
+    border: none;
+    background: transparent !important;
+  }
+  .params > .paramName {
+    font-weight: 600;
+  }
 }
 
 .centered-image {