fix: appropriately wrap component name

nevoland · Feb 10, 2019 · 5b0c6b8 · 5b0c6b8
1 parent bca4d17
commit 5b0c6b8
Show file tree

Hide file tree

Showing 11 changed files with 310 additions and 263 deletions.
diff --git a/src/arrays.js b/src/arrays.js
@@ -1,6 +1,6 @@
 import { createElement as $, Component as BaseComponent } from 'react'
 
-import { lazyProperty } from './tools'
+import { lazyProperty, setWrapperName } from './tools'
 import { setItem, insertItem, insertItems, EMPTY_ARRAY } from './immutables'
 
 function onChangeItem(element) {
@@ -40,7 +40,7 @@ export const array = (Component) =>
   /*
   Provides `item(index, key = index)` that returns the props for the child element responsible of the item `index`.
   Also provides `onChangeItem(value, index, payload?)` that sets the item `index` to the provided `value`, and `onAddItem(value, index, payload?)` that inserts an item with the provided `value` at `index`.
-  Sets `value` to `[]` if not set.
+  Sets `value` to `[]` if `nil`.
 
   Example:
 
@@ -53,46 +53,53 @@ export const array = (Component) =>
       </ul>
     ))
   */
-  class array extends BaseComponent {
-    constructor(props) {
-      super(props)
-      this.item = (index, key = index) => {
-        const { props } = this
-        return {
-          key,
-          value: props.value && props.value[index],
-          name: index,
-          onChange: props.onChange && this.onChangeItem,
+  setWrapperName(
+    Component,
+    class array extends BaseComponent {
+      constructor(props) {
+        super(props)
+        this.item = (index, key = index) => {
+          const { props } = this
+          return {
+            key,
+            value: props.value && props.value[index],
+            name: index,
+            onChange: props.onChange && this.onChangeItem,
+          }
         }
       }
-    }
-    render() {
-      const { props } = this
-      return $(Component, {
-        ...props,
-        value: props.value == null ? EMPTY_ARRAY : props.value,
-        onChangeItem:
-          props.onChange && lazyProperty(this, 'onChangeItem', onChangeItem),
-        onAddItem: props.onChange && lazyProperty(this, 'onAddItem', onAddItem),
-        onAddItems:
-          props.onChange && lazyProperty(this, 'onAddItems', onAddItems),
-        item: this.item,
-      })
-    }
-  }
+      render() {
+        const { props } = this
+        return $(Component, {
+          ...props,
+          value: props.value == null ? EMPTY_ARRAY : props.value,
+          onChangeItem:
+            props.onChange && lazyProperty(this, 'onChangeItem', onChangeItem),
+          onAddItem:
+            props.onChange && lazyProperty(this, 'onAddItem', onAddItem),
+          onAddItems:
+            props.onChange && lazyProperty(this, 'onAddItems', onAddItems),
+          item: this.item,
+        })
+      }
+    },
+  )
 
 function onRemove(element) {
   const { props } = element
   return (payload) => props.onChange(undefined, props.name, payload)
 }
 
 export const removable = (Component) =>
-  class removable extends BaseComponent {
-    render() {
-      const { props } = this
-      return $(Component, {
-        ...props,
-        onRemove: props.onChange && lazyProperty(this, 'onRemove', onRemove),
-      })
-    }
-  }
+  setWrapperName(
+    Component,
+    class removable extends BaseComponent {
+      render() {
+        const { props } = this
+        return $(Component, {
+          ...props,
+          onRemove: props.onChange && lazyProperty(this, 'onRemove', onRemove),
+        })
+      }
+    },
+  )
diff --git a/src/booleans.js b/src/booleans.js
@@ -1,11 +1,15 @@
-import { branch, withProps } from 'recompose'
+import { createElement as $ } from 'react'
 
-import { hasNotProp } from './tools'
+import { setWrapperName } from './tools'
 
-export const boolean = branch(
+export const boolean = (Component) =>
   /*
-  Sets `value` to `false` if not set.
+  Sets `value` to `false` if `nil`.
   */
-  hasNotProp('value'),
-  withProps({ value: false }),
-)
+  setWrapperName(Component, function boolean(props) {
+    const { value } = props
+    return $(Component, {
+      ...props,
+      value: value == null ? false : value,
+    })
+  })
diff --git a/src/dates.js b/src/dates.js
@@ -1,11 +1,15 @@
-import { branch, withProps } from 'recompose'
+import { createElement as $ } from 'react'
 
-import { hasNotProp } from './tools'
+import { setWrapperName } from './tools'
 
-export const date = branch(
+export const date = (Component) =>
   /*
-  Sets `value` to `new Date(0)` if not set.
+  Sets `value` to `new Date(0)` if `nil`.
   */
-  hasNotProp('value'),
-  withProps({ value: new Date(0) }),
-)
+  setWrapperName(Component, function date(props) {
+    const { value } = props
+    return $(Component, {
+      ...props,
+      value: value == null ? new Date(0) : value,
+    })
+  })
diff --git a/src/dom.js b/src/dom.js
@@ -3,7 +3,7 @@ import { memoize, get, pickBy } from 'lodash'
 import { compose, branch, withHandlers, mapProps } from 'recompose'
 
 import { syncedProp } from './properties'
-import { hasProp } from './tools'
+import { hasProp, setWrapperName } from './tools'
 import { EMPTY_OBJECT } from './immutables'
 
 const PROP_NAMES = {
@@ -144,7 +144,8 @@ class Refresher {
     this.elements = []
     this.refresh = false
     const {
-      requestAnimationFrame = (callback) => global.setTimeout(callback, 0),
+      setTimeout,
+      requestAnimationFrame = (callback) => setTimeout(callback, 0),
     } = typeof window === 'undefined' ? global : window
     const state = EMPTY_OBJECT
     this.tick = () => {
@@ -185,28 +186,31 @@ class Refresher {
   }
 }
 
-const refresher = new Refresher()
-
-export const refreshed = (Component) => {
-  /*
-  Re-renders the component at the browser refresh rate, using `requestAnimationFrame`.
-  */
-  return class refreshed extends BaseComponent {
-    constructor(props) {
-      super(props)
-      this.state = {}
-    }
-    componentDidMount() {
-      refresher.add(this)
-    }
-    componentWillUnmount() {
-      refresher.remove(this)
-    }
-    render() {
-      return $(Component, this.props)
-    }
-  }
-}
+export const refreshed = (() => {
+  const refresher = new Refresher()
+  return (Component) =>
+    /*
+    Re-renders the component at the browser refresh rate, using `requestAnimationFrame`.
+    */
+    setWrapperName(
+      Component,
+      class refreshed extends BaseComponent {
+        constructor(props) {
+          super(props)
+          this.state = {}
+        }
+        componentDidMount() {
+          refresher.add(this)
+        }
+        componentWillUnmount() {
+          refresher.remove(this)
+        }
+        render() {
+          return $(Component, this.props)
+        }
+      },
+    )
+})()
 
 function onChangeFromPath(path) {
   switch (path) {

diff --git a/src/numbers.js b/src/numbers.js
@@ -1,16 +1,20 @@
+import { createElement as $ } from 'react'
 import { replace, trim } from 'lodash'
-import { branch, withProps } from 'recompose'
 
-import { hasNotProp, escapeRegex } from './tools'
+import { setWrapperName, escapeRegex } from './tools'
 import { EMPTY_OBJECT } from './immutables'
 
-export const number = branch(
+export const number = (Component) =>
   /*
-  Sets `value` to `0` if not set.
+  Sets `value` to `0` if `nil`.
   */
-  hasNotProp('value'),
-  withProps({ value: 0 }),
-)
+  setWrapperName(Component, function number(props) {
+    const { value } = props
+    return $(Component, {
+      ...props,
+      value: value == null ? 0 : value,
+    })
+  })
 
 export function parseNumber(
   value,

diff --git a/src/objects.js b/src/objects.js
@@ -3,7 +3,7 @@ import { reduce, join, pick } from 'lodash'
 import { compose, branch, withHandlers } from 'recompose'
 
 import { setProperty, EMPTY_OBJECT } from './immutables'
-import { hasProp, lazyProperty } from './tools'
+import { hasProp, lazyProperty, setWrapperName } from './tools'
 
 function onChangeProperty(element) {
   return (propertyValue, propertyName, payload) => {
@@ -20,33 +20,36 @@ export const object = (Component) =>
   /*
   Provides `property(name, key = name)` that returns the props for the child element responsible of the property `name`.
   Also provides `onChangeProperty(value, name, payload?)` that sets the property `name` to the provided `value`.
-  Sets `value` to `{}` if not set.
+  Sets `value` to `{}` if `nil`.
   */
-  class object extends BaseComponent {
-    constructor(props) {
-      super(props)
-      this.property = (name, key = name) => {
-        const { props } = this
-        return {
-          value: props.value && props.value[name],
-          key,
-          name,
-          onChange: props.onChange && this.onChangeProperty,
+  setWrapperName(
+    Component,
+    class object extends BaseComponent {
+      constructor(props) {
+        super(props)
+        this.property = (name, key = name) => {
+          const { props } = this
+          return {
+            value: props.value && props.value[name],
+            key,
+            name,
+            onChange: props.onChange && this.onChangeProperty,
+          }
         }
       }
-    }
-    render() {
-      const { props } = this
-      return $(Component, {
-        ...props,
-        value: props.value == null ? EMPTY_OBJECT : props.value,
-        onChangeProperty:
-          props.onChange &&
-          lazyProperty(this, 'onChangeProperty', onChangeProperty),
-        property: this.property,
-      })
-    }
-  }
+      render() {
+        const { props } = this
+        return $(Component, {
+          ...props,
+          value: props.value == null ? EMPTY_OBJECT : props.value,
+          onChangeProperty:
+            props.onChange &&
+            lazyProperty(this, 'onChangeProperty', onChangeProperty),
+          property: this.property,
+        })
+      }
+    },
+  )
 
 export const splittable = compose(
   /*