taofed / react-web Goto Github PK

currently every div under root class has flexbox properties

.react-web-root div {
    position: relative;
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

if we use third party components(example : react-select) then its breaking third party component layout.

can we add a class tag .react-web-view to all View components and define global styles for that ?

现在安卓版本的兼容程度如何？另外对于listview对应h5版本 他们那个缓冲处理 你们是完全一致还是没做？

运行react-web start，浏览器console输入错误：

webpack.config.js没有配置socket，为什么会有socket的请求？

When I use react-web to convert my RN project, errors come:

ERROR in ./app/reducers/counter.js

Module build failed: SyntaxError: /Users/apple/Desktop/FProject/app/reducers/counter.js: Unexpected token (19:16)

17 |         case types.INCREMENT:

18 |             return {


19 |                 ...state,

|                 ^

20 |                 count: state.count + action.num

21 |             };

22 |         case types.DECREMENT:

So how to handle this problem?

upgrading from 0.1.6 to 0.2.4.
If I try to console.log("RN", require("react-native")); I have:

which is weirdly the package.json content of react-web and not anymore the library content.

I didn't change anything in my webpack, do you have a hint on what happen/what I missed to change?

Since react native 0.20 scrollEnabled works on both Android and iOS, are you considering implementing it?

the documentation says

Component without setNativeProps method on web platform

var setNativeProps = require('ReactSetNativeProps')
setNativeProps(this.refs.foo, {
  style: {
    top: 0
  }
})

and I can confirm that components like View don't have setNativeProps method. Is there a reason why it is not possible to have it? Why not having a web implementation of NativeMethodsMixin.js ?

This would avoid doing a lot of branching for handling this case.

Hi,

here is my webpack config

 plugins: [
        new HasteResolverPlugin({
            platform: 'web'
        }),
        new webpack.NoErrorsPlugin(),
        new CommonsChunkPlugin({
            name: "mainpage"
        })
    ],
    resolve: {
        alias: {
            'react-native': 'react-web'
        }
    },

but when i run webpack i am getting module not found for components/apis :s

ERROR in ./~/react-web/lib/react-web.js Module not found: Error: Cannot resolve module 'ReactTouchableOpacity' in admin/node_modules/react-web/lib @ ./~/react-web/lib/react-web.js 190:13-45

I find the error from Page A ->B->C ,back key to A , Next A->B->C ,next click back key don't go the Page B

when I run the UIexplorer examples，I meet the error。

UIExplorerBlock.js:28 Uncaught TypeError: Cannot read property 'string' of undefined

package.json

{
"name": "UIExplorerApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "react-native start"
},
"dependencies": {
"react": "0.14.7",
"react-dom": "^0.14.7",
"react-web": "^0.2.1"
},
"devDependencies": {
"babel": "5.8.19",
"babel-core": "5.8.19",
"babel-loader": "^6.2.4",
"haste-resolver-webpack-plugin": "^0.2.1",
"json-loader": "^0.5.4",
"react-hot-loader": "^1.3.0",
"react-native-cli": "^0.1.10",
"webpack": "^1.12.14",
"webpack-dev-server": "^1.14.1",
"webpack-html-plugin": "^0.1.1"
}
}

Look in this Animated web implementation:

https://github.com/animatedjs/interactive-docs/blob/gh-pages/Animated.js#L955

they uses React.CSSPropertyOperations.setValueForStyles which allows to set a style. I think we need to use it with the internal react-web preprocessor instead of current setNativeProps implementation.

see also notes in gre@91ab410

到时候可以反馈给你们，我就删除少量的import引用，大部分代码直接抄过来的，我主要是想实现listview的懒加载功能，如果有现成的我就直接抄了，还望赐教。。。。如果大家都没计划写的话，h5这部分listview我还是自己做了算了

I have a bunch of place where I use require("ErrorUtils") and ErrorUtils.reportError

https://rawgit.com/taobaofed/react-web/master/pages/uiexplorer.html

Hi,
I just updated to 0.2.0 , i am getting following error
Uncaught TypeError: this.touchableGetInitialState is not a function at this line https://github.com/taobaofed/react-web/blob/ed76ab8839c48f5efedfc7601bb79599831266ae/Libraries/Text/Text.web.js#L87

1. Init url: http://rawgit.com/taobaofed/react-web/master/pages/uiexplorer.html#/scene_0?_k=0rqm5f
2. Jump to next page: http://rawgit.com/taobaofed/react-web/master/pages/uiexplorer.html#/scene_1?_k=bpnbk3
3. Back to home: http://rawgit.com/taobaofed/react-web/master/pages/uiexplorer.html#/scene_0?_k=spmqb4, that fire a problem that you still can click back but without effect

Hi
I have Custom TextInput component based on TextInput on onChangeText i have some validation logic to be executed and component updates its state with error messages if any. If i manually type data then component updating its state fine, but when i copy paste data into TextInput app is not responding anymore. Chrome displaying alert saying page not responding do you want to kill/wait ..

看英语爽点 哈哈

触摸移动tile时，页面会随着触摸滚动。正常应当是不动的。

it's another important class that is not exposed

