Fix index template (lavas-project#46)

Allow developers using custom variables in index.html.tmpl
sunsunsun000 · Jan 17, 2018 · b46a125 · b46a125
1 parent 22180ce
commit b46a125
Show file tree

Hide file tree

Showing 12 changed files with 117 additions and 385 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 =======
 
+## Lavas-core-vue [1.0.3-rc.1] - 2018-1-17
+
+### Changed
+
+- [Feature] Allow developers use custom variables in `core/index.html.tmpl`
+
 ## Lavas-core-vue [1.0.2-rc.0] - 2018-1-10
 
 ### Changed

diff --git a/package.json b/package.json
@@ -40,7 +40,6 @@
       "packages/lavas-core-vue/test/unit/**/*.test.js",
       "packages/lavas-core-vue/test/integration/*.js"
     ],
-    "backupFiles": [],
     "require": [
       "babel-register",
       "babel-polyfill"

diff --git a/packages/lavas-cli/package.json b/packages/lavas-cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lavas",
-  "version": "2.2.3",
+  "version": "2.2.4",
   "description": "Lavas solution cli tool",
   "main": "dist/index.js",
   "files": [

diff --git a/packages/lavas-core-vue/core/builder/base-builder.js b/packages/lavas-core-vue/core/builder/base-builder.js
@@ -145,10 +145,9 @@ export default class BaseBuilder {
      * use html webpack plugin
      *
      * @param {Object} spaConfig spaConfig
-     * @param {string} baseUrl entry base url
      * @param {boolean} watcherEnabled enable watcher
      */
-    async addHtmlPlugin(spaConfig, baseUrl, watcherEnabled) {
+    async addHtmlPlugin(spaConfig, watcherEnabled) {
         // allow user to provide a custom HTML template
         let rootDir = this.config.globals.rootDir;
         let htmlFilename = `${DEFAULT_ENTRY_NAME}.html`;
@@ -161,7 +160,7 @@ export default class BaseBuilder {
         // write HTML template used by html-webpack-plugin which doesn't support template STRING
         let resolvedTemplatePath = await this.writeFileToLavasDir(
             TEMPLATE_HTML,
-            templateUtil.client(await readFile(customTemplatePath, 'utf8'), baseUrl)
+            templateUtil.client(await readFile(customTemplatePath, 'utf8'))
         );
 
         // add html webpack plugin
@@ -186,7 +185,7 @@ export default class BaseBuilder {
             this.addWatcher(customTemplatePath, 'change', async () => {
                 await this.writeFileToLavasDir(
                     TEMPLATE_HTML,
-                    templateUtil.client(await readFile(customTemplatePath, 'utf8'), baseUrl)
+                    templateUtil.client(await readFile(customTemplatePath, 'utf8'))
                 );
             });
         }
@@ -220,7 +219,7 @@ export default class BaseBuilder {
             spaConfig.entry[DEFAULT_ENTRY_NAME] = [`./core/entry-client.js`];
 
             // add html-webpack-plugin
-            await this.addHtmlPlugin(spaConfig, router.baseUrl, watcherEnabled);
+            await this.addHtmlPlugin(spaConfig, watcherEnabled);
 
             // if skeleton provided, we need to create an entry
             if (build.skeleton && build.skeleton.enable) {

diff --git a/packages/lavas-core-vue/core/builder/dev-builder.js b/packages/lavas-core-vue/core/builder/dev-builder.js
@@ -139,7 +139,7 @@ export default class DevBuilder extends BaseBuilder {
         let clientCompiler; // compiler for client in ssr and spa
         let serverCompiler; // compiler for server in ssr
         let clientMFS;
-        let noop = () => {};
+        // let noop = () => {};
         let ssrEnabled = this.config.build.ssr;
 
         await this.routeManager.buildRoutes();

diff --git a/packages/lavas-core-vue/core/renderer.js b/packages/lavas-core-vue/core/renderer.js
@@ -32,21 +32,21 @@ export default class Renderer {
     }
 
     /**
-     * get template path
+     * get template name
      *
      * @return {string} template path
      */
-    getTemplatePath() {
-        return join(this.rootDir, `core/${this.getTemplateName()}`);
+    getTemplateName() {
+        return this.config.router.templateFile || TEMPLATE_HTML;
     }
 
     /**
-     * get template name
+     * get template path
      *
      * @return {string} template path
      */
-    getTemplateName() {
-        return this.config.router.templateFile || TEMPLATE_HTML;
+    getTemplatePath() {
+        return join(this.rootDir, `core/${this.getTemplateName()}`);
     }
 
     /**
@@ -55,16 +55,13 @@ export default class Renderer {
      * @param {string} base base url
      * @return {string} templateContent
      */
-    async getTemplate(base = '/') {
+    async getTemplate() {
         let templatePath = this.getTemplatePath();
         if (!await pathExists(templatePath)) {
             throw new Error(`${templatePath} required`);
         }
 
-        return templateUtil.server(
-            await readFile(templatePath, 'utf8'),
-            base
-        );
+        return templateUtil.server(await readFile(templatePath, 'utf8'));
     }
 
     /**
@@ -102,7 +99,7 @@ export default class Renderer {
 
         // copy index.template.html to dist/lavas/
         if (this.config.build.ssr) {
-            let templateContent = await this.getTemplate(this.config.router.base);
+            let templateContent = await this.getTemplate();
             let distTemplatePath = distLavasPath(
                 this.config.build.path,
                 this.getTemplateName()
@@ -155,7 +152,7 @@ export default class Renderer {
             this.serverBundle = JSON.parse(serverBundleContent);
         }
 
-        let templateContent = await this.getTemplate(this.config.router.base);
+        let templateContent = await this.getTemplate();
         if (this.template !== templateContent) {
             changed = true;
             templateChanged = true;
@@ -219,7 +216,7 @@ export default class Renderer {
                         return true;
                     },
                     runInNewContext: false,
-                    inject: false
+                    inject: true
                 }
             );
 

diff --git a/packages/lavas-core-vue/core/templates/client.html.tmpl b/packages/lavas-core-vue/core/templates/client.html.tmpl
diff --git a/packages/lavas-core-vue/core/templates/server.html.tmpl b/packages/lavas-core-vue/core/templates/server.html.tmpl
diff --git a/packages/lavas-core-vue/core/utils/template.js b/packages/lavas-core-vue/core/utils/template.js
@@ -5,71 +5,13 @@
  */
 
 import template from 'lodash.template';
-import fs from 'fs-extra';
-import path from 'path';
 
-const serverTemplatePath = fs.readFileSync(path.resolve(__dirname, '../templates/server.html.tmpl'));
-const clientTemplatePath = fs.readFileSync(path.resolve(__dirname, '../templates/client.html.tmpl'));
-
-function inner(customTemplate, templatePath, baseUrl) {
-    let useCustomOnlyFlag = false;
-    let renderMetaFlag = false;
-    let renderManifestFlag = false;
-    let renderEntryFlag = false;
-
-    let temp = template(customTemplate)({
-        useCustomOnly() {
-            useCustomOnlyFlag = true;
-            return '';
-        },
-        baseUrl,
-        renderMeta() {
-            renderMetaFlag = true;
-            return '';
-        },
-        renderManifest() {
-            renderManifestFlag = true;
-            return '';
-        },
-        renderEntry() {
-            renderEntryFlag = true;
-            return '@RENDER_ENTRY@';
-        }
-    });
-
-    if (useCustomOnlyFlag) {
-        return temp;
-    }
-
-    // render server/client template with flags
-    let real = template(templatePath)({
-        renderMetaFlag,
-        renderManifestFlag
-    });
-
-    // replace custom content into result
-    let customHead = '';
-    let customBodyBefore = '';
-    let customBodyAfter = '';
-    try {
-        customHead = temp.match(/<head>([\w\W]+)<\/head>/)[1];
-        if (renderEntryFlag) {
-            customBodyBefore = temp.match(/<body>([\w\W]+)@RENDER_ENTRY@/)[1];
-            customBodyAfter = temp.match(/@RENDER_ENTRY@([\w\W]+)<\/body>/)[1];
-        }
-    }
-    catch (e) {
-        // do nothing
-    }
-
-    real = real.replace('<!-- @CUSTOM_HEAD@ -->', customHead);
-    real = real.replace('<!-- @CUSTOM_BODY_BEFORE@ -->', customBodyBefore);
-    real = real.replace('<!-- @CUSTOM_BODY_AFTER@ -->', customBodyAfter);
-
-    return real;
+function inner(customTemplate, ssr) {
+    let temp = template(customTemplate)({ssr});
+    return temp.replace(/<</g, '<%').replace(/>>/g, '%>');
 }
 
 export default {
-    client: (customTemplate, baseUrl) => inner(customTemplate, clientTemplatePath, baseUrl),
-    server: (customTemplate, baseUrl) => inner(customTemplate, serverTemplatePath, baseUrl)
+    client: customTemplate => inner(customTemplate, false),
+    server: customTemplate => inner(customTemplate, true)
 };
diff --git a/packages/lavas-core-vue/package.json b/packages/lavas-core-vue/package.json
@@ -67,7 +67,7 @@
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.1",
     "super-json": "^2.2.0",
-    "sw-register-webpack-plugin": "^1.0.11",
+    "sw-register-webpack-plugin": "^1.0.15",
     "url-loader": "^0.5.9",
     "vue": "^2.5.2",
     "vue-loader": "13.0.2",

diff --git a/packages/lavas-core-vue/test/fixtures/core/index.html.tmpl b/packages/lavas-core-vue/test/fixtures/core/index.html.tmpl
@@ -1,10 +1,65 @@
-<html>
+<!DOCTYPE html>
+
+<% if (ssr) { %>
+<< meta = meta.inject() >>
+<html lang="zh_CN" data-vue-meta-server-rendered {{{ meta.htmlAttrs.text() }}}>
     <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        <%= renderMeta() %>
-        <%= renderManifest() %>
+
+        {{{ meta.title.text() }}}
+        {{{ meta.meta.text() }}}
+        {{{ meta.link.text() }}}
+        {{{ meta.style.text() }}}
+        {{{ meta.script.text() }}}
+        {{{ meta.noscript.text() }}}
+
+        <!-- Add to home screen for Android and modern mobile browsers -->
+        <link rel="manifest" href="{{ config.build.publicPath }}static/manifest.json?v={{ config.buildVersion }}">
+        <!-- Add to home screen for Safari on iOS -->
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    </head>
+    <body {{{ meta.bodyAttrs.text() }}}>
+        <!--vue-ssr-outlet-->
+        << if (isProd) { >>
+        <script>
+            window.onload = function () {
+                var script = document.createElement('script');
+                var firstScript = document.getElementsByTagName('script')[0];
+                script.type = 'text/javascript';
+                script.async = true;
+                script.src = '{{ config.build.publicPath }}sw-register.js?v=' + Date.now();
+                firstScript.parentNode.insertBefore(script, firstScript);
+            };
+        </script>
+        << } >>
+    </body>
+</html>
+<% } else { %>
+<html lang="zh_CN">
+    <head>
+        <title></title>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <!-- Add to home screen for Android and modern mobile browsers -->
+        <link rel="manifest" href="<<= htmlWebpackPlugin.options.config.build.publicPath >>static/manifest.json?v=<<= htmlWebpackPlugin.options.config.buildVersion >>">
+        <!-- Add to home screen for Safari on iOS -->
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+        << for (var jsFilePath of htmlWebpackPlugin.files.js) { >>
+            <link rel="preload" href="<<= jsFilePath >>" as="script">
+        << } >>
+        << for (var cssFilePath of htmlWebpackPlugin.files.css) { >>
+            <link rel="preload" href="<<= cssFilePath >>" as="style">
+        << } >>
     </head>
     <body>
-        <%= renderEntry() %>
+        <div id="app"></div>
     </body>
 </html>
+<% } %>