tuax / tua-mp Goto Github PK

使用数组的 __proto__，而不是修改每一个数组数据的方法

1. 适配 Vue 风格的 props 写法

• 支持类型、数组或对象
• value -> default，并且支持函数
• 支持 validator
• prop -> computed
• prop -> watch

2. 适配 Vue 风格的自定义事件写法

• 支持使用 $on(eventName) 监听事件（实现模板编译后再解决）
• 支持使用 $emit(eventName, optionalPayload, myEventOption) 代替 triggerEvent('myevent', myEventDetail, myEventOption) 触发事件

新建使用 webpack 打包源码的项目例子
支持各种 css 预处理器

https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html

Cannot create property 'dep' on number '1'

例如以下这种情况下 stringifyArr 不会更新

TuaPage({
    data () {
        return {
            arr: [
                { c: { d: 'd0' } },
                { c: { d: 'd1' } },
                1, 2, 3,
            ],
        }
    },

    computed: {
        stringifyArr () {
            return JSON.stringify(this.arr, null, 4)
        },
    },

    created () {
        this.arr[0].c.d = 'new value'
    }

并且 computed 初始化过早，少了 undefined 的步骤...

this.arr = [{ msg: 123 }]  // 虽然数组改变了，但是没有观察这个数组
this.arr[0].msg = 'new val' // 无法触发 setter

同理替换对象也没有被观察，修复的话只需要在 defineReactive 中调用 observeDeep 观察新值即可。

目前没有处理原生 setData，导致直接跑旧代码的时候不绑定这些数据，其实可以代理一下原生的 setData...

1.通过保留字数组简单限制 data、computed 和 methods 中的名称

2.兼容 Vue 生命周期方法

在 setData 前调用 beforeUpdate，在 setData 回调中调用 updated

Page

• onLoad: beforeCreate -> onLoad -> created
• onReady: beforeMount -> onReady -> mounted
• onShow: 无
• onHide: 无
• onUnload: beforeDestroy -> onUnload -> destroyed

Component

• created: beforeCreate -> created
• attached: beforeMount -> attached
• ready: ready -> mounted
• moved: 无
• detached: beforeDestroy -> detached -> destroyed

功能支持列表：

• 基本的只读 computed
• 支持箭头函数

computed: {
  aDouble: vm => vm.a * 2
}

• 支持传 getter、setter

computed: {
  // 读取和设置
  aPlus: {
    get: function () {
      return this.a + 1
    },
    set: function (v) {
      this.a = v - 1
    }
  }
}

https://cn.vuejs.org/v2/api/#computed

https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

将示例项目创建为代码片段，可以从网页上一键打开开发者工具查看

• 参考资料
  • http://www.typescriptlang.org/
  • https://www.tslang.cn/
• 重构步骤
  • 添加 .d.ts 声明文件
  • 整体重构

有没有办法可以就只写vue文件 来生成组件
重复写文件很烦

修复新插入数组的嵌套数据不被观察的问题
修复调用改变原始数组的方法，数组下标被改变时，setter 中绑定的还是原始下标的问题

json 要多恶心有多恶心 yaml 多好

因为是在重新观察后才继承，导致虽然根元素继承了依赖，但是子元素没有继承。

请问如何引入原生自定义组件？ 谢谢

因为在 observer 里用 Promise 异步触发更新，所以这个更新会覆盖 created/onLoad 中触发的 setter

Promise.resolve().then(function () {
    this[name] = value
})

改成同步触发就行

this[name] = value

因为在 0.6.5 版本中复用被观察的对象，并且在 onLoad 中用的还是上一次初始化时计算的 data，导致报错。只要在 onLoad 时再计算一次 data 即可

小程序的有些组件在使用时会有数据不一致的情况：

例如 swiper 组件，在左右滑动后，current 的值就与实际值不一致。还有 scroll-view 组件中的 scroll-into-view。

然鹅，代码里对于新旧值相同的 setter 进行了错误拦截，导致 setter 失效...

https://github.com/tuateam/tua-mp/blob/172ade7d96e5fef8769dfa611df3cf5e9a69b39c/src/observer/index.js#L60

把这行删掉就好...

• 像 Vue 一样支持单文件组件，使用一个文件编写 wxml/wxs/wxss
• 更进一步地，适配 Vue 风格的模板写法
• 模板适配小程序组件

当data 里时时object时 在computed里

得到这种形式的

{__TUA_PATH__: "c", __dep__: Dep}

这样比如我在data 定义一个Date 就在computed里无法操作其中的方法

export default {
    data() {
        return {
            date: Date.now(),
            g: new Date(),
            b: new Object(),
            c: {
                a: 1
            }
        }
    },
    computed: {
        now () {
            console.log(this.g.now, this.b, this.c);
            return new Date(this.date);
        }
    }
 }

https://github.com/tuateam/tua-mp/blob/972a5925bbff2bb7ad7e057fc04b7c3b72ce1b26/packages/tua-mp/src/VmStatus.js#L106-L136

例如在 watch 中触发 setter，那么由于同步触发函数，同步清空状态，导致新的状态也被误清空了...

你的功能请求是否与某些问题相关？请描述
目前生成的 api 在编辑器中完全没有提示。

描述您想要的解决方案

• 根据导出的 api 自动生成声明文件（index.d.ts），这样在导入并调用接口时编辑器能够智能提示有哪些参数、是否必传。

新增命令 declare，读取导出的 apis 自动生成 index.d.ts。

$ tuamp declare [apisPath]
# OR
$ tuamp d [apisPath]

• apisPath 默认值为 src/apis/index.js
• index.d.ts 生成在 apisPath 同级目录下

由于使用 require 读取导出 apis 对象的文件，所以可能会碰到 alias 问题。例如项目中设置了 @ 作为 ./src/ 的别名。虽然 @tua-mp/cli 已内置了一些 alias，但你仍然可以自由配置。

在 tua.config.js 中的 alias 选项会透传给 babel-plugin-module-resolver，例如将 foobar 指向 './src/foobar' 可以这么配置：

// tua.config.js
module.exports = {
    alias: {
        'foobar': './src/foobar',
    },
}

响应的声明下个版本再规划

• 更进一步，可以根据 mock 属性，结合 json2ts，生成接口响应的声明。

1.通过 webpack 将 Vue 风格的项目结构编译转换成小程序的项目结构
2.对于 node_modules 等依赖的打包

project.config.json 本来保存着编辑器的一些预定义的状态 现在被覆盖了

wepy 采用的是放在根目录模式

功能支持列表：

• 简单的 data 属性
• computed
• 嵌套 data 属性如：'a.b.c'
• 传递方法名
• 立即调用(immediate)
• 深度 watcher(deep)
• 回调数组

https://cn.vuejs.org/v2/api/#watch

https://babeljs.io/docs/en/v7-migration

• 依赖收集完成后，在依赖源没有变化的情况下，不应该触发 computed 进行重复计算。原因已找到...
• 初始化时 computed 函数被误触发了多次

1. 增加单元测试
2. 集成 CI
3. 添加 Badge
   • version
   • lincense
   • build
   • coverage

利用 lerna 合并相关项目...

否则在调用 Object.keys 和 Object.entries 时会遍历出来...

实现依赖收集，这样就不会在每次 data 数据更新的时候重新计算整个 computed，进一步提高性能

目前的组件都放在 src/comps/ 下，但其实一些组件非公用，应该放在自己的 pages/ 文件夹下。

因为在标准写法中触发了 setter，所以在传入数组和基本类型时没写对应的 observer 触发 setter，问题不大补上就好了...

https://github.com/rollup/rollup/releases/tag/v1.0.0

这样就可以通用一些方法 变量 了

问题
当前虽然已有默认模板，但是假如升级模板就必须升级包。

方案
因此打算支持项目级别的自定义模板功能。在没有配置文件时，使用内置默认模板。

• 为了保持多端的通用性，决定以后优先读取 tua.config.js，没有时再找 tua-mp.config.js
• 可配置的选项有 templateDir，即所有模板文件夹的路径，默认值为 .templates。

module.exports = {
    templateDir: 'some/path',
}

• 新增 eject 命令将默认模板导出

$ tuamp eject
# OR
$ tuamp e

指定模板下次再做吧...

• [ ] 对于所有 add 命令新增 -t, --template 选项，用于指定模板

$ tuamp add api --template=<template> <name>
$ tuamp add page -t=<template> <name>
$ tuamp add comp -t=<template> <name>
$ tuamp add comp -t=<template> -g <name>