jsx-dom - npm Package Compare versions

Comparing version 6.4.14-beta.2 to 6.4.14-beta.3

CHANGELOG.md

@@ -0,1 +1,5 @@
+# 6.5.0
+- Update type definitions with React upstream.
+- Introduce `useText`, `useClassList` API.
+
 # 6.4.12
@@ -2,0 +6,0 @@ - Fix: default import for `import React from "jsx-dom/svg"`.

lib/index.cjs.js

@@ -5,17 +5,2 @@ "use strict"
 
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {}
-  var target = {}
-  var sourceKeys = Object.keys(source)
-  var key, i
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i]
-    if (excluded.indexOf(key) >= 0) continue
-    target[key] = source[key]
-  }
-
-  return target
-}
-
 const keys = Object.keys
@@ -62,3 +47,21 @@ function identity(value) {
 }
+function useMemo(factory) {
+  return factory()
+}
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {}
+  var target = {}
+  var sourceKeys = Object.keys(source)
+  var key, i
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i]
+    if (excluded.indexOf(key) >= 0) continue
+    target[key] = source[key]
+  }
+
+  return target
+}
+
 const isUnitlessNumber = {
@@ -120,33 +123,3 @@ animationIterationCount: 0,
 
-function useText(initialValue) {
-  const text = new Text()
-  Object.defineProperty(text, "toString", {
-    value() {
-      return this.textContent
-    },
-  })
-
-  function setText(value) {
-    text.textContent = value
-  }
-
-  if (initialValue != null) {
-    setText(initialValue)
-  }
-
-  return [text, setText]
-}
-
 const SVGNamespace = "http://www.w3.org/2000/svg"
-var index = {
-  createElement,
-}
-function preventDefault(event) {
-  event.preventDefault()
-  return event
-}
-function stopPropagation(event) {
-  event.stopPropagation()
-  return event
-}
 
@@ -265,3 +238,8 @@ function isVisibleChild(value) {
     case "className":
-      attr(node, "class", className(value))
+      if (isFunction(value)) {
+        value(node)
+      } else {
+        attr(node, "class", className(value))
+      }
+
       return
@@ -309,2 +287,77 @@
 
+function useText(initialValue) {
+  const text = new Text()
+  Object.defineProperty(text, "toString", {
+    value() {
+      return this.textContent
+    },
+  })
+
+  function setText(value) {
+    text.textContent = value
+  }
+
+  if (initialValue != null) {
+    setText(initialValue)
+  }
+
+  return [text, setText]
+}
+function useClassList(initialValue) {
+  const div = document.createElement("div")
+
+  if (initialValue != null) {
+    div.className = className(initialValue)
+  }
+
+  let list = div.classList
+
+  function ClassList(value) {
+    value.className = list.value
+    list = value.classList
+  }
+
+  Object.defineProperties(
+    ClassList,
+    Object.getOwnPropertyDescriptors({
+      get size() {
+        return list.length
+      },
+
+      get value() {
+        return list.value
+      },
+
+      add(...tokens) {
+        list.add(...tokens)
+      },
+
+      remove(...tokens) {
+        list.remove(...tokens)
+      },
+
+      toggle(token, force) {
+        list.toggle(token, force)
+      },
+
+      contains(token) {
+        return list.contains(token)
+      },
+    })
+  )
+  return ClassList
+}
+
+var module$1 = {
+  createElement,
+}
+function preventDefault(event) {
+  event.preventDefault()
+  return event
+}
+function stopPropagation(event) {
+  event.stopPropagation()
+  return event
+}
+
 exports.Fragment = Fragment
@@ -316,8 +369,12 @@ exports.SVGNamespace = SVGNamespace
 exports.createRef = createRef
-exports.default = index
+exports.default = module$1
 exports.h = createElement
+exports.isRef = isRef
 exports.memo = identity
 exports.preventDefault = preventDefault
 exports.stopPropagation = stopPropagation
+exports.useCallback = identity
+exports.useClassList = useClassList
+exports.useMemo = useMemo
 exports.useRef = createRef
 exports.useText = useText

lib/index.js

@@ -1,16 +0,1 @@
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {}
-  var target = {}
-  var sourceKeys = Object.keys(source)
-  var key, i
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i]
-    if (excluded.indexOf(key) >= 0) continue
-    target[key] = source[key]
-  }
-
-  return target
-}
-
 const keys = Object.keys
