PHP って JavaScript に変換できるの？できるわけないだろ！ babel-preset-php ってのが今日リリースされた？これまさか・・・。ファーーーーーーーーーーーwwwwwwwwwwww

こんな面白い記事を見つけたら、やらないわけにはいかないだろうと思いまして。

準備

$ git clone [email protected]:WordPress/WordPress.git
$ cd WordPress
$ npm init -y
$ npm i -D babel-cli
$ npm i -S babel-preset-php
$ vim .babelrc
{
  "presets": ["php"]
}

実行してみる

$ ./node_modules/babel-cli/bin/babel.js index.php 
//
//Front to the WordPress application. This file doesn't do anything, but loads
//wp-blog-header.php which does and tells WordPress to load the theme.
//
//@package WordPress
//
//
//Tells WordPress to load the WordPress theme and output it.
//
//@var bool
//
//Loads the WordPress Environment and Template
const WP_USE_THEMES = true;

require(dirname(__filename) + "/wp-blog-header.php");

おぉー。

全部変換してみる

これでWordPressの全PHPをトランスパイルかければAWS Lambdaとかで使えるような気がしたのでトライしてみる。

Gulpタスクは
https://github.com/kotarella1110/babel-preset-php-sample
を参考にしました。

$ npm i -D gulp gulp-babel
$ vim gulpfile.js
const gulp = require('gulp');
const babel = require('gulp-babel');

gulp.task('default', () => {
  return gulp.src('./**/*.php')
    .pipe(babel())
    .pipe(gulp.dest('dist'));
});

動かしてみる。

$ ./node_modules/gulp/bin/gulp.js 
[12:29:36] Using gulpfile ~/develop/php/wordpress/WordPress/gulpfile.js
[12:29:36] Starting 'default'...

events.js:160
      throw er; // Unhandled 'error' event
      ^
