feat: wireup ssr.php and component.php

[-] wireup ssr.php and component.php
[-] apply co-compile to debug scripts
[-] apply co-compile to integration test

.gitignore

@@ -3,4 +3,5 @@ node_modules/
 npm-debug.log
 /test/e2e.spec.js
 coverage
-vendor/
+vendor/
+dist/

bin/auto-complete.sh

@@ -8,7 +8,8 @@
 # 
 # 3. Input `./bin/test.ts` and press <Tab>
 
-compdef _test test.ts
+compdef _test test-php.ts
+compdef _test test-js.ts
 compdef _test render.ts
 compdef _test compile-to-js.ts
 compdef _test compile-to-php.ts

bin/render.js

@@ -1,15 +1,15 @@
 #!/usr/bin/env node
 
+const { readFileSync } = require('fs')
 const { resolve, join } = require('path')
-const { read } = require('../test/data')
 
 const caseName = process.argv[2]
 const caseRoot = resolve(__dirname, '../test/cases')
 const caseDir = resolve(caseRoot, caseName)
 const jsSSRPath = join(caseDir, 'ssr.js')
 const dataPath = join(caseDir, 'data.json')
 
-const data = read(dataPath)
+const data = JSON.parse(readFileSync(dataPath, 'utf8'))
 const noDataOutput = /-ndo$/.test(caseDir)
 const jsRendered = require(jsSSRPath)(data, noDataOutput)
 process.stdout.write(jsRendered)

bin/render.php

@@ -6,6 +6,16 @@
 
 $dataStr = file_get_contents($caseDir . "/data.json");
 $data = json_decode($dataStr);
+
 $noDataOutput = preg_match('/-ndo$/', $caseName);
+$renderFunc = '\\san\\renderer\\' . dashesToCamelCase($caseName) . '\\render';
+
+echo $renderFunc($data, $noDataOutput);
 
-echo $render($data, $noDataOutput);
+function dashesToCamelCase($string, $capitalizeFirstCharacter = false) {
+    $str = str_replace(' ', '', ucwords(str_replace('-', ' ', $string)));
+    if (!$capitalizeFirstCharacter) {
+        $str[0] = strtolower($str[0]);
+    }
+    return $str;
+}

jest.config.js