webpack 以及其他的支持 CommonJS 规范的打包工具，都会把文件中 require 的所有组件都打包在一起。对于 React Native 来说代码体积大小无关紧要，而在 Mobile web 来说，就要稍微重要一些了。特别是如果你的项目只需要 Text 组件，但由于 require('react-web') 结果把所有的组件全部打包进来了，就比较伤感。

基于 webpack 插件，还可以用另一种方式引入组件以解决这个问题，你可以叫它 Haste 方式。使用这种方式需要加载 webpack 插件 haste-resolver-webpack-plugin，默认的 webpack 配置已经帮你加载好了，你可以直接在组件里面这样用：

var Text = require('ReactText');
而不是以前那样：

var {Text} = require('react-native');

关于这个内容，能否详细告知一下，我生成最简单的react-native的项目，加入react-web后，对项目打包，生成的bundlejs为4M,bundlemap为6M，怎么破

Movies的例子，SearchBar有三个js：SearchBar.android.js,SearchBar.ios.js,SearchBar.web.js.

var SearchBar = require('SearchBar');，没有指明会加载哪个js模块？

使用了NavigatorIOS，然后浏览器访问bundle出来的html，如下执行到type.displayName,经过几次执行后，type某一次是undefined,所以会出错

React.createElement = function (type, props) {
    var args = arguments;

    if (type.displayName !== 'AnimatedComponent' && props && props.style && (Array.isArray(props.style) || typeof props.style === 'object')) {
      var style = processor(props.style);

https://github.com/taobaofed/react-web/blob/master/Libraries/PanResponder/injectResponderEventPlugin.web.js#L24

PanResponder move event is currently not supported via mouse events

I'm trying to use react-canvas because I need to get things done with a Canvas but react-web breaks the library because it overrides all style props.

What happens: react-web overrides the style props. see code here
What I think should happens: react-web should overrides style only if the one of React Native component, not ALL components.

Also, that ducktyping is error prone: I think you should have an internal whitelist of all react-web components and just see if the type is in this list.

I'll try to fix it and provide a PR

初次接触这个项目，感觉蛮好的，Example都已经跑通；
但是在我们实际线上的项目使用react-web start的时候报错了
1、ERROR in ./common_modules/comkit/view-container.js
Module not found: Error: Cannot resolve module 'dismissKeyboard' in /Users/xx/react-native/app/common_modules/comkit
@ ./common_modules/comkit/view-container.js 7:23-49
类似几个组件报错，Dimensions、dismissKeyboard、TextInputState、ProgressBarAndroid、SwitchAndroid、BackAndroid

2、ERROR in ./~/react-native-code-push/CodePush.js
Module parse failed: /Users/xx/react-native/d2papp/node_modules/react-native-code-push/CodePush.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import { AcquisitionManager as Sdk } from "code-push/script/acquisition-sdk";
| import { Alert } from "./AlertAdapter";
| import requestFetchAdapter from "./request-fetch-adapter";
@ ./apps/app.js 21:15-48

ERROR in ./~/react-native-viewpager/ViewPager.js
Module parse failed: /Users/xx/react-native/d2papp/node_modules/react-native-viewpager/ViewPager.js Line 30: Unexpected token ...
You may need an appropriate loader to handle this file type.
|
| propTypes: {
| ...View.propTypes,
| dataSource: PropTypes.instanceOf(ViewPagerDataSource).isRequired,
| renderPage: PropTypes.func.isRequired,
@ ./apps/guide/index.js 14:16-49
引用了一些外部组件解析的时候报错

还有一些其他问题都已解决，还剩下上面2种，望帮忙看下

react web ：https://github.com/taobaofed/react-web/blob/master/Libraries%2FText%2FText.web.js#L7

react native：https://github.com/facebook/react-native/blob/master/Libraries/Text/Text.js#L9

这样在通过 haste 方式引入组件时，代码不能同时跑在 Native 或者 Web 端，肯定有一端会报错 Cannot resolve module。

是有意为之的吗？

404-K:react-web maizhikun$ npm run demo

[email protected] demo /Users/maizhikun/Open_Source/react-web
node local-cli/cli.js bundle webpack.config.js

/Users/maizhikun/Open_Source/react-web/node_modules/haste-resolver/lib/index.js:29
preferNativePlatform: preferNativePlatform, preferNativePlatform: preferNa
^^^^^^^^^^^^^^^^^^^^
SyntaxError: Duplicate data property in object literal not allowed in strict mode
at exports.runInThisContext (vm.js:73:16)
at Module._compile (module.js:443:25)
at Module._extensions..js (module.js:478:10)
at Object.require.extensions.(anonymous function) as .js
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object. (/Users/maizhikun/Open_Source/react-web/node_modules/haste-resolver/index.js:16:18)
at Module._compile (module.js:460:26)
at Module._extensions..js (module.js:478:10)
at Object.require.extensions.(anonymous function) as .js
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)

npm ERR! Darwin 14.5.0
npm ERR! argv "node" "/usr/local/bin/npm" "run" "demo"
npm ERR! node v0.12.7
npm ERR! npm v3.5.3
npm ERR! code ELIFECYCLE
npm ERR! [email protected] demo: node local-cli/cli.js bundle webpack.config.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] demo script 'node local-cli/cli.js bundle webpack.config.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the react-web package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node local-cli/cli.js bundle webpack.config.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs react-web
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls react-web
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /Users/maizhikun/Open_Source/react-web/npm-debug.log

I'd like to depend on a package that contains just component libs and their runtime dependencies, not babel, webpack, etc.

Would it be possible to split out the core libaries (everything under Libraries/) as it's own package?

Thanks!

Hi, first of all thanks for this great project :)

