@netflix/x-element - npm Package Compare versions

Comparing version 1.0.0-rc.52 to 1.0.0-rc.53

package.json

@@ -5,3 +5,3 @@ {
   "description": "Custom Element base class.",
-  "version": "1.0.0-rc.52",
+  "version": "1.0.0-rc.53",
   "license": "SEE LICENSE IN LICENSE",
@@ -8,0 +8,0 @@ "repository": "https://github.com/Netflix/x-element",

README.md

@@ -65,4 +65,4 @@ ```
 * http://localhost:8080/test
-* * http://localhost:8080/performance
+* http://localhost:8080/performance
 
 (See [SPEC.md](./SPEC.md) for more details.)

test/test-template-engine.js

@@ -354,2 +354,30 @@ import XElement from '../x-element.js';
 
+it('html: renders elements with special characters in attributes', () => {
+  // Note the "/", "<", ">", and "&quot;" characters.
+  const getTemplate = ({ width, height }) => {
+    return html`\
+      <svg
+        id="svg"
+        class="<><>&quot;&quot;</></>"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        width="${ifDefined(width)}"
+        height="${ifDefined(height)}">
+        <circle id="circle" r="${width / 2}" cx="${width / 2}" cy="${height / 2}"></circle>
+      </svg>`;
+  };
+  const container = document.createElement('div');
+  document.body.append(container);
+  const width = 24;
+  const height = 24;
+  render(container, getTemplate({ width, height }));
+  const svgBox = container.querySelector('#svg').getBoundingClientRect();
+  assert(svgBox.width === width);
+  assert(svgBox.height === height);
+  const circleBox = container.querySelector('#circle').getBoundingClientRect();
+  assert(circleBox.width === width);
+  assert(circleBox.height === height);
+  container.remove();
+});
+
 it('html: self-closing tags work', () => {
@@ -356,0 +384,0 @@ const getTemplate = ({ type }) => {

x-element.js

@@ -1065,5 +1065,5 @@ /** Base element class for creating custom elements. */
   static #updaters = new WeakMap();
-  static #ATTRIBUTE = /<[a-zA-Z0-9-]+[^/<>]* ([a-z][a-z-]*)="$/;
-  static #BOOLEAN_ATTRIBUTE = /<[a-zA-Z0-9-]+[^/<>]* \?([a-z][a-z-]*)="$/;
-  static #PROPERTY = /<[a-zA-Z0-9-]+[^/<>]* \.([a-z][a-zA-Z0-9_]*)="$/;
+  static #ATTRIBUTE = /<[a-zA-Z0-9-]+(?:[^/<>]|"[^"]*")* ([a-z][a-z-]*)="$/;
+  static #BOOLEAN_ATTRIBUTE = /<[a-zA-Z0-9-]+(?:[^/<>]|"[^"]*")* \?([a-z][a-z-]*)="$/;
+  static #PROPERTY = /<[a-zA-Z0-9-]+(?:[^/<>]|"[^"]*")* \.([a-z][a-zA-Z0-9_]*)="$/;
 
@@ -1070,0 +1070,0 @@ #type = null;

No alert changes

Improved metrics

Total package byte prevSize

257878

increased by0.41%

Lines of code

6750

increased by0.4%

No dependency changes