ReactJS в PHP: писать компиляторы легко и весело!

 function nodes($tokens) { $nodes = []; $current = null; $cursor = 0; $length = count($tokens); while ($cursor < $length) { $token =& $tokens[$cursor]; if (is_array($token) && $token["tag"][1] !== "/") { preg_match("#^<([a-zA-Z]+)#", $token["tag"], $matches); if ($current !== null) { $token["parent"] =& $current; $current["children"][] =& $token; } else { $token["parent"] = null; $nodes[] =& $token; } $current =& $token; $current["name"] = $matches[1]; $current["children"] = []; if (isset($current["attributes"])) { foreach ($current["attributes"] as $key => $value) { $current["attributes"][$key] = nodes($value); } $current["attributes"] = array_map(function($item) { foreach ($item as $value) { if (isset($value["tag"])) { return $value; } } foreach ($item as $value) { if (!empty($value["token"])) { return $value; } } return null; }, $current["attributes"]); } } else if (is_array($token) && $token["tag"][1] === "/") { preg_match("#^</([a-zA-Z]+)#", $token["tag"], $matches); if ($current === null) { throw new Exception("no open tag"); } if ($matches[1] !== $current["name"]) { throw new Exception("no matching open tag"); } if ($current !== null) { $current =& $current["parent"]; } } else if ($current !== null) { array_push($current["children"], [ "parent" => &$current, "token" => &$token, ]); } else { array_push($nodes, [ "token" => $token, ]); } $cursor++; } return $nodes; } // ... // Array // ( // [0] => Array // ( // [token] => <?php // // $classNames = "foo bar"; // $message = "hello world"; // // $thing = ( // ) // // [1] => Array // ( // [tag] => <div className={0} nested={1}> // [started] => 157 // [attributes] => Array // ( // [0] => Array // ( // [token] => () => { return "outer-div"; } // ) // // [1] => Array // ( // [tag] => <span className={0}> // [started] => 19 // [attributes] => Array // ( // [0] => Array // ( // [token] => "nested-span" // ) // // ) // // [parent] => // [name] => span // [children] => Array // ( // [0] => Array // ( // [parent] => *RECURSION* // [token] => with text // ) // // ) // // ) // // ) // // [parent] => // [name] => div // [children] => Array // ( // [0] => Array // ( // [parent] => *RECURSION* // [token] => a bit of text before // ) // // [1] => Array // ( // [tag] => <span> // [started] => 195 // [parent] => *RECURSION* // [name] => span // [children] => Array // ( // [0] => Array // ( // [parent] => *RECURSION* // [token] => {$message} with ... // ) // // ) // // ) // // [2] => Array // ( // [parent] => *RECURSION* // [token] => a bit of text after // ) // // ) // // ) // // [2] => Array // ( // [token] => ); // ) // // ) 

Это из nodes-2.php

Потратьте некоторое время на изучение того, что здесь происходит. Мы создаем массив $nodes , в котором хранятся новые, организованные структуры узлов. У нас также есть переменная $current , которой мы присваиваем каждый открывающий тег тег по ссылке Таким образом, мы можем перейти в каждый элемент (открывающий тег, закрывающий тег и токены между ними); а также отступить, когда мы встретим закрывающий тег.

Ссылки являются наиболее сложной частью этого, но они необходимы для того, чтобы код был относительно простым. Я имею в виду, это не так просто; но это намного проще, чем не-справочная версия.

У нас нет самой чистой функции с точки зрения рекурсивной работы. Таким образом, когда мы пропускаем атрибуты через функцию nodes , мы иногда получаем пустые атрибуты «токена» вместе с атрибутами вложенного тега. Из-за этого нам необходимо отфильтровать атрибуты, чтобы сначала попытаться вернуть вложенный тег, а затем вернуть непустое значение атрибута токена. Это может быть убрано немного …

Код переписывания

Теперь, когда код аккуратно упорядочен в иерархии или AST, мы можем переписать его в действительный код PHP. Давайте начнем с написания только строковых токенов (которые не вложены в элементы) и форматирования полученного кода:

 function parse($nodes) { $code = ""; foreach ($nodes as $node) { if (isset($node["token"])) { $code .= $node["token"] . PHP_EOL; } } return $code; } $nodes = [ 0 => [ 'token' => '<?php $classNames = "foo bar"; $message = "hello world"; $thing = (', ], 1 => [ 'tag' => '<div className={0} nested={1}>', 'started' => 157, 'attributes' => [ 0 => [ 'token' => '() => { return "outer-div"; }', ], 1 => [ 'tag' => '<span className={0}>', 'started' => 19, 'attributes' => [ 0 => [ 'token' => '"nested-span"', ], ], 'name' => 'span', 'children' => [ 0 => [ 'token' => 'with text', ], ], ], ], 'name' => 'div', 'children' => [ 0 => [ 'token' => 'a bit of text before', ], 1 => [ 'tag' => '<span>', 'started' => 195, 'name' => 'span', 'children' => [ 0 => [ 'token' => '{$message} with a bit of extra text', ], ], ], 2 => [ 'token' => 'a bit of text after', ], ], ], 2 => [ 'token' => ');', ], ]; parse($nodes); // <?php // // $classNames = "foo bar"; // $message = "hello world"; // // $thing = ( // ); 

Это из parser-1.php

Я скопировал узлы, извлеченные из предыдущего скрипта, поэтому нам не нужно снова отлаживать или повторно использовать эту функцию. Давайте разберемся и с элементами:

 require __DIR__ . "/vendor/autoload.php"; function parse($nodes) { $code = ""; foreach ($nodes as $node) { if (isset($node["token"])) { $code .= $node["token"] . PHP_EOL; } if (isset($node["tag"])) { $props = []; $attributes = []; $elements = []; if (isset($node["attributes"])) { foreach ($node["attributes"] as $key => $value) { if (isset($value["token"])) { $attributes["attr_{$key}"] = $value["token"]; } if (isset($value["tag"])) { $elements[$key] = true; $attributes["attr_{$key}"] = parse([$value]); } } } preg_match_all("#([a-zA-Z]+)={([^}]+)}#", $node["tag"], $dynamic); preg_match_all("#([a-zA-Z]+)=[']([^']+)[']#", $node["tag"], $static); if (count($dynamic[0])) { foreach($dynamic[1] as $key => $value) { $props["{$value}"] = $attributes["attr_{$key}"]; } } if (count($static[1])) { foreach($static[1] as $key => $value) { $props["{$value}"] = $static[2][$key]; } } $code .= "pre_" . $node["name"] . "([" . PHP_EOL; foreach ($props as $key => $value) { $code .= "'{$key}' => {$value}," . PHP_EOL; } $code .= "])" . PHP_EOL; } } $code = Pre\Plugin\expand($code); $code = Pre\Plugin\formatCode($code); return $code; } // ... // <?php // // $classNames = "foo bar"; // $message = "hello world"; // // $thing = ( // pre_div([ // 'className' => function () { // return "outer-div"; // }, // 'nested' => pre_span([ // 'className' => "nested-span", // ]), // ]) // ); 

Это из parser-2.php

Когда мы находим узел тега, мы перебираем атрибуты и создаем новый массив атрибутов, который является либо просто текстом из узлов маркера, либо анализирует теги из узлов тега. Этот бит рекурсии имеет дело с возможностью атрибутов, которые являются вложенными элементами. Наше регулярное выражение обрабатывает только атрибуты, заключенные в одинарные кавычки (для простоты). Не стесняйтесь делать более полное выражение, обрабатывать более сложный синтаксис и значения атрибутов.

Я установил pre/short-closures , чтобы функция стрелки была расширена до обычной функции:

 composer require pre/short-closures 

Там также есть функция форматирования PSR-2, поэтому наш код отформатирован в соответствии со стандартом.

Наконец, нам нужно разобраться с детьми:

 require __DIR__ . "/vendor/autoload.php"; function parse($nodes) { $code = ""; foreach ($nodes as $node) { if (isset($node["token"])) { $code .= $node["token"] . PHP_EOL; } if (isset($node["tag"])) { // ... $children = []; foreach ($node["children"] as $child) { if (isset($child["tag"])) { $children[] = parse([$child]); } else { $children[] = "\"" . addslashes($child["token"]) . "\""; } } $props["children"] = $children; $code .= "pre_" . $node["name"] . "([" . PHP_EOL; foreach ($props as $key => $value) { if ($key === "children") { $code .= "\"children\" => [" . PHP_EOL; foreach ($children as $child) { $code .= "{$child}," . PHP_EOL; } $code .= "]," . PHP_EOL; } else { $code .= "\"{$key}\" => {$value}," . PHP_EOL; } } $code .= "])" . PHP_EOL; } } $code = Pre\Plugin\expand($code); $code = Pre\Plugin\formatCode($code); return $code; } // ... // <?php // // $classNames = "foo bar"; // $message = "hello world"; // // $thing = ( // pre_div([ // "className" => function () { // return "outer-div"; // }, // "nested" => pre_span([ // "className" => "nested-span", // "children" => [ // "with text", // ], // ]), // "children" => [ // "a bit of text before", // pre_span([ // "children" => [ // "{$message} with a bit of extra text", // ], // ]), // "a bit of text after", // ], // ]) // ); 

Это из parser-3.php

Мы анализируем каждый дочерний тег и напрямую заключаем в кавычки каждый дочерний токен (добавляя косую черту для учета вложенных кавычек). Затем, когда мы создаем массив параметров; мы перебираем дочерние элементы и добавляем каждый в строку кода, которую в конечном итоге возвращает наша функция parse .

Каждый тег преобразуется в эквивалентную pre_div или pre_span . Это механизм-заполнитель для более крупной системы примитивных элементов. Мы можем продемонстрировать это, заглушив эти функции:

 require __DIR__ . "/vendor/autoload.php"; function pre_div($props) { $code = "<div"; if (isset($props["className"])) { if (is_callable($props["className"])) { $class = $props["className"](); } else { $class = $props["className"]; } $code .= " class='{$class}'"; } $code .= ">"; foreach ($props["children"] as $child) { $code .= $child; } $code .= "</div>"; return trim($code); } function pre_span($props) { $code = pre_div($props); $code = preg_replace("#^<div#", "<span", $code); $code = preg_replace("#div>$#", "span>", $code); return $code; } function parse($nodes) { // ... } $nodes = [ 0 => [ 'token' => '<?php $classNames = "foo bar"; $message = "hello world"; $thing = (', ], 1 => [ 'tag' => '<div className={0} nested={1}>', 'started' => 157, 'attributes' => [ 0 => [ 'token' => '() => { return $classNames; }', ], 1 => [ 'tag' => '<span className={0}>', 'started' => 19, 'attributes' => [ 0 => [ 'token' => '"nested-span"', ], ], 'name' => 'span', 'children' => [ 0 => [ 'token' => 'with text', ], ], ], ], 'name' => 'div', 'children' => [ 0 => [ 'token' => 'a bit of text before', ], 1 => [ 'tag' => '<span>', 'started' => 195, 'name' => 'span', 'children' => [ 0 => [ 'token' => '{$message} with a bit of extra text', ], ], ], 2 => [ 'token' => 'a bit of text after', ], ], ], 2 => [ 'token' => ');', ], 3 => [ 'token' => 'print $thing;', ], ]; eval(substr(parse($nodes), 5)); // <div class='foo bar'> // a bit of text before // <span> // hello world with a bit of extra text // </span> // a bit of text after // </div> 

Это из parser-4.php

Я изменил входные узлы, так что $thing будет напечатан. Если мы реализуем наивную версию pre_div и pre_span то этот код выполняется успешно. В это трудно поверить, учитывая, как мало кода мы написали …

Интеграция с Pre

Вопрос в том, что нам с этим делать?

Это интересный эксперимент, но он не очень полезен. Что было бы лучше, так это иметь возможность добавить это в существующий проект и поэкспериментировать с проектированием на основе компонентов в реальном мире. С этой целью я расширил Pre, чтобы разрешить использование пользовательских компиляторов (наряду с пользовательскими определениями макросов, которые он уже позволяет).

Затем я упаковал tokens , nodes и функции parse в библиотеку многократного использования. Это заняло довольно много времени, и между первым созданием функций и созданием примера приложения с их использованием я немного их улучшил. Некоторые улучшения были небольшими (например, создание набора примитивов компонентов HTML), а некоторые были большими (например, рефакторинг выражений и разрешение пользовательских классов компонентов).

Я не собираюсь обсуждать все эти изменения, но я хотел бы показать вам, как выглядит этот пример приложения. Он начинается с серверного скрипта:

 use Silex\Application; use Silex\Provider\SessionServiceProvider; use Symfony\Component\HttpFoundation\Request; use App\Component\AddTask; use App\Component\Page; use App\Component\TaskList; $app = new Application(); $app->register(new SessionServiceProvider()); $app->get("/", (Request $request) => { $session = $request->getSession(); $tasks = $session->get("tasks", []); return ( <Page> <TaskList>{$tasks}</TaskList> <AddTask></AddTask> </Page> ); }); $app->post("/add", (Request $request) => { $session = $request->getSession(); $id = $session->get("id", 0); $tasks = $session->get("tasks", []); $tasks[] = [ "id" => $id++, "text" => $request->get("text"), ]; $session->set("id", $id); $session->set("tasks", $tasks); return $app->redirect("/"); }); $app->get("/remove/{id}", (Request $request, $id) => { $session = $request->getSession(); $tasks = $session->get("tasks", []); $tasks = array_filter($tasks, ($task) => { return $task["id"] !== (int) $id; }); $session->set("tasks", $tasks); return $app->redirect("/"); }); $app->run(); 

Это из server.pre

Приложение построено поверх Silex , который представляет собой аккуратный микро-фреймворк. Чтобы загрузить этот серверный скрипт, у меня есть индексный файл:

 require __DIR__ . "/../vendor/autoload.php"; Pre\Plugin\process(__DIR__ . "/../server.pre"); 

Это из public/index.php

… И я служу этому с:

 php -S localhost:8080 -t public public/index.php 

Я еще не пробовал запускать это через веб-сервер, такой как Apache или Nginx. Я полагаю, что это будет работать примерно так же.

Серверные сценарии начинаются с того, что я настраиваю сервер Silex. Я определяю несколько маршрутов, первый из которых выбирает массив задач из текущего сеанса. Если этот массив не был определен, я по умолчанию устанавливаю пустой массив.

Я передаю их напрямую, как TaskList компонента TaskList . Я обернул это, и компонент AddTask , внутри компонента Page . Компонент Page выглядит так:

 namespace App\Component; use InvalidArgumentException; class Page { public function render($props) { assert($this->hasValid($props)); { $children } = $props; return ( "<!doctype html>". <html lang="en"> <body> {$children} </body> </html> ); } private function hasValid($props) { if (empty($props["children"])) { throw new InvalidArgumentException("page needs content (children)"); } return true; } } 

Это из app/Component/Page.pre

Этот компонент не является строго обязательным, но я хочу объявить тип документа и освободить место для будущих заголовочных объектов (таких как таблицы стилей и мета-теги). Я деструктурирую ассоциативный массив $props (используя некоторый синтаксис pre/collections ) и передаю его в элемент <body> .

Тогда есть компонент TaskList :

 namespace App\Component; class TaskList { public function render($props) { { $children } = $props; return ( <ul className={"task-list"}> {$this->children($children)} </ul> ); } private function children($children) { if (count($children)) { return {$children}->map(($task) => { return ( <Task id={$task["id"]}>{$task["text"]}</Task> ); }); } return ( <span>No tasks</span> ); } } 

Это из app/Component/TaskList.pre

Элементы могут иметь динамические атрибуты. Фактически, эта библиотека не поддерживает их с буквальными (заключенными в кавычки) значениями атрибута. Их сложно поддерживать, в дополнение к этим динамическим значениям атрибутов. Я определяю атрибут className ; который поддерживает несколько разных форматов:

1. Выражение буквального значения, например "task-list"
2. Массив (или объект pre/collection ключа), например ["first", "second"]
3. Ассоциативный массив (или объект pre/collection ключом), например, ["first" => true, "second" => false]

Это похоже на атрибут className в ReactJS. Форма с ключами или объектами использует достоверность значений, чтобы определить, добавляются ли ключи к атрибуту class элемента.

Все элементы по умолчанию поддерживают устаревшие и неэкспериментальные атрибуты, определенные в документации по Mozilla Developer Network. Все элементы поддерживают ассоциативный массив для своего атрибута style , который использует форму kebab-case ключей стиля CSS.

Наконец, все элементы поддерживают атрибуты aria- и aria- , и все значения атрибутов могут быть функциями, которые возвращают свои истинные значения (как форма отложенной загрузки).

Давайте посмотрим на компонент Task :

 namespace App\Component; use InvalidArgumentException; class Task { public function render($props) { assert($this->hasValid($props)); { $children, $id } = $props; return ( <li className={"task"}> {$children} <a href={"/remove/{$id}"}>remove</a> </li> ); } private function hasValid($props) { if (!isset($props["id"])) { throw new InvalidArgumentException("task needs id (attribute)"); } if (empty($props["children"])) { throw new InvalidArgumentException("task needs text (children)"); } return true; } } 

Это из app/Component/Task.pre

Каждая задача ожидает id определенный для каждой задачи (которую определяет server.pre ), и некоторые дочерние server.pre . Дочерние элементы используются для текстового представления задачи и определяются в месте создания задач в компоненте TaskList .

 namespace App\Component; class AddTask { public function render($props) { return ( <form method={"post"} action={"/add"} className={"add-task"}> <input name={"text"} type={"text"} /> <button type={"submit"}>add</button> </form> ); } } 

 $app->post("/add", (Request $request) => { $session = $request->getSession(); $id = $session->get("id", 1); $tasks = $session->get("tasks", []); $tasks[] = [ "id" => $id++, "text" => $request->get("text"), ]; $session->set("id", $id); $session->set("tasks", $tasks); return $app->redirect("/"); }); $app->get("/remove/{id}", (Request $request, $id) => { $session = $request->getSession(); $tasks = $session->get("tasks", []); $tasks = array_filter($tasks, ($task) => { return $task["id"] !== (int) $id; }); $session->set("tasks", $tasks); return $app->redirect("/"); });