qianmiopen / plume2 Goto Github PK

去除此处的log，因为store在dispatch的时候已经可以显示出传递的参数是什么

RN 0.57 的版本改如何兼容呢？

新建QL的语法调整一下，建议把

const helloQL = QL('helloQL', [
  'name',
  ['address', 'city'],
  (name, city) => `${name}${city}`
])

改成

const helloQL = QL('helloQL', [
  'name',
  ['address', 'city']
], (name, city) => `${name}${city}`)

会清晰一点

暴露出来DynamicQueryLang，方便在render中计算DQL的值

目前的DQL的的上下文绑定比较弱，只能绑定defaultProps的同名属性，这样不够用，思考是不是可以放开让用户自己定义上下文

假如store的中的state为：

todo: fromJS([
  {id:1, text: 'hello', done: false},
  {id: 2, text: 'world', done: true}
])

const todoItemDQL = QL('todoItemDQL', [
  ['todo', '$index', 'text],

 (text) => text
])

@Relax
class Title extends Component {
   static relaxProps = {
      bigQuery: noop,
   }

  render() {
    const {bigQuery} = this.props.relaxProps
    const ctx = todoItemDQL.withContext({index: 1}).
    const title = bigQuery(new QueryLang(ctx.id(), ctx.lang()))
  }
}

大师你好~
我是陈龙 哈哈 忍不住来向你请教

目前plume2主要是基于context api，context api最大的方便之处是可以不用props透传，来解决数据变化后组件更新的问题。

react 15.x版本时官方不建议使用，到16版本后context语法变化也挺大（所以对于我而言context是个不稳定的存在）

大师有没有考虑过不使用context而用其他方式，比如Object.defineProperties或Proxy

store中的方法使用transaction的时候，例如：

init() {
   this.transaction(() => {
     this.dispatch('A')
     this.dispatch('B')
   })  
   // 这里我希望当transaction中出错的时候，不再执行下面fetchPrice，以及dispatch("C")方法
   const {res, err} = await fetchPrice();

   this.dispatch('C')
}

如果transaction能有返回值就更好了 @hufeng

我们开始站在更高的起点去看问题，初心不变，方式更加优雅一点。

目标：
就是去平衡开发体验和用户体验之间的矛盾

1. 更加爽快的开发体验
2. 更棒的性能和用户体验

开发体验：

1. 数据,事件,状态迁移的日志跟踪
2. 无缝对接typescript，更好的融入typescript
3. 更好的typescript类型的支持

用户体验：
更小的js体积
无缝web和react-native的开发体验

TODO

• 快速生成脚手架
• plume2-vscode快速代码模板
• Actor是不是可以web worker异步化
• Relax组件更直接的注入数据的方式, subscribe判断数据状态，如果不注入数据不setState
• Store具有响应式的能力
• babel-plugin-plume2通过babel去优化框架的设计
• language service的支持
• 合入条件判断高阶组件
• 适配新的context的api
• trace msg

this.store 语法通过不了？
this.props.store 也不对

如果这儿不支持@relax 在typescript 拿不到store吧 。除非修改react.component的d.ts
@StoreProvider(AppStore, { debug: DEV })
//@relax
export default class Login extends React.Component<any, any>
{

render() {
console.log("this.store",this.store);

如果relax获取不到context['_plume$Store'], 在debug开启的状态下，提示用户要在顶层容器组件，添加
@StoreProvider的绑定。

如果数据太大 就影响显示效果

> store dispatch => 'home-main:setListData'
> store.js:69 params |> [{"id":"581b0c4ebb9452c9052e7acb","author_id":"5110f2bedf9e9fcc584e4677","tab":"share","content":"<div class=\"markdown-text\"><p>GitHub: <a href=\"https://github.com/nswbmw/N-blog\">https://github.com/nswbmw/N-blog</a></p>\n<h2>目录</h2>\n<ul>\n<li>开发环境搭建\n<ul>\n<li><a href=\"https://github.com/nswbmw/N-blog/blob/master/book/1.1%20Node.js%20%E7%9A%84%E5%AE%89%E8%A3%85%E4%B8%8E%E4%BD%BF%E7%94%A8.md\">Node.js 的安装与使用</a>\n<ul>\n<li><a href=\"https://github.com/nswbmw/N-blog/blob/master/book/1.1%20Node.js%20%E7%9A%84%E5%AE%89%E8%A3%85%E4%B8%8E%E4%BD%BF%E7%94%A8.md#111-%E5%AE%89%E8%A3%85-nodejs\">安装 Node.js</a></li>\n<li><a href=\"https://github.com/nswbmw/N-blog/blob/master/book/1.1%20Node.js%20%E7%9A%84%E5%AE%89%E8%A3%85%E4%B8%8E%E4%BD%BF%E7%94%A8.md#112-n-%E5%92%8C-nvm\">n 和 nvm</a></li>\n<li><a href=\"https://github.com/nswbmw/N-blog/blob/master/book/1.1%20Node.js%20%E7%9A%84%E5%AE%89%E8%A3%85%E4%B8%8E%E4%BD%BF%E7%94%A8.md#113-nrm\">nrm</a></li>\n</ul>\n</li>\n<li><a href=\"https://github

我们取OO得形，得FP的意。

有意这么写的吗？

代码中已经添加了日志的跟踪，目前还没有放出来。
怎么在日志的多和需要之间平衡。

node_modules/plume2/es5/typings/create-global-state.d.ts
(5,19): error TS2307: Cannot find module '../../../../../../../Users/hufeng/OSS/plume2/node_modules/immutable'.

preact不支持batchedupdates会自动跳过去
react支持，需要测试下

大师写app的时候发现个小问题， React.PropTypes is no longer supported and will be removed completely in React 16
store-provider.tsx
static childContextTypes = { _plume$Store: React.PropTypes.object };

Looks like 'ReactNativeInternals' (which exported unstable_batchedUpdates) was removed from being exposed as per:

f3dbddc#diff-834d77988fd4294e13e3e35533b3e248L161

As an interim fix, we are importing 'ReactNativeInternals' directly:

- import ReactNative from 'react-native';
+ import ReactNative from 'react-native/Libraries/Renderer/src/renderers/native/ReactNative'

Would the Internals be exposed in a future version of RN or will we have to use this as a solution?

如：

class AppStore extends Store {
   change = () => {
      this.batchDispatch([
           ['loading:end', {loading: false}],
           ['change', {count: 1}]
      ])
   }
}

应该也是console 引起的bug
:( some exception occur in transaction ,store state roll back

建议
this.refs[relax].proxy <- 为实例名称

如果同类的Relax太多，说明可能在某个列表中使用了Relax Container component，给出warning

新版的creat-react-app脚手架生成的项目，结合plume2；一直还是提示：
Uncaught TypeError: Class constructor HelloApp cannot be invoked without 'new'；
请问下babel-loader这边还要做什么处理么？

console.groupCollapsed is not a function 
relax.js 34:50

建议代码里面的使用console.log 的地方加入判断 如果不存在console的时候 不开启debug日志。
这个报错在很多人第一次启动项目时都会报错，不熟悉的人就懵逼了

目前Relax的容器组件给子组件的注入方式是通过约定实现，

1. 默认从props注入
2. 默认是store的state
3. 默认是store的method
4. 是QL

这些注入的方式通过约定在开发阶段非常灵活，但是给后期的代码维护带来了二义性，我们需要深入了解
代码才能知道具体的注入方式，例如

@Relax
class ProductItem extends React.Component {
   static defaultProps = {
     index: 0, //props
     name: '',  //store' state
     onAddCart: noop //store's method
   };
}

但是后期再维护的时候，很难一眼看出index，name的注入方式，
另外这样的灵活也是有代价，比如，props透传了name，恰好store里面也是有name，惨了
props就被默认覆盖了，代码结果的不可预测性。

另外，由于store里聚合actor的state是immutable数据结构，如果想获取更深层次的数据，通过该方式无法实现了。

so针对以上这些情况，还是需要去固化我们的注入方式，一目了然，清晰简单

比如，只默认是props注入，

我们设计一个inject的模块，
如果是从store的state注入化，我们可以这样，
cursor(string | string[], any) //第一个参数是cursor的path路径，第二个参数是默认值
name: inject.cursor('name', '')
而且这样还解决了深层嵌套的数据获取问题，比如store的state数据是

fromJS({
  product: {
    id: 1,
    goods: {
      id: 1,
      name: 'plume2'
    }
  }
})

如果想去注入id进来，就是简单的

id: inject.cursor(['product', 'goods', 'id'], 0) //ok

相注入store的method，

onAddCart: inject.method('addCart') //自带默认值为noop

因此基于这个规范 我们就可以很清晰的知道数据的来源，

static defaultProps = {
   index: 0,  //默认从props
   onDelete: noop, //默认从props


   product: inject.cursor('product', fromJS({}))  //store's state
   skuId: inject.cursor(['product', 'goods', 'id'], 0) //store's state
   onCartAdd: inject.method('cartAdd'),
}

store.ts 165

let preActorState = this._actorsState[i]
      const newActorState = actor.receive(msg, preActorState, params)
      if (preActorState != newActorState) {
        this._actorsState[i] = newActorState
        _state = _state.merge(newActorState)
      }

这儿的preActorState 会被污染