feat: wire up server side rendering process to core-php + add logic t…

…o the bolt text and button components to handle the differences in rendering
boltdesignsystem · Feb 28, 2019 · 752c0df · 752c0df
1 parent fda3992
commit 752c0df
Show file tree

Hide file tree

Showing 16 changed files with 400 additions and 213 deletions.
diff --git a/docs-site/composer.json b/docs-site/composer.json
@@ -22,13 +22,14 @@
   ],
   "require": {
     "bolt-design-system/twig-renderer": "*",
-    "bolt-design-system/core-php": "*",
+    "bolt-design-system/core-php": "^2.3.0",
     "bolt-design-system/drupal-twig-extensions": "*",
     "bolt-design-system/styleguidekit-twig-default": "*",
     "pattern-lab/core": "^2.8.10",
     "pattern-lab/patternengine-twig": "^2.2.2",
     "cweagans/composer-patches": "^1.6.4",
-    "evanlovely/plugin-twig-namespaces": "^1.1.1"
+    "evanlovely/plugin-twig-namespaces": "^1.1.1",
+    "symfony/process": "4.2 as 3.4"
   },
   "autoload": {
     "psr-0": {

diff --git a/docs-site/composer.lock b/docs-site/composer.lock
diff --git a/package.json b/package.json
@@ -20,10 +20,12 @@
     "pattern lab"
   ],
   "scripts": {
+    "ssr": "node -r esm server/ssr-server.mjs",
+    "ssr:button-example": "yarn run ssr -- '<bolt-button color=\"secondary\" url=\"https://boltdesignsystem.com\">Hello World!<bolt-icon name=\"chevron-right\" slot=\"after\"></bolt-icon></bolt-button>'",
     "start": "cd docs-site && yarn run start",
     "build": "cd docs-site && yarn run build:prod",
     "setup": "yarn",
-    "setup:php": "npx lerna exec --scope @bolt/twig-renderer --scope @bolt/drupal-twig-extensions --scope @bolt/core-php -- yarn run setup",
+    "setup:php": "npx lerna exec --scope @bolt/twig-renderer --scope @bolt/drupal-twig-extensions --scope @bolt/core-php -- composer update && npx lerna exec --scope @bolt/website -- composer update",
     "setup:quick": "yarn install --production",
     "setup:full": "yarn --force",
     "deploy": "./scripts/deploy.js",
@@ -71,7 +73,12 @@
       "@commitlint/config-conventional"
     ]
   },
+  "esm": {
+    "wasm": true,
+    "mode": "strict"
+  },
   "devDependencies": {
+    "esm": "^3.2.7",
     "@babel/core": "^7.2.2",
     "@commitlint/cli": "^7.4.0",
     "@commitlint/config-conventional": "^7.3.1",
@@ -88,6 +95,7 @@
     "semantic-release": "^15.13.3"
   },
   "dependencies": {
+    "cli-highlight": "^2.0.0",
     "babel-jest": "^24.1.0",
     "@open-wc/testing-helpers": "^0.7.12",
     "basichtml": "^0.21.1",

diff --git a/packages/components/bolt-button/src/button.standalone.js b/packages/components/bolt-button/src/button.standalone.js
@@ -2,8 +2,8 @@ import { props, define } from '@bolt/core/utils';
 import { html, render } from '@bolt/core/renderers/renderer-lit-html';
 import { BoltAction } from '@bolt/core/elements/bolt-action';
 import { convertInitialTags } from '@bolt/core/decorators';
-
 import classNames from 'classnames/bind';
+import { ifDefined } from 'lit-html/directives/if-defined';
 
 import visuallyhiddenUtils from '@bolt/global/styles/07-utilities/_utilities-visuallyhidden.scss';
 import styles from './button.scss';
@@ -75,30 +75,54 @@ class BoltButton extends BoltAction {
             'is-empty': name in this.slots === false,
           });
 
-          return html`
-            <span class="${iconClasses}"
-              >${name in this.slots
-                ? this.slot(name)
-                : html`
-                    <slot name="${name}" />
-                  `}</span
-            >
-          `;
+          return this.isServer
+            ? html`
+                ${name in this.slots
+                  ? html`
+                      <replace-with-children class="${iconClasses}"
+                        >${name in this.slots
+                          ? this.slot(name)
+                          : ''}</replace-with-children
+                      >
+                    `
+                  : ''}
+              `
+            : html`
+                <span class="${iconClasses}"
+                  >${name in this.slots
+                    ? this.slot(name)
+                    : html`
+                        <slot name="${name}" />
+                      `}</span
+                >
+              `;
         default:
           const itemClasses = cx('c-bolt-button__item', {
             'is-empty': name in this.slots === false,
             'u-bolt-visuallyhidden': this.props.iconOnly,
           });
 
