alibaba / rax Goto Github PK
View Code? Open in Web Editor NEW🐰 Rax is a progressive framework for building universal application. https://rax.js.org
License: Other
🐰 Rax is a progressive framework for building universal application. https://rax.js.org
License: Other
TouchableBounce
in Game2048.js
is undefined
, it also cannot be found in rax-components
examples
in branch master
game 2048
react
code written for client as is with isomorphic apps?I can't put Rax to work on jsFiddle, so I copy my snippet code that does not works.
render() {
let hasRows = (this.state.contacts.length > 0)
return (
<div className="row">
<p> </p>
<button className="btn btn-warning"
disabled={hasRows} onClick={this.onLoad}>Load</button>
<button className="btn btn-primary"
disabled={!hasRows} onClick={this.onClear}>Clear</button>
<div>
<Table data={this.state.contacts}></Table>
</div>
</div>
)
}
When I run this code always the two buttons are disabled. I've tried to put true and false directly on disabled property, but it does not works as well. The same snippet code work with React and Preact.
stylesheet-loader could transform @media rule
@media screen and (min-width: 480px) {
title {
font-size: 25rem;
}
}
.a, .b{
background: #555;
font-size: 14px;
font-style: italic;
text-decoration: none;
}
.a {
color: #fff;
}
.b {
color: #ddd;
}
@import './foo.css';
错误提示:
2017-02-13 00:32:29.876 WeexDemo[27482:1615296] �[fg100,149,237; [info]WXJSCoreBridge.m:89, jsLog: START JS FRAMEWORK 0.19.7, Build 2017-01-10 10:50. �[;
2017-02-13 00:32:30.046 WeexDemo[27482:1615296] �[fg100,149,237; [info]WXBridgeContext.m:326, No send queue for instance:<WXSDKInstance: 0x7f8471d10080; id = 0; rootView = (null); url= http://127.0.0.1:8080/dist/FlexTestPage.js?random=-1439887834>, may it has been destroyed so method:fireEvent is ignored �[;
2017-02-13 00:32:30.074 WeexDemo[27482:1615199] �[fg128,128,128; [log]WXSDKInstance.m:151, Start rendering page:http://127.0.0.1:8080/dist/FlexTestPage.js �[;
2017-02-13 00:32:30.085 WeexDemo[27482:1615296] �[fg255,0,0; [error]WXMonitor.m:196, [main.js:3518:2656] SyntaxError: Unexpected token '}'. Expected ')' to end a compound expression.
Function@[native code]
main.js:5:2656
[email protected]:5:2786
main.js:7:1121 �[;
import 'foo1.less';
import 'foo2.less';
class App extends Component {
render() {
return <div className="title header" />
}
}
<View id="outer" onClick={...}>
<View id="inner" onClick={...} >
...
</View>
<View>
Trigger outer event when click inner.
To appear on npm addict and other npm packages discovery solutions, you should consider adding a description
field in package.json
.
what is necessary for the above points?
Support rax-navigator
in rax.
Ref: https://facebook.github.io/react-native/docs/navigator.html
1,error info:
/Volumes/Transcend/opensource/react/framework/rx/packages/universal-rx/src/server/serializer.js
86:26 error 'style' is not defined no-undef @#
2,I think this line is save the node.style to the json object,so I changed to the floowing code and eslint code check does passed;
json.style = node.style;
js
//MyComponent
...
render(){
return <View ref="test"></View>
}
...
//使用
var container = document.createElement('div');
container.setAttribute("id", 'container');
document.body.appendChild(container);
render(<MyComponent/>,findDOMNode(document.getElementById('container'))
ref="test" 加上就直接报错
attach: function attach(ownerComponent, ref, component) {
if (!ownerComponent) {
throw new Error('You might be adding a ref to a component that was not created inside a component's ' + 'render
method, or you have multiple copies of Rax loaded.');
}
stylesheet-loader could transform css font-face rule
@font-face {
font-family: myFirstFont;
src: url('Sansation_Light.ttf')
}
Compile to:
var myFirstFont = new FontFace('myFirstFont', "url('Sansation_Light.ttf')");
document.fonts.add(myFirstFont);
There appears to be conflicting/confusing guidelines on how to go about submitting a pull request
According to your Pull Request Guidelines in CONTRIBUTING.md:
Do not submit PRs against the master branch.
But then in your PULL_REQUEST_TEMPLATE.md:
Fork the repo and create your branch from master.
The above two statements appear to contradict each other.
The Pull Request Guidelines also say:
The master branch is basically just a snapshot of the latest stable release
This suggests to me that master
only updates when there's a release and development occurs on some other branch. But which branch?
Checkout a topic branch from the relevant branch, e.g. dev, and merge back against that branch.
I looked for a dev
branch but none existed. Based on the listed branches it is not immediately clear on which branch core development is occurring, as they are all behind master:
I believe that one, or both, of these contributing documents contains out-of-date, or inaccurate information.
In addition:
The master branch is basically just a snapshot of the latest stable release
This github workflow is atypical. In my experience, the most common workflow on github is to develop on the master
branch, and use one (or more) of the following tools for releases:
v1
, v2
, etcI suggest picking one or more of these and using that instead.
If you do choose to develop on a branch other than master
, then it would be good to configure the default branch for the github repo to be the development branch for the next release. This will help funnel contributors to the right location.
<p>
hello <span className="message">world</span>
</p>
image标签在h5中还是image,没有用img替换image,导致图片无法显示。cell标签h5等于不存在,而在iOS中却对于一个UITableViewCell,这样这给cell设置样式的时候两端就不一致了。
Rax怎么开发原生模块,按照weex开发的模块在Rax中怎么使用,因为Rax中无法获取到模块
chrome上的报错信息是:
Uncaught TypeError: Super expression must either be null or a function, not undefined
at _inherits (eval at init (init.js:60), :121:114)
at eval (eval at init (init.js:60), :153:4)
at Object.eval (eval at init (init.js:60), :197:3)
at webpack_require (eval at init (init.js:60), :46:30)
at Object.eval (eval at init (init.js:60), :77:14)
at webpack_require (eval at init (init.js:60), :46:30)
at eval (eval at init (init.js:60), :66:18)
at eval (eval at init (init.js:60), :69:10)
at eval (eval at init (init.js:60), :10:24)
at AppInstance.define (define.js:80)
iOS上的报错信息是:
2017-02-05 16:34:51.499 WeexDemo[4253:658999] �[fg100,149,237; [info]WXJSCoreBridge.m:89, jsLog: START JS FRAMEWORK 0.19.7, Build 2017-01-10 10:50. �[;
2017-02-05 16:34:51.729 WeexDemo[4253:658999] �[fg100,149,237; [info]WXBridgeContext.m:326, No send queue for instance:<WXSDKInstance: 0x7fd2bc3044e0; id = 0; rootView = (null); url= http://127.0.0.1:8089/dist/index.js?random=-1490610232>, may it has been destroyed so method:fireEvent is ignored �[;
2017-02-05 16:34:51.746 WeexDemo[4253:658483] �[fg128,128,128; [log]WXSDKInstance.m:151, Start rendering page:http://127.0.0.1:8089/dist/index.js �[;
2017-02-05 16:35:00.848 WeexDemo[4253:658483] �[fg128,128,128; [log]WXSDKInstance.m:151, Start rendering page:http://127.0.0.1:8089/dist/index.js �[;
the syntax is support react
so i think can support antdesign and dvajs
/* foo.css */
.h3 {
color: red;
}
<!-- Hello.html -->
<template>
<style>
.text {
color: {{color}};
}
</style>
<span class='text'>{{message}}</span>
</template>
<!-- Title.html -->
<h3>Title</h3>
<link rel="stylesheet" href="./foo.css">
<link rel="import" href="./Hello.html">
<link rel="import" href="./Title.html">
<style>
.container {
color: blue;
}
</style>
<div class="container">
<Title />
<Hello message="world" color="red" />
</div>
/** @jsx createElement */
'use strict';
import {createElement, Component} from '@ali/rx';
import {View, Text} from '@ali/rx-components';
import {mount} from '@ali/rx-mounter';
function generateItems(count = 10) {
let arr = [];
for (;count--;) {
arr.push({
value: 'item-' + parseInt(Math.random() * 1e5, 10)
});
}
return arr;
}
const item = {value: 'fixed item'};
class App extends Component {
constructor(props) {
super(props);
let items = generateItems(10);
items.splice(6, 0, item);
this.state = {
list: items
};
}
change() {
let items = generateItems(10);
items.splice(6, 0, item);
this.setState({list: items});
}
render() {
let {list} = this.state;
return <View>
{list.map((val) => <Item key={val.value} {...val} />)}
<Text onPress={::this.change}>CHANGE</Text>
</View>;
}
}
class Item extends Component {
render() {
let {value} = this.props;
return <div><Text>{value}</Text></div>;
}
}
mount(<App />, 'body');
rax init hello
and npm run start
, open browser with the address which terminal shows, just like http://10.254.1.155:8080
, browser shows blank page, and the console shows two error about the define
function.rax-cli: 0.1.2
rax: 0.1.2
node: 4.7.2
npm: 3.7.3
OS: macOSS Sierra 10.12.2
browser: chrome 55.0
Is there any way to do this, none of the examples has this.
FlexTestPage.js文件如下:
import {createElement, Component, render} from 'rax';
import styles from './FlexTestPage.css';
class FlexTestPage extends Component {
render() {
return (
<div>
<div style={styles.div1}></div>
<div style={styles.div2}></div>
</div>
);
}
}
render(<FlexTestPage/>);
FlexTestPage.css文件如下:
.div1{
background-color: red;
flex: 1;
}
.div2{
background-color: yellow;
flex: 2;
}
期望值是屏幕上下应该按照1:2的比例划分,而实际没有任何效果。
bug demo: http://rax.alibaba-inc.com/playground/1488251789901
It is because the Link Text Component has own inline styles and not inherit the style from props. https://github.com/alibaba/rax/blob/master/packages/rax-link/src/index.js#L38
按照文档中使用className来指定样式,在Web中能够正常显示,在Weex中界面白屏,使用了transform-jsx-stylesheet插件也一样
新版文档准备就绪,上线前从用户角度检查一遍文档,check 按照文档走能不能跑起来
问题描述:rax init demo, 但是 demo 文件夹已存在,提示是否 continue,操作 ctrl + c 后爆出错误栈,应该直接 exit(1) 就行了
rax init 自动安装 npm 速度慢,切换至 cnpm 源?大概要了4分多钟(npm2)
cli 界面格式输出相对混乱,可以参考 def/gulp
默认 8080 端口容易被占用,1024以下端口需要管理员权限,很多本机调试的老司机都在8080起apache/nginx
https://unpkg.com/[email protected]/dist/framework.web.js 加载特别慢,因为chrome devtool 模式开着 disable cache,每次都是完整读取,考虑 alicdn ?
每次热编译完成没有终端提示,weex 中只能不断刷新确认是否生效;另外建议也显示HTTP请求情况
文档中缺失运行 weex playground 的手机需要与开发机(电脑)在同一局域网(wifi)环境下的提示
you guys claims react using Create.class ,this is before state of react ,now react full support es6 code you guys not mentioned us lol and you gusy fully following footstep of react
componentWillReceiveProps(props){
if(props.currentDate != this.state.currentDate){
this.setState({
currentDate:props.currentDate,
hasMore:false
},()=>{
console.log('new props was synced');
debugger
});
console.log('this.state.currentDate',this.state.currentDate);
}
}
setState callback cant excute in componentWillReceiveProps,in other method or react it works
Everything looks perfect for Rax. However, is it 100% compatible with React? What's the downside of using it instead of React?
问题描述:
解决办法: 二选一。
在rax中用
var stream = require('@weex-module/stream');
stream.fetch({
method: 'GET',
type: 'json',
url: url
}, function (res) {
}, null);
对于h5会报Uncaught TypeError: stream.fetch is not a function 错误,
但是如直接用全局函数fetch api,iOS端又会报
2017-02-13 12:33:52.248 RedStarMain[1460:143957] �[fg255,0,0; [error]WXMonitor.m:190, [undefined:243:11] ReferenceError: Can't find variable: fetch
doGET
componentDidMount 错误,
有没有什么一致的解决方法,在vue-weex中第一种方法在h5和iOS端是通用的,但是rax却不行。
在weex中有this.$getConfig()获得系统的配置,比如env、bundleUrl,在rax中如何获取?
If the purpose of this library is fast server-side rendering of React components, why another custom solution over others? Do you have any server rendering benchmarks against Inferno or Preact?
Trying to following the step in the readme file,
rax init myDemo
after fresh installcd myDemo && npm run start
localhost:8080
but get this error from debug toolThis is broken with the latest version of web-rax-framework
which is loaded from https://unpkg.com/[email protected]/dist/framework.web.js
However an older version(0.0.10) https://unpkg.com/[email protected]/dist/framework.web.js (which is the one used on rax playground) seems work without any issue.
This is because the bundled source code is using define
which is not available yet.
// {"framework" : "Rax"}
define("framework.web", function(require) {/******/ (function(modules) { // webpackBootstrap
Would be nice to see Preact's size and benchmark as well.
对于Weex0.8在js中引用weex module只能通过如下的方式:
let stream;
weex_define('@weex-temp/api', function(weex_require) {
stream = weex_require('@weex-module/stream')
});
vue-weex的项目这种方式在移动端和h5端都可以运行,但是在rax中,iOS可以正常运行,但是h5却报Uncaught ReferenceError: weex_define is not defined 错误,应该是//unpkg.com/[email protected]/dist/framework.web.js这个框架没有支持。
.
rax里面有没有像vue-weex中v-if这种节点控制属性,来控制节点是否存在?
weex-html5在Rax中无法使用。
.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.