From e8efa2a1e915da7aab90f6ad2ffcb226b7016293 Mon Sep 17 00:00:00 2001 From: petehunt Date: Fri, 18 Jul 2014 19:02:31 -0700 Subject: [PATCH 1/7] Fix browser-tranforms --- vendor/browser-transforms.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/vendor/browser-transforms.js b/vendor/browser-transforms.js index 5b6ea1587c3..32c11945c9b 100644 --- a/vendor/browser-transforms.js +++ b/vendor/browser-transforms.js @@ -23,8 +23,6 @@ var docblock = require('jstransform/src/docblock'); var transform = require('jstransform').transform; var visitors = require('./fbtransform/visitors'); -var runScripts; -var loadScripts; var headEl; var dummyAnchor; var inlineScriptCount = 0; From 4cc0a61636431daa5b91ae92b2e23b55803f8ed5 Mon Sep 17 00:00:00 2001 From: petehunt Date: Fri, 18 Jul 2014 18:54:03 -0700 Subject: [PATCH 2/7] shadow dom --- examples/shadow-dom/example.js | 40 ++++++++++++++++++++++++++++++++++ examples/shadow-dom/index.html | 34 +++++++++++++++++++++++++++++ 2 files changed, 74 insertions(+) create mode 100644 examples/shadow-dom/example.js create mode 100644 examples/shadow-dom/index.html diff --git a/examples/shadow-dom/example.js b/examples/shadow-dom/example.js new file mode 100644 index 00000000000..6a73162ea01 --- /dev/null +++ b/examples/shadow-dom/example.js @@ -0,0 +1,40 @@ +/** @jsx React.DOM */ + +var ShadowRoot = React.createClass({ + getDefaultProps: function() { + return {component: React.DOM.div}; + }, + + render: function() { + return this.props.component(); + }, + + componentDidMount: function() { + var shadowRoot = window.honk = this.getDOMNode().createShadowRoot(); + shadowRoot.innerHTML = React.renderComponentToString(this.props.component()); + this._shadowRoot = shadowRoot.children[0]; + this.rerender(); + }, + + componentDidUpdate: function() { + this.rerender(); + }, + + rerender: function() { + React.renderComponent(this.props.component(null, this.props.children), this._shadowRoot); + } +}); + +var Hello = React.createClass({ + getInitialState: function() { + return {n: 0}; + }, + handleClick: function() { + this.setState({n: this.state.n + 1}); + }, + render: function() { + return
Clicked {this.state.n} times
; + } +}); + +React.renderComponent(, document.body); diff --git a/examples/shadow-dom/index.html b/examples/shadow-dom/index.html new file mode 100644 index 00000000000..fd9232404e3 --- /dev/null +++ b/examples/shadow-dom/index.html @@ -0,0 +1,34 @@ + + + + + Basic Example with External JSX + + + + +

Basic Example with External JSX

+
+

+ If you can see this, React is not working right. This is probably because you're viewing + this on your file system instead of a web server. Try running + 

+          python -m SimpleHTTPServer
+
+ and going to http://localhost:8000/. +

+
+

Example Details

+

This is written with JSX in a separate file and transformed in the browser.

+

+ Learn more about React at + facebook.github.io/react. +

