san-ssr-target-php

安装

环境要求

• PHP 5 >= 5.3.0, PHP 7

npm i san san-ssr san-ssr-target-php

编程接口

SanProject#compile(filepath, target, options) 方法第二参传 'php'，第三参为 ToPHPCompiler 的 compileToSource() 选项。

TypeScript 作为输入，可以支持 method、filters、computed。

import { Target, SanProject } from 'san-ssr'
import { writeFileSync } from 'fs'

const project = new SanProject()
const targetCode = project.compile('src/component.ts', 'php')

writeFileSync('dist/component.php', targetCode)

或者 JavaScript 作为输入，只支持 template:

const { SanProject } = require('san-ssr')
import { writeFileSync } from 'fs'

const project = new SanProject()
const targetCode = project.compile('src/component.ts', 'php')

writeFileSync('dist/component.php', targetCode)

默认产出的 PHP 中包含了一个 helpers 运行时工具。为了避免重复产出，可以手动维护一份 helpers 并让每次编译使用外部 helpers：

import { SanProject } from 'san-ssr'
import ToPHPCompiler from 'san-ssr-target-php'
import { writeFileSync } from 'fs'

// 指定 importHelpers，targetCode 中不产出 helpers 代码
const project = new SanProject()
const targetCode = project.compile('src/component.ts', 'php', {
    importHelpers: '\\san\\my-helpers'
})
writeFileSync('dist/component.php', targetCode)

// 单独产出一份 helpers，注意这里没有 "\\" 前缀
const helpersCode = ToPHPCompiler.emitHelpers({ namespace: 'san\\my-helpers' })
writeFileSync('dist/helpers.php', targetCode)

命令行接口

使用 san-ssr 命令并指定 --target php 即可调用目标到 PHP 的 SSR 渲染。

san-ssr --target php --compile '{"nsPrefix":"demo\\"}' ./component.ts > ssr.php

全局安装 san-ssr-target-php 后，可以用命令来产出一份 helpers：

$ san-ssr-target-php-helpers --help
san-ssr-target-php-helpers [-n <NAMESPACE>]

Options:
  --namespace, -n    Specify the namespace of helpers

Example:
$ san-ssr-target-php-helpers -n 'san\helpers'

已知问题

• noDataOutput 控制的数据输出中，对象序列化使用 json_encode 实现，属性顺序和 JavaScript 中可能不同
• getTemplateType() 需要运行时编译，不在 PHP 版本中支持。
• 模板（san 组件的 template 属性）中读取数据属性时，有些属性是平台相关的。比如 {{ arr.length }} 总会渲染为空（因为 PHP array 下不存在 length 属性）。
• script 元素内容不可在组件间传递。即 script 内不可引用组件，也不可包含 slot。

贡献指南

开发依赖：

• Node.js >= 8
• PHP 7
• composer

安装依赖和跑测试：

npm install
composer install
npm test

debug 一个用例，以 node_modules/san-html-cases/src/array-literal 为例：

./bin/debug array-literal

source ./bin/auto-complete 来让 zsh 自动补全用例全名。