@@ -57,3 +42,21 @@ function identity(value) {
 }
+function useMemo(factory) {
+  return factory()
+}
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {}
+  var target = {}
+  var sourceKeys = Object.keys(source)
+  var key, i
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i]
+    if (excluded.indexOf(key) >= 0) continue
+    target[key] = source[key]
+  }
+
+  return target
+}
+
 const isUnitlessNumber = {
@@ -115,33 +118,3 @@ animationIterationCount: 0,
 
-function useText(initialValue) {
-  const text = new Text()
-  Object.defineProperty(text, "toString", {
-    value() {
-      return this.textContent
-    },
-  })
-
-  function setText(value) {
-    text.textContent = value
-  }
-
-  if (initialValue != null) {
-    setText(initialValue)
-  }
-
-  return [text, setText]
-}
-
 const SVGNamespace = "http://www.w3.org/2000/svg"
-var index = {
-  createElement,
-}
-function preventDefault(event) {
-  event.preventDefault()
-  return event
-}
-function stopPropagation(event) {
-  event.stopPropagation()
-  return event
-}
 
@@ -260,3 +233,8 @@ function isVisibleChild(value) {
     case "className":
-      attr(node, "class", className(value))
+      if (isFunction(value)) {
+        value(node)
+      } else {
+        attr(node, "class", className(value))
+      }
+
       return
@@ -304,3 +282,78 @@
 
-export default index
+function useText(initialValue) {
+  const text = new Text()
+  Object.defineProperty(text, "toString", {
+    value() {
+      return this.textContent
+    },
+  })
+
+  function setText(value) {
+    text.textContent = value
+  }
+
+  if (initialValue != null) {
+    setText(initialValue)
+  }
+
+  return [text, setText]
+}
+function useClassList(initialValue) {
+  const div = document.createElement("div")
+
+  if (initialValue != null) {
+    div.className = className(initialValue)
+  }
+
+  let list = div.classList
+
+  function ClassList(value) {
+    value.className = list.value
+    list = value.classList
+  }
+
+  Object.defineProperties(
+    ClassList,
+    Object.getOwnPropertyDescriptors({
+      get size() {
+        return list.length
+      },
+
+      get value() {
+        return list.value
+      },
+
+      add(...tokens) {
+        list.add(...tokens)
+      },
+
+      remove(...tokens) {
+        list.remove(...tokens)
+      },
+
+      toggle(token, force) {
+        list.toggle(token, force)
+      },
+
+      contains(token) {
+        return list.contains(token)
+      },
+    })
+  )
+  return ClassList
+}
+
+var module = {
+  createElement,
+}
+function preventDefault(event) {
+  event.preventDefault()
+  return event
+}
+function stopPropagation(event) {
+  event.stopPropagation()
+  return event
+}
+
+export default module
 export {
@@ -314,7 +367,11 @@ Fragment,
   createElement as h,
+  isRef,
   identity as memo,
   preventDefault,
   stopPropagation,
+  identity as useCallback,
+  useClassList,
+  useMemo,
   createRef as useRef,
   useText,
 }

lib/svg.cjs.js

@@ -5,17 +5,2 @@ "use strict"
 
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {}
-  var target = {}
-  var sourceKeys = Object.keys(source)
-  var key, i
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i]
-    if (excluded.indexOf(key) >= 0) continue
-    target[key] = source[key]
-  }
-
-  return target
-}
-
 const keys = Object.keys
@@ -62,3 +47,21 @@ function identity(value) {
 }
