Skip to content

Commit ad4bb13

Browse files
author
Luiz
committed
Improve examples
1 parent 27f4dc8 commit ad4bb13

File tree

10 files changed

+74
-48
lines changed

10 files changed

+74
-48
lines changed

‎examples/dedicated-elements/my-app.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { LitElement, html } from 'lit'
2-
import '../../context-provider.js'
3-
import '../../context-consumer.js'
4-
import { createContext } from '../../core.js'
2+
import 'wc-context/context-provider.js'
3+
import 'wc-context/context-consumer.js'
4+
import { createContext } from 'wc-context/core.js'
55

66
const numCtx = createContext('num') // context could be also a string
77

@@ -26,11 +26,11 @@ class MyApp extends LitElement {
2626
return html`<button @click=${this.toggleNumberClick}>
2727
Toggle provided number
2828
</button>
29-
<context-provider key=${numCtx} .value=${this.providedNumber}>
29+
<context-provider context=${numCtx} .value=${this.providedNumber}>
3030
<div>Provided number: ${this.providedNumber}</div>
3131
<div>
3232
<context-consumer
33-
key=${numCtx}
33+
context=${numCtx}
3434
@context-update=${this.numContextUpdate}
3535
></context-consumer>
3636
<div>Consumed number ${this.consumedNumber}</div>

‎examples/lazy-data/cat-facts.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { LitElement, html } from 'lit'
2-
import { ContextConsumer } from '../../consumer.js'
2+
import { ContextConsumer } from 'wc-context/controllers.js'
33

4+
// no need to use withContext mixin when using reactive controller
45
class CatFacts extends LitElement {
56
// using controller
67
catFactContext = new ContextConsumer(this, 'catFact')

‎examples/lazy-data/dataProvider.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ContextProvider } from '../../provider.js'
1+
import { ContextProvider } from 'wc-context/controllers.js'
22
import { observeData } from './dataService.js'
33

44
export class DataProvider extends ContextProvider {

‎examples/lazy-data/dataService.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,13 @@ export function observeData(subscriber) {
2222
subscriber({ data: {}, error: 'An arbitray error', loading: false })
2323
return
2424
}
25-
const response = await fetch('https://catfact.ninja/fact')
26-
const data = await response.json()
27-
subscriber({ data, error: null, loading: false })
25+
try {
26+
const response = await fetch('https://catfact.ninja/fact')
27+
const data = await response.json()
28+
subscriber({ data, error: null, loading: false })
29+
} catch (error) {
30+
subscriber({ data: {}, error, loading: false })
31+
}
2832
}, 10000)
2933

3034
subscriber(undefined)

‎examples/lit-light-dom/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
</head>
1111

1212
<body>
13-
13+
<context-example></context-example>
1414
</body>
1515

1616
</html>

‎examples/lit-light-dom/src/component.js‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎examples/lit-light-dom/src/index.js‎

Lines changed: 28 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { html } from 'lit'
1+
import { css, html, LitElement } from 'lit'
22
import { styles } from './styles.js'
3-
import { Component } from './component.js'
3+
import { withContext, contextProvider } from 'wc-context/lit.js'
44

5-
class ThemeProvider extends Component {
5+
class ThemeProvider extends withContext(LitElement) {
66
static get properties() {
77
return {
88
theme: { type: String },
@@ -31,7 +31,7 @@ class ThemeProvider extends Component {
3131
}
3232
}
3333

34-
class ThemeConsumer extends Component {
34+
class ThemeConsumer extends withContext(LitElement) {
3535
static properties = {
3636
theme: { type: String, context: 'theme' },
3737
}
@@ -48,7 +48,7 @@ class ThemeConsumer extends Component {
4848
}
4949
}
5050

51-
class TitleProvider extends Component {
51+
class TitleProvider extends withContext(LitElement) {
5252
static get properties() {
5353
return {
5454
value: { type: String, providedContext: 'title' },
@@ -60,7 +60,7 @@ class TitleProvider extends Component {
6060
}
6161
}
6262

63-
class TitleThemeConsumer extends Component {
63+
class TitleThemeConsumer extends withContext(LitElement) {
6464
static properties = {
6565
title: { context: 'title' },
6666
theme: { context: 'theme' },
@@ -81,12 +81,23 @@ class TitleThemeConsumer extends Component {
8181
}
8282
}
8383

84-
class App extends Component {
84+
class App extends withContext(LitElement) {
8585
static get properties() {
8686
return {
8787
state: { type: Object },
8888
}
8989
}
90+
91+
static get styles() {
92+
return [
93+
css`
94+
.subtitle {
95+
margin-top: 8px;
96+
}
97+
`,
98+
]
99+
}
100+
90101
constructor() {
91102
super()
92103
this.state = { title: 'one title' }
@@ -107,17 +118,26 @@ class App extends Component {
107118
<theme-provider>
108119
<theme-consumer></theme-consumer>
109120
</theme-provider>
121+
<div class="subtitle">Nested providers</div>
110122
<theme-provider>
111123
<theme-provider theme="blue" alttheme="yellow">
112124
<theme-consumer></theme-consumer>
113125
</theme-provider>
114126
</theme-provider>
127+
<div class="subtitle">Consume two contexts</div>
115128
<theme-provider>
129+
<button @click=${this.toggleTitle}>Toggle title</button>
116130
<title-provider value=${this.state.title}>
117131
<titletheme-consumer></titletheme-consumer>
118132
</title-provider>
119133
</theme-provider>
120-
<button @click=${this.toggleTitle}>Toggle title</button>
134+
<div class="subtitle">Using directive</div>
135+
<div ${contextProvider('theme', 'blue')}>
136+
<theme-consumer></theme-consumer>
137+
</div>
138+
<div ${contextProvider('theme', 'yellow')}>
139+
<theme-consumer></theme-consumer>
140+
</div>
121141
</div>
122142
`
123143
}
@@ -128,7 +148,3 @@ customElements.define('theme-consumer', ThemeConsumer)
128148
customElements.define('title-provider', TitleProvider)
129149
customElements.define('titletheme-consumer', TitleThemeConsumer)
130150
customElements.define('context-example', App)
131-
132-
const appEl = document.createElement('context-example')
133-
134-
document.body.appendChild(appEl)

