├── src ├── index.js ├── Component.js ├── DevToolsIntegration.js └── Reconciler.js ├── .babelrc ├── .gitignore ├── examples ├── simple.js ├── xeyes.js └── simple-nojsx.js ├── package.json ├── LICENSE └── README.md /src/index.js: -------------------------------------------------------------------------------- 1 | const ReactX11 = require('./Reconciler.js'); 2 | module.exports.render = ReactX11.render; 3 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react"], 3 | "plugins": [ 4 | "transform-react-jsx-source" 5 | ], 6 | } 7 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | lib-cov 2 | *.seed 3 | *.log 4 | *.csv 5 | *.dat 6 | *.out 7 | *.pid 8 | *.gz 9 | .DS_Store 10 | 11 | tmp 12 | pids 13 | logs 14 | 15 | node_modules 16 | npm-debug.log 17 | 18 | -------------------------------------------------------------------------------- /examples/simple.js: -------------------------------------------------------------------------------- 1 | /* 2 | const defineProperty = Object.defineProperty; 3 | defineProperty(global, 'WebSocket', { 4 | value: require('ws') 5 | }); 6 | 7 | global.window = global; 8 | defineProperty(global, 'window', { 9 | value: global 10 | }); 11 | 12 | const {connectToDevTools} = require('react-devtools-core'); 13 | connectToDevTools(); 14 | */ 15 | 16 | const React = require('react'); 17 | const ReactX11 = require('../src/index.js') 18 | class App extends React.Component { 19 | render() { 20 | return ( 21 | 22 | 23 | 24 | ) 25 | } 26 | } 27 | 28 | ReactX11.render(React.createElement(App)); 29 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-x11", 3 | "version": "0.0.1", 4 | "description": "react renderer with X11 as a target", 5 | "main": "./dist/index.js", 6 | "scripts": { 7 | "examples:simple": "babel-node examples/simple", 8 | "examples:simple-nojsx": "node examples/simple-nojsx", 9 | "examples:xeyes": "babel-node examples/xeyes" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "https://github.com/sidorares/react-x11" 14 | }, 15 | "keywords": [ 16 | "react", 17 | "renderer", 18 | "desktop", 19 | "x11", 20 | "ui" 21 | ], 22 | "author": "Andrey Sidorov ", 23 | "license": "MIT", 24 | "dependencies": { 25 | "extrude-polyline": "^1.0.6", 26 | "react": "^16.6.3", 27 | "react-reconciler": "^0.17.2" 28 | }, 29 | "devDependencies": { 30 | "react-devtools": "^3.4.2", 31 | "react-devtools-core": "^3.4.2" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Andrey Sidorov 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/Component.js: -------------------------------------------------------------------------------- 1 | const IO_KEY = '__IO__'; 2 | 3 | const ReactX11Component = { 4 | createElement( 5 | tag, 6 | props, 7 | rootContainerElement, 8 | hostContext 9 | ) { 10 | console.log('createElement') 11 | return Object.assign({[IO_KEY]: rootContainerElement}, props); 12 | }, 13 | 14 | setInitialProperties( 15 | element, 16 | tag, 17 | rawProps, 18 | rootContainerElement 19 | ) { 20 | Object.assign(element, rawProps); 21 | //setPayloadForPin(rootContainerElement, element); 22 | console.log('TODO: setInitialProperties!!!', element); 23 | }, 24 | 25 | diffProperties( 26 | element, 27 | tag, 28 | lastRawProps, 29 | nextRawProps, 30 | rootContainerElement 31 | ) { 32 | console.log('TODO: diffProperties') 33 | }, 34 | 35 | updateProperties( 36 | element, 37 | updatePayload, 38 | type, 39 | oldProps, 40 | newProps, 41 | internalInstanceHandle 42 | ) { 43 | const rootContainerElement = element[IO_KEY]; 44 | Object.assign(element, newProps); 45 | // setPayloadForPin(rootContainerElement, element); 46 | console.log('TODO: updateProperties', element); 47 | }, 48 | }; 49 | 50 | module.exports = ReactX11Component; 51 | -------------------------------------------------------------------------------- /src/DevToolsIntegration.js: -------------------------------------------------------------------------------- 1 | if (process.env.NODE_ENV !== 'production') { 2 | const defineProperty = Object.defineProperty; 3 | defineProperty(global, 'WebSocket', { 4 | value: require('ws') 5 | }); 6 | 7 | global.window = global; 8 | defineProperty(global, 'window', { 9 | value: global 10 | }); 11 | 12 | const { connectToDevTools } = require('react-devtools-core'); 13 | connectToDevTools({ 14 | isAppActive() { 15 | return true; 16 | }, 17 | host: 'localhost' 18 | }); 19 | 20 | const highlight = function(n) { 21 | // TODO: add code to highlight components 22 | // probably allow component to provide hook to highlight itself 23 | // and only as a fallback draw rectangle overlay on top 24 | //console.log('highlight!!!'); 25 | 26 | debugger; 27 | 28 | const ctx = n.getContext('2d'); 29 | ctx.beginPath(); 30 | ctx.strokeStyle = 'red'; 31 | ctx.lineWidth = 3; 32 | ctx.fillRect(0, 0, n.window, n.height); 33 | ctx.stroke(); 34 | }; 35 | 36 | const hideHighlight = function(n) { 37 | // TODO: add code to hide highlight 38 | //console.log('hide highlight!!!'); 39 | const ctx = n.getContext('2d'); 40 | ctx.beginPath(); 41 | ctx.strokeStyle = 'white'; 42 | ctx.lineWidth = 3; 43 | ctx.fillRect(0, 0, n.width, n.height); 44 | ctx.stroke(); 45 | }; 46 | 47 | window.__REACT_DEVTOOLS_GLOBAL_HOOK__.on('react-devtools', agent => { 48 | //agent.on('highlight', data => hl.highlight(data.node, data.name)); 49 | higlightedNodes = []; 50 | agent.on('highlight', data => { 51 | // TODO try to implement 'highlighted' state via change in '__hilighted' prop? 52 | const firstInternalKey = Object.keys(agent.reactInternals)[0]; 53 | const internals = agent.reactInternals[firstInternalKey]; 54 | if (internals) { 55 | // TODO this will only work if injectInternals/findFiberByHostInstance 56 | // is implemented in ./Reconsiler.js 57 | const ele = internals.getReactElementFromNative(data.node); 58 | console.log(ele); 59 | debugger; 60 | } 61 | highlight(data.node, data.name); 62 | higlightedNodes.push(data.node); 63 | }); 64 | agent.on('hideHighlight', () => { 65 | higlightedNodes.forEach(n => { 66 | hideHighlight(n); 67 | }); 68 | higlightedNodes = []; 69 | }); 70 | }); 71 | } 72 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-x11 2 | 3 | React custom rendering where side effects are communication with [X11 server](https://www.x.org/wiki/Documentation/). The goal is to create a simple library where you would apply your React or React Native like experience to build small GUI programs to run in X Window environment (usually linux desktop, but I personally more often code under osx + [XQuattz](https://www.xquartz.org/)) 4 | 5 | This library is mostly written in javascript all way down, no special bridging code in different language required. For communication with X server [node-x11](https://github.com/sidorares/node-x11) library is used, which is pure JS implementation of X11 protocol (think of it as xlib rewritten in javascript/node.js) 6 | 7 | ![react-devtools-x11](https://cloud.githubusercontent.com/assets/173025/24536323/6af97598-1625-11e7-88d4-74f429b7f470.gif) 8 | 9 | Currently only `window` component is available, in the future we'll add windowless controls support, simple controls library and [yoga-layout](https://www.npmjs.com/package/yoga-layout) powered layout management 10 | 11 | 12 | ## Trying it out 13 | 14 | Clone this repo and from its folder run 15 | 16 | ```sh 17 | npm install 18 | ``` 19 | 20 | After install is complete you can run examples by running one of those commands: 21 | 22 | ```sh 23 | npm run examples:simple 24 | npm run examples:simple-nojsx 25 | npm run examples:xeyes 26 | ``` 27 | 28 | ## Example 29 | 30 | ```js 31 | const React = require('react'); 32 | const ReactX11 = require('react-x11') 33 | class App extends React.Component { 34 | 35 | handleRef (win) { 36 | // win is https://github.com/sidorares/ntk/blob/master/lib/window.js instance 37 | win.on('expose', ev => { 38 | ctx.fillStyle = 'black'; 39 | ctx.fillText('Hello', ev.x, ev.y); 40 | }) 41 | } 42 | 43 | render() { 44 | 45 | const paintRadialGradient = e => { 46 | const ctx = e.window.getContext('2d'); 47 | const gradient = ctx.createRadialGradient(0, 0, 0, e.x, e.y, 500); 48 | gradient.addColorStop(0, "green"); 49 | gradient.addColorStop(0.5, "green"); 50 | gradient.addColorStop(1, "rgb(255, 255, 255)"); 51 | ctx.fillStyle = gradient; 52 | ctx.fillRect(0, 0, ctx.width, ctx.height); 53 | } 54 | 55 | return ( 56 | console.log('hello')}> 57 | 58 | 59 | ) 60 | } 61 | } 62 | 63 | ReactX11.render(React.createElement(App)); 64 | ``` 65 | 66 | # See also 67 | 68 | https://github.com/chentsulin/awesome-react-renderer 69 | -------------------------------------------------------------------------------- /examples/xeyes.js: -------------------------------------------------------------------------------- 1 | const React = require('react'); 2 | const ReactX11 = require('../src/index.js') 3 | 4 | let lastMousePos = { 5 | x: 0, 6 | y: 0 7 | } 8 | 9 | class Eye extends React.Component { 10 | paint(ev) { 11 | const win = this.w; 12 | const at = this.props.lookingAt; 13 | if (!win) { 14 | return; 15 | } 16 | const pupilX = at.x - win.x - win.width/2; 17 | const pupilY = at.y - win.y - win.height/2; 18 | 19 | const ctx = win.getContext('2d'); 20 | ctx.fillStyle = this.props.color; 21 | ctx.fillRect(0, 0, ctx.width, ctx.height); 22 | const gradient = ctx.createRadialGradient(pupilX, pupilY, 0, win.width/2, win.height/2, win.width/2); 23 | gradient.addColorStop(0, this.props.color); 24 | gradient.addColorStop(0.5, this.props.color); 25 | gradient.addColorStop(0.505, 'white'); 26 | gradient.addColorStop(0.995, 'white'); 27 | gradient.addColorStop(1, 'rgba(0, 0, 0, 0)'); 28 | ctx.fillStyle = gradient; 29 | ctx.fillRect(0, 0, ctx.width, ctx.height); 30 | } 31 | 32 | componentDidUpdate() { 33 | this.paint(); 34 | } 35 | render() { 36 | return React.createElement('window', { 37 | ref: w => this.w = w, 38 | onExpose: ev=> this.paint(ev), 39 | x: this.props.x, 40 | y: this.props.y, 41 | width: this.props.width, 42 | height: this.props.height 43 | }) 44 | } 45 | } 46 | 47 | class App extends React.Component { 48 | 49 | constructor(props) { 50 | super(props); 51 | this.state = { 52 | lookingAt: {x: 0, y: 0}, 53 | width: 200, 54 | height: 200 55 | } 56 | } 57 | 58 | componentDidMount() { 59 | // poll mouse 60 | setInterval(() => { 61 | connection.rootWindow().queryPointer((err, pointer) => { 62 | this.setState({ 63 | lookingAt: { 64 | x: pointer.childX, 65 | y: pointer.childY 66 | } 67 | }); 68 | }) 69 | }, 100); 70 | } 71 | 72 | render() { 73 | const trackPointer = ev => { 74 | this.setState({ 75 | lookingAt: { 76 | x: ev.rootx, 77 | y: ev.rooty 78 | } 79 | }); 80 | } 81 | 82 | const layoutChildren = ev => { 83 | this.setState({ 84 | width: ev.width, 85 | height: ev.height 86 | }) 87 | } 88 | 89 | return ( 90 | React.createElement('window', {onMouseMove: trackPointer, onResize: layoutChildren, width: 200, height: 200}, 91 | React.createElement(Eye, {color: 'green', lookingAt: this.state.lookingAt, x: 0, y: 0, width: this.state.width / 2, height: this.state.height}), 92 | React.createElement(Eye, {color: 'blue', lookingAt: this.state.lookingAt, x: this.state.width / 2, y: 0, width: this.state.width / 2, height: this.state.height}) 93 | ) 94 | ) 95 | } 96 | } 97 | 98 | ReactX11.render(React.createElement(App), (inst, conn) => { 99 | connection = conn; 100 | }); 101 | -------------------------------------------------------------------------------- /examples/simple-nojsx.js: -------------------------------------------------------------------------------- 1 | /* 2 | const defineProperty = Object.defineProperty; 3 | defineProperty(global, 'WebSocket', { 4 | value: require('ws') 5 | }); 6 | 7 | global.window = global; 8 | defineProperty(global, 'window', { 9 | value: global 10 | }); 11 | 12 | const {connectToDevTools} = require('react-devtools-core'); 13 | connectToDevTools({ 14 | isAppActive() { 15 | // Don't steal the DevTools from currently active app. 16 | return true; 17 | }, 18 | host: 'localhost', 19 | // default port? port: , 20 | resolveRNStyle: null, // TODO maybe: require('flattenStyle') 21 | }); 22 | */ 23 | 24 | const React = require('react'); 25 | const ReactX11 = require('../src/index.js') 26 | class App extends React.Component { 27 | 28 | constructor(props) { 29 | super(props); 30 | this.state = { 31 | down: false, 32 | w: 500, 33 | isOver: 'yes' 34 | } 35 | } 36 | 37 | componentDidMount() { 38 | //setInterval(() => { 39 | // this.setState({w: this.state.w + 1 }); 40 | //}, 5000); 41 | } 42 | 43 | mainWndRef(w) { 44 | if (!w) { 45 | //console.log('Detach ref!') 46 | return 47 | } 48 | //console.log('Attach ref!') 49 | if (this.w === w) { 50 | //console.log('already saved') 51 | return; 52 | } 53 | this.w = w; 54 | const ctx = w.getContext('2d') 55 | w.on('mousemove', ev => { 56 | ctx.fillStyle = 'black'; 57 | ctx.fillRect(ev.x - 1, ev.y - 1, 2, 2); 58 | }) 59 | } 60 | 61 | innerWndRef(w) { 62 | if (!w) { 63 | //console.log('Detach ref!') 64 | return 65 | } 66 | //console.log('Attach ref!') 67 | if (this.ww === w) { 68 | //console.log('already saved') 69 | return; 70 | } 71 | this.ww = w; 72 | const ctx = w.getContext('2d') 73 | w.on('mousemove', ev => { 74 | ctx.fillStyle = 'red'; 75 | ctx.fillRect(ev.x - 1, ev.y - 1, 2, 2); 76 | }) 77 | } 78 | 79 | 80 | render() { 81 | 82 | const grad1 = color => e => { 83 | var ctx = e.window.getContext('2d'); 84 | var gradient = ctx.createRadialGradient(0, 0, 0, e.x, e.y, 500); 85 | gradient.addColorStop(0, color); 86 | gradient.addColorStop(1, "rgb(255, 255, 255)"); 87 | ctx.fillStyle = gradient; 88 | ctx.fillRect(0, 0, ctx.width, ctx.height); 89 | } 90 | 91 | 92 | const grad = (e) => { 93 | var ctx = e.window.getContext('2d'); 94 | var gradient = ctx.createRadialGradient(0, 0, 0, e.x, e.y, 500); 95 | gradient.addColorStop(0, "green"); 96 | gradient.addColorStop(0.5, "green"); 97 | gradient.addColorStop(1, "rgb(255, 255, 255)"); 98 | ctx.fillStyle = gradient; 99 | ctx.fillRect(0, 0, ctx.width, ctx.height); 100 | } 101 | 102 | return ( 103 | React.createElement('window', {top: true, name: 'topWindow', ref: (w) => { this.mainWndRef(w) }, onMouseOut: () => this.setState({down: false}), onMouseOver: () => this.setState({down: true}), width: this.state.w, height: 500, title: `test ${this.state.isOver}`, onResize: ev=> this.setState({isOver: `${ev.x} ${ev.y} ${ev.width} ${ev.height}`})}, 104 | React.createElement('window', {title: 'child', name: 'childWindow', ref: (w) => { this.innerWndRef(w) }, width: 200, height: 200, x: 50, y: 150, onMouseOver: () => this.setState({isOver: 'yes'}), onMouseOut: () => this.setState({isOver: 'no'}) }, 105 | //!!this.state.down && React.createElement('window', {title: 'child', name: 'childWindow', ref: (w) => { this.innerWndRef(w) }, width: 200, height: 200, x: 50, y: 150, onMouseOver: () => this.setState({isOver: 'yes'}), onMouseOut: () => this.setState({isOver: 'no'}) }) 106 | //,React.createElement('window', {key: 1, title: 'child child1', name: 'childChildWindow1', width: 20, height: 20, x: 5, y: 15}), 107 | React.createElement('window', {key: 2, title: 'child child2', name: 'childChildWindow2', width: 20, height: 20, x: 15, y: 15, onMouseMove: grad1('green')}, 108 | React.createElement('window', {key: 3, title: 'child child child 2', name: 'child childChildWindow2', width: 12, height: 12, x: 5, y: 5, onMouseMove: grad1('blue')}) 109 | ) 110 | ) 111 | ) 112 | ) 113 | } 114 | } 115 | 116 | ReactX11.render(React.createElement(App)); 117 | -------------------------------------------------------------------------------- /src/Reconciler.js: -------------------------------------------------------------------------------- 1 | require('./DevToolsIntegration.js'); 2 | const ReactReconciler = require('react-reconciler'); 3 | console.log(ReactReconciler); 4 | 5 | const LOG_STEPS = false; //true; 6 | const log = (a, b, c) => { 7 | if (LOG_STEPS) { 8 | console.log(a, b, c); 9 | } 10 | }; 11 | 12 | const Renderer = ReactReconciler({ 13 | // the tree creation and updating methods. If you’re familiar with the DOM API 14 | // this will look familiar 15 | now: () => Date.now(), 16 | 17 | supportsMutation: true, 18 | 19 | //appendAllChildren() { 20 | // console.log('AAAA appendAllChildren()'); 21 | //}, 22 | 23 | appendChildToContainer(config, container, publicInstance) { 24 | console.log('AAAA appendAllChildren()'); 25 | console.log({ container, publicInstance }); 26 | }, 27 | 28 | createInstance(type, props, rootContainerInstance, hostContext, internalInstanceHandle) { 29 | console.log('AAAA'); 30 | if (type === 'window') { 31 | var windowAttributes = Object.assign({}, props); 32 | if (typeof hostContext.rootWindowId === 'undefined') { 33 | windowAttributes.overrideRedirect = true; 34 | } 35 | const wnd = rootContainerInstance.createWindow(windowAttributes); 36 | if (!windowAttributes.overrideRedirect) { 37 | wnd.map(); 38 | } 39 | console.log('CREATED', wnd.id, props.name); 40 | wnd._reactFiber = internalInstanceHandle; 41 | return wnd; 42 | } else { 43 | return { 44 | type, 45 | props 46 | }; 47 | } 48 | }, 49 | 50 | // this is called instead of `appendChild` when the parentInstance is first 51 | // being created and mounted 52 | // added in https://github.com/facebook/react/pull/8400/ 53 | appendInitialChild(parentInstance, child) { 54 | const instance = parentInstance; 55 | // 56 | log('appendInitialChild'); 57 | //console.log('appendInitialChild REPARENTING!!! ======= ', child.id, parentInstance.id) 58 | //setTimeout(() => { 59 | console.log('appendInitialChild REPARENTING!!! ======= ', child.id, parentInstance.id); 60 | 61 | if (child.reparentTo) { 62 | //child.reparentTo(parentInstance, 0, 0);//child.x, child.y); 63 | if (instance.__children) { 64 | parentInstance.__children.push(child); 65 | } else { 66 | parentInstance.__children = [child]; 67 | } 68 | } else { 69 | parentInstance.__children = [child]; 70 | } 71 | //parentInstance.reparentTo(child, child.x, child.y); 72 | //child.map(); 73 | //parentInstance.map() 74 | //}, 2000); 75 | }, 76 | 77 | appendChild(parentInstance, child) { 78 | log('appendChild', parentInstance.name, child.name); 79 | if (child.id && parentInstance.id) { 80 | console.log('appendChild REPARENTING!!! ======= ', child.id, parentInstance.id); 81 | child.reparentTo(parentInstance, child.x, child.y); 82 | //child.map(); 83 | } 84 | 85 | const instance = parentInstance; 86 | if (instance.__children) { 87 | parentInstance.__children.push(child); 88 | } else { 89 | parentInstance.__children = [child]; 90 | } 91 | 92 | // const index = parentInstance.children.indexOf(child); 93 | // if (index !== -1) { 94 | // parentInstance.children.splice(index, 1); 95 | // } 96 | // parentInstance.children.push(child); 97 | }, 98 | 99 | removeChild(parentInstance, child) { 100 | log('removeChild'); 101 | // parentInstance.removeChild(child); 102 | console.log('Remove child!!!', child.id); 103 | child.destroy(); 104 | }, 105 | 106 | insertBefore(parentInstance, child, beforeChild) { 107 | log('insertBefore'); 108 | // parentInstance.insertBefore(child, beforeChild); 109 | }, 110 | 111 | // finalizeInitialChildren is the final HostConfig method called before 112 | // flushing the root component to the host environment 113 | 114 | finalizeInitialChildren(instance, type, props, rootContainerInstance) { 115 | log('finalizeInitialChildren'); 116 | // setInitialProperties(instance, type, props, rootContainerInstance); 117 | //return false; 118 | return true; 119 | }, 120 | 121 | // prepare update is where you compute the diff for an instance. This is done 122 | // here to separate computation of the diff to the applying of the diff. Fiber 123 | // can reuse this work even if it pauses or aborts rendering a subset of the 124 | // tree. 125 | 126 | prepareUpdate(instance, type, oldProps, newProps, rootContainerInstance, hostContext) { 127 | log('TODO: prepareUpdate'); 128 | //return null; 129 | //return diffProperties(instance, type, oldProps, newProps, rootContainerInstance, hostContext); 130 | return newProps; 131 | }, 132 | 133 | commitUpdate(instance, updatePayload, type, oldProps, newProps, internalInstanceHandle) { 134 | if (type === 'window') { 135 | if (newProps.title && newProps != oldProps.title) { 136 | instance.setTitle(newProps.title); 137 | } else { 138 | instance.setTitle(''); 139 | } 140 | if (newProps.width !== oldProps.width || newProps.height !== oldProps.height) { 141 | instance.resize(newProps.width, newProps.height); 142 | } 143 | if (newProps.x !== oldProps.x || newProps.y !== oldProps.x) { 144 | instance.move(newProps.x, newProps.y); 145 | } 146 | } 147 | 148 | // Apply the diff to the DOM node. 149 | // updateProperties(instance, updatePayload, type, oldProps, newProps); 150 | log('TODO: commitUpdate'); 151 | }, 152 | 153 | // commitMount is called after initializeFinalChildren *if* 154 | // `initializeFinalChildren` returns true. 155 | 156 | commitMount(instance, type, newProps, internalInstanceHandle) { 157 | console.log('commitMount:', newProps.name); 158 | // noop 159 | if (type === 'window') { 160 | console.log('instance.__children', instance.__children); 161 | if (instance.__children) { 162 | instance.__children.forEach(w => { 163 | console.log('!!!!!!============', w); 164 | if (w.reparentTo) { 165 | w.reparentTo(instance, w.x, w.y); 166 | w.map(); 167 | } 168 | }); 169 | } 170 | } 171 | }, 172 | 173 | getPublicInstance(instance) { 174 | log('getPublicInstance'); 175 | return instance; 176 | }, 177 | 178 | getRootHostContext(rootContainerInstance) { 179 | return { 180 | rootWindowId: rootContainerInstance.X.display.screen[0].root 181 | }; 182 | }, 183 | 184 | getChildHostContext(parentHostContext, type, rootContainerInstance, a, b, c) { 185 | return { 186 | parent: parentHostContext, 187 | type 188 | }; 189 | }, 190 | 191 | // the prepareForCommit and resetAfterCommit methods are necessary for any 192 | // global side-effects you need to trigger in the host environment. In 193 | // ReactDOM this does things like disable the ReactDOM events to ensure no 194 | // callbacks are fired during DOM manipulations 195 | 196 | prepareForCommit() { 197 | log('prepareForCommit'); 198 | }, 199 | 200 | resetAfterCommit() { 201 | log('resetAfterCommit'); 202 | }, 203 | 204 | // the following four methods are regarding TextInstances. In our example 205 | // renderer we don’t have specific text nodes like the DOM does so we’ll just 206 | // noop all of them. 207 | 208 | shouldSetTextContent(props) { 209 | log('shouldSetTextContent'); 210 | return false; 211 | 212 | if (typeof props.children === 'string') { 213 | return true; 214 | } 215 | return false; 216 | }, 217 | 218 | resetTextContent(instance) { 219 | log('resetTextContent'); 220 | }, 221 | 222 | createTextInstance(text, rootContainerInstance, hostContext, internalInstanceHandle) { 223 | log('createTextInstance'); 224 | return text; 225 | }, 226 | 227 | commitTextUpdate(textInstance, oldText, newText) { 228 | console.log('commitTextUpdate', oldText, newText); 229 | // noop 230 | throw new Error('commitTextUpdate should not be called'); 231 | }, 232 | 233 | scheduleAnimationCallback() { 234 | log('scheduleAnimationCallback'); 235 | }, 236 | 237 | scheduleDeferredCallback() { 238 | log('scheduleDeferredCallback'); 239 | } 240 | 241 | //findHostInstance() { 242 | // console.log('Find Host Instance!', argunments); 243 | //} 244 | 245 | //useSyncScheduling: true 246 | }); 247 | 248 | /** 249 | * Our public renderer. When someone requires your renderer, this is all they 250 | * should have access to. `render` and `unmountComponentAtNode` methods should 251 | * be considered required, though that isn’t strictly true. 252 | */ 253 | const defaultContainer = {}; 254 | let cachedNtkApp = null; 255 | const ReactX11 = { 256 | render(element, callback, container) { 257 | if (!container) { 258 | if (cachedNtkApp) { 259 | return ReactX11.render(element, callback, cachedNtkApp); 260 | } 261 | const ntk = require('ntk'); 262 | ntk.createClient((err, app) => { 263 | cachedNtkApp = app; 264 | ReactX11.render(element, callback, app); 265 | }); 266 | return; 267 | } 268 | 269 | const containerKey = typeof container === 'undefined' ? defaultContainer : container; 270 | let root = roots.get(containerKey); 271 | if (!root) { 272 | root = Renderer.createContainer(containerKey); 273 | roots.set(container, root); 274 | } 275 | 276 | Renderer.updateContainer(element, root, null); 277 | const publicInstance = Renderer.getPublicRootInstance(root); 278 | callback && callback(publicInstance, container); 279 | 280 | if (process.env.NODE_ENV !== 'production') { 281 | const injectIntoDevTools = Renderer.injectIntoDevTools; 282 | console.log(ReactReconciler); 283 | injectIntoDevTools({ 284 | bundleType: 1, // 0 for PROD, 1 for DEV 285 | version: '0.1.0', // version for your renderer 286 | rendererPackageName: 'react-x11-renderer', // package name 287 | findFiberByHostInstance: instance => { 288 | console.log('!!! findFiberByHostInstance', instance); 289 | return instance._reactFiber; 290 | // TODO: implement this 291 | // not sure yet how to get ref to component or internal 292 | // instance from HostConfig handlers 293 | }, 294 | findHostInstanceByFiber: Renderer.findHostInstance 295 | }); 296 | } 297 | }, 298 | unmountComponentAtNode(container) { 299 | const containerKey = typeof container === 'undefined' ? defaultContainer : container; 300 | const root = roots.get(containerKey); 301 | if (root) { 302 | Renderer.updateContainer(null, root, null, () => { 303 | roots.delete(container); 304 | }); 305 | } 306 | } 307 | 308 | //injectIntoDevTools() { 309 | // console.log('AAAAA, injectIntoDevTools()', arguments); 310 | //} 311 | // other API methods you may support, such as `renderPortal()` 312 | }; 313 | 314 | const roots = new Map(); 315 | const emptyObject = {}; 316 | 317 | /* 318 | if (process.env.NODE_ENV !== 'production') { 319 | const injectIntoDevTools = ReactReconciler.injectIntoDevTools; 320 | console.log(ReactReconciler); 321 | debugger; 322 | injectIntoDevTools({ 323 | bundleType: 1, // 0 for PROD, 1 for DEV 324 | version: '0.1.0', // version for your renderer 325 | rendererPackageName: 'custom-renderer', // package name 326 | findFiberByHostInstance: instance => { 327 | // TODO: implement this 328 | // not sure yet how to get ref to component or internal 329 | // instance from HostConfig handlers 330 | }, 331 | findHostInstanceByFiber: Renderer.findHostInstance 332 | }); 333 | } 334 | */ 335 | 336 | module.exports = ReactX11; 337 | --------------------------------------------------------------------------------