facebook · petehunt · Mar 4, 2014 · zpao · Apr 26, 2014 · vjeux
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -75,6 +75,7 @@ module.exports = function(grunt) {
   grunt.registerTask('build:transformer', ['jsx:normal', 'browserify:transformer']);
   grunt.registerTask('build:min', ['jsx:normal', 'version-check', 'browserify:min']);
   grunt.registerTask('build:addons-min', ['jsx:normal', 'browserify:addonsMin']);
+  grunt.registerTask('build:workers', ['jsx:normal', 'browserify:workers']);
   grunt.registerTask('build:withCodeCoverageLogging', [
     'jsx:normal',
     'version-check',
@@ -217,6 +218,7 @@ module.exports = function(grunt) {
     'browserify:addons',
     'browserify:min',
     'browserify:addonsMin',
+    'browserify:workers',
     'npm-react:release',
     'npm-react:pack',
     'npm-react-tools:pack',

diff --git a/examples/webworker/example.js b/examples/webworker/example.js
@@ -0,0 +1,39 @@
+/**
+ * @jsx React.DOM
+ */
+
+if (typeof React === 'undefined') {
+  importScripts('../../build/react-with-workers.js');
+}
+
+React.Worker.run('./example.js', [], function() {
+  var ExampleApplication = React.createClass({
+    getInitialState: function() {
+      return {red: false};
+    },
+    toggle: function() {
+      this.setState({red: !this.state.red});
+    },
+    render: function() {
+      var elapsed = Math.round(this.props.elapsed  / 100);
+      var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' );
+      var message =
+        'React has been successfully running for ' + seconds + ' seconds.';
+
+      return React.DOM.p({onClick: this.toggle, style: {color: this.state.red ? 'red' : 'blue'}}, message);
+    }
+  });
+
+  var start = new Date().getTime();
+
+  setInterval(function() {
+    try {
+      React.renderComponent(
+        ExampleApplication({elapsed: new Date().getTime() - start}),
+        'container'
+      );
+    } catch (e) {
+      console.log(e.stack);
+    }
+  }, 50);
+});
diff --git a/examples/webworker/index.html b/examples/webworker/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
+    <title>Basic Example with Precompiled JSX</title>
+    <link rel="stylesheet" href="../shared/css/base.css" />
+  </head>
+  <body>
+    <h1>Basic Example with Precompiled JSX</h1>
+    <div id="container">
+      <p>
+        If you can see this, React is not running. Try running:
+      </p>
+      <pre>npm install -g react-tools
+cd examples/basic-jsx-precompile/
+jsx . build/</pre>
+    </div>
+    <h4>Example Details</h4>
+    <p>This is written with JSX in a separate file and precompiled to vanilla JS by running:</p>
+    <pre>npm install -g react-tools
+cd examples/basic-jsx-precompile/
+jsx . build/</pre>
+    <p>
+      Learn more about React at
+      <a href="http://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
+    </p>
+    <script src="../../build/react-with-workers.js"></script>
+    <script src="example.js"></script>
+  </body>
+</html>
diff --git a/grunt/config/browserify.js b/grunt/config/browserify.js
@@ -103,6 +103,18 @@ var addonsMin = _.merge({}, addons, {
   after: [minify, bannerify]
 });
 
+var workers = {
+  entries: [
+    './build/modules/ReactWithWorkers.js'
+  ],
+  outfile: './build/react-with-workers.js',
+  debug: false,
+  standalone: 'React',
+  transforms: [envify({NODE_ENV: 'development'})],
+  packageName: 'React (web workers)',
+  after: [es3ify.transform, simpleBannerify]
+};
+
 var withCodeCoverageLogging = {
   entries: [
     './build/modules/React.js'
@@ -122,5 +134,6 @@ module.exports = {
   transformer: transformer,
   addons: addons,
   addonsMin: addonsMin,
+  workers: workers,
   withCodeCoverageLogging: withCodeCoverageLogging
 };
diff --git a/grunt/config/jsx.js b/grunt/config/jsx.js
@@ -5,7 +5,8 @@ var _ = require('lodash');
 
 var rootIDs = [
   "React",
-  "ReactWithAddons"
+  "ReactWithAddons",
+  "ReactWithWorkers"
 ];
 
 

diff --git a/src/browser/ReactDOMNodeHandle.js b/src/browser/ReactDOMNodeHandle.js
@@ -0,0 +1,53 @@
+/**
+ * Copyright 2013-2014 Facebook, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * @providesModule ReactDOMNodeHandle
+ */
+
+"use strict";
+
+var ReactDOMNodeHandleTypes = require('ReactDOMNodeHandleTypes');
+
+var ReactDOMNodeHandle = {
+  getKey: function(handle) {
+    return handle.key;
+  },
+
+  getHandleForReactID: function(reactID) {
+    return {
+      key: 'reactid:' + reactID,
+      type: ReactDOMNodeHandleTypes.REACT_ID,
+      reactID: reactID
+    };
+  },
+
+  getHandleForReactIDTopLevel: function(reactID) {
+    return {
+      key: 'toplevel:' + reactID,
+      type: ReactDOMNodeHandleTypes.REACT_ID_TOP_LEVEL,
+      reactID: reactID
+    };
+  },
+
+  getHandleForContainerID: function(id) {
+    return {
+      key: 'containerID:' + id,
+      type: ReactDOMNodeHandleTypes.CONTAINER,
+      id: id
+    };
+  }
+};
+
+module.exports = ReactDOMNodeHandle;
diff --git a/src/browser/ReactDOMNodeHandleMapping.js b/src/browser/ReactDOMNodeHandleMapping.js
@@ -0,0 +1,113 @@
+/**
+ * Copyright 2013-2014 Facebook, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * @providesModule ReactDOMNodeHandleMapping
+ * @typechecks static-only
+ */
+
+"use strict";
+
+var ReactDOMNodeHandle = require('ReactDOMNodeHandle');
+var ReactInstanceHandles = require('ReactInstanceHandles');
+
+/** Mapping from reactRootID to React component instance. */
+var instancesByReactRootID = {};
+
+/** inverse of above */
+var reactRootIDByContainerKey = {};
+
+/**
+ * @param {object} container DOM node handle that may contain a React component.
+ * @return {?string} A "reactRoot" ID, if a React component is rendered.
+ */
+function getReactRootID(containerHandle) {
+  return reactRootIDByContainerKey[
+    ReactDOMNodeHandle.getKey(containerHandle)
+  ];
+}
+
+var ReactDOMNodeHandleMapping = {
+  /** Exposed for debugging purposes **/
+  _instancesByReactRootID: instancesByReactRootID,
+
+  getReactRootID: getReactRootID,
+
+  /**
+   * Register a component into the instance map and starts scroll value
+   * monitoring
+   * @param {ReactComponent} nextComponent component instance to render
+   * @param {object} containerHandle container to render into
+   * @param {string} forceReactRootID reactRootID to use (rather than generating one)
+   * @return {string} reactRoot ID prefix
+   */
+  registerComponent: function(nextComponent, containerHandle, forceReactRootID) {
+    var reactRootID = ReactDOMNodeHandleMapping.registerContainer(
+      containerHandle,
+      forceReactRootID
+    );
+    instancesByReactRootID[reactRootID] = nextComponent;
+    return reactRootID;
+  },
+
+  /**
+   * Registers a container node into which React components will be rendered.
+   * This also creates the "reactRoot" ID that will be assigned to the element
+   * rendered within.
+   *
+   * @param {object} containerHandle DOM node handle to register as a container.
+   * @param {string} forceReactRootID reactRootID to use (rather than generating one)
+   * @return {string} The "reactRoot" ID of elements rendered within.
+   */
+  registerContainer: function(containerHandle, forceReactRootID) {
+    var reactRootID = forceReactRootID || getReactRootID(containerHandle);
+    if (reactRootID) {
+      // If one exists, make sure it is a valid "reactRoot" ID.
+      reactRootID = ReactInstanceHandles.getReactRootIDFromNodeID(reactRootID);
+    }
+    if (!reactRootID) {
+      // No valid "reactRoot" ID found, create one.
+      reactRootID = ReactInstanceHandles.createReactRootID();
+    }
+    reactRootIDByContainerKey[
+      ReactDOMNodeHandle.getKey(containerHandle)
+    ] = reactRootID;
+    return reactRootID;
+  },
+
+  /**
+   * Unmounts and destroys the React component rendered in the `container`.
+   *
+   * @param {object} containerHandle DOM node handle containing a React component.
+   * @return {?string} reactRootID that was just unmounted or null if no component is there.
+   */
+  unmountComponentAtNode: function(containerHandle) {
+    var reactRootID = getReactRootID(containerHandle);
+    var component = instancesByReactRootID[reactRootID];
+
+    if (!component) {
+      return null;
+    }
+    delete instancesByReactRootID[reactRootID];
+
+    component.unmountComponent();
+    return reactRootID;
+  },
+
+  getInstanceFromContainer: function(containerHandle) {
+    return instancesByReactRootID[getReactRootID(containerHandle)];
+  }
+};
+
+module.exports = ReactDOMNodeHandleMapping;
diff --git a/src/browser/ReactDOMNodeHandleTypes.js b/src/browser/ReactDOMNodeHandleTypes.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright 2013-2014 Facebook, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * @providesModule ReactDOMNodeHandleTypes
+ */
+
+"use strict";
+
+var keyMirror = require('keyMirror');
+
+var ReactDOMNodeHandleTypes = keyMirror({
+  REACT_ID: null,
+  REACT_ID_TOP_LEVEL: null,
+  CONTAINER: null
+});
+
+module.exports = ReactDOMNodeHandleTypes;