jsx-dom-runtime
Advanced tools
Comparing version 0.19.0 to 0.20.0
import { declarePreset } from '@babel/helper-plugin-utils'; | ||
import _createPlugin from '@babel/plugin-transform-react-jsx/lib/create-plugin.js'; | ||
const svgTags = new Set([ | ||
'svg', | ||
'animate', | ||
'circle', | ||
'animateTransform', | ||
'clipPath', | ||
'defs', | ||
'desc', | ||
'ellipse', | ||
'feBlend', | ||
'feColorMatrix', | ||
'feComponentTransfer', | ||
'feComposite', | ||
'feConvolveMatrix', | ||
'feDiffuseLighting', | ||
'feDisplacementMap', | ||
'feDropShadow', | ||
'feFlood', | ||
'feFuncA', | ||
'feFuncB', | ||
'feFuncG', | ||
'feFuncR', | ||
'feGaussianBlur', | ||
'feImage', | ||
'feMerge', | ||
'feMergeNode', | ||
'feMorphology', | ||
'feOffset', | ||
'feSpecularLighting', | ||
'feTile', | ||
'feTurbulence', | ||
'filter', | ||
'foreignObject', | ||
'g', | ||
'image', | ||
'line', | ||
'linearGradient', | ||
'marker', | ||
'mask', | ||
'path', | ||
'pattern', | ||
'polygon', | ||
'polyline', | ||
'radialGradient', | ||
'rect', | ||
'stop', | ||
'symbol', | ||
'text', | ||
'textPath', | ||
'tspan', | ||
'use', | ||
]); | ||
const jsxPlugin = (babel) => { | ||
const { types: t } = babel; | ||
const svgNsAttribute = () => { | ||
return t.jSXAttribute( | ||
t.jSXIdentifier('__ns'), | ||
t.JSXExpressionContainer(t.numericLiteral(1)) | ||
); | ||
}; | ||
return { | ||
visitor: { | ||
JSXOpeningElement(path) { | ||
if (svgTags.has(path.node.name.name)) { | ||
path.node.attributes.push(svgNsAttribute()); | ||
} | ||
}, | ||
JSXAttribute(path) { | ||
const attr = path.node.name; | ||
switch (attr.name) { | ||
case 'className': | ||
case 'classname': { | ||
attr.name = 'class'; | ||
break; | ||
} | ||
case 'htmlFor': | ||
case 'htmlfor': { | ||
attr.name = 'for'; | ||
break; | ||
} | ||
} | ||
if (attr.name.startsWith('on')) { | ||
attr.name = attr.name.toLowerCase(); | ||
return; | ||
} | ||
} | ||
} | ||
}; | ||
}; | ||
const createPlugin = typeof _createPlugin.default === 'function' | ||
@@ -17,2 +113,3 @@ ? _createPlugin.default | ||
plugins: [ | ||
jsxPlugin, | ||
[ | ||
@@ -19,0 +116,0 @@ createPlugin({ |
@@ -17,3 +17,4 @@ let appendChildren = (node, children) => { | ||
let properties = new Set(['className', 'innerHTML', 'textContent', 'value', 'htmlFor']); | ||
let properties = new Set(['innerHTML', 'textContent', 'value']); | ||
let ignoreKeys = new Set(['ref', 'children', '__ns']); | ||
let jsx = (node, props) => { | ||
@@ -24,10 +25,12 @@ let key, val; | ||
} | ||
node = typeof node === 'string' ? document.createElement(node) : node; | ||
node = typeof node === 'string' ? props.__ns ? document.createElementNS('http://www.w3.org/2000/svg', node) : document.createElement(node) : node; | ||
for (key in props) { | ||
if (key !== 'ref' && key !== 'children') { | ||
if (!ignoreKeys.has(key)) { | ||
val = props[key]; | ||
if (extensions.has(key)) { | ||
extensions.get(key)(node, val); | ||
} else if (properties.has(key)) { | ||
node[key] = val; | ||
} else if (properties.has(key) || key.startsWith('on')) { | ||
if (key in node) { | ||
node[key] = val; | ||
} | ||
} else if (key === 'style') { | ||
@@ -39,3 +42,3 @@ if (typeof val === 'string') { | ||
for (key in val) { | ||
if (key[0] === '-') { | ||
if (key.startsWith('--')) { | ||
node.style.setProperty(key, val[key]); | ||
@@ -47,8 +50,2 @@ } else { | ||
} | ||
// Benchmark for comparison (thanks preact): https://esbench.com/bench/574c954bdb965b9a00965ac6 | ||
} else if (key[0] === 'o' && key[1] === 'n') { | ||
key = key.toLowerCase(); | ||
if (key in node) { | ||
node[key] = val; | ||
} | ||
} else if (val != null) { | ||
@@ -248,3 +245,2 @@ if (typeof val !== 'boolean' || /^(ari|dat)a-/.test(key)) { | ||
class: T.string, | ||
className: T.string, | ||
style: T.oneOfType([T.string, T.object]), | ||
@@ -307,4 +303,3 @@ tabindex: T.number, | ||
const label = { | ||
for: T.string, | ||
htmlFor: T.string | ||
for: T.string | ||
}; | ||
@@ -377,5 +372,7 @@ | ||
let createRef = () => ({ | ||
current: null | ||
}); | ||
let createRef = current => { | ||
return Object.seal({ | ||
current | ||
}); | ||
}; | ||
@@ -382,0 +379,0 @@ let parseFromString = html => { |
@@ -23,3 +23,4 @@ let appendChildren = (node, children) => { | ||
let properties = new Set(['className', 'innerHTML', 'textContent', 'value', 'htmlFor']); | ||
let properties = new Set(['innerHTML', 'textContent', 'value']); | ||
let ignoreKeys = new Set(['ref', 'children', '__ns']); | ||
let jsx = (node, props) => { | ||
@@ -30,10 +31,12 @@ let key, val; | ||
} | ||
node = typeof node === 'string' ? document.createElement(node) : node; | ||
node = typeof node === 'string' ? props.__ns ? document.createElementNS('http://www.w3.org/2000/svg', node) : document.createElement(node) : node; | ||
for (key in props) { | ||
if (key !== 'ref' && key !== 'children') { | ||
if (!ignoreKeys.has(key)) { | ||
val = props[key]; | ||
if (extensions.has(key)) { | ||
extensions.get(key)(node, val); | ||
} else if (properties.has(key)) { | ||
node[key] = val; | ||
} else if (properties.has(key) || key.startsWith('on')) { | ||
if (key in node) { | ||
node[key] = val; | ||
} | ||
} else if (key === 'style') { | ||
@@ -45,3 +48,3 @@ if (typeof val === 'string') { | ||
for (key in val) { | ||
if (key[0] === '-') { | ||
if (key.startsWith('--')) { | ||
node.style.setProperty(key, val[key]); | ||
@@ -53,8 +56,2 @@ } else { | ||
} | ||
// Benchmark for comparison (thanks preact): https://esbench.com/bench/574c954bdb965b9a00965ac6 | ||
} else if (key[0] === 'o' && key[1] === 'n') { | ||
key = key.toLowerCase(); | ||
if (key in node) { | ||
node[key] = val; | ||
} | ||
} else if (val != null) { | ||
@@ -87,5 +84,7 @@ if (typeof val !== 'boolean' || /^(ari|dat)a-/.test(key)) { | ||
let createRef = () => ({ | ||
current: null | ||
}); | ||
let createRef = current => { | ||
return Object.seal({ | ||
current | ||
}); | ||
}; | ||
@@ -92,0 +91,0 @@ let parseFromString = html => { |
{ | ||
"name": "jsx-dom-runtime", | ||
"version": "0.19.0", | ||
"version": "0.20.0", | ||
"description": "A tiny in 500 bytes library to JSX syntax templates for DOM", | ||
@@ -68,6 +68,5 @@ "type": "module", | ||
"files": [ | ||
"dist", | ||
"jsx-dev-runtime", | ||
"babel-preset", | ||
"jsx-runtime", | ||
"babel-preset" | ||
"jsx-dev-runtime" | ||
], | ||
@@ -80,9 +79,2 @@ "keywords": [ | ||
], | ||
"size-limit": [ | ||
{ | ||
"path": "jsx-runtime/index.js", | ||
"import": "{ jsx }", | ||
"limit": "454 B" | ||
} | ||
], | ||
"repository": { | ||
@@ -89,0 +81,0 @@ "type": "git", |
@@ -108,2 +108,6 @@ # jsx-dom-runtime | ||
Extend({ | ||
/** | ||
* @param {HTMLElement} node | ||
* @param {string[]} value | ||
*/ | ||
classList(node, value) { | ||
@@ -113,2 +117,6 @@ node.setAttribute('class', value.filter(Boolean).join(' ')); | ||
/** | ||
* @param {HTMLElement} node | ||
* @param {Record<string, string>} value | ||
*/ | ||
dataset(node, value) { | ||
@@ -115,0 +123,0 @@ for (let key in value) { |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
44131
1252
160