fix: update static frontend (#190)

This closes #187.

babel.config.js

@@ -5,5 +5,6 @@ module.exports = {
     plugins: [
         "@babel/plugin-proposal-class-properties",
         "@babel/transform-modules-commonjs",
+        "@babel/plugin-syntax-dynamic-import"
     ]
 }

package.json

@@ -31,6 +31,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.5.5",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/preset-typescript": "~7.3.3",
     "@commitlint/cli": "^8.0.0",
     "@commitlint/config-conventional": "^8.0.0",

packages/@best/cli/package.json

@@ -21,7 +21,6 @@
     "@best/compare": "4.0.0-alpha4",
     "@best/config": "4.0.0-alpha4",
     "@best/console-stream": "4.0.0-alpha4",
-    "@best/frontend": "4.0.0-alpha4",
     "@best/github-integration": "4.0.0-alpha4",
     "@best/runner": "4.0.0-alpha4",
     "@best/store": "4.0.0-alpha4",

packages/@best/cli/src/cli/index.ts

@@ -7,8 +7,7 @@ import { logError } from "@best/utils";
 import { runBest } from '../run_best';
 import { runCompare } from '../run_compare';
 import { getConfigs } from "@best/config";
-import { ProjectConfigs, FrozenProjectConfig, CliConfig, BenchmarkResultsSnapshot } from '@best/types';
-import { buildStaticFrontend } from '@best/frontend';
+import { ProjectConfigs, FrozenProjectConfig, CliConfig } from '@best/types';
 
 export function buildArgs(maybeArgv?: string[]): CliConfig {
     const parsedArgs = yargs(maybeArgv || process.argv.slice(2))
@@ -103,8 +102,13 @@ export async function runCLI(argsCLI: CliConfig, projects: string[]) {
         output.report(results);
 
         if (argsCLI.generateHTML) {
-            const benchmarkResults: BenchmarkResultsSnapshot[] = results;
-            await buildStaticFrontend(benchmarkResults, globalConfig, process.stdout);
+            try {
+                const { buildStaticFrontend } = await import('@best/frontend');
+                const projectConfig = configs[0];
+                await buildStaticFrontend(results, globalConfig, projectConfig, process.stdout);
+            } catch (err) {
+                throw new Error('You passed the `--generateHTML` flag, but `@best/frontend` is not a dependency. Make sure you include it as a dependency.');
+            }
         }
     }
 

packages/@best/frontend/package.json

@@ -52,6 +52,7 @@
     },
     "files": [
         "build/**/*.js",
-        "dist/**/*"
+        "dist/**/*",
+        "src/**/*"
     ]
 }

packages/@best/frontend/server/static/builder.ts

@@ -38,6 +38,8 @@ export const buildMockedDataFromApi = async (options: MockerOptions): Promise<{
 } | null> => {
     const db = loadDbFromConfig(options.config);
 
+    await db.migrate();
+
     const allProjects = await db.fetchProjects();
     const projects = allProjects.filter((proj): boolean => options.projectNames.includes(proj.name));
 

packages/@best/frontend/server/static/index.ts

@@ -2,16 +2,15 @@ import path from 'path'
 import fs from 'fs'
 import { promisify } from 'util'
 import { rollup } from 'rollup'
-import { BenchmarkResultsSnapshot, FrozenGlobalConfig } from '@best/types';
+import { BenchmarkResultsSnapshot, FrozenGlobalConfig, FrozenProjectConfig } from '@best/types';
 import { OutputStream } from '@best/console-stream';
 
-import rollupConfig from './rollup.config'
+import { buildRollupConfig } from './rollup.config'
 import html from './static-template.html'
 
 const asyncWrite = promisify(fs.writeFile);
 
-
-export const buildStaticFrontend = async (results: BenchmarkResultsSnapshot[], globalConfig: FrozenGlobalConfig, stream: NodeJS.WriteStream): Promise<boolean> => {
+export const buildStaticFrontend = async (results: BenchmarkResultsSnapshot[], globalConfig: FrozenGlobalConfig, projectConfig: FrozenProjectConfig, stream: NodeJS.WriteStream): Promise<boolean> => {
     if (! globalConfig.apiDatabase) { throw new Error('No database configured') }
 
     const outputStream = new OutputStream(stream, globalConfig.isInteractive);
@@ -26,12 +25,14 @@ export const buildStaticFrontend = async (results: BenchmarkResultsSnapshot[], g
         config: { apiDatabase: globalConfig.apiDatabase }
     }
 
+    const rollupConfig = buildRollupConfig(projectConfig);
+
     try {
         const build = await rollup(rollupConfig.inputOptions(options));
         await build.generate(rollupConfig.outputOptions());
         await build.write(rollupConfig.outputOptions());
 
-        const distDir = path.resolve(__dirname, '../../dist/static');
+        const distDir = path.resolve(projectConfig.benchmarkOutput, 'static');
 
         const indexPath = path.resolve(distDir, 'index.html');
         await asyncWrite(indexPath, html);

packages/@best/frontend/server/static/rollup.config.ts

@@ -7,28 +7,29 @@ import replace from 'rollup-plugin-replace';
 import { terser } from 'rollup-plugin-terser';
 import { bestMocker, MockerOptions } from './mocker'
 import * as rollup from 'rollup';
+import { FrozenProjectConfig } from '@best/types';
 
-const rollupConfig: {
+export const buildRollupConfig = (projectConfig: FrozenProjectConfig): {
     inputOptions: (options: MockerOptions) => rollup.InputOptions;
     outputOptions: () => rollup.OutputOptions;
-} = {
-    inputOptions: (options): rollup.InputOptions => ({
-        input: path.resolve(__dirname, '../../src/index.js'),
-        plugins: [
-            bestMocker(options),
-            replace({
-                'process.env.NODE_ENV': JSON.stringify('production')
-            }),
-            lwc(),
-            resolve(),
-            commonjs(),
-            terser()
-        ]
-    }),
-    outputOptions: (): rollup.OutputOptions => ({
-        file: path.resolve(__dirname, '../../dist/static/bundle.js'),
-        format: 'iife'
-    })
-}
-
-export default rollupConfig;
+} => {
+    return {
+        inputOptions: (options): rollup.InputOptions => ({
+            input: path.resolve(__dirname, '../../src/index.js'),
+            plugins: [
+                bestMocker(options),
+                replace({
+                    'process.env.NODE_ENV': JSON.stringify('production')
+                }),
+                lwc(),
+                resolve(),
+                commonjs(),
+                terser()
+            ]
+        }),
+        outputOptions: (): rollup.OutputOptions => ({
+            file: path.resolve(projectConfig.benchmarkOutput, 'static/bundle.js'),
+            format: 'iife'
+        })
+    }
+}

packages/@best/frontend/server/static/static-template.html.ts

@@ -18,6 +18,6 @@ export default `<!DOCTYPE html>
         <script src="bundle.js"></script>
     </head>
     <body>
-        <my-app></my-app>
+        <view-app></view-app>
     </body>
 </html>`

yarn.lock

@@ -341,6 +341,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-syntax-dynamic-import@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.2.0.tgz#69c159ffaf4998122161ad8ebc5e6d1f55df8612"
+  integrity sha512-mVxuJ0YroI/h/tbFTPGZR8cv6ai+STMKNBq0f8hFxsxWjl94qqhsb+wXbpNMDPU3cfR1TIsVFzU3nXyZMqyK4w==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
 "@babel/plugin-syntax-object-rest-spread@^7.0.0", "@babel/plugin-syntax-object-rest-spread@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.2.0.tgz#3b7a3e733510c57e820b9142a6579ac8b0dfad2e"