-          return html`
-            <span class="${itemClasses}"
-              >${name in this.slots
-                ? this.slot('default')
-                : html`
-                    <slot />
-                  `}</span
-            >
-          `;
+          return this.isServer
+            ? html`
+                ${name in this.slots
+                  ? html`
+                      <replace-with-children class="${itemClasses}"
+                        >${name in this.slots
+                          ? this.slot('default')
+                          : ''}</replace-with-children
+                      >
+                    `
+                  : ''}
+              `
+            : html`
+                <span class="${itemClasses}"
+                  >${name in this.slots
+                    ? this.slot('default')
+                    : html`
+                        <slot />
+                      `}</span
+                >
+              `;
       }
     };
 
@@ -114,13 +138,22 @@ class BoltButton extends BoltAction {
       render(innerSlots, buttonElement);
     } else if (hasUrl) {
       buttonElement = html`
-        <a href="${this.props.url}" class="${classes}" target="${urlTarget}"
+        <a
+          href="${this.props.url}"
+          class="${classes}"
+          target="${urlTarget}"
+          is=${ifDefined(this.isServer ? 'shadow-root' : undefined)}
           >${innerSlots}</a
         >
       `;
     } else {
       buttonElement = html`
-        <button class="${classes}">${innerSlots}</button>
+        <button
+          class="${classes}"
+          is=${ifDefined(this.isServer ? 'shadow-root' : undefined)}
+        >
+          ${innerSlots}
+        </button>
       `;
     }
 

diff --git a/packages/components/bolt-text/src/text.standalone.js b/packages/components/bolt-text/src/text.standalone.js
@@ -303,8 +303,19 @@ class BoltText extends withLitHtml() {
       }
     }
 
+    const innerHTML = wrapInnerHTML(this.slot('default'));
+
     return html`
-      ${this.addStyles([styles])} ${wrapInnerHTML(this.slot('default'))}
+      ${this.addStyles([styles])}
+      ${this.isServer
+        ? html`
+            <replace-with-grandchildren
+              >${innerHTML}</replace-with-grandchildren
+            >
+          `
+        : html`
+            ${innerHTML}
+          `}
     `;
   }
 }

diff --git a/packages/core-php/composer.json b/packages/core-php/composer.json
@@ -28,7 +28,8 @@
     "gregwar/image": "^2.0",
     "tooleks/php-avg-color-picker": "^1.1.2",
     "asm89/twig-lint": "^1.0",
-    "phpunit/phpunit": "^7"
+    "phpunit/phpunit": "^7",
+    "symfony/process": "4.2 as 3.4"
   },
   "scripts": {
     "setup": "@composer install --no-interaction --prefer-dist --no-progress",

diff --git a/packages/core-php/src/TwigExtensions/BoltExtras.php b/packages/core-php/src/TwigExtensions/BoltExtras.php
@@ -19,7 +19,8 @@ public function getFunctions() {
       Bolt\TwigFunctions::link(),
       Bolt\TwigFunctions::getSpacingScaleSequence(),
       Bolt\TwigFunctions::github_url(),
-      Bolt\TwigFunctions::merge_attributes()
+      Bolt\TwigFunctions::merge_attributes(),
+      Bolt\TwigFunctions::ssr(),
     ];
   }
 
@@ -30,7 +31,13 @@ public function getFilters() {
       Bolt\TwigFilters::text_contrast(),
       Bolt\TwigFilters::without(),
       Bolt\TwigFilters::t(),
+      Bolt\TwigFilters::bolt_ssr(),
     ];
   }
 
+  public function getTokenParsers() {
+    return [
+      Bolt\TwigTags::ssr_tag(),
+    ];
+  }
 }
diff --git a/packages/core-php/src/TwigFilters.php b/packages/core-php/src/TwigFilters.php
@@ -2,6 +2,7 @@
 
 namespace Bolt;
 