+ + + + + + + + From 9127c4816081adf5b1d34a3d96990a68522da8ef Mon Sep 17 00:00:00 2001 From: petehunt Date: Fri, 18 Jul 2014 19:27:44 -0700 Subject: [PATCH 3/7] Allow listening to events on shadow roots --- src/browser/ui/ReactDOMComponent.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/browser/ui/ReactDOMComponent.js b/src/browser/ui/ReactDOMComponent.js index 70c0ceb9e0a..a62eb46f312 100644 --- a/src/browser/ui/ReactDOMComponent.js +++ b/src/browser/ui/ReactDOMComponent.js @@ -68,9 +68,12 @@ function assertValidProps(props) { function putListener(id, registrationName, listener, transaction) { var container = ReactMount.findReactContainerForID(id); if (container) { - var doc = container.nodeType === ELEMENT_NODE_TYPE ? - container.ownerDocument : - container; + var doc; + if (container.parentNode.hasOwnProperty('olderShadowRoot') || container.nodeType !== ELEMENT_NODE_TYPE) { + doc = container; + } else { + doc = container.ownerDocument; + } listenTo(registrationName, doc); } transaction.getPutListenerQueue().enqueuePutListener( From 6c69e2a7c85e0fc6f7a6c2b443094e3d42fb5f5f Mon Sep 17 00:00:00 2001 From: petehunt Date: Fri, 18 Jul 2014 19:41:24 -0700 Subject: [PATCH 4/7] add support for custom elements, gross. --- examples/shadow-dom/example.js | 13 ++++++++++++- src/browser/ReactDOM.js | 1 + 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/examples/shadow-dom/example.js b/examples/shadow-dom/example.js index 6a73162ea01..246395ee094 100644 --- a/examples/shadow-dom/example.js +++ b/examples/shadow-dom/example.js @@ -1,5 +1,14 @@ /** @jsx React.DOM */ +function createCustomElementClass(tagName) { + if (typeof window !== 'undefined') { + document.registerElement('x-foo', { + prototype: Object.create(HTMLElement.prototype) + }); + } + return React.DOM.createDOMComponentClass(false, tagName); +} + var ShadowRoot = React.createClass({ getDefaultProps: function() { return {component: React.DOM.div}; @@ -25,6 +34,8 @@ var ShadowRoot = React.createClass({ } }); +var XYolo = createCustomElementClass('x-yolo'); + var Hello = React.createClass({ getInitialState: function() { return {n: 0}; @@ -33,7 +44,7 @@ var Hello = React.createClass({ this.setState({n: this.state.n + 1}); }, render: function() { - return
Clicked {this.state.n} times
; + return
hello worldClicked {this.state.n} times
; } }); diff --git a/src/browser/ReactDOM.js b/src/browser/ReactDOM.js index 35797bb1357..4e1877d52ab 100644 --- a/src/browser/ReactDOM.js +++ b/src/browser/ReactDOM.js @@ -204,6 +204,7 @@ var injection = { } }; +ReactDOM.createDOMComponentClass = createDOMComponentClass; ReactDOM.injection = injection; module.exports = ReactDOM; From aee7c8043e7116171b95b70d0d3f430bac1f59c7 Mon Sep 17 00:00:00 2001 From: petehunt Date: Fri, 18 Jul 2014 19:41:51 -0700 Subject: [PATCH 5/7] fix bug --- examples/shadow-dom/example.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/shadow-dom/example.js b/examples/shadow-dom/example.js index 246395ee094..44f350d92bc 100644 --- a/examples/shadow-dom/example.js +++ b/examples/shadow-dom/example.js @@ -2,7 +2,7 @@ function createCustomElementClass(tagName) { if (typeof window !== 'undefined') { - document.registerElement('x-foo', { + document.registerElement(tagName, { prototype: Object.create(HTMLElement.prototype) }); } From 30fca35a0307d16bd9a749755a9e18b6c479c265 Mon Sep 17 00:00:00 2001 From: petehunt Date: Fri, 18 Jul 2014 19:56:32 -0700 Subject: [PATCH 6/7] it works --- examples/shadow-dom/example.js | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/examples/shadow-dom/example.js b/examples/shadow-dom/example.js index 44f350d92bc..cb0fde873bf 100644 --- a/examples/shadow-dom/example.js +++ b/examples/shadow-dom/example.js @@ -20,7 +20,7 @@ var ShadowRoot = React.createClass({ componentDidMount: function() { var shadowRoot = window.honk = this.getDOMNode().createShadowRoot(); - shadowRoot.innerHTML = React.renderComponentToString(this.props.component()); + shadowRoot.innerHTML = ''; this._shadowRoot = shadowRoot.children[0]; this.rerender(); }, @@ -30,11 +30,20 @@ var ShadowRoot = React.createClass({ }, rerender: function() { - React.renderComponent(this.props.component(null, this.props.children), this._shadowRoot); + React.renderComponent({this.props.children}, this._shadowRoot); } }); -var XYolo = createCustomElementClass('x-yolo'); +var PaperButton = React.createClass({ + render: function() { + return ( + + +

Hello world

+ + ); + } +}); var Hello = React.createClass({ getInitialState: function() { @@ -44,7 +53,7 @@ var Hello = React.createClass({ this.setState({n: this.state.n + 1}); }, render: function() { - return
hello worldClicked {this.state.n} times
; + return

yolo

; } }); From 3ead6bc55ef82085c8c79a94bdffab3483a090a6 Mon Sep 17 00:00:00 2001 From: petehunt Date: Fri, 18 Jul 2014 20:18:30 -0700 Subject: [PATCH 7/7] add WebCOmponent --- examples/shadow-dom/example.js | 30 +++++++++++++++++++----------- 1 file changed, 19 insertions(+), 11 deletions(-) diff --git a/examples/shadow-dom/example.js b/examples/shadow-dom/example.js index cb0fde873bf..44afca42e71 100644 --- a/examples/shadow-dom/example.js +++ b/examples/shadow-dom/example.js @@ -34,27 +34,35 @@ var ShadowRoot = React.createClass({ } }); +var WebComponent = React.createClass({ + render: function() { + return this.transferPropsTo( + + {this.props.children} + + ); + } +}); + var PaperButton = React.createClass({ render: function() { return ( - - + +

Hello world

- + ); } }); var Hello = React.createClass({ - getInitialState: function() { - return {n: 0}; - }, - handleClick: function() { - this.setState({n: this.state.n + 1}); - }, render: function() { - return

yolo

; + return ( +
+ +
+ ); } }); -React.renderComponent(, document.body); +React.renderComponent(, document.body);