feat: allow mode to be defined, default to fast

.travis.yml

@@ -1,4 +1,12 @@
 language: node_js
 sudo: false
 node_js:
-  - "0.10"
+  - "4"
+env:
+  - CXX=g++-4.8
+addons:
+  apt:
+    sources:
+      - ubuntu-toolchain-r-test
+    packages:
+      - g++-4.8

src/ReactART.js

@@ -11,10 +11,13 @@
 
 "use strict";
 
-require('art/modes/fast'); // Flip this to DOM mode for debugging
+var defaultMode = 'fast';
 
+// set by ReactART.mode() or Surface.componentWillMount
+var Mode;
 var Transform = require('art/core/transform');
-var Mode = require('art/modes/current');
+
+// var ReplayPath = require('./util/ReplayPath');
 
 var React = require('react');
 var ReactInstanceMap = require('react/lib/ReactInstanceMap');
@@ -24,7 +27,18 @@ var ReactUpdates = require('react/lib/ReactUpdates');
 var assign = require('react/lib/Object.assign');
 var emptyObject = require('fbjs/lib/emptyObject');
 
-var pooledTransform = new Transform();
+var pooledTransform;
+
+function setMode(mode) {
+  var mode = require('art/modes/'+mode);
+
+  Mode = require('art/modes/current');
+  // canvas mode does not explicitly set itself like the other modes
+  Mode.setCurrent(mode);
+
+  pooledTransform = new Transform();
+}
+
 
 // Utilities
 
@@ -185,6 +199,12 @@ var Surface = React.createClass({
 
   mixins: [ContainerMixin],
 
+  componentWillMount: function() {
+    if (!Mode){
+      setMode(defaultMode);
+    }
+  },
+
   componentDidMount: function() {
 
     this.node = Mode.Surface(+this.props.width, +this.props.height, this.domNode);
@@ -597,19 +617,25 @@ Pattern.prototype.applyFill = function(node) {
   node.fillImage.apply(node, this.args);
 };
 
-var ReactART = {
+function pathFactory(){ 
+  if(!Mode){ 
+    throw Error('Mode not set. Call ReactART.mode() before using Path');
+  } 
+  return Mode.Path(); 
+}
 
+var ReactART = {
+  mode: setMode,
   LinearGradient: LinearGradient,
   RadialGradient: RadialGradient,
   Pattern: Pattern,
   Transform: Transform,
-  Path: Mode.Path,
+  Path: pathFactory,
   Surface: Surface,
   Group: Group,
   ClippingRectangle: ClippingRectangle,
   Shape: Shape,
   Text: Text
-
 };
 
 module.exports = ReactART;

src/__tests__/ReactART-test.js

@@ -13,8 +13,7 @@
 
 "use strict";
 
-require('mock-modules')
-  .dontMock('ReactART');
+jest.dontMock('ReactART');
 
 var React;
 var ReactTestUtils;
@@ -55,10 +54,7 @@ describe('ReactART', function() {
     ReactDOM = require('react-dom');
 
     var ReactART = require('ReactART');
-    var ARTSVGMode = require('art/modes/svg');
-    var ARTCurrentMode = require('art/modes/current');
-
-    ARTCurrentMode.setCurrent(ARTSVGMode);
+    ReactART.mode('svg');
 
     Group = ReactART.Group;
     Shape = ReactART.Shape;
@@ -118,23 +114,23 @@ describe('ReactART', function() {
     instance = ReactTestUtils.renderIntoDocument(instance);
 
     var expectedStructure = {
-      nodeName: 'SVG',
+      nodeName: 'svg',
       width: '150',
       height: '200',
       children: [
-        { nodeName: 'DEFS' },
+        { nodeName: 'defs' },
         {
-          nodeName: 'G',
+          nodeName: 'g',
           children: [
             {
-              nodeName: 'DEFS',
+              nodeName: 'defs',
               children: [
-                { nodeName: 'LINEARGRADIENT' }
+                { nodeName: 'linearGradient' }
               ]
             },
-            { nodeName: 'PATH' },
-            { nodeName: 'PATH' },
-            { nodeName: 'G' }
+            { nodeName: 'path' },
+            { nodeName: 'path' },
+            { nodeName: 'g' }
           ]
         }
       ]
@@ -149,16 +145,16 @@ describe('ReactART', function() {
     var instance = ReactDOM.render(<TestComponent flipped={false} />, container);
 
     var expectedStructure = {
-      nodeName: 'SVG',
+      nodeName: 'svg',
       children: [
-        { nodeName: 'DEFS' },
+        { nodeName: 'defs' },
         {
-          nodeName: 'G',
+          nodeName: 'g',
           children: [
-            { nodeName: 'DEFS' },
-            { nodeName: 'PATH', opacity: '0.1' },
-            { nodeName: 'PATH', opacity: Missing },
-            { nodeName: 'G' }
+            { nodeName: 'defs' },
+            { nodeName: 'path', opacity: '0.1' },
+            { nodeName: 'path', opacity: Missing },
+            { nodeName: 'g' }
           ]
         }
       ]
@@ -170,16 +166,16 @@ describe('ReactART', function() {
     ReactDOM.render(<TestComponent flipped={true} />, container);
 
     var expectedNewStructure = {
-      nodeName: 'SVG',
+      nodeName: 'svg',
       children: [
-        { nodeName: 'DEFS' },
+        { nodeName: 'defs' },
         {
-          nodeName: 'G',
+          nodeName: 'g',
           children: [
-            { nodeName: 'DEFS' },
-            { nodeName: 'PATH', opacity: Missing },
-            { nodeName: 'PATH', opacity: '0.1' },
-            { nodeName: 'G' }
+            { nodeName: 'defs' },
+            { nodeName: 'path', opacity: Missing },
+            { nodeName: 'path', opacity: '0.1' },
+            { nodeName: 'g' }
           ]
         }
       ]
@@ -208,7 +204,7 @@ describe('ReactART', function() {
     expect(mounted).toBe(true);
   });
 
-  it('resolves refs before componentDidMount', function() {
+  it('resolves refs bef ore componentDidMount', function() {
     var CustomShape = React.createClass({
       render: function() {
         return <Shape />;