refactor(v2): use ejs for SSR HTML template (#1322)

facebook · Mar 30, 2019 · 43e0221 · 43e0221
1 parent afed949
commit 43e0221
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 32 deletions.
diff --git a/packages/docusaurus-plugin-content-blog/package.json b/packages/docusaurus-plugin-content-blog/package.json
@@ -8,8 +8,7 @@
     "@docusaurus/utils": "^1.0.0",
     "classnames": "^2.2.6",
     "fs-extra": "^7.0.1",
-    "globby": "^9.1.0",
-    "react": "^16.8.5"
+    "globby": "^9.1.0"
   },
   "peerDependencies": {
     "@docusaurus/core": "^2.0.0"

diff --git a/packages/docusaurus/lib/commands/start.js b/packages/docusaurus/lib/commands/start.js
@@ -88,7 +88,10 @@ module.exports = async function start(siteDir, cliOptions = {}) {
     {
       inject: false,
       hash: true,
-      template: path.resolve(__dirname, '../core/index.html.template.ejs'),
+      template: path.resolve(
+        __dirname,
+        '../core/templates/index.html.template.ejs',
+      ),
       filename: 'index.html',
       title: siteConfig.title,
     },

diff --git a/packages/docusaurus/lib/core/serverEntry.js b/packages/docusaurus/lib/core/serverEntry.js
@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import ejs from 'ejs';
 import React from 'react';
 import {StaticRouter} from 'react-router-dom';
 import ReactDOMServer from 'react-dom/server';
@@ -17,6 +18,7 @@ import webpackClientStats from '@build/client.stats.json'; //eslint-disable-line
 import routes from '@generated/routes'; // eslint-disable-line
 import preload from './preload';
 import App from './App';
+import ssrTemplate from './templates/ssr.html.template';
 
 // Renderer for static-site-generator-webpack-plugin (async rendering via promises)
 export default function render(locals) {
@@ -39,40 +41,31 @@ export default function render(locals) {
       helmet.meta.toString(),
       helmet.link.toString(),
     ];
-    const metaHtml = metaStrings.filter(Boolean).join('\n    ');
+    const metaAttributes = metaStrings.filter(Boolean);
 
     const bundles = getBundles(reactLoadableStats, modules);
     const assets = [
       ...webpackClientStats.assetsByChunkName.main,
-      ...bundles.map(b => b.file),
+      ...bundles.map(bundle => bundle.file),
     ];
-    const jsFiles = assets.filter(value => value.match(/\.js$/));
-    const cssFiles = assets.filter(value => value.match(/\.css$/));
+    const scripts = assets.filter(value => value.match(/\.js$/));
+    const stylesheets = assets.filter(value => value.match(/\.css$/));
     const {baseUrl} = locals;
 
-    return `<!DOCTYPE html>
-  <html${htmlAttributes ? ` ${htmlAttributes}` : ''}>
-    <head>
-      ${metaHtml}
-      <meta charset="UTF-8">
-      <meta name="viewport" content="width=device-width, initial-scale=1">
-      ${cssFiles
-        .map(
-          cssFile =>
-            `<link rel="stylesheet" type="text/css" href="${baseUrl}${cssFile}" />`,
-        )
-        .join('\n')}
-    </head>
-    <body${bodyAttributes ? ` ${bodyAttributes}` : ''}>
-      <div id="__docusaurus">${appHtml}</div>
-      ${jsFiles
-        .map(
-          jsFile =>
-            `<script type="text/javascript" src="${baseUrl}${jsFile}"></script>`,
-        )
-        .join('\n')}
-    </body>
-  </html>
-`;
+    return ejs.render(
+      ssrTemplate.trim(),
+      {
+        appHtml,
+        baseUrl,
+        htmlAttributes: htmlAttributes || '',
+        bodyAttributes: bodyAttributes || '',
+        metaAttributes,
+        scripts,
+        stylesheets,
+      },
+      {
+        rmWhitespace: true,
+      },
+    );
   });
 }
diff --git a/...cusaurus/lib/core/index.html.template.ejs → ...ib/core/templates/index.html.template.ejs b/...cusaurus/lib/core/index.html.template.ejs → ...ib/core/templates/index.html.template.ejs
diff --git a/...docusaurus/lib/core/metadata.template.ejs → .../lib/core/templates/metadata.template.ejs b/...docusaurus/lib/core/metadata.template.ejs → .../lib/core/templates/metadata.template.ejs
diff --git a/packages/docusaurus/lib/core/templates/ssr.html.template.js b/packages/docusaurus/lib/core/templates/ssr.html.template.js
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+module.exports = `
+<!DOCTYPE html>
+<html <%= htmlAttributes %>>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <% metaAttributes.forEach((metaAttribute) => { %>
+      <%- metaAttribute %>
+    <% }); %>
+    <% stylesheets.forEach((stylesheet) => { %>
+      <link rel="stylesheet" type="text/css" href="<%= baseUrl %><%= stylesheet %>" />
+    <% }); %>
+  </head>
+  <body <%= bodyAttributes %>>
+    <div id="__docusaurus">
+      <%- appHtml %>
+    </div>
+    <% scripts.forEach((script) => { %>
+      <script type="text/javascript" src="<%= baseUrl %><%= script %>"></script>
+    <% }); %>
+  </body>
+</html>
+`;
diff --git a/packages/docusaurus/lib/load/index.js b/packages/docusaurus/lib/load/index.js
@@ -102,7 +102,7 @@ module.exports = async function load(siteDir, cliOptions = {}) {
   // Generate contents metadata.
   const metadataTemplateFile = path.resolve(
     __dirname,
-    '../core/metadata.template.ejs',
+    '../core/templates/metadata.template.ejs',
   );
   const metadataTemplate = fs.readFileSync(metadataTemplateFile).toString();