+use Bolt;
 use \Twig_SimpleFilter;
 
 class TwigFilters {
@@ -18,6 +19,14 @@ public static function json_decode() {
     });
   }
 
+
+  public static function bolt_ssr() {
+    return new Twig_SimpleFilter('bolt_ssr', function ($html) {
+      $result = Bolt\TwigFunctions::bolt_ssr($html);
+      return $result;
+    });
+  }
+
   public static function without() {
     return new Twig_SimpleFilter('without', function ($element) {
       if ($element instanceof ArrayAccess) {

diff --git a/packages/core-php/src/TwigFunctions.php b/packages/core-php/src/TwigFunctions.php
@@ -7,6 +7,8 @@
 use \Drupal\Core\Template\Attribute;
 use \BasaltInc\TwigTools;
 use \Webmozart\PathUtil\Path;
+use Symfony\Component\Process\Process;
+use Symfony\Component\Process\Exception\ProcessFailedException;
 
 // https://github.com/Shudrum/ArrayFinder
 use \Shudrum\Component\ArrayFinder\ArrayFinder;
@@ -46,6 +48,23 @@ public static function fileExists() {
     ]);
   }
 
+  public static function bolt_ssr($html) {
+    $process = new Process(['node', '-r', 'esm', 'server/ssr-server.mjs', $html]);
+    $process->setWorkingDirectory('../');
+    $process->wait();
+    return $process->getOutput();
+  }
+
+  public static function ssr() {
+    return new Twig_SimpleFunction('bolt_ssr', function(\Twig_Environment $env, $context, $html) {
+      $result = self::bolt_ssr($html);
+      return $result;
+    }, [
+      'needs_environment' => true,
+      'needs_context' => true,
+    ]);
+  }
+
 
   public static function inlineFile() {
     return new Twig_SimpleFunction('inline', function($context, $filename) {

diff --git a/packages/core-php/src/TwigTags.php b/packages/core-php/src/TwigTags.php
@@ -4,6 +4,7 @@
 
 use Bolt\Layout\GridTagTokenParser;
 use Bolt\Layout\GridCellTokenParser;
+use Bolt\SSR\SSRTagTokenParser;
 use \Twig_SimpleFunction;
 
 
@@ -16,4 +17,8 @@ public static function grid_tag() {
   public static function cell_tag() {
     return new GridCellTokenParser();
   }
+
+  public static function ssr_tag() {
+    return new SSRTagTokenParser();
+  }
 }
diff --git a/packages/core/elements/replace-with-children/index.js b/packages/core/elements/replace-with-children/index.js
@@ -8,6 +8,10 @@ class ReplaceWithChildren extends HTMLElement {
   connectedCallback() {
     const parentElement = this.parentElement;
 
+    if (bolt.isServer) {
+      return;
+    }
+
     if (!parentElement) {
       Error(
         'The <replace-with-children> element needs a parent element to append to!',

diff --git a/packages/core/elements/replace-with-grandchildren/index.js b/packages/core/elements/replace-with-grandchildren/index.js
@@ -6,15 +6,20 @@ class ReplaceWithGrandchildren extends ReplaceWithChildren {
   static is = 'replace-with-grandchildren';
 
   connectedCallback() {
-    const childHtmlTag = this.children[0];
+    if (bolt.isServer) {
+      return false;
+    } else {
+      const childHtmlTag = this.children[0];
 
-    // Originally was this.replaceWith(...this.childNodes) but IE11 doesn't like that
-    while (childHtmlTag.firstChild) {
-      this.appendChild(childHtmlTag.firstChild);
+      if (childHtmlTag) {
+        // Originally was this.replaceWith(...this.childNodes) but IE11 doesn't like that
+        while (childHtmlTag.firstChild) {
+          this.appendChild(childHtmlTag.firstChild);
+        }
+        this.removeChild(childHtmlTag);
+      }
+      super.connectedCallback();
     }
-    this.removeChild(childHtmlTag);
-
-    super.connectedCallback();
   }
 }
 

diff --git a/packages/drupal-modules/bolt_connect/composer.json b/packages/drupal-modules/bolt_connect/composer.json
@@ -24,7 +24,7 @@
     }
   },
   "require": {
-    "bolt-design-system/core-php": "2.3.0",
+    "bolt-design-system/core-php": "^2.3.0",
     "basaltinc/twig-tools": "^1.4.0",
     "webmozart/path-util": "^2.3"
   }