hydro-js - npm Package Compare versions
Comparing version 1.2.7 to 1.2.8
| # Changelog | ||
| ## 1.2.8- 2021-01-24 | ||
| - Add support for `html`, `head` and `body` element. The html function can create every element now. | ||
| ## 1.2.7- 2021-01-17 | ||
@@ -4,0 +8,0 @@ |
@@ -29,3 +29,3 @@ // Safari Polyfills | ||
| const reactivityRegex = /\{\{((\s|.)*?)\}\}/; | ||
| const eventListenerRegex = /on(\w+)=/; | ||
| const HTML_FIND_INVALID = /<(\/?)(html|head|body)(>|\s.*?>)/g; | ||
| const newLineRegex = /\n/g; | ||
@@ -119,3 +119,2 @@ const propChainRegex = /[\.\[\]]/; | ||
| } | ||
| // This does not create <html>, <body> or <head> Elements. | ||
| // That is fine because the render function only renders within a body without a where parameter | ||
@@ -170,3 +169,21 @@ function html(htmlArray, // The Input String, which is splitted by the template variables | ||
| }); | ||
| const DOM = parser(String.raw(htmlArray, ...resolvedVariables).trim()); | ||
| // Find elements <html|head|body>, as they cannot be created by the parser. Replace them by fake Custom Elements and replace them afterwards. | ||
| let DOMString = String.raw(htmlArray, ...resolvedVariables).trim(); | ||
| DOMString = DOMString.replace(HTML_FIND_INVALID, `<$1$2${"-dummy" /* dummy */}$3`); | ||
| const DOM = parser(DOMString); | ||
| const root = document.createNodeIterator(DOM, window.NodeFilter.SHOW_ELEMENT, { | ||
| acceptNode(element) { | ||
| return element.localName.endsWith("-dummy" /* dummy */) | ||
| ? NodeFilter.FILTER_ACCEPT | ||
| : NodeFilter.FILTER_REJECT; | ||
| }, | ||
| }); | ||
| let elem; | ||
| while ((elem = root.nextNode())) { | ||
| const tag = elem.localName.replace("-dummy" /* dummy */, ""); | ||
| const replacement = document.createElement(tag); | ||
| //@ts-ignore | ||
| replacement.append(...elem.childNodes); | ||
| elem.replaceWith(replacement); | ||
| } | ||
| // Insert HTML Elements, which were stored in insertNodes | ||
@@ -173,0 +190,0 @@ DOM.querySelectorAll("template[id^=lbInsertNodes]").forEach((template) => replaceElement(insertNodes.shift(), template, false)); |
@@ -29,3 +29,3 @@ // Safari Polyfills | ||
| const reactivityRegex = /\{\{((\s|.)*?)\}\}/; | ||
| const eventListenerRegex = /on(\w+)=/; | ||
| const HTML_FIND_INVALID = /<(\/?)(html|head|body)(>|\s.*?>)/g; | ||
| const newLineRegex = /\n/g; | ||
@@ -119,3 +119,2 @@ const propChainRegex = /[\.\[\]]/; | ||
| } | ||
| // This does not create <html>, <body> or <head> Elements. | ||
| // That is fine because the render function only renders within a body without a where parameter | ||
@@ -170,3 +169,21 @@ function html(htmlArray, // The Input String, which is splitted by the template variables | ||
| }); | ||
| const DOM = parser(String.raw(htmlArray, ...resolvedVariables).trim()); | ||
| // Find elements <html|head|body>, as they cannot be created by the parser. Replace them by fake Custom Elements and replace them afterwards. | ||
| let DOMString = String.raw(htmlArray, ...resolvedVariables).trim(); | ||
| DOMString = DOMString.replace(HTML_FIND_INVALID, `<$1$2${"-dummy" /* dummy */}$3`); | ||
| const DOM = parser(DOMString); | ||
| const root = document.createNodeIterator(DOM, window.NodeFilter.SHOW_ELEMENT, { | ||
| acceptNode(element) { | ||
| return element.localName.endsWith("-dummy" /* dummy */) | ||
| ? NodeFilter.FILTER_ACCEPT | ||
| : NodeFilter.FILTER_REJECT; | ||
| }, | ||
| }); | ||
| let elem; | ||
| while ((elem = root.nextNode())) { | ||
| const tag = elem.localName.replace("-dummy" /* dummy */, ""); | ||
| const replacement = document.createElement(tag); | ||
| //@ts-ignore | ||
| replacement.append(...elem.childNodes); | ||
| elem.replaceWith(replacement); | ||
| } | ||
| // Insert HTML Elements, which were stored in insertNodes | ||
@@ -173,0 +190,0 @@ DOM.querySelectorAll("template[id^=lbInsertNodes]").forEach((template) => replaceElement(insertNodes.shift(), template, false)); |
| { | ||
| "name": "hydro-js", | ||
| "version": "1.2.7", | ||
| "version": "1.2.8", | ||
| "description": "A lightweight reactive library", | ||
@@ -33,4 +33,4 @@ "type": "module", | ||
| "@types/concurrently": "^5.2.1", | ||
| "@web/test-runner": "^0.12.1", | ||
| "@web/test-runner-playwright": "^0.8.0", | ||
| "@web/test-runner": "^0.12.6", | ||
| "@web/test-runner-playwright": "^0.8.1", | ||
| "concurrently": "^5.3.0", | ||
@@ -37,0 +37,0 @@ "serve": "^11.3.2", |
@@ -12,3 +12,3 @@ <img align="right" alt="100% Coverage" src="coverage.svg"> | ||
| ```properties | ||
| $ npx create-hydro-app@latest <project> // or $ npm init hydro-app@latest <project> | ||
| $ npm init hydro-app@latest <project> // or npx create-hydro-app@latest <project> | ||
| ``` | ||
@@ -15,0 +15,0 @@ |
@@ -74,2 +74,3 @@ declare const window: any; | ||
| checkbox = "checkbox", | ||
| dummy = "-dummy", | ||
| } | ||
@@ -111,3 +112,3 @@ | ||
| const reactivityRegex = /\{\{((\s|.)*?)\}\}/; | ||
| const eventListenerRegex = /on(\w+)=/; | ||
| const HTML_FIND_INVALID = /<(\/?)(html|head|body)(>|\s.*?>)/g; | ||
| const newLineRegex = /\n/g; | ||
@@ -217,3 +218,2 @@ const propChainRegex = /[\.\[\]]/; | ||
| } | ||
| // This does not create <html>, <body> or <head> Elements. | ||
| // That is fine because the render function only renders within a body without a where parameter | ||
@@ -271,4 +271,32 @@ function html( | ||
| }); | ||
| const DOM = parser(String.raw(htmlArray, ...resolvedVariables).trim()); | ||
| // Find elements <html|head|body>, as they cannot be created by the parser. Replace them by fake Custom Elements and replace them afterwards. | ||
| let DOMString = String.raw(htmlArray, ...resolvedVariables).trim(); | ||
| DOMString = DOMString.replace( | ||
| HTML_FIND_INVALID, | ||
| `<$1$2${Placeholder.dummy}$3` | ||
| ); | ||
| const DOM = parser(DOMString); | ||
| const root = document.createNodeIterator( | ||
| DOM, | ||
| window.NodeFilter.SHOW_ELEMENT, | ||
| { | ||
| acceptNode(element: Element) { | ||
| return element.localName.endsWith(Placeholder.dummy) | ||
| ? NodeFilter.FILTER_ACCEPT | ||
| : NodeFilter.FILTER_REJECT; | ||
| }, | ||
| } | ||
| ); | ||
| let elem; | ||
| while ((elem = root.nextNode())) { | ||
| const tag = (elem as Element).localName.replace(Placeholder.dummy, ""); | ||
| const replacement = document.createElement(tag); | ||
| //@ts-ignore | ||
| replacement.append(...(elem as Element).childNodes); | ||
| (elem as Element).replaceWith(replacement); | ||
| } | ||
| // Insert HTML Elements, which were stored in insertNodes | ||
@@ -275,0 +303,0 @@ DOM.querySelectorAll("template[id^=lbInsertNodes]").forEach((template) => |
@@ -101,6 +101,8 @@ import { | ||
| describe("html", () => { | ||
| // Test all HTML Elements expect html, head and body | ||
| // https://developer.mozilla.org/en-US/docs/Web/HTML/Element | ||
| // https://en.wikipedia.org/wiki/HTML_element | ||
| [ | ||
| "html", | ||
| "head", | ||
| "body", | ||
| "link", | ||
@@ -224,2 +226,16 @@ "meta", | ||
| it("handles a new html doc correctly", () => { | ||
| const elem = html`<html> | ||
| <head></head> | ||
| <body> | ||
| a | ||
| </body> | ||
| </html>` as Element; | ||
| return ( | ||
| elem.localName === "html" && | ||
| !!elem.querySelector("head") && | ||
| !!elem.querySelector("body") | ||
| ); | ||
| }); | ||
| it("returns empty text node", () => { | ||
@@ -226,0 +242,0 @@ return document.createTextNode("").isEqualNode(html``); |
Sorry, the diff of this file is not supported yet
Improved metrics
- Total package byte prevSize
- increased by1.2%
289918
- Lines of code
- increased by1.33%
5642