diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..7d6ad5f --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +.DS_Store +node_modules/* diff --git a/README.md b/README.md index b7d2df6..7ece1f5 100644 --- a/README.md +++ b/README.md @@ -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/) \ No newline at end of file diff --git a/demo.html b/demo.html new file mode 100644 index 0000000..ffd4827 --- /dev/null +++ b/demo.html @@ -0,0 +1,23 @@ + + + + Test Upgrader + + +

Basic Header

+ Flashy Header +

Basic Header Upgrdaed (Delay)

+ + + + + + \ No newline at end of file diff --git a/example.gif b/example.gif new file mode 100644 index 0000000..72919d8 Binary files /dev/null and b/example.gif differ diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..dcb4c11 --- /dev/null +++ b/package-lock.json @@ -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 + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..00dff57 --- /dev/null +++ b/package.json @@ -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" + } +} diff --git a/wc-upgrader.mjs b/wc-upgrader.mjs new file mode 100644 index 0000000..8c2e782 --- /dev/null +++ b/wc-upgrader.mjs @@ -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; \ No newline at end of file