feat(shape): allow replace option

colinmeinke · Jul 20, 2017 · 9b4415c · 9b4415c
1 parent 58bff6c
commit 9b4415c
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 33 deletions.
diff --git a/examples/dom-node/src.js b/examples/dom-node/src.js
@@ -2,11 +2,15 @@ import { shape, render, timeline, play } from '../../src'
 
 const el = document.querySelector('rect')
 
-const square = shape({ el }, {
-  el,
-  fill: 'yellow',
-  transforms: [[ 'offset', 80, 80 ]]
-})
+const square = shape(
+  { el },
+  {
+    el,
+    fill: 'yellow',
+    transforms: [[ 'offset', 70, 70 ]]
+  },
+  { replace: el }
+)
 
 const animation = timeline(square, {
   alternate: true,

diff --git a/src/render.js b/src/render.js
@@ -4,28 +4,17 @@ import { frame } from 'wilderness-core'
 import { node } from 'wilderness-dom-node'
 import { tick } from './timeline'
 
-const createNode = (shape, frameShape) => {
-  shape.node = node(frameShape)
+const appendNode = (container, shape) => {
+  if (shape.replace) {
+    shape.replace.parentNode.replaceChild(shape.node, shape.replace)
+    delete shape.replace
+  } else {
+    container.appendChild(shape.node)
+  }
 }
 
-const split = shapesAndTimelines => {
-  const shapes = []
-  const timelines = []
-
-  shapesAndTimelines.map(x => {
-    if (x.keyframes) {
-      if (__DEV__ && x.timeline) {
-        throw new Error(`You cannot render a shape that has been placed on a timeline, instead render the timeline`)
-      }
-
-      shapes.push(x)
-    } else {
-      // @todo validate timeline
-      timelines.push(x)
-    }
-  })
-
-  return { shapes, timelines }
+const createNode = (shape, frameShape) => {
+  shape.node = node(frameShape)
 }
 
 const render = (container, ...shapesAndTimelines) => {
@@ -49,19 +38,34 @@ const render = (container, ...shapesAndTimelines) => {
     })
   })
 
-  shapes.map(shape => {
-    container.appendChild(shape.node)
-  })
+  shapes.map(shape => appendNode(container, shape))
 
   timelines.map(timeline => {
-    timeline.timelineShapes.map(({ shape }) => {
-      container.appendChild(shape.node)
-    })
-
+    timeline.timelineShapes.map(({ shape }) => appendNode(container, shape))
     timeline.state.rendered = true
   })
 
   tick()
 }
 
+const split = shapesAndTimelines => {
+  const shapes = []
+  const timelines = []
+
+  shapesAndTimelines.map(x => {
+    if (x.keyframes) {
+      if (__DEV__ && x.timeline) {
+        throw new Error(`You cannot render a shape that has been placed on a timeline, instead render the timeline`)
+      }
+
+      shapes.push(x)
+    } else {
+      // @todo validate timeline
+      timelines.push(x)
+    }
+  })
+
+  return { shapes, timelines }
+}
+
 export default render
diff --git a/src/shape.js b/src/shape.js
@@ -2,7 +2,7 @@ import { plainShapeObject } from 'wilderness-dom-node'
 import { shape as coreShape } from 'wilderness-core'
 
 const shape = (...props) => {
-  return coreShape(...props.map(prop => {
+  const s = coreShape(...props.map(prop => {
     if (prop.el) {
       const p = {
         ...plainShapeObject(prop.el),
@@ -16,6 +16,16 @@ const shape = (...props) => {
 
     return prop
   }))
+
+  const { replace } = props.length > 1 && typeof props[ props.length - 1 ].type === 'undefined'
+    ? props[ props.length - 1 ]
+    : {}
+
+  if (replace) {
+    s.replace = replace
+  }
+
+  return s
 }
 
 export default shape