Merge pull request #845 from lit/custom-attribute-suggestions

Author: e111077

packages/lit-dev-content/samples/tutorials/custom-attribute-converter/01/before/project.json

@@ -1,8 +1,8 @@
 {
   "extends": "/samples/checkable-tutorial-base.json",
   "files": {
-    "date-display.ts": {},
     "index.html": {},
+    "date-display.ts": {"selected": true},
     "_check-code.js": {"hidden": true}
   }
 }

packages/lit-dev-content/samples/tutorials/custom-attribute-converter/02/before/project.json

@@ -1,7 +1,7 @@
 {
   "extends": "/samples/base.json",
   "files": {
-    "date-display.ts": {},
-    "index.html": {}
+    "index.html": {"selected": true},
+    "date-display.ts": {}
   }
 }

packages/lit-dev-content/samples/tutorials/custom-attribute-converter/03/before/project.json

@@ -2,7 +2,7 @@
   "extends": "/samples/base.json",
   "files": {
     "date-display.ts": {},
-    "index.html": {},
-    "date-converter.ts": {}
+    "date-converter.ts": {"selected": true},
+    "index.html": {}
   }
 }

packages/lit-dev-content/samples/tutorials/custom-attribute-converter/04/before/date-converter.ts

@@ -1,11 +1,12 @@
 import type {ComplexAttributeConverter} from 'lit';
 
-export const dateConverter: ComplexAttributeConverter<Date> = {
-  toAttribute: (date: Date) => {
-    // or set your favorite locale!
-    return date.toLocaleDateString('en-US');
-  },
-  fromAttribute: (value: string) => {
-    return new Date(value);
+export const dateConverter = (locale: string): ComplexAttributeConverter<Date> => {
+  return {
+    toAttribute: (date: Date) => {
+      return date.toLocaleDateString(locale);
+    },
+    fromAttribute: (value: string) => {
+      return new Date(value);
+    }
   }
 };

packages/lit-dev-content/samples/tutorials/custom-attribute-converter/04/before/project.json

@@ -1,8 +1,8 @@
 {
   "extends": "/samples/base.json",
   "files": {
-    "date-display.ts": {},
-    "index.html": {},
-    "date-converter.ts": {}
+    "date-display.ts": {"selected": true},
+    "date-converter.ts": {},
+    "index.html": {}
   }
 }

packages/lit-dev-content/samples/tutorials/custom-attribute-converter/05/before/date-converter.ts

@@ -1,11 +1,12 @@
-import {ComplexAttributeConverter} from 'lit';
+import type {ComplexAttributeConverter} from 'lit';
 
-export const dateConverter: ComplexAttributeConverter<Date> = {
-  toAttribute: (date: Date) => {
-    // or set your favorite locale!
-    return date.toLocaleDateString('en-US');
-  },
-  fromAttribute: (value: string) => {
-    return new Date(value);
+export const dateConverter = (locale: string): ComplexAttributeConverter<Date> => {
+  return {
+    toAttribute: (date: Date) => {
+      return date.toLocaleDateString(locale);
+    },
+    fromAttribute: (value: string) => {
+      return new Date(value);
+    }
   }
 };

packages/lit-dev-content/samples/tutorials/custom-attribute-converter/05/before/date-display.ts

@@ -4,7 +4,7 @@ import {dateConverter} from './date-converter.js';
 
 @customElement('date-display')
 export class DateDisplay extends LitElement {
-  @property({converter: dateConverter, reflect: true})
+  @property({converter: dateConverter(navigator.language), reflect: true})
   date = new Date();
 
   render() {

packages/lit-dev-content/samples/tutorials/custom-attribute-converter/05/before/project.json

@@ -2,7 +2,7 @@
   "extends": "/samples/base.json",
   "files": {
     "date-display.ts": {},
-    "index.html": {},
-    "date-converter.ts": {}
+    "date-converter.ts": {},
+    "index.html": {}
   }
 }

packages/lit-dev-content/site/tutorials/content/custom-attribute-converter/02.md

@@ -4,7 +4,7 @@ In this step, you'll add code to synchronize the `date` property with the `dateS
 
 ### Accept `date-str` as an attribute
 
-* Stop using JavaScript to set the `date` property of `date-display`.
+* Remove the `<script>` tag in `index.html`.
 * Pass `05/05/22` to the `date-str` attribute of `date-display`.
 
 #### index.html

packages/lit-dev-content/site/tutorials/content/custom-attribute-converter/03.md

@@ -10,10 +10,11 @@ In this step, you'll define a custom attribute converter that can convert a date
 
 ### Defining the custom attribute converter
 
-You'll notice a new, empty file called <code>date-converter.<ts-js></ts-js></code> in the editor panel. Use it to define your converter.
+You'll notice a new, empty file called <code>date-converter.<ts-js></ts-js></code> in the editor panel. Use it to define a function that returns a converter.
 
-* Export a JavaScript object called `dateConverter`.
-* Define `dateConverter` with the following methods:
+* Export a function called `dateConverter`.
+  * The function should receive a `locale` string as an argument.
+* `dateConverter` should return a JavaScript Object with the following methods:
   * `toAttribute`: a function that takes a `Date` and returns a string.
   * `fromAttribute`: a function that takes a string and returns a `Date`.
 
@@ -22,28 +23,30 @@ You'll notice a new, empty file called <code>date-converter.<ts-js></ts-js></cod
 {% switchable-sample %}
 
 ```ts
-import {ComplexAttributeConverter} from 'lit';
-
-export const dateConverter: ComplexAttributeConverter<Date> = {
-  toAttribute: (date: Date) => {
-    // or set your favorite locale!
-    return date.toLocaleDateString('en-US');
-  },
-  fromAttribute: (value: string) => {
-    return new Date(value);
+import type {ComplexAttributeConverter} from 'lit';
+
+export const dateConverter = (locale: string): ComplexAttributeConverter<Date> => {
+  return {
+    toAttribute: (date: Date) => {
+      return date.toLocaleDateString(locale);
+    },
+    fromAttribute: (value: string) => {
+      return new Date(value);
+    }
   }
 };
 ```
 
 ```js
-export const dateConverter = {
-  toAttribute: (date) => {
-    // or set your favorite locale!
-    return date.toLocaleDateString('en-US');
-  },
-  fromAttribute: (value) => {
-    return new Date(value);
-  },
+export const dateConverter = (locale) => {
+  return {
+    toAttribute: (date) => {
+      return date.toLocaleDateString(locale);
+    },
+    fromAttribute: (value) => {
+      return new Date(value);
+    },
+  };
 };
 ```