‎examples/lit-shadow-dom/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
</head>
1111

1212
<body>
13-
13+
<context-example></context-example>
1414
</body>
1515

1616
</html>

‎examples/lit-shadow-dom/src/component.js‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎examples/lit-shadow-dom/src/index.js‎

Lines changed: 29 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { html } from 'lit'
1+
import { html, LitElement, css } from 'lit'
2+
import { withContext, contextProvider } from 'wc-context/lit'
23
import { styles } from './styles.js'
3-
import { Component } from './component.js'
44

5-
class ThemeSwitcher extends Component {
5+
class ThemeSwitcher extends withContext(LitElement) {
66
static properties = {
77
theme: { type: String },
88
alttheme: { type: String },
@@ -31,7 +31,7 @@ class ThemeSwitcher extends Component {
3131
}
3232
}
3333

34-
class ThemeProvider extends Component {
34+
class ThemeProvider extends withContext(LitElement) {
3535
static properties = {
3636
theme: { type: String, providedContext: 'theme' },
3737
}
@@ -41,7 +41,7 @@ class ThemeProvider extends Component {
4141
}
4242
}
4343

44-
class ThemeConsumer extends Component {
44+
class ThemeConsumer extends withContext(LitElement) {
4545
static observedContexts = ['theme']
4646

4747
contextChangedCallback(name, oldValue, value) {
@@ -58,7 +58,7 @@ class ThemeConsumer extends Component {
5858
}
5959
}
6060

61-
class TitleProvider extends Component {
61+
class TitleProvider extends withContext(LitElement) {
6262
static properties = {
6363
value: { type: String, providedContext: 'title' },
6464
}
@@ -68,7 +68,7 @@ class TitleProvider extends Component {
6868
}
6969
}
7070

71-
class TitleThemeConsumer extends Component {
71+
class TitleThemeConsumer extends withContext(LitElement) {
7272
static observedContexts = ['title', 'theme']
7373

7474
contextChangedCallback(name, oldValue, value) {
@@ -87,7 +87,17 @@ class TitleThemeConsumer extends Component {
8787
}
8888
}
8989

90-
class App extends Component {
90+
class App extends withContext(LitElement) {
91+
static get styles() {
92+
return [
93+
css`
94+
.subtitle {
95+
margin-top: 8px;
96+
}
97+
`,
98+
]
99+
}
100+
91101
static properties = {
92102
state: { type: Object },
93103
}
@@ -108,20 +118,31 @@ class App extends Component {
108118
render() {
109119
return html`
110120
<div>
121+
<div class="subtitle">Consumer on light dom</div>
111122
<theme-switcher id="p1">
112123
<theme-consumer id="c1"></theme-consumer>
113124
</theme-switcher>
125+
126+
<div class="subtitle">Nested providers</div>
114127
<theme-switcher id="p2">
115128
<theme-switcher id="p3" theme="blue" alttheme="yellow">
116129
<theme-consumer id="c2"></theme-consumer>
117130
</theme-switcher>
118131
</theme-switcher>
132+
<div class="subtitle">Consume two contexts</div>
119133
<theme-switcher id="p4">
120134
<title-provider value=${this.state.title}>
121135
<titletheme-consumer></titletheme-consumer>
122136
</title-provider>
123137
</theme-switcher>
124138
<button @click=${this.toggleTitle}>Toggle title</button>
139+
<div class="subtitle">Using directive</div>
140+
<div ${contextProvider('theme', 'blue')}>
141+
<theme-consumer></theme-consumer>
142+
</div>
143+
<div ${contextProvider('theme', 'yellow')}>
144+
<theme-consumer></theme-consumer>
145+
</div>
125146
</div>
126147
`
127148
}
@@ -133,7 +154,3 @@ customElements.define('theme-consumer', ThemeConsumer)
133154
customElements.define('title-provider', TitleProvider)
134155
customElements.define('titletheme-consumer', TitleThemeConsumer)
135156
customElements.define('context-example', App)
136-
137-
const appEl = document.createElement('context-example')
138-
139-
document.body.appendChild(appEl)

0 commit comments

Comments
 (0)