Re-eneable fragments and tests

package.json

@@ -30,8 +30,8 @@
     "prepush": "npm run test",
     "prepare": "npm run test && npm run build",
     "prepublish": "npm run test && npm run build",
-    "posttest": "echo \"No lint yet\"",
-    "test": "echo \"No tests yet\""
+    "posttest": "npm run eslint",
+    "test": "ava test/*.* --verbose"
   },
   "ava": {
     "require": [
@@ -46,7 +46,7 @@
     "@babel/plugin-syntax-jsx": "^7.0.0",
     "@babel/plugin-transform-react-jsx": "^7.0.0",
     "@babel/register": "^7.0.0",
-    "ava": "next",
+    "ava": "^1.0.1",
     "babel-loader": "^8.0.0-beta.3",
     "babel-preset-primavera": "^1.1.0",
     "body-parser": "^1.18.3",

src/element.js

@@ -1,3 +1,4 @@
 const dom = (element, attrs, ...children) => ({ element, attrs, children })
 
 export default dom
+export const Fragment = element => ({ element: 'FRAGMENT', children: element.children })

src/reduxish.js

@@ -1,4 +1,4 @@
-import dom from './dom'
+import renderClient from './renderClient'
 
 function updateElement(parent, next, prev) {
   // later virtualDOM mods
@@ -13,20 +13,20 @@ export function withState(elements, store) {
   let nextProps
 
   store.subscribe(() => {
-    const nextNode = dom(() => elements(nextProps))
+    const nextNode = renderClient(() => elements(nextProps))
     updateElement(parentNode, nextNode, parentNode.firstChild)
   })
 
   return props => {
     nextProps = props
-    return dom(
-      'span',
-      {
+    return renderClient({
+      tag: 'span',
+      attrs: {
         ref: node => {
           parentNode = node
         },
       },
-      elements(props),
-    )
+      children: elements(props),
+    })
   }
 }

src/renderClient.js

@@ -39,6 +39,21 @@ function createElements(tagName, attrs, children) {
   return element
 }
 
+function processChildren(children) {
+  return children.map(child => {
+    if (child instanceof Array) {
+      return processChildren(child)
+    }
+
+    if (typeof child === 'object') {
+      // eslint-disable-next-line
+      return renderClient(child)
+    }
+
+    return child
+  })
+}
+
 /**
  * The JSXTag will be unwrapped returning the html
  *
@@ -59,7 +74,7 @@ function composeToFunction(JSXTag, elementProps, children) {
 
   switch (result.element) {
     case 'FRAGMENT':
-      return createFragmentFrom(children)
+      return createFragmentFrom(processChildren(result.children))
 
     // Portals are useful to render modals
     // allow render on a different element than the parent of the chain
@@ -68,24 +83,11 @@ function composeToFunction(JSXTag, elementProps, children) {
       bridge.target.appendChild(createFragmentFrom(children))
       return document.createComment('Portal Used')
     default:
+      // eslint-disable-next-line
       return renderClient(result)
   }
 }
 
-function processChildren(children) {
-  return children.map(child => {
-    if (child instanceof Array) {
-      return processChildren(child)
-    }
-
-    if (typeof child === 'object') {
-      return renderClient(child)
-    }
-
-    return child
-  })
-}
-
 function renderClient({ element, attrs, children }) {
   // Custom Components will be functions
   if (typeof element === 'function') {
@@ -106,7 +108,6 @@ function renderClient({ element, attrs, children }) {
 }
 
 export default renderClient
-export const Fragment = () => 'FRAGMENT'
 export const portalCreator = node => {
   function Portal() {
     return 'PORTAL'

src/renderServer.js

@@ -1,4 +1,3 @@
-let tabs = 0
 const selfClosing = [
   'area',
   'base',
@@ -38,29 +37,29 @@ function parseAttrs(attrs) {
       }
 
       if (attr === 'ref') {
-        return
+        return false
       }
 
       return `${singleAttr(attr)}="${value}"`
     })
+    .filter(Boolean)
     .join(' ')
 
   return parsed
 }
 
 function parseTag(tag, attrs, content) {
   const attributes = attrs && Object.keys(attrs).length > 0 ? parseAttrs(attrs) : ''
+  // eslint-disable-next-line
   const innerHTML = content instanceof Array ? render(content) : content
-  // console.log('innerHTML: ', innerHTML, content);
-  const separation = ' '.repeat(1)
+
   return selfClosing.indexOf(tag) > -1
-    ? `<${tag} ${attributes} />\n${separation}`
-    : `\n${separation}<${tag} ${attributes}>\n${separation}${innerHTML}\n${separation}</${tag}>`
+    ? `<${tag} ${attributes} />`
+    : `<${tag} ${attributes}>${innerHTML}</${tag}>`
 }
 
 function render(entry) {
   const { element, attrs, children } = entry
-  // console.log('entry: ', entry);
 
   if (typeof element === 'function') {
     return render(element(attrs))
@@ -80,9 +79,13 @@ function render(entry) {
         if (typeof subelement === 'object') {
           return render(subelement)
         }
+
+        return false
       })
       .join('')
   }
+
+  return false
 }
 
 export default render

test/test.JSXComponent.js

@@ -1,5 +1,6 @@
 import test from 'ava'
-import dom from '../src/dom'
+import dom from '../src/element'
+import renderClient from '../src/renderClient'
 import JSXComponent from '../src/JSXComponent.js'
 
 // Metasyntactic variables used commonly across all
@@ -20,7 +21,7 @@ test('Basic extends JSXComponent <div />', t => {
   }
 
   t.is(
-    dom(Component, externalProps).outerHTML,
+    renderClient(<Component {...externalProps} />).outerHTML,
     '<div class="foo" qux="baz" quux="baz"></div>',
     'Single Component Extends Correctly',
   )
@@ -43,7 +44,7 @@ test('JSXComponent events', t => {
     }
   }
 
-  document.body.appendChild(dom(Component))
+  document.body.appendChild(renderClient(<Component />))
 
   const HTMLEvents = document.createEvent('HTMLEvents')
   HTMLEvents.initEvent('click', false, true)