Feature/vuepress (#49)

* feat(docs): add vuepress to display docs * perf(examples): add full watch feature * fix(ob): close #45 * fix(arr): add oldVal for array mutation * doc: add quick-start * perf(doc): add deploy, fix assets path, add favicon, skip ci * perf(examples): update service, add doc about opening root dir * perf(computed): evaluate computed functions only when Dep.targetCb was called, but it's not done yet. update docs.
tuax · Jul 20, 2018 · 42de05c · 42de05c
1 parent f7d7a5d
commit 42de05c
Show file tree

Hide file tree

Showing 42 changed files with 1,639 additions and 187 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,3 +3,4 @@ node_modules/*
 coverage/
 yarn-error.log
 yarn.lock
+docs/.vuepress/dist/
diff --git a/README.md b/README.md
@@ -5,7 +5,7 @@
 </h5>
 
 <p align="center">
-    <a href="https://github.com/feross/standard"><img src="https://cdn.rawgit.com/feross/standard/master/badge.svg" alt="Standard - JavaScript Style"></a>
+    <a href="https://github.com/feross/standard"><img src="./docs/.vuepress/public/standard.svg" alt="Standard - JavaScript Style"></a>
 </p>
 
 <p align="center">
@@ -19,43 +19,57 @@
 ## 0.介绍
 `tua-mp` 是一个用于开发微信小程序的**渐进式框架**，它与其他小程序框架不同的是，`tua-mp` 可以由浅入深地用于你的小程序项目。
 
+<p align="center">
+    <a href="https://tuateam.github.io/tua-mp/">👉完整文档地址点这里👈</a>
+</p>
+
 ## 1.安装
 ## 1.1.最基础的使用方式 -- [examples/basic/](https://github.com/tuateam/tua-mp/tree/master/examples/basic)
 下载 [https://github.com/tuateam/tua-mp/blob/master/examples/basic/utils/tua-mp.js](https://github.com/tuateam/tua-mp/blob/master/examples/basic/utils/tua-mp.js) 文件到你的小程序项目中，例如保存为 `utils/tua-mp.js`。
 
-代码片段地址为：**wechatide://minicode/bGXx7tmO6iZx**
+代码片段地址为：**wechatide://minicode/JzXSn8mb78n8**
 
 > 可以尝试复制以上片段地址到浏览器地址栏中打开
 
-<image src="./imgs/open-by-tab.png" width="400" alt="open-by-tab" />
-
 [如果依然打不开，可以手动打开开发者工具导入代码片段查看](https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)
 
-在页面入口的 js 代码中使用 TuaPage 替代小程序提供的 Page。
+接着在入口的 `js` 代码中：
 
-```js
+* 在页面中使用 `TuaPage` 替代小程序提供的 `Page`
+* 在组件中使用 `TuaComp` 替代小程序提供的 `Component`
+
+替换后即可使用开发 `Vue` 的方式来开发小程序。
+
+```js {5}
 // pages/index/index.js
 import { TuaPage } from '../../utils/tua-mp'
 
-// 用 TuaPage 替代 Page
+// Page -> TuaPage
 TuaPage({ ... })
 ```
 
-采用这种侵入性最小的方式，可以用于改写优化已有的小程序项目，即在部分页面中使用 `tua-mp`。
+```js {5}
+// comps/foobar/foobar.js
+import { TuaComp } from '../../utils/tua-mp'
 
-## 1.2.利用 webpack 打包源码
-使用 `npm` 下载 `tua-mp`，然后直接 `import`。
+// Component -> TuaComp
+TuaComp({ ... })
+```
 
-```bash
-$ npm i -S tua-mp
+采用这种侵入性最小的方式，可以用于改写优化已有的小程序项目，即在部分页面中使用 `tua-mp`。
 
-$ tnpm i -S @tencent/tua-mp
+## 1.2.借助构建工具
+在这部分我们将使用 webpack 来打包我们的源码，但其中 webpack 繁琐的配置已预先封装在 [@tua-mp/service](https://github.com/tuateam/tua-mp-service) 里了。
 
-$ yarn add tua-mp
-```
+因此很自然地，日常前端开发中的各位“老朋友们”又回来了~
 
-### 1.支持预处理器 -- [examples/webpack-simple/](https://github.com/tuateam/tua-mp/tree/master/examples/webpack-simple)
+* npm
+* babel
+* eslint
+* less/scss/stylus
+* ...
 
+### 1.支持预处理器的 simple 版本
 ![webpack version](https://img.shields.io/badge/webpack-%5E4.8.1-green.svg)
 
 推荐使用 [vue-cli](https://github.com/vuejs/vue-cli) 一键生成项目：
@@ -64,19 +78,20 @@ $ yarn add tua-mp
 $ vue init tua-mp-templates/simple my-project
 ```
 
-添加相关 `loader` 处理后，通过 `extract-text-webpack-plugin` 生成 `.wxss` 文件。
+* 开发时运行 `npm start`，`webpack` 就会开启监听
+* 发布时运行 `npm run build`，`webpack` 会先删除 `dist/` 然后将源码压缩生成到其中
+
+在这个例子中我们将源码放在了 `src/` 下，利用 `webpack` 将其打包生成到 `dist/` 目录下。
+
+此外还对于样式的编写加入了预处理器的功能
 
-* js: 经过 babel 编译成 ES5
 * wxss: 会被拷贝到 dist/ 下的对应路径
 * css: 需要在 js 中引入，生成对应的 wxss
 * less: 需要在 js 中引入，生成对应的 wxss
 * scss/sass: 需要在 js 中引入，生成对应的 wxss
 * stylus: 需要在 js 中引入，生成对应的 wxss
 
-代码片段地址为：**[wechatide://minicode/kwBhRTm26YZL](wechatide://minicode/kwBhRTm26YZL)**
-
-### 2.利用 vue-loader 支持单文件组件 -- [examples/webpack-vue/](https://github.com/tuateam/tua-mp/tree/master/examples/webpack-vue)
-
+### 2.支持单文件组件的 vue 版本
 ![webpack version](https://img.shields.io/badge/webpack-%5E4.8.1-green.svg)
 ![vue-loader version](https://img.shields.io/badge/vue--loader-%5E15.0.12-green.svg)
 
@@ -90,23 +105,46 @@ $ vue init tua-mp-templates/vue my-project
 
 [单文件组件就是将模板（template）、脚本（script）、样式（style）写在一个文件中。](https://cn.vuejs.org/v2/guide/single-file-components.html)
 
-在这个例子中的单文件组件和一般 web 端的单文件组件有所不同：
+但在这个例子中的单文件组件和一般 web 端的单文件组件**有所不同**：
 
-1.页面的模板我们使用的是 `<template lang="wxml">...</template>`
+1.页面的模板需要添加 `lang="wxml"`
 
-2.添加了一个 `<config>` 的自定义块，用于填写**页面**的配置（即原来的 `.json`）
+```vue {1}
+<template lang="wxml">
+    <!-- 小程序模板代码 -->
+</template>
+```
 
-3.由于 webpack 或其他地方需要读取 `app.json` 中的某些字段，所以在不编写 loader 的情况下只好维持原状，不将其放到 `app.vue` 中的 `<config>` 中。
+2.原本的 `.json` 文件变成了 `<config>`
+
+```vue {2,13}
+<!-- 默认 json -->
+<config>
+{
+    "navigationBarTitleText": "tua-mp todos",
+    "usingComponents": {
+        "Todo": "./comps/Todo/Todo",
+        "Filter": "/comps/Filter/Filter"
+    }
+}
+</config>
+
+<!-- yaml 也支持 -->
+<config lang="yaml">
+navigationBarTitleText: 'tua-mp todos'
+usingComponents:
+    Todo: ./comps/Todo/Todo
+    Filter: /comps/Filter/Filter
+</config>
+```
 
 > [什么是自定义块？](https://vue-loader.vuejs.org/zh/guide/custom-blocks.html)
 
-<image src="./imgs/logs.vue.png" width="400" alt="logs.vue" />
-
-代码片段地址为：**[wechatide://minicode/kGBfYTmQ6OZa](wechatide://minicode/kGBfYTmQ6OZa)**
+<image src="./docs/.vuepress/public/logs.vue.png" width="400" alt="logs.vue" />
 
 **以上两个例子中的 `/pages/todos/todos` 页面都实现了 todos 应用。**
 
-<image src="./imgs/tua-mp-todos.gif" width="400" alt="tua-mp-todos" />
+<image src="./docs/.vuepress/public/tua-mp-todos.gif" width="400" alt="tua-mp-todos" />
 
 ## 2.使用说明
 使用方式上和 Vue 对齐，[对 Vue 还不熟悉？](https://cn.vuejs.org/v2/guide/)

diff --git a/__tests__/index.test.js b/__tests__/index.test.js
@@ -359,7 +359,8 @@ describe('TuaPage', () => {
             watch: {
                 'steve': {
                     immediate: true,
-                    handler (newVal) {
+                    handler (newVal, oldVal) {
+                        this.oldYoung = oldVal
                         this.young = newVal
                     },
                 },
@@ -381,12 +382,15 @@ describe('TuaPage', () => {
                 },
             },
         })
+
         vm.steve = 'nash'
         expect(vm.ab).toBe('c')
+        expect(vm.oldYoung).toBe(undefined)
         expect(vm.young).toBe('young')
         expect(vm.youngLen).toBe(5)
 
         afterSetData(() => {
+            expect(vm.oldYoung).toBe('young')
             expect(vm.young).toBe('nash')
             expect(vm.youngLen).toBe(4)
             done()
@@ -527,10 +531,13 @@ describe('TuaPage', () => {
             data () {
                 return {
                     strArr: ['a', 'b'],
-                    nestedArr: [ { num: n++ } ],
+                    nestedArr: [ { num: n++, e: [{ v: { e: 'e' } }] } ],
                 }
             },
             computed: {
+                stringifyNA () {
+                    return JSON.stringify(this.fromNestedArr)
+                },
                 fromNestedArr () {
                     return this.nestedArr.filter(x => x.num > 1)
                 },
@@ -542,16 +549,21 @@ describe('TuaPage', () => {
 
         vm.strArr = ['c']
         vm.nestedArr = [ { num: n++ }, { num: n++ } ]
-        vm.nestedArr.push({ num: n++ })
+        vm.nestedArr.push({ num: n++, s: { t: 't' } })
 
         expect(vm.fromNestedArr.length).toBe(2)
+
         vm.nestedArr.forEach(x => x.num++)
         expect(vm.fromNestedArr.length).toBe(3)
+
         vm.nestedArr.forEach(x => x.num++)
         expect(vm.fromNestedArr.length).toBe(3)
         expect(vm.data.fromNestedArr.length).toBe(0)
 
         afterSetData(() => {
+            expect(vm.nestedArr[2].s.__dep__.subs.length)
+                .toEqual(vm.nestedArr.__dep__.subs.length)
+
             expect(vm.firstStr).toBe('c')
             expect(vm.fromNestedArr.length).toBe(3)
             expect(vm.nestedArr.__dep__.subs.length)

diff --git a/__tests__/init.test.js b/__tests__/init.test.js
@@ -83,7 +83,7 @@ describe('observe functions', () => {
 
                 expect(vm.sAndsyPlusHey).toBe('y' + plusHey(newVal2))
                 expect(watch.sAndsyPlusHey).toBeCalledWith('y' + plusHey(newVal2), 'y' + plusHey(newVal1))
-                expect(watch.nestedArrLen).toHaveBeenCalledTimes(2)
+                expect(watch.nestedArrLen).toHaveBeenCalledTimes(0)
                 done()
             })
         })

diff --git a/__tests__/observer/array.test.js b/__tests__/observer/array.test.js
@@ -139,7 +139,7 @@ describe('patch methods to array', () => {
         arr.push(1)
         expect(observeDeep).toBeCalledWith(arr, path)
         arr.pop()
-        expect(asyncSetData).toBeCalledWith({ path, newVal: arr })
+        expect(asyncSetData).toBeCalledWith({ path, newVal: arr, oldVal: arr })
         arr.sort()
         expect(observeDeep).toBeCalledWith(arr, path)
         arr.splice(0, 0, 2)

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
@@ -0,0 +1,52 @@
+module.exports = {
+    base: '/tua-mp/',
+    locales: {
+        '/': {
+            title: 'tua-mp',
+            description: '🖖一款类 Vue 的渐进式小程序框架'
+        }
+    },
+    head: [
+        ['link', { rel: 'icon', href: `/logo.png` }],
+    ],
+    serviceWorker: true,
+    themeConfig: {
+        repo: 'tuateam/tua-mp',
+        docsDir: 'docs',
+        editLinks: true,
+        editLinkText: '在 GitHub 上编辑此页',
+        lastUpdated: '上次更新',
+        nav: [
+            {
+                text: '快速上手',
+                link: '/quick-start/',
+            },
+            {
+                text: '生态系统',
+                items: [
+                    { text: '构建工具', link: '/tua-mp-service/' },
+                    { text: '本地存储', link: '/tua-storage/' },
+                    // { text: '命令行工具（开发中）', link: '/tua-cli' },
+                    // { text: 'api 配置（待开源）', link: '/tua-api-wx' },
+                ],
+            },
+        ],
+        sidebar: {
+            '/quick-start/': [
+                {
+                    title: '快速上手',
+                    collapsable: false,
+                    children: [
+                        'installation',
+                        '',
+                        'instance',
+                        'computed',
+                        'components',
+                        'simple-app',
+                        'vue-app',
+                    ],
+                },
+            ],
+        },
+    },
+}
diff --git a/docs/.vuepress/public/logo.png b/docs/.vuepress/public/logo.png
diff --git a/imgs/logs.vue.png → docs/.vuepress/public/logs.vue.png b/imgs/logs.vue.png → docs/.vuepress/public/logs.vue.png