├── _fastboot ├── npm.sh ├── gh.sh ├── README.md ├── update.sh ├── rm.js ├── npm.js ├── gh-push.js ├── gh.js ├── server.js └── init.js ├── index.js ├── doc ├── README.md ├── vendor │ ├── react │ │ └── 0.14.8 │ │ │ └── react-dom.js │ ├── mocha │ │ └── 3.0.2 │ │ │ └── mocha.css │ ├── polyfill │ │ └── main.js │ └── expect.js │ │ └── 0.2.0 │ │ └── expect.js ├── markrun-template.html └── event.md ├── example └── README.md ├── test ├── test.demo.js └── README.md ├── .gitignore ├── package.json ├── lib └── index.js ├── fis-conf.js └── README.md /_fastboot/npm.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | fis3 release npm -d ./output 3 | -------------------------------------------------------------------------------- /_fastboot/gh.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | fis3 release -d ./output 3 | fis3 release -d ./output/$1 4 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | export default require('./lib/index') 2 | module.exports = require('./lib/index') 3 | -------------------------------------------------------------------------------- /_fastboot/README.md: -------------------------------------------------------------------------------- 1 | # fast-flow/boot 2 | 3 | fast-flow/boot[releases](https://github.com/fast-flow/boot/releases) 0.0.1 4 | -------------------------------------------------------------------------------- /doc/README.md: -------------------------------------------------------------------------------- 1 | # react-composition document 2 | 3 | 如果你对 DOM Level 3 Composition 有兴趣,可访问[事件触发时机](event.md)页面理解 Composition执行时机。 4 | -------------------------------------------------------------------------------- /example/README.md: -------------------------------------------------------------------------------- 1 | # example 2 | 3 |
4 | 5 | ````js 6 | console.log(require('react-composition')) 7 | ```` 8 | -------------------------------------------------------------------------------- /_fastboot/update.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | npm update --registry=https://registry.npm.taobao.org 3 | npm update --registry=https://registry.npm.taobao.org -D 4 | -------------------------------------------------------------------------------- /test/test.demo.js: -------------------------------------------------------------------------------- 1 | describe('Some', function() { 2 | describe('#demo', function() { 3 | it('window.r is undefined', function() { 4 | expect(window.r).to.be(undefined); 5 | }) 6 | }) 7 | }) 8 | console.log(Boot) 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # fast-boot ignore file 2 | node_modules 3 | .DS_Store 4 | npm-debug.log 5 | output 6 | 7 | # fast-boot ignore file 8 | node_modules 9 | .DS_Store 10 | npm-debug.log 11 | output 12 | # fast-boot ignore file 13 | node_modules 14 | .DS_Store 15 | npm-debug.log 16 | output -------------------------------------------------------------------------------- /_fastboot/rm.js: -------------------------------------------------------------------------------- 1 | // Don't change this file 2 | // 不要修改这个文件 3 | var rm = require('rm-r') 4 | var path = require('path') 5 | module.exports = function () { 6 | var OUTPUT = path.join(__dirname, '../output') 7 | rm.dir(OUTPUT) 8 | console.log('remove dir:' + OUTPUT) 9 | } 10 | -------------------------------------------------------------------------------- /_fastboot/npm.js: -------------------------------------------------------------------------------- 1 | var exec = require('child_process').exec 2 | var path = require('path') 3 | require('./rm')() 4 | var shellPath = path.join(__dirname, 'npm.sh') 5 | exec('sh ' + shellPath, function(error, stdout, stderr) { 6 | console.log('stdout: ' + stdout) 7 | console.log('stderr: ' + stderr) 8 | if (error !== null) { 9 | console.log('exec error: ' + error) 10 | } 11 | }) 12 | -------------------------------------------------------------------------------- /_fastboot/gh-push.js: -------------------------------------------------------------------------------- 1 | var ghpages = require('gh-pages'); 2 | var path = require('path') 3 | var fs = require('fs') 4 | ghpages.publish(path.join(__dirname, '../output'), { 5 | message: 'fast-flow/boot Auto-generated commit', 6 | logger: function(message) { 7 | console.log(message); 8 | }, 9 | add: true 10 | }, function(err) { 11 | console.log(err) 12 | }); 13 | console.log('git branch gh-pages pushing...') 14 | -------------------------------------------------------------------------------- /_fastboot/gh.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs') 2 | var path = require('path') 3 | var exec = require('child_process').exec 4 | var rm = require('rm-r') 5 | var project = JSON.parse(fs.readFileSync(path.join(__dirname, '../package.json'))) 6 | var shellPath = path.join(__dirname, 'gh.sh') 7 | 8 | require('./rm')() 9 | 10 | exec('sh ' + shellPath + ' ' + project.version, function(error, stdout, stderr) { 11 | console.log('stdout: ' + stdout) 12 | console.log('stderr: ' + stderr) 13 | if (error !== null) { 14 | console.log('exec error: ' + error) 15 | } 16 | }) 17 | -------------------------------------------------------------------------------- /test/README.md: -------------------------------------------------------------------------------- 1 | # test 2 | 3 |
4 | 5 | 6 | 7 | 8 | 9 | 15 | ````js 16 | // 在此处使用 markrun 导出模块到全局变量,供 test/**.js 使用 17 | window.Boot = require('react-composition') 18 | ```` 19 | 20 | 21 | 22 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /_fastboot/server.js: -------------------------------------------------------------------------------- 1 | var StaticServer = require('static-server'); 2 | var hashPort = require('hash-to-port') 3 | var fs = require('fs') 4 | var path = require('path') 5 | var project = JSON.parse(fs.readFileSync(path.join(__dirname, '/../package.json'))) 6 | var server = new StaticServer({ 7 | rootPath: './output', // required, the root of the server file tree 8 | port: hashPort(project.name), // optional, defaults to a random port 9 | cors: '*', // optional, defaults to undefined 10 | followSymlink: true, // optional, defaults to a 404 error 11 | templates: { 12 | index: 'index.html', // optional, defaults to 'index.html' 13 | notFound: '404.html' // optional, defaults to undefined 14 | } 15 | }); 16 | 17 | server.start(function () { 18 | console.log('Server listening to') 19 | console.log('http://127.0.0.1:' + server.port) 20 | }) 21 | -------------------------------------------------------------------------------- /doc/vendor/react/0.14.8/react-dom.js: -------------------------------------------------------------------------------- 1 | /** 2 | * ReactDOM v0.14.8 3 | * 4 | * Copyright 2013-2015, Facebook, Inc. 5 | * All rights reserved. 6 | * 7 | * This source code is licensed under the BSD-style license found in the 8 | * LICENSE file in the root directory of this source tree. An additional grant 9 | * of patent rights can be found in the PATENTS file in the same directory. 10 | * 11 | */ 12 | // Based off https://github.com/ForbesLindesay/umd/blob/master/template.js 13 | ;(function(f) { 14 | // CommonJS 15 | if (typeof exports === "object" && typeof module !== "undefined") { 16 | module.exports = f(require('react')); 17 | 18 | // RequireJS 19 | } else if (typeof define === "function" && define.amd) { 20 | define(['react'], f); 21 | 22 | // 10 | 11 | 12 | 13 | 25 | <%- title %> 26 | 27 | 28 | <%- content %> 29 | 30 | 31 | -------------------------------------------------------------------------------- /doc/event.md: -------------------------------------------------------------------------------- 1 | # 事件触发时机 2 | 3 | > 本业用于理解事件触发时机,不需要读懂本页diamante 4 | > 确保你是在线访问本页面 https://fast-flow.github.io/react-composition/doc/event.html 或 https://fast-flow.github.io/react-composition/{版本号}/doc/event.html 5 | 6 | ````html 7 |
8 | onFocus: 9 | 10 | 11 |
12 |
13 | onChange: 14 | 15 | 16 |
17 |
18 | onBlur: 19 | 20 | 21 |
22 |
23 | onCompositionStart: 24 | 25 | 26 |
27 |
28 | onCompositionUpdate: 29 | 30 | 31 |
32 |
33 | onCompositionEnd: 34 | 35 | 36 |
37 |
38 |
39 | 打开控制台查看原生事件触发记录 40 | ```` 41 | ````css 42 | html .status--on .status-icon{ 43 | background-color: #2fc72f; 44 | } 45 | .status-label { 46 | display: inline-block; 47 | width:200px; 48 | } 49 | .status-icon { 50 | background-color:#ddd; 51 | border-radius:50%; 52 | width:1em; 53 | height:1em; 54 | vertical-align: middle; 55 | display: inline-block; 56 | overflow:hidden; 57 | } 58 | textarea { 59 | border:1px solid #999; 60 | border-radius:3px; 61 | width:100%; 62 | box-sizing: border-box; 63 | } 64 | ```` 65 | 66 | ````js 67 | var React = require('react') 68 | var ReactDOM = require('react-dom') 69 | 70 | var _count = 0; 71 | window.count = function () { 72 | ++_count 73 | return ('00000000' + _count).replace(/.*(\d{3})$/,'$1') 74 | } 75 | var logs = [] 76 | window.updateStatus = function (fnName, value, count) { 77 | var eStatus = document.getElementById(fnName + '-status') 78 | var eStatusValue = document.getElementById(fnName + '-statusValue') 79 | eStatus.setAttribute('class', 'status status--on') 80 | eStatusValue.innerHTML = count + '|' + value 81 | setTimeout(function () { 82 | eStatus.setAttribute('class', 'status') 83 | }, 300) 84 | logs.push({ 85 | 'event': fnName, 86 | 'value': value, 87 | 'count': count 88 | }) 89 | console.log('原生事件触发记录') 90 | console.table(logs) 91 | } 92 | 93 | var App = React.createClass({ 94 | getInitialState: function () { 95 | var value = '123' 96 | return { 97 | value: value, 98 | finalValue: value, 99 | inComposition: false 100 | } 101 | }, 102 | // 简化 redux 103 | ms: function (action) { 104 | var state = this.state 105 | var props = this.props 106 | var data = action.data 107 | switch (action.type) { 108 | case 'CHANGE_VALUE': 109 | if (!state.inComposition) { 110 | if (data.value.length > props.maxLength) { 111 | data.value = data.value.slice(0, props.maxLength) 112 | } 113 | state.finalValue = data.value 114 | } 115 | state.value = data.value 116 | break 117 | case 'COMPOSITION_START': 118 | state.inComposition = true 119 | break 120 | case 'COMPOSITION_END': 121 | state.inComposition = false 122 | state.finalValue = data.value 123 | break 124 | } 125 | this.setState(state) 126 | }, 127 | render: function () { 128 | var self = this 129 | var props = { 130 | onFocus: function (event) { 131 | updateStatus('onFocus', event.target.value, count()) 132 | }, 133 | onChange: function (event) { 134 | updateStatus('onChange', event.target.value, count()) 135 | self.ms({ 136 | type: 'CHANGE_VALUE', 137 | data: { 138 | value: event.target.value 139 | } 140 | }) 141 | }, 142 | onBlur: function (event) { 143 | console.log(self.state.finalValue) 144 | updateStatus('onBlur', event.target.value, count()) 145 | }, 146 | onCompositionStart: function (event) { 147 | self.ms({ 148 | type: 'COMPOSITION_START' 149 | }) 150 | updateStatus('onCompositionStart', event.target.value, count()) 151 | }, 152 | onCompositionUpdate: function (event) { 153 | updateStatus('onCompositionUpdate', event.target.value, count()) 154 | }, 155 | onCompositionEnd: function (event) { 156 | self.ms({ 157 | type: 'COMPOSITION_END', 158 | data: { 159 | value: event.target.value 160 | } 161 | }) 162 | updateStatus('onCompositionEnd', event.target.value, count()) 163 | } 164 | } 165 | return ( 166 |
167 |
168 | finalValue: {self.state.finalValue} 169 |
170 | value: {self.state.value} 171 |
172 | 字数:{self.state.finalValue.length}/10 173 |
174 | 还可以输入:{self.props.maxLength - self.state.finalValue.length}个字 175 |
176 |
177 | 请在输入法模式和非输入法模式下输入文字,以理解事件触发时机 (为了兼容 chrome 某些版本,在 onCompositionEnd 时会触发代理的 onChange ) 178 |
179 |