Skip to content

Commit

Permalink
Inject element polyfills where used using Babel
Browse files Browse the repository at this point in the history
  • Loading branch information
steverep committed May 24, 2024
1 parent 661b14d commit ea69a9a
Show file tree
Hide file tree
Showing 5 changed files with 100 additions and 64 deletions.
41 changes: 40 additions & 1 deletion build-scripts/babel-plugins/custom-polyfill-plugin.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,39 @@ const PolyfillSupport = {
safari: 17.4,
samsung: 15.0,
},
"element-append": {
android: 54,
chrome: 54,
edge: 17,
firefox: 49,
ios: 10.0,
opera: 41,
opera_mobile: 41,
safari: 10.0,
samsung: 6.0,
},
"element-getattributenames": {
android: 61,
chrome: 61,
edge: 18,
firefox: 45,
ios: 10.3,
opera: 48,
opera_mobile: 45,
safari: 10.1,
samsung: 8.0,
},
"element-toggleattribute": {
android: 69,
chrome: 69,
edge: 18,
firefox: 63,
ios: 12.0,
opera: 56,
opera_mobile: 48,
safari: 12.0,
samsung: 10.0,
},
fetch: {
android: 42,
chrome: 42,
Expand Down Expand Up @@ -69,6 +102,12 @@ const polyfillMap = {
key: "element-internals",
module: "element-internals-polyfill",
},
...Object.fromEntries(
["append", "getAttributeNames", "toggleAttribute"].map((prop) => {
const key = `element-${prop.toLowerCase()}`;
return [prop, { key, module: join(POLYFILL_DIR, `${key}.ts`) }];
})
),
},
static: {},
};
Expand All @@ -78,7 +117,7 @@ export default defineProvider(
({ createMetaResolver, debug, shouldInjectPolyfill }) => {
const resolvePolyfill = createMetaResolver(polyfillMap);
return {
name: "HA Custom",
name: "custom-polyfill",
polyfills: PolyfillSupport,
usageGlobal(meta, utils) {
const polyfill = resolvePolyfill(meta);
Expand Down
63 changes: 0 additions & 63 deletions src/resources/compatibility.ts
Original file line number Diff line number Diff line change
@@ -1,65 +1,2 @@
// Caution before editing - For latest builds, this module is replaced with emptiness and thus not imported (see build-scripts/bundle.js)
import "lit/polyfill-support";

// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md
(function (arr) {
arr.forEach((item) => {
if (Object.prototype.hasOwnProperty.call(item, "append")) {
return;
}
Object.defineProperty(item, "append", {
configurable: true,
enumerable: true,
writable: true,
value: function append(...argArr) {
const docFrag = document.createDocumentFragment();

argArr.forEach((argItem) => {
const isNode = argItem instanceof Node;
docFrag.appendChild(
isNode ? argItem : document.createTextNode(String(argItem))
);
});

this.appendChild(docFrag);
},
});
});
})([Element.prototype, Document.prototype, DocumentFragment.prototype]);

// Source: https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttributeNames
if (Element.prototype.getAttributeNames === undefined) {
Element.prototype.getAttributeNames = function () {
const attributes = this.attributes;
const length = attributes.length;
const result = new Array(length);
for (let i = 0; i < length; i++) {
result[i] = attributes[i].name;
}
return result;
};
}

// Source: https://gist.github.com/rebelchris/365f26f95d7e9f432f64f21886d9b9ef
if (!Element.prototype.toggleAttribute) {
Element.prototype.toggleAttribute = function (name, force) {
if (force !== undefined) {
force = !!force;
}

if (this.hasAttribute(name)) {
if (force) {
return true;
}

this.removeAttribute(name);
return false;
}
if (force === false) {
return false;
}

this.setAttribute(name, "");
return true;
};
}
25 changes: 25 additions & 0 deletions src/resources/polyfills/element-append.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md
(function (arr) {
arr.forEach((item) => {
if (Object.prototype.hasOwnProperty.call(item, "append")) {
return;
}
Object.defineProperty(item, "append", {
configurable: true,
enumerable: true,
writable: true,
value: function append(...argArr) {
const docFrag = document.createDocumentFragment();

argArr.forEach((argItem) => {
const isNode = argItem instanceof Node;
docFrag.appendChild(
isNode ? argItem : document.createTextNode(String(argItem))
);
});

this.appendChild(docFrag);
},
});
});
})([Element.prototype, Document.prototype, DocumentFragment.prototype]);
12 changes: 12 additions & 0 deletions src/resources/polyfills/element-getattributenames.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
// Source: https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttributeNames
if (Element.prototype.getAttributeNames === undefined) {
Element.prototype.getAttributeNames = function () {
const attributes = this.attributes;
const length = attributes.length;
const result = new Array(length);
for (let i = 0; i < length; i++) {
result[i] = attributes[i].name;
}
return result;
};
}
23 changes: 23 additions & 0 deletions src/resources/polyfills/element-toggleattribute.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
// Source: https://gist.github.com/rebelchris/365f26f95d7e9f432f64f21886d9b9ef
if (!Element.prototype.toggleAttribute) {
Element.prototype.toggleAttribute = function (name, force) {
if (force !== undefined) {
force = !!force;
}

if (this.hasAttribute(name)) {
if (force) {
return true;
}

this.removeAttribute(name);
return false;
}
if (force === false) {
return false;
}

this.setAttribute(name, "");
return true;
};
}

0 comments on commit ea69a9a

Please sign in to comment.