vip-server-renderer/README.md

Atom server renderer(PHP)

# vip-server-renderer

支持`Atom`的服务端渲染

## 安装

``` bash
npm install vip-server-renderer
```

## 项目文件说明

- `index.js`: 编译工具，输入`.atom.html`文件内容，输出编译后的js/php/css等信息
- `php/*`: php运行时库
- `js/atom.js`: js运行时库(目前版本完全基于Vue 2.3.3)

## API

首先，需要引入`vip-server-renderer`

``` js
const compiler = require('vip-server-renderer');
```

### compiler.compile(options)

输入一个`.atom.html`文件的内容， 返回一个包含编译后各个信息的对象，对象形式如下：

``` js
{
    blocks: Object, // 各个block中的源代码
    compiled: {
        js: String, // 编译后的js代码
        css: String,    // 编译后的css代码
        php: String // 编译后的php代码
    },
    paths: {
        js: Object, // 编译后js中引用的各个组件的路径
        php: Object // 编译后php中引用的各个组件的路径
    },
    props: Array    // 当前vue组件定义props
}
```

#### options

- options.content: `.vue`文件的内容，必选
- options.mode: 编译后的js代码的形式，可选，取值包括`amd/commonjs/umd/global`，默认值`amd`
- options.compileJSComponent: 处理js组件路径的插件函数，可选，插件函数可以获取到两个参数，分别是组件的原始路径`path`和组件的`key`。插件函数应返回相应的js代码（如`require("path/to/component")`）。
- options.compilePHPComponent: 处理php组件路径的插件函数，可选，插件函数可以获取到两个参数，分别是组件的原始路径`path`和组件的`key`。插件函数返回相应的php代码（如`"path/to/component"`）。
- options.compileStyle: 暴露预处理 css 代码的接口，可选。插件函数可以获取到两个参数，分别是代码内容 `code` 和所在的 style 标签的参数 `attrs`（目前只有 `attrs.lang`，表示用户设置的预处理语言），该函数只支持同步的方式，返回处理后的 css 代码。
- options.strip {boolean} 是否strip掉空白字符(类似smarty的{strip}{/strip})，默认为false
- options.versionIsolated {boolean} 是否使用php的版本隔离，默认是 true
- options.silent {boolean} 是否静默 false
- options.color {boolean} 日志是否带颜色 true
- options.logger {Function|Object} 日志回调函数

### compiler.getRender(template)

输入一个`template`字符串，返回一个用`module.exports`包裹，包含`render`函数和`staticRenderFns`的字符串

#### template

vue模板字符串

## Vue服务端渲染原理

![img](./imgs/reason.png)

## 使用限制

由于不同语言的限制，我们在使用`vue-php`进行服务端渲染时也有一些限制：

- `.vue`文件中，组件的`data`、`props`和`components`属性必须单独放到`<config>`中
- `template`中模板使用js表达式时，不能调用函数，不能使用计算属性

一个`.vue`文件示例

```
<template>
    <div class="c-container">
        <div>{{a}}</div>
        <div><p>123</p></div>
        <div v-if="b">i am b</div>
        <ala />
    </div>
</template>

<style>
    .c-container {
        color: red;
    }
</style>

<script>
    var sth = require('something');

    module.exports = {
        created: function () {
            sth();
        }
    };
</script>

<config>
    {
        props: ['x', 'y'],
        data: {
            a: 123,
            b: true
        },
        components: {
            ala: 'path/to/ala'
        }
    };
</config>
```

## License

[MIT](https://opensource.org/licenses/MIT)