TypeError: /Users//WordPress/wp-activate.php: Cannot read property 'kind' of null
    at addChildrenToBody (/Users//WordPress/node_modules/babel-preset-php/lib/trans.js:372:20)
    at translateBlockLike (/Users//WordPress/node_modules/babel-preset-php/lib/trans.js:1185:20)
    at translateIf (/Users//WordPress/node_modules/babel-preset-php/lib/trans.js:1325:33)
    at translateBlockLike (/Users//WordPress/node_modules/babel-preset-php/lib/trans.js:1190:27)
    at addChildrenToBody (/Users//WordPress/node_modules/babel-preset-php/lib/trans.js:375:33)
    at translateBlockLike (/Users//WordPress/node_modules/babel-preset-php/lib/trans.js:1185:20)
    at translateIf (/Users//WordPress/node_modules/babel-preset-php/lib/trans.js:1330:37)
    at translateBlockLike (/Users//WordPress/node_modules/babel-preset-php/lib/trans.js:1190:27)
    at addChildrenToBody (/Users//WordPress/node_modules/babel-preset-php/lib/trans.js:375:33)
    at translateBlockLike (/Users//WordPress/node_modules/babel-preset-php/lib/trans.js:1185:20)

見事にコケました。

このままでは引き下がれないので

Hello Dollyをトランスパイルしてみた。

$ ./node_modules/babel-cli/bin/babel.js wp-content/plugins/hello.php
//
//@package Hello_Dolly
//@version 1.6
//
//Plugin Name: Hello Dolly
Plugin URI: https://wordpress.org/plugins/hello-dolly/
Description: This is not just a plugin, it symbolizes the hope and enthusiasm of an entire generation summed up in two words sung most famously by Louis Armstrong: Hello, Dolly. When activated you will randomly see a lyric from <cite>Hello, Dolly</cite> in the upper right of your admin screen on every page.
Author: Matt Mullenweg
Version: 1.6
Author URI: https://ma.tt/
//This just echoes the chosen line, we'll position it later
//Now we set that function up to execute when the admin_notices action is called
//We need some CSS to position the paragraph

function hello_dolly_get_lyric() //These are the lyrics to Hello Dolly
//Here we split it into lines
//And then randomly choose a line
{
    var lyrics = "Hello, Dolly\nWell, hello, Dolly\nIt's so nice to have you back where you belong\nYou're lookin' swell, Dolly\nI can tell, Dolly\nYou're still glowin', you're still crowin'\nYou're still goin' strong\nWe feel the room swayin'\nWhile the band's playin'\nOne of your old favourite songs from way back when\nSo, take her wrap, fellas\nFind her an empty lap, fellas\nDolly'll never go away again\nHello, Dolly\nWell, hello, Dolly\nIt's so nice to have you back where you belong\nYou're lookin' swell, Dolly\nI can tell, Dolly\nYou're still glowin', you're still crowin'\nYou're still goin' strong\nWe feel the room swayin'\nWhile the band's playin'\nOne of your old favourite songs from way back when\nGolly, gee, fellas\nFind her a vacant knee, fellas\nDolly'll never go away\nDolly'll never go away\nDolly'll never go away again";
    lyrics = lyrics.split("\n");
    return wptexturize(lyrics[mt_rand(0, lyrics.length - 1)]);
};

function hello_dolly() {
    var chosen = hello_dolly_get_lyric();
    echo(`<p id='dolly'>${chosen}</p>`);
};

add_action("admin_notices", "hello_dolly");

function dolly_css() //This makes sure that the positioning is also good for right-to-left languages
{
    var x = is_rtl() ? "left" : "right";
    echo(`\n    <style type='text/css'>\n   #dolly {\n      float: ${x};\n      padding-${x}: 15px;\n       padding-top: 5px;       \margin: 0;\n       font-size: 11px;\n  }\n </style>\n  `);
};

add_action("admin_head", "dolly_css");

WordPress独自の関数や、サポートされていない関数が含まれていますので、このままでは動きません。

ということでCLI上で動くように調整してみたものがこちらです。

o$ cat hello.js 
//
//@package Hello_Dolly
//@version 1.6
//
//Plugin Name: Hello Dolly
//Plugin URI: https://wordpress.org/plugins/hello-dolly/
//Description: This is not just a plugin, it symbolizes the hope and enthusiasm of an entire generation summed up in two words sung most famously by Louis Armstrong: Hello, Dolly. When activated you will randomly see a lyric from <cite>Hello, Dolly</cite> in the upper right of your admin screen on every page.
//Author: Matt Mullenweg
//Version: 1.6
//Author URI: https://ma.tt/
//This just echoes the chosen line, we'll position it later
//Now we set that function up to execute when the admin_notices action is called
//We need some CSS to position the paragraph

function hello_dolly_get_lyric() //These are the lyrics to Hello Dolly
//Here we split it into lines
//And then randomly choose a line
{
    var lyrics = "Hello, Dolly\nWell, hello, Dolly\nIt's so nice to have you back where you belong\nYou're lookin' swell, Dolly\nI can tell, Dolly\nYou're still glowin', you're still crowin'\nYou're still goin' strong\nWe feel the room swayin'\nWhile the band's playin'\nOne of your old favourite songs from way back when\nSo, take her wrap, fellas\nFind her an empty lap, fellas\nDolly'll never go away again\nHello, Dolly\nWell, hello, Dolly\nIt's so nice to have you back where you belong\nYou're lookin' swell, Dolly\nI can tell, Dolly\nYou're still glowin', you're still crowin'\nYou're still goin' strong\nWe feel the room swayin'\nWhile the band's playin'\nOne of your old favourite songs from way back when\nGolly, gee, fellas\nFind her a vacant knee, fellas\nDolly'll never go away\nDolly'll never go away\nDolly'll never go away again";
    lyrics = lyrics.split("\n");
    return lyrics[Math.floor(Math.random() * (lyrics.length - 0) + 0))];
};


function hello_dolly() {
    var chosen = hello_dolly_get_lyric();
    console.log(`<p id='dolly'>${chosen}</p>`);
};


function dolly_css() //This makes sure that the positioning is also good for right-to-left languages
{
    var x = "left";
    console.log(`\n <style type='text/css'>\n   #dolly {\n      float: ${x};\n      padding-${x}: 15px;\n       padding-top: 5px;       \margin: 0;\n       font-size: 11px;\n  }\n </style>\n  `);
};

hello_dolly();
dolly_css();

実行すると、ちゃんとHello Dollyの歌詞とそれ用のCSSが出力されます。

$ node hello.js 
<p id='dolly'>Dolly'll never go away</p>

    <style type='text/css'>
    #dolly {
        float: left;
        padding-left: 15px;
        padding-top: 5px;       
        margin: 0;
        font-size: 11px;
    }
    </style>

「で？」と言われると「さぁ」としか答えられませんが、現場からは以上です。