@concordance/react - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

index.js

@@ -16,3 +16,3 @@ 'use strict'
 // patches that were introduced in a specific version of Concordance.
-exports.minimalConcordanceVersion = '0.4.0'
+exports.minimalConcordanceVersion = '0.7.0'
 
@@ -47,2 +47,4 @@ // Plugin-specific version of its serialization output.
     child: {
+      openBracket: '{',
+      closeBracket: '}',
       string: {
@@ -60,3 +62,4 @@ line: {open: '', close: '', escapeQuote: ''},
 function register (api) {
-  const element = elementFactory(api)
+  const reactTags = new Set()
+  const element = elementFactory(api, reactTags)
   const testJson = testJsonFactory(api, element)
@@ -67,2 +70,4 @@
 
+  reactTags.add(element.tag).add(testJson.tag)
+
   return value => {
@@ -69,0 +74,0 @@ if (value.$$typeof === ELEMENT) return element.describe

lib/elementFactory.js

 'use strict'
 
+const arrify = require('arrify')
 const diffShallow = require('./diffShallow')
-const normalizeChildren = require('./normalizeChildren')
+const escapeText = require('./escapeText')
 
-const tag = Symbol('@concordance/react.ElementValue')
+function factory (api, reactTags) {
+  const tag = Symbol('@concordance/react.ElementValue')
 
-function themeProperty (theme) {
-  theme.property.separator = theme.react.attribute.separator + theme.react.attribute.value.openBracket
-  theme.property.after = theme.react.attribute.value.closeBracket
-  theme.property.increaseValueIndent = true
-}
+  function customPropertyFormatter (theme, indent, key, value) {
+    const separator = theme.react.attribute.separator + theme.react.attribute.value.openBracket
+    if (value.isSingle) {
+      return value
+        .withFirstPrefixed(key.formatAsKey(theme) + separator)
+        .withLastPostfixed(theme.react.attribute.value.closeBracket)
+    }
 
-function themeStringProperty (theme) {
-  theme.property.separator = theme.react.attribute.separator
-  theme.property.after = ''
-  Object.assign(theme.string.line, theme.react.attribute.value.string.line)
-}
+    return api.lineBuilder.first(key.formatAsKey(theme) + separator)
+      .concat(value.withFirstPrefixed(indent.increase()).stripFlags())
+      .append(api.lineBuilder.last(indent + theme.react.attribute.value.closeBracket))
+  }
 
-function themeChild (theme) {
-  theme.item.after = ''
-}
+  function themeProperty (theme) {
+    theme.property.increaseValueIndent = true
+    theme.property.customFormat = customPropertyFormatter
+  }
 
-function themeStringChild (theme) {
-  theme.item.after = ''
-  Object.assign(theme.string, theme.react.child.string)
-}
+  function themeStringProperty (theme) {
+    theme.property.separator = theme.react.attribute.separator
+    theme.property.after = ''
+    Object.assign(theme.string.line, theme.react.attribute.value.string.line)
+  }
 
-function factory (api, text) {
+  function customItemFormatter (theme, indent, value) {
+    if (value.isSingle) {
+      return value
+        .withFirstPrefixed(theme.react.child.openBracket)
+        .withLastPostfixed(theme.react.child.closeBracket)
+    }
+
+    return api.lineBuilder.first(theme.react.child.openBracket)
+      .concat(value.withFirstPrefixed(indent.increase()).stripFlags())
+      .append(api.lineBuilder.last(indent + theme.react.child.closeBracket))
+  }
+
+  function themeChild (theme) {
+    theme.item.increaseValueIndent = true
+    theme.item.customFormat = customItemFormatter
+  }
+
+  function themeReactChild (theme) {
+    theme.item.after = ''
+  }
+
+  function themeStringChild (theme) {
+    theme.item.after = ''
+    Object.assign(theme.string, theme.react.child.string)
+  }
+
   function describe (props) {
@@ -38,3 +68,3 @@ const element = props.value
 
-    const children = normalizeChildren(element.props.children)
+    const children = arrify(element.props.children)
 
@@ -139,2 +169,29 @@ const properties = Object.assign({}, element.props)
 
+        maxDepth: () => {
+          const name = this.formatName(theme)
+          const openTag = theme.react.openTag
+
+          if (!this.hasChildren && !this.hasProperties) {
+            return api.lineBuilder.single(openTag.start + name + openTag.selfCloseVoid + openTag.end)
+          }
+
+          let str = openTag.start + name
+          if (this.hasProperties) {
+            str += theme.maxDepth
+            if (this.hasChildren) {
+              str += openTag.end
+            } else {
+              str += ' ' + openTag.selfClose + openTag.end
+            }
+          } else {
+            str += openTag.end
+          }
+
+          if (this.hasChildren) {
+            str += theme.maxDepth + api.wrapFromTheme(theme.react.closeTag, name)
+          }
+
+          return api.lineBuilder.single(str)
+        },
+
         shouldFormat (subject) {
@@ -172,2 +229,4 @@ return subject.isItem === true || subject.isProperty === true
           modifier = themeStringChild
+        } else if (next.tag === api.descriptorTags.complexItem && reactTags.has(next.value.tag)) {
+          modifier = themeReactChild
         } else {
@@ -245,3 +304,12 @@ modifier = themeChild
           const current = index++
-          return this.describeItem(current, this.describeAny(this.children[current]))
+          const child = this.children[current]
+          const type = typeof child
+          let descriptor
+          if (type === 'string') {
+            descriptor = this.describeAny(escapeText(child))
+          } else {
+            descriptor = this.describeAny(child)
+          }
+
+          return this.describeItem(current, descriptor)
         }
@@ -248,0 +316,0 @@

lib/testJsonFactory.js

 'use strict'
 
-const normalizeChildren = require('./normalizeChildren')
+const arrify = require('arrify')
 
-const tag = Symbol('@concordance/react.TestJsonValue')
+function factory (api, element) {
+  const tag = Symbol('@concordance/react.TestJsonValue')
 
-function factory (api, element) {
   function describe (props) {
@@ -12,3 +12,3 @@ const obj = props.value
     const name = obj.type
-    const children = normalizeChildren(obj.children)
+    const children = arrify(obj.children)
     const properties = Object.assign({}, obj.props)
@@ -15,0 +15,0 @@ const hasProperties = Object.keys(properties).length > 0

package.json

 {
   "name": "@concordance/react",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Compare, format, diff and serialize React trees with Concordance",
@@ -37,4 +37,3 @@ "main": "index.js",
   "dependencies": {
-    "arrify": "^1.0.1",
-    "lodash.flattendeep": "^4.4.0"
+    "arrify": "^1.0.1"
   },
@@ -48,3 +47,3 @@ "devDependencies": {
     "codecov": "^2.1.0",
-    "concordance": "^0.5.0",
+    "concordance": "^0.8.0",
     "nyc": "^10.1.2",
@@ -51,0 +50,0 @@ "react": "^15.5.4",

No alert changes

Improved metrics

Total package byte prevSize

28964

increased by5.37%

Dependency count

1

decreased by-50%

Lines of code

633

increased by5.85%

Dependency changes

• - Removedlodash.flattendeep@^4.4.0

• - Removedlodash.flattendeep@4.4.0(transitive)