feat: add build-time error saving

core/core/src/document.ts

@@ -293,6 +293,10 @@ export const CURRENT_STORY = '.';
  * store of stories information in memory after the loader is applied
  */
 export interface Store {
+  /**
+   * build-time error string
+   */
+  error?: string;
   /**
    * global configuration for config file
    */

core/loader/src/store.ts

@@ -11,6 +11,11 @@ import {
 } from '@component-controls/instrument';
 
 export interface LoadingStore {
+  /**
+   * build-time error
+   */
+  error?: string;
+
   /**
    * global configuration from project config file
    */

core/store/src/create-pages/pages-paths.ts

@@ -40,8 +40,8 @@ export const getHomePages = (store: Store): DocHomePagesPath[] => {
   const { pages = {} } = store?.config || {};
   if (pages) {
     const docs = Object.keys(store.docs);
-    const paths: DocHomePagesPath[] = Object.keys(pages).map(
-      (type: DocType) => {
+    const paths: DocHomePagesPath[] = Object.keys(pages)
+      .map((type: DocType) => {
         const page = pages[type];
         const path = getDocTypePath(page) as string;
 
@@ -66,8 +66,8 @@ export const getHomePages = (store: Store): DocHomePagesPath[] => {
           docId,
           storyId,
         };
-      },
-    );
+      })
+      .filter(({ path }) => path);
     return paths;
   }
   return [];

core/store/src/serialization/load-store.ts

@@ -23,6 +23,7 @@ export const loadStore = (store: LoadingStore): Store => {
   const globalStore: Store = { ...defaultStore };
   try {
     const {
+      error,
       stores,
       packages: loadedPackages,
       components: loadedComponents,
@@ -77,6 +78,7 @@ export const loadStore = (store: LoadingStore): Store => {
           });
         }
       });
+      globalStore.error = error;
       globalStore.packages = loadedPackages;
       globalStore.components = loadedComponents;
       const { storySort } = globalStore.config || {};

core/webpack-compile/src/utilities.ts

@@ -5,6 +5,7 @@ import webpack, {
   HotModuleReplacementPlugin,
 } from 'webpack';
 import path from 'path';
+import fs from 'fs';
 const chalk = require('chalk');
 import LoaderPlugin from '@component-controls/loader/plugin';
 import {
@@ -96,24 +97,40 @@ export const runCompiler = (
 
   props: CompileRunProps,
 ): Promise<CompileResults> => {
-  return new Promise((resolve, reject) => {
+  return new Promise(resolve => {
     const compiler = webpack(createConfig(props));
     run(compiler, (err, stats) => {
+      const bundleName = path.join(
+        stats.compilation.outputOptions.path,
+        stats.compilation.outputOptions.filename,
+      );
+      const bailError = (error: string) => {
+        fs.writeFileSync(
+          bundleName,
+          `
+module.exports = ${JSON.stringify({
+            stores: [],
+            packages: [],
+            components: [],
+            error,
+          })}
+
+          `,
+        );
+        console.error(error);
+        return resolve({ bundleName, stats }); //reject(error);
+      };
       if (err) {
-        return reject(err);
+        return bailError(err.toString());
       }
       if (stats.hasErrors() || stats.hasWarnings()) {
         const error = stats.toString({
           errorDetails: true,
           warnings: true,
         });
-        return reject(error);
+        return bailError(error);
       }
       const { store } = require('@component-controls/loader/store');
-      const bundleName = path.join(
-        stats.compilation.outputOptions.path,
-        stats.compilation.outputOptions.filename,
-      );
       console.log(
         chalk.bgRgb(
           244,

integrations/gatsby-theme-stories/src/gatsby-node.ts

@@ -34,6 +34,7 @@ exports.createPages = async (
       : await compile(config);
   if (bundleName) {
     const store: Store = loadStore(require(bundleName));
+
     //home page
     const { docId = null, type = null } = getIndexPage(store) || {};
     createPage({

ui/app/src/App/App.tsx

@@ -11,7 +11,7 @@ import { SEO } from '../SEO';
 import { Header } from '../Header';
 import { Footer } from '../Footer';
 import { useAnalytics } from './useAnalytics';
-
+import { AppError } from '../AppError';
 export interface AppProps {
   /**
    * page title
@@ -47,13 +47,13 @@ export const App: FC<AppProps> = ({ title = '', children }) => {
   const pageTitle = titleParts[titleParts.length - 1];
   const pageDescription = useDocDescription(doc);
   useAnalytics();
-
   return (
     <Fragment>
       <SEO title={pageTitle} description={pageDescription} />
       <SkipLinks items={items} />
       <Box variant="app">
         <Header toolbar={toolbar} />
+        <AppError error={store.error} />
         {children}
         <Footer />
       </Box>

ui/app/src/AppError/AppError.stories.tsx

@@ -0,0 +1,23 @@
+/** @jsx jsx */
+import { jsx } from 'theme-ui';
+import { ControlTypes } from '@component-controls/core';
+import { AppError, AppErrorProps } from './AppError';
+
+export default {
+  title: 'Application/AppError',
+  component: AppError,
+};
+
+export const overview = ({ error }: AppErrorProps) => (
+  <AppError error={error} />
+);
+
+overview.controls = {
+  error: {
+    type: ControlTypes.TEXT,
+    rows: 4,
+    value: `some error
+text
+`,
+  },
+};

ui/app/src/AppError/AppError.tsx

@@ -0,0 +1,23 @@
+/** @jsx jsx */
+import { FC } from 'react';
+import { jsx, Box } from 'theme-ui';
+
+export interface AppErrorProps {
+  /**
+   * Error text, "apperror" theme key.
+   */
+  error?: string;
+}
+/**
+ * application build-time error container
+ */
+export const AppError: FC<AppErrorProps> = ({ error }) => {
+  return error ? (
+    <Box
+      variant="apperror"
+      dangerouslySetInnerHTML={{
+        __html: error.split('\n').join('<br />'),
+      }}
+    />
+  ) : null;
+};

ui/app/src/AppError/index.ts

@@ -0,0 +1 @@
+export * from './AppError';

ui/components/src/ThemeContext/theme.ts

@@ -60,6 +60,7 @@ export type ControlsTheme = {
   documentitem: Record<string, ThemeUIStyleObject>;
   taglist: Record<string, ThemeUIStyleObject>;
   appsidebarpage: Record<string, ThemeUIStyleObject>;
+  apperror: ThemeUIStyleObject;
   container: Record<string, ThemeUIStyleObject>;
   documentslist: Record<string, ThemeUIStyleObject>;
 } & Theme;
@@ -1002,6 +1003,12 @@ export const theme: ControlsTheme = {
       position: 'relative',
     },
   },
+  apperror: {
+    bg: 'black',
+    color: 'red',
+    p: 4,
+    fontFamily: 'monospace',
+  },
   container: {
     container: {},
     pagination: { py: 4 },