Skip to content

Commit ea10a56

Browse files
authored
Merge pull request #845 from lit/custom-attribute-suggestions
2 parents 94d2850 + 6d328d3 commit ea10a56

File tree

11 files changed

+56
-50
lines changed

11 files changed

+56
-50
lines changed
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{
22
"extends": "/samples/checkable-tutorial-base.json",
33
"files": {
4-
"date-display.ts": {},
54
"index.html": {},
5+
"date-display.ts": {"selected": true},
66
"_check-code.js": {"hidden": true}
77
}
88
}
Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"extends": "/samples/base.json",
33
"files": {
4-
"date-display.ts": {},
5-
"index.html": {}
4+
"index.html": {"selected": true},
5+
"date-display.ts": {}
66
}
77
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"extends": "/samples/base.json",
33
"files": {
44
"date-display.ts": {},
5-
"index.html": {},
6-
"date-converter.ts": {}
5+
"date-converter.ts": {"selected": true},
6+
"index.html": {}
77
}
88
}
Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import type {ComplexAttributeConverter} from 'lit';
22

3-
export const dateConverter: ComplexAttributeConverter<Date> = {
4-
toAttribute: (date: Date) => {
5-
// or set your favorite locale!
6-
return date.toLocaleDateString('en-US');
7-
},
8-
fromAttribute: (value: string) => {
9-
return new Date(value);
3+
export const dateConverter = (locale: string): ComplexAttributeConverter<Date> => {
4+
return {
5+
toAttribute: (date: Date) => {
6+
return date.toLocaleDateString(locale);
7+
},
8+
fromAttribute: (value: string) => {
9+
return new Date(value);
10+
}
1011
}
1112
};
Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{
22
"extends": "/samples/base.json",
33
"files": {
4-
"date-display.ts": {},
5-
"index.html": {},
6-
"date-converter.ts": {}
4+
"date-display.ts": {"selected": true},
5+
"date-converter.ts": {},
6+
"index.html": {}
77
}
88
}
Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
import {ComplexAttributeConverter} from 'lit';
1+
import type {ComplexAttributeConverter} from 'lit';
22

3-
export const dateConverter: ComplexAttributeConverter<Date> = {
4-
toAttribute: (date: Date) => {
5-
// or set your favorite locale!
6-
return date.toLocaleDateString('en-US');
7-
},
8-
fromAttribute: (value: string) => {
9-
return new Date(value);
3+
export const dateConverter = (locale: string): ComplexAttributeConverter<Date> => {
4+
return {
5+
toAttribute: (date: Date) => {
6+
return date.toLocaleDateString(locale);
7+
},
8+
fromAttribute: (value: string) => {
9+
return new Date(value);
10+
}
1011
}
1112
};

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {dateConverter} from './date-converter.js';
44

55
@customElement('date-display')
66
export class DateDisplay extends LitElement {
7-
@property({converter: dateConverter, reflect: true})
7+
@property({converter: dateConverter(navigator.language), reflect: true})
88
date = new Date();
99

1010
render() {

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"extends": "/samples/base.json",
33
"files": {
44
"date-display.ts": {},
5-
"index.html": {},
6-
"date-converter.ts": {}
5+
"date-converter.ts": {},
6+
"index.html": {}
77
}
88
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ In this step, you'll add code to synchronize the `date` property with the `dateS
44

55
### Accept `date-str` as an attribute
66

7-
* Stop using JavaScript to set the `date` property of `date-display`.
7+
* Remove the `<script>` tag in `index.html`.
88
* Pass `05/05/22` to the `date-str` attribute of `date-display`.
99

1010
#### index.html

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

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,11 @@ In this step, you'll define a custom attribute converter that can convert a date
1010

1111
### Defining the custom attribute converter
1212

13-
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.
13+
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.
1414

15-
* Export a JavaScript object called `dateConverter`.
16-
* Define `dateConverter` with the following methods:
15+
* Export a function called `dateConverter`.
16+
* The function should receive a `locale` string as an argument.
17+
* `dateConverter` should return a JavaScript Object with the following methods:
1718
* `toAttribute`: a function that takes a `Date` and returns a string.
1819
* `fromAttribute`: a function that takes a string and returns a `Date`.
1920

@@ -22,28 +23,30 @@ You'll notice a new, empty file called <code>date-converter.<ts-js></ts-js></cod
2223
{% switchable-sample %}
2324

2425
```ts
25-
import {ComplexAttributeConverter} from 'lit';
26-
27-
export const dateConverter: ComplexAttributeConverter<Date> = {
28-
toAttribute: (date: Date) => {
29-
// or set your favorite locale!
30-
return date.toLocaleDateString('en-US');
31-
},
32-
fromAttribute: (value: string) => {
33-
return new Date(value);
26+
import type {ComplexAttributeConverter} from 'lit';
27+
28+
export const dateConverter = (locale: string): ComplexAttributeConverter<Date> => {
29+
return {
30+
toAttribute: (date: Date) => {
31+
return date.toLocaleDateString(locale);
32+
},
33+
fromAttribute: (value: string) => {
34+
return new Date(value);
35+
}
3436
}
3537
};
3638
```
3739

3840
```js
39-
export const dateConverter = {
40-
toAttribute: (date) => {
41-
// or set your favorite locale!
42-
return date.toLocaleDateString('en-US');
43-
},
44-
fromAttribute: (value) => {
45-
return new Date(value);
46-
},
41+
export const dateConverter = (locale) => {
42+
return {
43+
toAttribute: (date) => {
44+
return date.toLocaleDateString(locale);
45+
},
46+
fromAttribute: (value) => {
47+
return new Date(value);
48+
},
49+
};
4750
};
4851
```
4952

0 commit comments

Comments
 (0)