+function useMemo(factory) {
+  return factory()
+}
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {}
+  var target = {}
+  var sourceKeys = Object.keys(source)
+  var key, i
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i]
+    if (excluded.indexOf(key) >= 0) continue
+    target[key] = source[key]
+  }
+
+  return target
+}
+
 const isUnitlessNumber = {
@@ -130,35 +133,5 @@ animationIterationCount: 0,
 
-function useText(initialValue) {
-  const text = new Text()
-  Object.defineProperty(text, "toString", {
-    value() {
-      return this.textContent
-    },
-  })
-
-  function setText(value) {
-    text.textContent = value
-  }
-
-  if (initialValue != null) {
-    setText(initialValue)
-  }
-
-  return [text, setText]
-}
-
 const SVGNamespace = "http://www.w3.org/2000/svg"
 const XLinkNamespace = "http://www.w3.org/1999/xlink"
 const XMLNamespace = "http://www.w3.org/XML/1998/namespace"
-var index = {
-  createElement,
-}
-function preventDefault(event) {
-  event.preventDefault()
-  return event
-}
-function stopPropagation(event) {
-  event.stopPropagation()
-  return event
-}
 
@@ -365,3 +338,8 @@ function isVisibleChild(value) {
     case "className":
-      attr(node, "class", className(value))
+      if (isFunction(value)) {
+        value(node)
+      } else {
+        attr(node, "class", className(value))
+      }
+
       return
@@ -413,2 +391,77 @@
 
+function useText(initialValue) {
+  const text = new Text()
+  Object.defineProperty(text, "toString", {
+    value() {
+      return this.textContent
+    },
+  })
+
+  function setText(value) {
+    text.textContent = value
+  }
+
+  if (initialValue != null) {
+    setText(initialValue)
+  }
+
+  return [text, setText]
+}
+function useClassList(initialValue) {
+  const div = document.createElement("div")
+
+  if (initialValue != null) {
+    div.className = className(initialValue)
+  }
+
+  let list = div.classList
+
+  function ClassList(value) {
+    value.className = list.value
+    list = value.classList
+  }
+
+  Object.defineProperties(
+    ClassList,
+    Object.getOwnPropertyDescriptors({
+      get size() {
+        return list.length
+      },
+
+      get value() {
+        return list.value
+      },
+
+      add(...tokens) {
+        list.add(...tokens)
+      },
+
+      remove(...tokens) {
+        list.remove(...tokens)
+      },
+
+      toggle(token, force) {
+        list.toggle(token, force)
+      },
+
+      contains(token) {
+        return list.contains(token)
+      },
+    })
+  )
+  return ClassList
+}
+
+var module$1 = {
+  createElement,
+}
+function preventDefault(event) {
+  event.preventDefault()
+  return event
+}
+function stopPropagation(event) {
+  event.stopPropagation()
+  return event
+}
+
 exports.Fragment = Fragment
@@ -420,8 +473,12 @@ exports.SVGNamespace = SVGNamespace
 exports.createRef = createRef
-exports.default = index
+exports.default = module$1
 exports.h = createElement
+exports.isRef = isRef
 exports.memo = identity
 exports.preventDefault = preventDefault
 exports.stopPropagation = stopPropagation
+exports.useCallback = identity
+exports.useClassList = useClassList
+exports.useMemo = useMemo
 exports.useRef = createRef
 exports.useText = useText

lib/svg.js

@@ -1,16 +0,1 @@
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {}
-  var target = {}
-  var sourceKeys = Object.keys(source)
-  var key, i
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i]
-    if (excluded.indexOf(key) >= 0) continue
-    target[key] = source[key]
-  }
-
-  return target
-}
-
 const keys = Object.keys
@@ -57,3 +42,21 @@ function identity(value) {
 }
