Caleb/wc-upgrader
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Initial Commit

Browse Source
This commit is contained in:
Caleb Braaten 2020-02-04 11:23:58 -08:00
parent a8f6e3a14f
commit dc48c259e3
7 changed files with 146 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
.DS_Store
node_modules/*

41
README.md
View File

@ -1,2 +1,39 @@
# wc-upgrader
A JS Module to track HTML elements and change them to custom web components when they are registered.
# WC-Upgrader
WC-Upgrader is a JS Utility that 'upgrades' elements to the specified custom element when they are defined.
![Example gif](./example.gif)
1. **Basic Header:** This is just an h1 element
2. **Flash Header:** This is using the custom element directly. There is just a text node until the custom element is defined so it renders with no styles or semantic meaning.
3. **Basic Header Upgraded (Delay):** This is an h1 element that gets upgraded to the custom element when it is defined in the browser. In the demo there is a setTimeout to demonstrate how it is less disruptive to upgrade an element rather than have a text node to start.
## Installation
```
npm install wc-upgrader
```
## Usage
```javascript
import wcUpgrader from 'node_modules/wc-upgrader/wc-upgrader.mjs'
const Upgrader = new wcUpgrader();
Upgrader.upgradeOnDefined('custom-element', 'CSSSelector');
```
*Technically speaking, this just makes a new element and moves the children from the old tree under it. You could use this to change an arbitrary element into another one and retain it's children.
\**The custom element does not need to be defined immediately but it will need to be at some point or there will just be a hanging async task
## Demo
To try the demo file yourself do the following steps.
1. Clone the Repo
2. Run ```npm install``` to get the sample web component *Flashy-Header*
3. Use something like [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) to view demo.html (wc-upgrader is a module so you'll get a CORS error if you don't)
## Contributing
Feedback and pull requests are welcome! Please open issues so we can discuss any feature ideas or bugs found.
## License
[MIT](https://choosealicense.com/licenses/mit/)

23
demo.html Normal file
View File

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<title>Test Upgrader</title>
</head>
<body>
<h1>Basic Header</h1>
<flashy-header>Flashy Header</flashy-header>
<h1 id="upgrade">Basic Header Upgrdaed (Delay)</h1>
</body>
<script src="node_modules/flashy-header/flashy-header.js"></script>
<script type="module">
import wcUpgrader from './wc-upgrader.mjs'
const Upgrader = new wcUpgrader();
setTimeout(() => {
Upgrader.upgradeOnDefined('flashy-header', '#upgrade');
}, 1500);
</script>
</html>

BIN
example.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 910 KiB

14
package-lock.json generated Normal file
View File

@ -0,0 +1,14 @@
{
"name": "wc-upgrader",
"version": "1.0.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"flashy-header": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/flashy-header/-/flashy-header-1.0.0.tgz",
"integrity": "sha512-0CdMzfpc7xUAbXu+yh97uaQCQ9sGp88YZPbqVqYRdCFwJs5eijPlRUBq1G3KI/WFg8xNl+PguSXzQ1Vp4A1SiQ==",
"dev": true
}
}
}

33
package.json Normal file
View File

@ -0,0 +1,33 @@
{
"name": "wc-upgrader",
"version": "1.0.0",
"description": "WC-Upgrader is a JS Utility that 'upgrades' elements to the specified custom element when they are defined. ",
"main": "wc-upgrader.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/CalebBraaten/wc-upgrader.git"
},
"keywords": [
"Web",
"Components",
"Custom",
"Elements",
"Client",
"Side",
"Vanilla",
"JS"
],
"author": "Caleb Braaten",
"license": "MIT",
"bugs": {
"url": "https://github.com/CalebBraaten/wc-upgrader/issues"
},
"homepage": "https://github.com/CalebBraaten/wc-upgrader#readme",
"dependencies": {},
"devDependencies": {
"flashy-header": "^1.0.0"
}
}

35
wc-upgrader.mjs Normal file
View File

@ -0,0 +1,35 @@
class wcUpgrader {
upgradeOnDefined(elemDef, target){
customElements.whenDefined(elemDef)
.then( () => {
let oldElements = document.querySelectorAll(target);
for(let i = 0; i < oldElements.length; i++){
this._appendToDOM(elemDef, oldElements[i])
}
});
}
_appendToDOM(elemDef, targetElement){
// Works but elements are added to the DOM multiple times if nested
// within other elements that get upgraded - constructors are ran each time
// let newElem = document.createElement(elemDef);
// newElem.innerHTML = targetElem.innerHTML;
// targetElem.parentNode.replaceChild(newElem, targetElem);
let newElement = document.createElement(elemDef);
const parentNode = targetElement.parentNode;
for(let i=0; i < parentNode.childNodes.length; i++){
if(targetElement.isSameNode(parentNode.childNodes[i])){
parentNode.insertBefore(newElement, parentNode.childNodes[i]);
while(targetElement.firstChild){
newElement.appendChild(targetElement.firstChild);
}
targetElement.parentNode.removeChild(targetElement);
break;
}
}
}
}
export default wcUpgrader;