I have a View that uses this style:

{
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
  }

but the DOM version don't have a display:flex required to make the other CSS properties to work.
Have you see this?

Thanks

ERROR in ./index.ios.js
Module build failed: ReferenceError: [BABEL] /Users/caolicheng/workspace/react-native-web-example/index.ios.js: Unknown option: base.stage
at Logger.error (/Users/caolicheng/workspace/react-native-web-example/node_modules/babel-core/lib/transformation/file/logger.js:41:11)
at OptionManager.mergeOptions (/Users/caolicheng/workspace/react-native-web-example/node_modules/babel-core/lib/transformation/file/options/option-manager.js:289:18)
at OptionManager.init (/Users/caolicheng/workspace/react-native-web-example/node_modules/babel-core/lib/transformation/file/options/option-manager.js:481:10)
at File.initOptions (/Users/caolicheng/workspace/react-native-web-example/node_modules/babel-core/lib/transformation/file/index.js:211:75)
at new File (/Users/caolicheng/workspace/react-native-web-example/node_modules/babel-core/lib/transformation/file/index.js:129:22)
at Pipeline.transform (/Users/caolicheng/workspace/react-native-web-example/node_modules/babel-core/lib/transformation/pipeline.js:48:16)
at transpile (/Users/caolicheng/workspace/react-native-web-example/node_modules/babel-loader/index.js:14:22)
at Object.module.exports (/Users/caolicheng/workspace/react-native-web-example/node_modules/babel-loader/index.js:88:12)
@ multi main
webpack: bundle is now VALID.

If I add the image to image.xcassets, and show it with the code

<Image style={[{height: 50, width: 80}]} source={{ uri:'test', isStatic: true }} />

after transformed by react-web, it turns out to be
<img src="test">

and the props of the image doesn't have a base64 image as the other images which used in the way: {Image src={require('../test.png')}}

习惯统一定义路由的方式，比如directorjs或者express的路由。
现在的react-web路由，我看是按点击某个记录或按钮顺序记录的。感觉使用directorjs的方式更直观与灵活。如果ios也能这样定义就好了。毕竟大部分的web框架都这种方式。

is it possible to run app in browser (no mobile simulation .. ) ?

Error building DependencyGraph:
Error: Naming collision detected: /Users/aipai/project/mygithub/demo/AwesomeProject/node_modules/react-web/node_modules/fbjs/flow/include/containsNode.js collides with /Users/aipai/project/mygithub/demo/AwesomeProject/node_modules/react-native/node_modules/fbjs/lib/containsNode.js
at HasteMap._updateHasteMap (HasteMap.js:132:13)
at HasteMap.js:103:28
at tryCallOne (/Users/aipai/project/mygithub/demo/AwesomeProject/node_modules/react-native/node_modules/promise/lib/core.js:37:12)
at /Users/aipai/project/mygithub/demo/AwesomeProject/node_modules/react-native/node_modules/promise/lib/core.js:123:15
at flush (/Users/aipai/project/mygithub/demo/AwesomeProject/node_modules/react-native/node_modules/promise/node_modules/asap/raw.js:50:29)
at doNTCallback0 (node.js:417:9)
at process._tickCallback (node.js:346:13)

Hi ,
In my app after few minutes of usage , if i click on TouchableHighLight button i am getting following error

Uncaught Invariant Violation: Ended a touch event which was not counted intrackedTouchCount.invariant @ mainpage-bundle.js:1309

ResponderEventPlugin.extractEvents @ mainpage-bundle.js:28134

EventPluginHub.extractEvents @ mainpage-bundle.js:4054

ReactEventEmitterMixin.handleTopLevel @ mainpage-bundle.js:4759

handleTopLevelWithoutPath @ mainpage-bundle.js:14930

handleTopLevelImpl @mainpage-bundle.js:14910

Mixin.perform @ mainpage-bundle.js:6904

ReactDefaultBatchingStrategy.batchedUpdates @ mainpage-bundle.js:10924

batchedUpdates @ mainpage-bundle.js:6412

ReactEventListener.dispatchEvent @ mainpage-bundle.js:15041

When I use

"<Image source={require('../imgs/process.png')}  style={[s.imgBtn]}/>"

"<img style="width:45px;height:45px;" src="" data-reactid=".0.0.0.$scene_0.0.0.0.1.0.0">"

And when I debug in Chrome, I found that:

var props = _extends({}, this.props);

//source is just a base64 image and source uri is null;

props.src = props.source.uri;

// TODO: lazyload image when not in viewport