+function useMemo(factory) {
+  return factory()
+}
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {}
+  var target = {}
+  var sourceKeys = Object.keys(source)
+  var key, i
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i]
+    if (excluded.indexOf(key) >= 0) continue
+    target[key] = source[key]
+  }
+
+  return target
+}
+
 const isUnitlessNumber = {
@@ -125,35 +128,5 @@ animationIterationCount: 0,
 
-function useText(initialValue) {
-  const text = new Text()
-  Object.defineProperty(text, "toString", {
-    value() {
-      return this.textContent
-    },
-  })
-
-  function setText(value) {
-    text.textContent = value
-  }
-
-  if (initialValue != null) {
-    setText(initialValue)
-  }
-
-  return [text, setText]
-}
-
 const SVGNamespace = "http://www.w3.org/2000/svg"
 const XLinkNamespace = "http://www.w3.org/1999/xlink"
 const XMLNamespace = "http://www.w3.org/XML/1998/namespace"
-var index = {
-  createElement,
-}
-function preventDefault(event) {
-  event.preventDefault()
-  return event
-}
-function stopPropagation(event) {
-  event.stopPropagation()
-  return event
-}
 
@@ -360,3 +333,8 @@ function isVisibleChild(value) {
     case "className":
-      attr(node, "class", className(value))
+      if (isFunction(value)) {
+        value(node)
+      } else {
+        attr(node, "class", className(value))
+      }
+
       return
@@ -408,3 +386,78 @@
 
-export default index
+function useText(initialValue) {
+  const text = new Text()
+  Object.defineProperty(text, "toString", {
+    value() {
+      return this.textContent
+    },
+  })
+
+  function setText(value) {
+    text.textContent = value
+  }
+
+  if (initialValue != null) {
+    setText(initialValue)
+  }
+
+  return [text, setText]
+}
+function useClassList(initialValue) {
+  const div = document.createElement("div")
+
+  if (initialValue != null) {
+    div.className = className(initialValue)
+  }
+
+  let list = div.classList
+
+  function ClassList(value) {
+    value.className = list.value
+    list = value.classList
+  }
+
+  Object.defineProperties(
+    ClassList,
+    Object.getOwnPropertyDescriptors({
+      get size() {
+        return list.length
+      },
+
+      get value() {
+        return list.value
+      },
+
+      add(...tokens) {
+        list.add(...tokens)
+      },
+
+      remove(...tokens) {
+        list.remove(...tokens)
+      },
+
+      toggle(token, force) {
+        list.toggle(token, force)
+      },
+
+      contains(token) {
+        return list.contains(token)
+      },
+    })
+  )
+  return ClassList
+}
+
+var module = {
+  createElement,
+}
+function preventDefault(event) {
+  event.preventDefault()
+  return event
+}
+function stopPropagation(event) {
+  event.stopPropagation()
+  return event
+}
+
+export default module
 export {
@@ -418,7 +471,11 @@ Fragment,
   createElement as h,
+  isRef,
   identity as memo,
   preventDefault,
   stopPropagation,
+  identity as useCallback,
+  useClassList,
+  useMemo,
   createRef as useRef,
   useText,
 }

package.json

 {
   "name": "jsx-dom",
-  "version": "6.4.14-beta.2",
+  "version": "6.4.14-beta.3",
   "description": "JSX to document.createElement.",
@@ -10,5 +10,4 @@ "main": "lib/index.cjs.js",
     "build": "cake build",
-    "pretest": "npm run build",
-    "postpublish": "rm lib/*.js",
-    "prepublishOnly": "yarn build && yarn test",
+    "pretest": "yarn build",
+    "prepublishOnly": "./prepublish.sh",
     "test": "nyc --reporter=html mocha test/test-*.tsx --require test/register"
@@ -15,0 +14,0 @@ },

README.md

@@ -199,2 +199,20 @@ # jsx-dom
 
+## `useClassList`
+
+```jsx
+import React, { useClassList } from "jsx-dom"
+
+function Component() {
+  const cls = useClassList(["main", { ready }])
+  setTimeout(() => {
+    cls.add("long-wait")
+    cls.toggle("ready")
+  }, 2000)
+
+  return (
+    <div class={cls}>Status: {text}</div>
+  )
+}
+```
+
 ## Goodies
@@ -236,9 +254,9 @@
 function useRef<T>(initialValue?: T): RefObject<T>
-function memo<P, T extends (props: P) => JSX.Element>(render: T): T
 ```
 
-The following functions **will** ignore `deps`, and are only useful if you are
+The following functions **will** not have memoization, and are only useful if you are
 migrating from/to React.
 
 ```ts
+function memo<P, T extends (props: P) => JSX.Element>(render: T): T
 function useMemo<T>(fn: () => T, deps: any[]): T
@@ -245,0 +263,0 @@ function useCallback<T extends Function>(fn: T, deps: any[]): T

No alert changes

Improved metrics

Total package byte prevSize

125881

16.01%

Number of package files

13

8.33%

Lines of code

3909

22.85%

Number of lines in readme file

273

7.06%

No dependency changes