@@ -1,11 +1,10 @@
 module.exports = {
     roots: [
-        '<rootDir>/src',
         '<rootDir>/test'
     ],
     testMatch: [
         '<rootDir>/test/unit/**.ts',
-        '<rootDir>/test/integration.spec.ts'
+        '<rootDir>/test/integration.spec.js'
     ],
     globals: {
         tsConfig: {

package.json

@@ -8,11 +8,12 @@
   },
   "scripts": {
     "lint": "eslint src test",
-    "build": "tsc && cp runtime/* dist/runtime",
+    "build": "tsc",
+    "build-watch": "tsc",
     "unit-php": "./vendor/bin/phpunit --bootstrap vendor/autoload.php test/unit/*.spec.php",
     "unit-ts": "jest test/unit",
     "unit": "npm run unit-ts && npm run unit-php",
-    "integration": "jest test/integration.spec.ts",
+    "integration": "jest test/integration.spec.js",
     "coverage": "jest --coverage",
     "test": "jest && npm run e2e",
     "render": "./bin/render.js",
@@ -62,7 +63,8 @@
   "dependencies": {
     "camelcase": "^5.3.1",
     "chalk": "^2.4.2",
-    "ts-morph": "^4.0.0",
+    "snake-case": "^2.1.0",
+    "ts-morph": "^4.0.1",
     "ts-node": "^8.3.0",
     "ts2php": "^0.12.1",
     "typescript": "^3.4.5"

runtime/underscore.php

@@ -146,10 +146,11 @@ private static function boolAttrTruthy($value) {
 
     public static function callFilter($ctx, $name, $args)
     {
-        $filter = $ctx["proto"]["filters"][$name];
-        // TODO this is
-        if (is_callable($filter)) {
-            return call_user_func_array($filter, $args);
+        $cid = $ctx["spsrId"];
+        $cls = \san\runtime\ComponentRegistry::get($cid);
+        $func = $cls::$filters[$name];
+        if (is_callable($func)) {
+            return call_user_func_array($func, $args);
         }
     }
 

src/bin/case.ts

@@ -0,0 +1,70 @@
+import { exec } from './exec'
+import { ComponentParser } from '../transpilers/component-parser'
+import { readdirSync, writeFileSync, existsSync } from 'fs'
+import { resolve, join } from 'path'
+import { compileToSource as compileToJSSource } from '../js-ssr'
+import { compileToSource as compileToPHPSource } from '../php-ssr'
+import { Compiler as ToPHPCompiler } from '../transpilers/ts2php'
+import { Compiler as ToJSCompiler } from '../transpilers/ts2js'
+import camelCase from 'camelcase'
+
+const caseRoot = resolve(__dirname, '../../test/cases')
+const tsconfigPath = resolve(__dirname, '../../test/tsconfig.json')
+const cases = readdirSync(caseRoot)
+
+export function compileToJS (caseName) {
+    const caseDir = join(caseRoot, caseName)
+    const ts = join(caseDir, 'component.ts')
+    const js = join(caseDir, 'component.js')
+    const componentClass = existsSync(ts) ? require(ts).default : require(js)
+    const fn = compileToJSSource(componentClass)
+    writeFileSync(join(caseDir, 'ssr.js'), `module.exports = ${fn}`)
+}
+
+export function compileAllToJS () {
+    for (const caseName of cases) compileToJS(caseName)
+}
+
+export function compileToPHP (caseName) {
+    const caseDir = join(caseRoot, caseName)
+    const ts = join(caseDir, 'component.ts')
+    let componentClass
+    let code = ''
+
+    if (existsSync(ts)) {
+        const ccp = new ToPHPCompiler({
+            tsconfigPath,
+            nsPrefix: 'san\\components\\test\\'
+        })
+        const component = new ComponentParser(ts, tsconfigPath).parseComponent()
+        const ccj = new ToJSCompiler(tsconfigPath)
+        componentClass = ccj.compileAndRun(component.get(ts))['default']
+        code += ccp.compileComponent(component)
+    } else {
+        const js = join(caseDir, 'component.js')
+        componentClass = require(js)
+    }
+
+    const renderCode = compileToPHPSource(
+        componentClass,
+        { funcName: 'render' }
+    )
+
+    code +=
+        `namespace san\\renderer\\${camelCase(caseName)} {\n` +
+        `    ${renderCode}` +
+        `}\n`
+    writeFileSync(join(caseDir, 'ssr.php'), `<?php ${code} ?>`)
+}
+
+export function compileAllToPHP () {
+    for (const caseName of cases) compileToPHP(caseName)
+}
+
+export function renderByJS (caseName) {
+    return exec(resolve(__dirname, `../../bin/render.js`), [caseName])
+}
+
+export function renderByPHP (caseName) {
+    return exec(resolve(__dirname, `../../bin/render.php`), [caseName])
+}

src/bin/compile-to-js.ts

@@ -0,0 +1,5 @@
+import { compileAllToJS, compileToJS } from './case'
+
+const caseName = process.argv[2]
+if (caseName === '--all') compileAllToJS()
+else compileToJS(caseName)

src/bin/compile-to-php.ts

@@ -0,0 +1,6 @@
+import { compileToPHP, compileAllToPHP } from './case'
+
+const caseName = process.argv[2]
+
+if (caseName === '--all') compileAllToPHP()
+else compileToPHP(caseName)

src/bin/js-test.ts

@@ -0,0 +1,23 @@
+import chalk from 'chalk'
+import { readFileSync } from 'fs'
+import { resolve } from 'path'
+import { renderByJS, compileToJS } from './case'
+import { measure, startMeasure } from '../utils/timing'
+
+const caseName = process.argv[2]
+const htmlPath = resolve(__dirname, '../test/cases', caseName, 'result.html')
+const expected = readFileSync(htmlPath, 'utf8')
+
+console.log(chalk.green('[COMP  JS]'), measure(() => compileToJS(caseName)))
+
+check(`[EXPECTED] ${caseName}`, () => expected)
+check(`[SSR   JS] ${caseName}`, () => renderByJS(caseName))
+
+function check (title, render) {
+    const renderJSMeasure = startMeasure()
+    const html = render()
+    const color = html === expected ? 'green' : 'red'
+    console.log(chalk[color](title), renderJSMeasure.duration())
+    console.log(html + '\n')
+    if (html !== expected) process.exit(1)
+}

src/bin/php-test.ts

@@ -0,0 +1,23 @@
+import chalk from 'chalk'
+import { readFileSync } from 'fs'
+import { resolve } from 'path'
+import { renderByPHP, compileToPHP } from './case'
+import { measure, startMeasure } from '../utils/timing'
+
+const caseName = process.argv[2]
+const htmlPath = resolve(__dirname, '../test/cases', caseName, 'result.html')
+const expected = readFileSync(htmlPath, 'utf8')
+
+console.log(chalk.green('[COMP PHP]'), measure(() => compileToPHP(caseName)))
+
+check(`[EXPECTED] ${caseName}`, () => expected)
+check(`[SSR  PHP] ${caseName}`, () => renderByPHP(caseName))
+
+function check (title, render) {
+    const renderJSMeasure = startMeasure()
+    const html = render()
+    const color = html === expected ? 'green' : 'red'
+    console.log(chalk[color](title), renderJSMeasure.duration())
+    console.log(html + '\n')
+    if (html !== expected) process.exit(1)
+}

src/js-ssr.ts

@@ -1,4 +1,4 @@
-import { each, contains, empty, extend, bind, inherits } from './utils'
+import { each, contains, empty, extend, bind, inherits } from './utils/underscore'
 import * as fs from 'fs'
 import * as path from 'path'