Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

jsx-dom

Package Overview
Dependencies
Maintainers
1
Versions
90
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

jsx-dom - npm Package Compare versions

Comparing version 8.0.4 to 8.0.5

4

CHANGELOG.md

@@ -0,1 +1,5 @@

# 8.0.5
- Added support for using `DOMTokenList` (e.g. `element.classList`) for `className`.
- Renamed `ClassList` type declaration to `BasicClassList` to not confuse with the browser’s class list type.
# 8.0.3

@@ -2,0 +6,0 @@ - Added: [RFC Support capture events, fix custom events, support on/onCapture](https://github.com/alex-kinokon/jsx-dom/pull/70)

207

index.js

@@ -33,3 +33,2 @@ /* eslint-disable */

if (!value) return
for (const key of keys(value)) {

@@ -49,2 +48,12 @@ fn(value[key], key)

/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found on
* https://github.com/facebook/react/blob/b87aabdfe1b7461e7331abb3601d9e6bb27544bc/LICENSE
*/
/**
* CSS properties which accept numbers but are not in units of "px".
*/
const isUnitlessNumber = {

@@ -85,2 +94,3 @@ animationIterationCount: 0,

zoom: 0,
// SVG-related properties
fillOpacity: 0,

@@ -96,2 +106,8 @@ floodOpacity: 0,

/**
* @param prefix vendor-specific prefix, eg: Webkit
* @param key style name, eg: transitionDuration
* @return style name prefixed with `prefix`, properly camelCased, eg:
* WebkitTransitionDuration
*/
function prefixKey(prefix, key) {

@@ -101,6 +117,12 @@ return prefix + key.charAt(0).toUpperCase() + key.substring(1)

/**
* Support style names that may come passed in prefixed by adding permutations
* of vendor prefixes.
*/
const prefixes = ["Webkit", "ms", "Moz", "O"]
// Using Object.keys here, or else the vanilla for-in loop makes IE8 go into an
// infinite loop, because it iterates over the newly added props too.
keys(isUnitlessNumber).forEach(prop => {
prefixes.forEach(prefix => {
isUnitlessNumber[prefixKey(prefix, prop)] = 0
isUnitlessNumber[prefixKey(prefix, prop)] = 0 // isUnitlessNumber[prop]
})

@@ -111,8 +133,7 @@ })

var JsxDomType
;(function (JsxDomType) {
JsxDomType["ShadowRoot"] = "ShadowRoot"
})(JsxDomType || (JsxDomType = {}))
function ShadowRoot({ children, ref, ...attr }) {
function ShadowRoot(_ref) {
let { children, ref, ...attr } = _ref
return {

@@ -133,9 +154,18 @@ [jsxDomType]: JsxDomType.ShadowRoot,

// https://facebook.github.io/react/docs/jsx-in-depth.html#booleans-null-and-undefined-are-ignored
// Emulate JSX Expression logic to ignore certain type of children or className.
function isVisibleChild(value) {
return !isBoolean(value) && value != null
}
const DomTokenList = typeof DOMTokenList !== "undefined" ? DOMTokenList : function () {}
/**
* Convert a `value` to a className string.
* `value` can be a string, an array or a `Dictionary<boolean>`.
*/
function className(value) {
if (Array.isArray(value)) {
return value.map(className).filter(Boolean).join(" ")
} else if (value instanceof DomTokenList) {
return "" + value
} else if (isObject(value)) {

@@ -221,3 +251,2 @@ return keys(value)

}
render() {

@@ -227,2 +256,4 @@ return null

}
/* @__PURE__ */
Object.defineProperties(Component.prototype, {

@@ -233,5 +264,7 @@ isReactComponent: {

})
function initComponentClass(Class, attr, children) {
attr = { ...attr, children }
attr = {
...attr,
children,
}
const instance = new Class(attr)

@@ -241,9 +274,12 @@ return instance.render()

function jsx(tag, { children, ...attr }) {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
function jsx(tag, _ref) {
let { children, ...attr } = _ref
if (!attr.namespaceURI && svg[tag] === 0) {
attr = { ...attr, namespaceURI: SVGNamespace }
attr = {
...attr,
namespaceURI: SVGNamespace,
}
}
let node
if (isString(tag)) {

@@ -256,2 +292,3 @@ node = attr.namespaceURI

// Select `option` elements in `select`
if (node instanceof window.HTMLSelectElement && attr.value != null) {

@@ -267,19 +304,30 @@ if (attr.multiple === true && Array.isArray(attr.value)) {

}
attachRef(attr.ref, node)
} else if (isFunction(tag)) {
// Custom elements.
if (isObject(tag.defaultProps)) {
attr = { ...tag.defaultProps, ...attr }
attr = {
...tag.defaultProps,
...attr,
}
}
node = isComponentClass(tag)
? initComponentClass(tag, attr, children)
: tag({ ...attr, children })
: tag({
...attr,
children,
})
} else {
throw new TypeError(`Invalid JSX element type: ${tag}`)
}
return node
}
function createElement(tag, attr, ...children) {
function createElement(tag, attr) {
for (
var _len = arguments.length, children = new Array(_len > 2 ? _len - 2 : 0), _key = 2;
_key < _len;
_key++
) {
children[_key - 2] = arguments[_key]
}
if (isString(attr) || Array.isArray(attr)) {

@@ -289,12 +337,15 @@ children.unshift(attr)

}
attr = attr || {}
if (attr.children != null && !children.length) {
;({ children, ...attr } = attr)
}
return jsx(tag, { ...attr, children }, attr.key)
return jsx(
tag,
{
...attr,
children,
},
attr.key
)
}
function attachRef(ref, node) {

@@ -307,3 +358,2 @@ if (isRef(ref)) {

}
function appendChild(child, node) {

@@ -324,3 +374,2 @@ if (isArrayLike(child)) {

}
function appendChildren(children, node) {

@@ -330,6 +379,4 @@ for (const child of [...children]) {

}
return node
}
function appendChildToNode(child, node) {

@@ -342,7 +389,5 @@ if (node instanceof window.HTMLTemplateElement) {

}
function normalizeAttribute(s, separator) {
return s.replace(/[A-Z]/g, match => separator + match.toLowerCase())
}
function style(node, value) {

@@ -364,3 +409,2 @@ if (value == null || value === false);

}
function attribute(key, value, node) {

@@ -377,7 +421,5 @@ switch (key) {

return
case "xmlnsXlink":
attr(node, normalizeAttribute(key, ":"), value)
return
case "xmlBase":

@@ -389,3 +431,2 @@ case "xmlLang":

}
switch (key) {

@@ -395,3 +436,2 @@ case "htmlFor":

return
case "dataset":

@@ -404,3 +444,2 @@ forEach(value, (dataValue, dataKey) => {

return
case "innerHTML":

@@ -412,5 +451,3 @@ case "innerText":

}
return
case "dangerouslySetInnerHTML":

@@ -420,7 +457,7 @@ if (isObject(value)) {

}
return
case "value":
if (value == null || node instanceof window.HTMLSelectElement) {
// skip nullish values
// for `<select>` apply value after appending `<option>` elements
return

@@ -431,9 +468,7 @@ } else if (node instanceof window.HTMLTextAreaElement) {

}
// use attribute for other elements
break
case "spellCheck":
node.spellcheck = value
return
case "class":

@@ -446,13 +481,9 @@ case "className":

}
return
case "ref":
case "namespaceURI":
return
case "style":
style(node, value)
return
case "on":

@@ -464,2 +495,3 @@ case "onCapture":

return
// fallthrough
}

@@ -471,4 +503,4 @@

const useCapture = attribute.endsWith("capture")
if (!useCapture && node[attribute] === null) {
// use property when possible PR #17
node[attribute] = value

@@ -479,11 +511,18 @@ } else if (useCapture) {

let eventName
if (attribute in window) {
let standardEventName = attribute.substring(2)
// standard event
// the JSX attribute could have been "onMouseOver" and the
// member name "onmouseover" is on the window's prototype
// so let's add the listener "mouseover", which is all lowercased
const standardEventName = attribute.substring(2)
eventName = standardEventName
} else {
let cutomEventName = attribute[2] + key.slice(3)
eventName = cutomEventName
// custom event
// the JSX attribute could have been "onMyCustomEvent"
// so let's trim off the "on" prefix and lowercase the first character
// and add the listener "myCustomEvent"
// except for the first character, we keep the event name case
const customEventName = attribute[2] + key.slice(3)
eventName = customEventName
}
node.addEventListener(eventName, value)

@@ -504,11 +543,8 @@ }

}
function attr(node, key, value) {
node.setAttribute(key, value)
}
function attrNS(node, namespace, key, value) {
node.setAttributeNS(namespace, key, value)
}
function attributes(attr, node) {

@@ -518,3 +554,2 @@ for (const key of keys(attr)) {

}
return node

@@ -530,11 +565,8 @@ }

})
function setText(value) {
text.textContent = value
}
if (initialValue != null) {
setText(initialValue)
}
return [text, setText]

@@ -544,9 +576,6 @@ }

const div = document.createElement("div")
if (initialValue != null) {
div.className = className(initialValue)
}
let list = div.classList
function ClassList(value) {

@@ -556,3 +585,2 @@ value.setAttribute("class", list.value)

}
Object.defineProperties(

@@ -564,19 +592,14 @@ ClassList,

},
get value() {
return list.value
},
add(...tokens) {
list.add(...tokens)
add() {
list.add(...arguments)
},
remove(...tokens) {
list.remove(...tokens)
remove() {
list.remove(...arguments)
},
toggle(token, force) {
list.toggle(token, force)
},
contains(token) {

@@ -594,21 +617,26 @@ return list.contains(token)

const cache = new Map()
const createStyledComponent =
name =>
(list, ...interpolations) =>
({ style, ...props }) => {
const lastIndex = list.length - 1
const css =
list.slice(0, lastIndex).reduce((p, s, i) => p + s + interpolations[i](props), "") +
list[lastIndex]
return createElement(name, {
style: [css, style],
...props,
})
const cache = /* @__PURE__ */ new Map()
const createStyledComponent = name =>
function (list) {
for (
var _len = arguments.length, interpolations = new Array(_len > 1 ? _len - 1 : 0), _key = 1;
_key < _len;
_key++
) {
interpolations[_key - 1] = arguments[_key]
}
return _ref => {
let { style, ...props } = _ref
const lastIndex = list.length - 1
const css =
list.slice(0, lastIndex).reduce((p, s, i) => p + s + interpolations[i](props), "") +
list[lastIndex]
return createElement(name, {
style: [css, style],
...props,
})
}
}
const baseStyled = customComponent => createStyledComponent(customComponent)
const styled = new Proxy(baseStyled, {
const styled = /* @__PURE__ */ new Proxy(baseStyled, {
get(_, name) {

@@ -618,3 +646,2 @@ return setIfAbsent(cache, name, () => createStyledComponent(name))

})
function setIfAbsent(map, key, getValue) {

@@ -621,0 +648,0 @@ if (map.has(key)) {

171

min/index.js

@@ -33,3 +33,2 @@ /* eslint-disable */

if (!value) return
for (const key of keys(value)) {

@@ -51,8 +50,7 @@ fn(value[key], key)

var JsxDomType
;(function (JsxDomType) {
JsxDomType["ShadowRoot"] = "ShadowRoot"
})(JsxDomType || (JsxDomType = {}))
function ShadowRoot({ children, ref, ...attr }) {
function ShadowRoot(_ref) {
let { children, ref, ...attr } = _ref
return {

@@ -71,9 +69,18 @@ [jsxDomType]: JsxDomType.ShadowRoot,

// https://facebook.github.io/react/docs/jsx-in-depth.html#booleans-null-and-undefined-are-ignored
// Emulate JSX Expression logic to ignore certain type of children or className.
function isVisibleChild(value) {
return !isBoolean(value) && value != null
}
const DomTokenList = typeof DOMTokenList !== "undefined" ? DOMTokenList : function () {}
/**
* Convert a `value` to a className string.
* `value` can be a string, an array or a `Dictionary<boolean>`.
*/
function className(value) {
if (Array.isArray(value)) {
return value.map(className).filter(Boolean).join(" ")
} else if (value instanceof DomTokenList) {
return "" + value
} else if (isObject(value)) {

@@ -101,3 +108,2 @@ return keys(value)

}
render() {

@@ -107,2 +113,4 @@ return null

}
/* @__PURE__ */
Object.defineProperties(Component.prototype, {

@@ -113,5 +121,7 @@ isReactComponent: {

})
function initComponentClass(Class, attr, children) {
attr = { ...attr, children }
attr = {
...attr,
children,
}
const instance = new Class(attr)

@@ -121,5 +131,6 @@ return instance.render()

function jsx(tag, { children, ...attr }) {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
function jsx(tag, _ref) {
let { children, ...attr } = _ref
let node
if (isString(tag)) {

@@ -132,2 +143,3 @@ node = attr.namespaceURI

// Select `option` elements in `select`
if (node instanceof window.HTMLSelectElement && attr.value != null) {

@@ -143,19 +155,30 @@ if (attr.multiple === true && Array.isArray(attr.value)) {

}
attachRef(attr.ref, node)
} else if (isFunction(tag)) {
// Custom elements.
if (isObject(tag.defaultProps)) {
attr = { ...tag.defaultProps, ...attr }
attr = {
...tag.defaultProps,
...attr,
}
}
node = isComponentClass(tag)
? initComponentClass(tag, attr, children)
: tag({ ...attr, children })
: tag({
...attr,
children,
})
} else {
throw new TypeError(`Invalid JSX element type: ${tag}`)
}
return node
}
function createElement(tag, attr, ...children) {
function createElement(tag, attr) {
for (
var _len = arguments.length, children = new Array(_len > 2 ? _len - 2 : 0), _key = 2;
_key < _len;
_key++
) {
children[_key - 2] = arguments[_key]
}
if (isString(attr) || Array.isArray(attr)) {

@@ -165,12 +188,15 @@ children.unshift(attr)

}
attr = attr || {}
if (attr.children != null && !children.length) {
;({ children, ...attr } = attr)
}
return jsx(tag, { ...attr, children }, attr.key)
return jsx(
tag,
{
...attr,
children,
},
attr.key
)
}
function attachRef(ref, node) {

@@ -183,3 +209,2 @@ if (isRef(ref)) {

}
function appendChild(child, node) {

@@ -200,3 +225,2 @@ if (isArrayLike(child)) {

}
function appendChildren(children, node) {

@@ -206,6 +230,4 @@ for (const child of [...children]) {

}
return node
}
function appendChildToNode(child, node) {

@@ -218,3 +240,2 @@ if (node instanceof window.HTMLTemplateElement) {

}
function style(node, value) {

@@ -232,3 +253,2 @@ if (value == null || value === false);

}
function attribute(key, value, node) {

@@ -239,3 +259,2 @@ switch (key) {

return
case "dataset":

@@ -248,3 +267,2 @@ forEach(value, (dataValue, dataKey) => {

return
case "innerHTML":

@@ -256,5 +274,3 @@ case "innerText":

}
return
case "dangerouslySetInnerHTML":

@@ -264,7 +280,7 @@ if (isObject(value)) {

}
return
case "value":
if (value == null || node instanceof window.HTMLSelectElement) {
// skip nullish values
// for `<select>` apply value after appending `<option>` elements
return

@@ -275,9 +291,7 @@ } else if (node instanceof window.HTMLTextAreaElement) {

}
// use attribute for other elements
break
case "spellCheck":
node.spellcheck = value
return
case "class":

@@ -290,13 +304,9 @@ case "className":

}
return
case "ref":
case "namespaceURI":
return
case "style":
style(node, value)
return
case "on":

@@ -308,2 +318,3 @@ case "onCapture":

return
// fallthrough
}

@@ -315,4 +326,4 @@

const useCapture = attribute.endsWith("capture")
if (!useCapture && node[attribute] === null) {
// use property when possible PR #17
node[attribute] = value

@@ -323,11 +334,18 @@ } else if (useCapture) {

let eventName
if (attribute in window) {
let standardEventName = attribute.substring(2)
// standard event
// the JSX attribute could have been "onMouseOver" and the
// member name "onmouseover" is on the window's prototype
// so let's add the listener "mouseover", which is all lowercased
const standardEventName = attribute.substring(2)
eventName = standardEventName
} else {
let cutomEventName = attribute[2] + key.slice(3)
eventName = cutomEventName
// custom event
// the JSX attribute could have been "onMyCustomEvent"
// so let's trim off the "on" prefix and lowercase the first character
// and add the listener "myCustomEvent"
// except for the first character, we keep the event name case
const customEventName = attribute[2] + key.slice(3)
eventName = customEventName
}
node.addEventListener(eventName, value)

@@ -344,7 +362,5 @@ }

}
function attr(node, key, value) {
node.setAttribute(key, value)
}
function attributes(attr, node) {

@@ -354,3 +370,2 @@ for (const key of keys(attr)) {

}
return node

@@ -366,11 +381,8 @@ }

})
function setText(value) {
text.textContent = value
}
if (initialValue != null) {
setText(initialValue)
}
return [text, setText]

@@ -380,9 +392,6 @@ }

const div = document.createElement("div")
if (initialValue != null) {
div.className = className(initialValue)
}
let list = div.classList
function ClassList(value) {

@@ -392,3 +401,2 @@ value.setAttribute("class", list.value)

}
Object.defineProperties(

@@ -400,19 +408,14 @@ ClassList,

},
get value() {
return list.value
},
add(...tokens) {
list.add(...tokens)
add() {
list.add(...arguments)
},
remove(...tokens) {
list.remove(...tokens)
remove() {
list.remove(...arguments)
},
toggle(token, force) {
list.toggle(token, force)
},
contains(token) {

@@ -430,21 +433,26 @@ return list.contains(token)

const cache = new Map()
const createStyledComponent =
name =>
(list, ...interpolations) =>
({ style, ...props }) => {
const lastIndex = list.length - 1
const css =
list.slice(0, lastIndex).reduce((p, s, i) => p + s + interpolations[i](props), "") +
list[lastIndex]
return createElement(name, {
style: [css, style],
...props,
})
const cache = /* @__PURE__ */ new Map()
const createStyledComponent = name =>
function (list) {
for (
var _len = arguments.length, interpolations = new Array(_len > 1 ? _len - 1 : 0), _key = 1;
_key < _len;
_key++
) {
interpolations[_key - 1] = arguments[_key]
}
return _ref => {
let { style, ...props } = _ref
const lastIndex = list.length - 1
const css =
list.slice(0, lastIndex).reduce((p, s, i) => p + s + interpolations[i](props), "") +
list[lastIndex]
return createElement(name, {
style: [css, style],
...props,
})
}
}
const baseStyled = customComponent => createStyledComponent(customComponent)
const styled = new Proxy(baseStyled, {
const styled = /* @__PURE__ */ new Proxy(baseStyled, {
get(_, name) {

@@ -454,3 +462,2 @@ return setIfAbsent(cache, name, () => createStyledComponent(name))

})
function setIfAbsent(map, key, getValue) {

@@ -457,0 +464,0 @@ if (map.has(key)) {

7

package.json
{
"name": "jsx-dom",
"version": "8.0.4",
"version": "8.0.5",
"description": "JSX to document.createElement.",

@@ -15,3 +15,3 @@ "main": "index.js",

"dependencies": {
"csstype": "^3.1.0"
"csstype": "^3.1.1"
},

@@ -21,2 +21,5 @@ "eslintIgnore": [

],
"resolutions": {
"@babel/types": "^7.21.0"
},
"lint-staged": {

@@ -23,0 +26,0 @@ "*.ts": [

4

types/extra.d.ts

@@ -1,2 +0,2 @@

import type { ClassList, ClassNames } from "./index.d"
import type { BasicClassList, ClassNames } from "./index.d"

@@ -10,3 +10,3 @@ // Utility functions

export function useText(initialValue?: string): readonly [Text, (value: string) => void]
export function useClassList(initialValue?: ClassNames): ClassList
export function useClassList(initialValue?: ClassNames): BasicClassList

@@ -13,0 +13,0 @@ export namespace HTML {

styled.macro.cjs

Sorry, the diff of this file is not supported yet

types/index.d.ts

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc