feat(Features/ComponentLogServer): add a simple logging functionality (…

…#291)

Features/ComponentLogServer/README.md

@@ -0,0 +1,16 @@
+# HowTo
+
+## Register Feature `/lib/init.php`
+```php
+<?php
+
+function initTheme()
+{
+    add_theme_support('flynt-component-log-server');
+}
+```
+
+## Usage
+This functionality is only enabled on the development environment or for logged in administrators / editors on all environments.
+
+Add the GET parameter `log` to any url (e.g. `http://localhost:3000/?log`) and all the data for that page will be output via console.log in the dev tools of your browser. By specifying an additional `component` parameter with component names separated by a comma you can limit the output to specific components: `http://localhost:3000/?log&component=BlockWysiwyg,DocumentDefault`.

Features/ComponentLogServer/functions.php

@@ -0,0 +1,58 @@
+<?php
+
+namespace Flynt\Features\ComponentLogServer;
+
+use Flynt;
+
+define(__NAMESPACE__ . '\NS', __NAMESPACE__ . '\\');
+
+add_action('Flynt/afterRegisterFeatures', function () {
+    $componentManager = Flynt\ComponentManager::getInstance();
+    $componentWhitelist = [];
+    if (isset($_GET['component']) && !empty($_GET['component'])) {
+        $componentWhitelist = explode(',', $_GET['component']);
+    }
+    if (count($componentWhitelist) === 0) {
+        foreach ($componentManager->getAll() as $name => $path) {
+            add_filter("Flynt/addComponentData?name={$name}", NS . 'addDebugInfo', 12, 3);
+        }
+    } else {
+        foreach ($componentManager->getAll() as $name => $path) {
+            if (in_array($name, $componentWhitelist)) {
+                add_filter("Flynt/addComponentData?name={$name}", NS . 'addDebugInfo', 12, 3);
+            }
+        }
+    }
+}, 11);
+
+function addDebugInfo($data, $parentData, $config)
+{
+    if ((WP_ENV === 'development' || current_user_can('editor') || current_user_can('administrator')) && isset($_GET['log'])) {
+        consoleDebug([
+            'component' => $config['name'],
+            'config' => $config,
+            'data' => $data,
+            'parentData' => $parentData,
+        ]);
+    }
+
+    return $data;
+}
+
+function consoleDebug($data, $postpone = true)
+{
+    $output = json_encode($data);
+    $result =  "<script>console.log({$output});</script>\n";
+    echoDebug($result, $postpone);
+}
+
+function echoDebug($data, $postpone)
+{
+    if ($postpone) {
+        add_action('wp_footer', function () use ($data) {
+            echo $data;
+        }, 30);
+    } else {
+        echo $data;
+    }
+}

lib/Init.php

@@ -79,6 +79,9 @@ function initTheme()
     add_theme_support('flynt-password-form');
     add_theme_support('flynt-external-script-loader');
     add_theme_support('flynt-lodash');
+
+    // enable flynt log server
+    add_theme_support('flynt-component-log-server');
 }
 add_action('after_setup_theme', __NAMESPACE__ . '\\initTheme');