Skip to content

Commit d3ea7fa

Browse files
castastrophegithub-actions[bot]
castastrophe
and
github-actions[bot]
authored
feat: gracefully fail on duplicate registration (#1728)
* feat: Pull out polyfill and pfelement updates * feat: Update changelog * feat: Bring in update to parsing tool * feat: Polyfills * feat: Add comment for polyfill file * feat: Update polyfill and todos * feat: Pull out styles/html into separate PR #1730 * feat: Update todos and polyfills listing * feat: Update test cases * feat: Split out tests into 2 * feat: Pull out context tests into separate file Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
1 parent c68f59d commit d3ea7fa

File tree

7 files changed

+334
-173
lines changed

7 files changed

+334
-173
lines changed

‎CHANGELOG-1.x.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
# 1.10.2 (2021)
1+
# 1.11.0 (2021)
22

3-
- [](https://github.com/patternfly/patternfly-elements/commit/) fix: Jump links parseInt for IE11
3+
- [](https://github.com/patternfly/patternfly-elements/commit/) feat: Graceful failure for component registry
4+
- [5f88c39](https://github.com/patternfly/patternfly-elements/commit/5f88c3963f8a6c13a9aeba6e9f664678453d46ce) fix: Jump links parseInt for IE11
45

56
# 1.10.1 (2021-07-12)
67

‎docs/_data/todos.json‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎elements/pfelement/src/pfelement.js‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1026,7 +1026,23 @@ class PFElement extends HTMLElement {
10261026
pfe._createCache();
10271027
pfe._populateCache(pfe);
10281028
pfe._validateProperties();
1029-
window.customElements.define(pfe.tag, pfe);
1029+
1030+
try {
1031+
window.customElements.define(pfe.tag, pfe);
1032+
} catch (err) {
1033+
// Capture the class currently using this tag in the registry
1034+
const prevDefinition = window.customElements.get(pfe.tag);
1035+
1036+
// Check if the previous definition's version matches this one
1037+
if (prevDefinition && prevDefinition.version !== pfe.version) {
1038+
this.warn(
1039+
`${pfe.tag} was registered at version ${prevDefinition.version}; cannot register version ${pfe.version}.`
1040+
);
1041+
}
1042+
1043+
// @TODO Should this error be reported to the console?
1044+
if (err && err.message) this.log(err.message);
1045+
}
10301046

10311047
if (PFElement.trackPerformance()) {
10321048
try {

‎elements/pfelement/test/index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,11 @@
1515
'pfelement_properties_test.html',
1616
'pfelement_cascade_attribute_test.html',
1717
'pfelement_logging_test.html',
18+
'pfelement_context_test.html',
1819
// @TODO: Deprecate after 1.0
1920
'old-test/pfelement_test.html',
2021
'old-test/pfelement_cascade_attribute_test.html',
21-
'old-test/pfelement_logging_test.html'
22+
'old-test/pfelement_logging_test.html',
2223
]);
2324

2425
</script>

‎elements/pfelement/test/pfelement_context_test.html‎

Lines changed: 230 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,230 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
7+
<script src="/components/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
8+
<script src="/components/web-component-tester/browser.js"></script>
9+
</head>
10+
11+
<body>
12+
13+
<pfelement>
14+
This is the element content.
15+
</pfelement>
16+
17+
<script type="module">
18+
import PFElement from "../dist/pfelement.js";
19+
20+
const colors = ["red", "yellow", "blue"];
21+
22+
class TestElement extends PFElement {
23+
static get tag() {
24+
return "pfe-test-element"
25+
}
26+
27+
static get version() {
28+
return "1.0";
29+
}
30+
31+
get html() {
32+
return `
33+
<style>:host{--context:dark;}</style>
34+
<div>Test Element</div>
35+
`;
36+
}
37+
38+
constructor() {
39+
super(TestElement, { type: PFElement.PfeTypes.Content });
40+
}
41+
}
42+
43+
PFElement.create(TestElement);
44+
45+
class TestChildElement extends PFElement {
46+
static get tag() {
47+
return "pfe-test-child-element"
48+
}
49+
50+
get html() {
51+
return `
52+
<div>Test Child Element</div>
53+
`;
54+
}
55+
56+
constructor() {
57+
super(TestChildElement, { type: PFElement.PfeTypes.Content });
58+
}
59+
}
60+
61+
PFElement.create(TestChildElement);
62+
63+
suite('<pfelement>', () => {
64+
teardown(() => {
65+
const testElement = document.getElementById("test-element");
66+
67+
if (!testElement) return;
68+
69+
document.body.removeChild(testElement);
70+
});
71+
72+
test("it should default to the provided --context variable in the component's stylesheet", () => {
73+
const testElement = document.createElement("pfe-test-element");
74+
75+
testElement.id = "test-element";
76+
document.body.appendChild(testElement);
77+
78+
assert.equal(testElement.getAttribute("on"), "dark");
79+
});
80+
81+
test("it should update the on attribute if style with --context is manually added after upgrade", () => {
82+
const testElement = document.createElement("pfe-test-element");
83+
84+
testElement.id = "test-element";
85+
document.body.appendChild(testElement);
86+
87+
testElement.setAttribute("style", "color: pink; --context: light;");
88+
89+
assert.equal(testElement.getAttribute("on"), "light");
90+
});
91+
92+
test("it should favor context attribute over the --context variable", () => {
93+
const testElement = document.createElement("pfe-test-element");
94+
95+
testElement.id = "test-element";
96+
document.body.appendChild(testElement);
97+
98+
testElement.setAttribute("context", "saturated");
99+
testElement.setAttribute("style", "color: pink; --context: light;");
100+
101+
assert.equal(testElement.getAttribute("on"), "saturated");
102+
});
103+
104+
test("it should update the on attribute if context is manually added after upgrade", () => {
105+
const testElement = document.createElement("pfe-test-element");
106+
107+
testElement.id = "test-element";
108+
document.body.appendChild(testElement);
109+
110+
document.querySelector("#test-element").setAttribute("context", "light");
111+
112+
assert.equal(testElement.getAttribute("on"), "light");
113+
});
114+
115+
test("it should push down the context to children", done => {
116+
const testElement = document.createElement("pfe-test-element");
117+
const testChildElement = document.createElement("pfe-test-child-element");
118+
119+
testElement.id = "test-element";
120+
testChildElement.id = "test-child-element";
121+
122+
testElement.appendChild(testChildElement);
123+
document.body.appendChild(testElement);
124+
125+
flush(() => {
126+
assert.equal(testChildElement.getAttribute("on"), "dark");
127+
done();
128+
});
129+
});
130+
131+
test("it should push an attribute override context down to the children", done => {
132+
const testElement = document.createElement("pfe-test-element");
133+
const testChildElement = document.createElement("pfe-test-child-element");
134+
135+
testElement.id = "test-element";
136+
testChildElement.id = "test-child-element";
137+
138+
testElement.appendChild(testChildElement);
139+
document.body.appendChild(testElement);
140+
141+
// Add the context information
142+
testElement.setAttribute("context", "light");
143+
144+
flush(() => {
145+
assert.equal(testChildElement.getAttribute("on"), "light");
146+
done();
147+
});
148+
});
149+
150+
test("it should push a variable override context down to the children", done => {
151+
const testElement = document.createElement("pfe-test-element");
152+
const testChildElement = document.createElement("pfe-test-child-element");
153+
154+
testElement.id = "test-element";
155+
testChildElement.id = "test-child-element";
156+
157+
testElement.appendChild(testChildElement);
158+
document.body.appendChild(testElement);
159+
160+
// Add the context information
161+
testElement.setAttribute("style", "--context: light;");
162+
163+
flush(() => {
164+
assert.equal(testChildElement.getAttribute("on"), "light");
165+
done();
166+
});
167+
});
168+
169+
test("it should favor child's context if set via variable --context", () => {
170+
const testElement = document.createElement("pfe-test-element");
171+
const testChildElement = document.createElement("pfe-test-child-element");
172+
173+
testElement.id = "test-element";
174+
testChildElement.id = "test-child-element";
175+
176+
testElement.appendChild(testChildElement);
177+
document.body.appendChild(testElement);
178+
179+
// Add the context information
180+
testChildElement.setAttribute("style", "--context: light;");
181+
182+
assert.equal(testChildElement.getAttribute("on"), "light");
183+
});
184+
185+
test("it should favor child's context if the child has context set", () => {
186+
const testElement = document.createElement("pfe-test-element");
187+
const testChildElement = document.createElement("pfe-test-child-element");
188+
189+
testElement.id = "test-element";
190+
testChildElement.id = "test-child-element";
191+
192+
testElement.appendChild(testChildElement);
193+
document.body.appendChild(testElement);
194+
195+
// Add the context information
196+
testChildElement.setAttribute("context", "light");
197+
198+
assert.equal(testChildElement.getAttribute("on"), "light");
199+
});
200+
201+
// @TODO Deprecated for 1.0
202+
test("it should update the on attribute if style with --theme is manually added after upgrade", () => {
203+
const testElement = document.createElement("pfe-test-element");
204+
205+
testElement.id = "test-element";
206+
document.body.appendChild(testElement);
207+
208+
assert.equal(testElement.getAttribute("on"), "dark");
209+
testElement.setAttribute("style", "color: pink; --theme: light;");
210+
assert.equal(testElement.getAttribute("on"), "light");
211+
});
212+
213+
// @TODO Deprecated for 1.0
214+
test("it should update the on and context attributes if pfe-theme is manually added after upgrade", () => {
215+
const testElement = document.createElement("pfe-test-element");
216+
217+
testElement.id = "test-element-theme";
218+
document.body.appendChild(testElement);
219+
220+
document.querySelector("#test-element-theme").setAttribute("pfe-theme", "light");
221+
222+
assert.equal(testElement.getAttribute("on"), "light");
223+
assert.equal(testElement.getAttribute("context"), "light");
224+
});
225+
226+
});
227+
</script>
228+
</body>
229+
230+
</html>

0 commit comments

Comments
 (0)