feat: reload routes hmr, gatsby

core/core/src/document.ts

@@ -331,28 +331,30 @@ export interface Store {
   updateStory: (story: Story) => void;
 }
 
-export const defaultStore: Store & { _observers: StoreObserver[] } = {
-  _observers: [],
-  config: {},
-  components: {},
-  docs: {},
-  packages: {},
-  stories: {},
-  addObserver: function(observer: StoreObserver) {
-    this._observers.push(observer);
-  },
-  removeObserver: function(observer: StoreObserver) {
-    this._observers = this._observers.filter(o => o !== observer);
-  },
-  updateStory: function(story: Story) {
+class DefaultStore {
+  private observers: StoreObserver[] = [];
+  config = {};
+  components = {};
+  docs = {};
+  packages = {};
+  stories = {};
+  addObserver = (observer: StoreObserver) => {
+    this.observers.push(observer);
+  };
+  removeObserver = (observer: StoreObserver) => {
+    this.observers = this.observers.filter(o => o !== observer);
+  };
+  updateStory = (story: Story) => {
     if (story) {
       if (story.id) {
         this.stories = {
           ...this.stories,
           [story.id]: story,
         };
-        this._observers.forEach(o => o(story));
+        this.observers.forEach(o => o(story));
       }
     }
-  },
-};
+  };
+}
+
+export const getDefaultStore = (): Store => new DefaultStore();

core/store/src/live_store.ts

@@ -1,14 +1,14 @@
 import { loadStore } from './serialization/load-store';
 import { BroadcastStore } from './serialization/BroadcastStore';
-import { Store, defaultStore } from '@component-controls/core';
+import { Store, getDefaultStore } from '@component-controls/core';
 
 const bundle = require('@component-controls/loader/story-store-data.js');
 
 /**
  * store variable, automatically filled with stories.
  */
 export const store: Store = new BroadcastStore(
-  bundle ? loadStore(bundle) : defaultStore,
+  bundle ? loadStore(bundle) : getDefaultStore(),
 );
 
 if (bundle) {

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

@@ -1,6 +1,6 @@
 import {
   Store,
-  defaultStore,
+  getDefaultStore,
   StoryProps,
   Story,
   Document,
@@ -17,8 +17,10 @@ import {
 import { LoadingStore } from '@component-controls/loader';
 import { transformControls } from './transform-controls';
 
+export { LoadingStore };
+
 export const loadStore = (store: LoadingStore): Store => {
-  const globalStore: Store = { ...defaultStore };
+  const globalStore: Store = getDefaultStore();
   try {
     const {
       error,
@@ -28,7 +30,6 @@ export const loadStore = (store: LoadingStore): Store => {
       config = {},
       buildConfig = {},
     } = store;
-
     if (stores) {
       globalStore.config = deepMergeArrays(
         buildConfig,

core/store/src/serialization/store-local-storage.ts

@@ -2,7 +2,7 @@ import {
   Store,
   Story,
   getComponentName,
-  defaultStore,
+  getDefaultStore,
   Stories,
 } from '@component-controls/core';
 
@@ -57,5 +57,5 @@ export const readStore = (stories: Stories): Store => {
       }, {}),
     };
   }
-  return defaultStore;
+  return getDefaultStore();
 };

core/store/src/state/context/store.tsx

@@ -5,14 +5,14 @@ import React, {
   useState,
   useEffect,
 } from 'react';
-import { Store, defaultStore, PackageInfo } from '@component-controls/core';
+import { Store, getDefaultStore, PackageInfo } from '@component-controls/core';
 
 interface StoreContextProps {
   store: Store;
 }
 
 export const StoreContext = createContext<StoreContextProps>({
-  store: defaultStore,
+  store: getDefaultStore(),
 });
 
 export const StoreContextProvider: FC<{ store: Store }> = ({

core/store/src/state/recoil/store.ts

@@ -1,9 +1,9 @@
 import { atom, useRecoilValue, selector } from 'recoil';
-import { Store, defaultStore, PackageInfo } from '@component-controls/core';
+import { Store, getDefaultStore, PackageInfo } from '@component-controls/core';
 
 export const storeState = atom<Store>({
   key: 'store',
-  default: defaultStore,
+  default: getDefaultStore(),
 });
 
 /**

core/store/src/static_store.ts

@@ -1,8 +1,8 @@
-import { Store, defaultStore } from '@component-controls/core';
+import { Store, getDefaultStore } from '@component-controls/core';
 import { BroadcastStore } from './serialization/BroadcastStore';
 
 /**
  * store variable, automatically filled with stories.
  */
-export const store: Store = new BroadcastStore(defaultStore);
+export const store: Store = new BroadcastStore(getDefaultStore());
 (store as BroadcastStore).readData();

core/webpack-compile/src/index.ts

@@ -4,48 +4,60 @@ import {
   CompileResults,
   WatchProps,
 } from '@component-controls/webpack-configs';
-import { runCompiler } from './utilities';
+import { runCompiler, CompilerCallbackFn } from './utilities';
+
+export { CompilerCallbackFn };
 
 /**
  * compile the stories with webpack
  * returns the stories store object
  */
-export const compile = ({
-  webPack,
-  presets,
-  configPath,
-  staticFolder,
-  distFolder,
-  bundleName,
-}: CompileProps): Promise<CompileResults> => {
-  console.log(
-    chalk.bgRgb(244, 147, 66)('@start compilation'),
-    'optimized build',
-  );
-  return runCompiler((compiler, callback) => compiler.run(callback), {
+export const compile = (
+  {
     webPack,
-    mode: 'production',
     presets,
     configPath,
     staticFolder,
     distFolder,
     bundleName,
-  });
+  }: CompileProps,
+  callback?: CompilerCallbackFn,
+): Promise<CompileResults> => {
+  console.log(
+    chalk.bgRgb(244, 147, 66)('@start compilation'),
+    'optimized build',
+  );
+  return runCompiler(
+    (compiler, callback) => compiler.run(callback),
+    {
+      webPack,
+      mode: 'production',
+      presets,
+      configPath,
+      staticFolder,
+      distFolder,
+      bundleName,
+    },
+    callback,
+  );
 };
 
 /**
  * compile the stories with webpack and launch watching for changes
  * returns the stories store object
  */
-export const watch = ({
-  webPack,
-  presets,
-  configPath,
-  watchOptions,
-  staticFolder,
-  distFolder,
-  bundleName,
-}: WatchProps): Promise<CompileResults> => {
+export const watch = (
+  {
+    webPack,
+    presets,
+    configPath,
+    watchOptions,
+    staticFolder,
+    distFolder,
+    bundleName,
+  }: WatchProps,
+  callback?: CompilerCallbackFn,
+): Promise<CompileResults> => {
   console.log(
     chalk.bgRgb(244, 147, 66)('@start compilation'),
     'development mode watch',
@@ -61,5 +73,6 @@ export const watch = ({
       distFolder,
       bundleName,
     },
+    callback,
   );
 };

core/webpack-compile/src/utilities.ts

@@ -28,6 +28,11 @@ export type CompileRunProps = CompileProps & {
   mode: Configuration['mode'];
 };
 
+/**
+ * callback function to monitor new documents/deleted documents
+ */
+export type CompilerCallbackFn = (results: CompileResults) => void;
+
 const createConfig = (options: CompileRunProps): webpack.Configuration => {
   const {
     webPack,
@@ -101,6 +106,7 @@ export const runCompiler = (
   ) => void,
 
   props: CompileRunProps,
+  callback?: CompilerCallbackFn,
 ): Promise<CompileResults> => {
   return new Promise(resolve => {
     const compiler = webpack(createConfig(props));
@@ -148,7 +154,10 @@ module.exports = ${JSON.stringify({
         ),
         bundleName,
       );
-      resolve({ bundleName, stats });
+      if (callback) {
+        callback({ bundleName, stats, store });
+      }
+      resolve({ bundleName, stats, store });
     });
   });
 };

core/webpack-configs/src/compilation.ts

@@ -1,5 +1,6 @@
 import path from 'path';
 import * as webpack from 'webpack';
+import { LoadingStore } from '@component-controls/store';
 import { RuleTypes } from './types';
 
 /**
@@ -41,6 +42,10 @@ export interface CompileResults {
    * the webpack stats object
    */
   stats: webpack.Stats;
+  /**
+   * the stories store
+   */
+  store?: LoadingStore;
 }
 
 /**

examples/starter/src/docs/home-page.mdx

@@ -0,0 +1,52 @@
+---
+title: Homes
+author: atanasster
+---
+
+import { jsx, Flex, Grid, Box, Heading, Text, Button, Card, Divider, Image } from 'theme-ui';
+import { Link } from '@component-controls/components';
+
+export const BoxItem = ({ children, title, action, ...rest }) => (
+  <Card sx={{ overflow: 'hidden', py: 4, height: '360px', justifyContent: 'space-between', bg: 'gray', ...rest }}>
+    <Box>
+      <Heading sx={{ textAlign: 'center' }} as="h2">{title}</Heading>
+      <p>{children}</p>
+    </Box>  
+    {action}
+  </Card>  
+);
+
+<Flex sx={{ py: 4, flexDirection: 'column',  minHeight: '350px', alignItems: 'center', justifyContent: 'space-between', bg: 'primary', color: 'background' }}>
+  <Flex sx={{ flexDirection: 'column', alignItems: 'center',  maxWidth: '600px' }}>
+    <Heading as="h1">component-controls</Heading>
+    <Heading sx={{ py: 3, textAlign: 'center', px: 1 }} as="h3">
+      Start documenting your components with <Link sx={{ color: 'background' }} aria-label="create mdx stories" href="/tutorial/mdx-stories">MDX</Link> and <Link sx={{ color: 'background' }} aria-label="create esm stories" href="/tutorial/esmodules-stories">ESM</Link>.
+    </Heading>  
+    <Text sx={{ py: 1, textAlign: 'center' }}>
+      From <Link sx={{ color: 'background' }} aria-label="create documents" href="/tutorial/reference/document">documentation</Link> and <Link sx={{ color: 'background' }} aria-label="create stories" href="/tutorial/reference/story">stories</Link> for your react components, all the way to a full-featured CMS with blogs, tutorials, tags, authors and full-text search: component-controls compbines the best of breed from all pre-existing tools in the industry into a flexible platform.
+    </Text>
+  </Flex>  
+  <Button aria-label="visit tutorial" as={Link} href='/tutorial/'>Start learning</Button>
+</Flex>  
+
+
+<Divider sx={{ my: 4 }}/>
+<Flex sx={{ flexDirection: 'column', alignItems: 'center'}}>
+  <Heading as="h1" sx={{ px: 1, textAlign: 'center' }}>Choose your favorite site generator</Heading>
+  <Grid
+    sx={{
+      m: 4,
+      gridTemplateColumns: ['1fr', '1fr', '33.3% 33.3% 33.3%'],
+    }}
+  >
+    <BoxItem title="Start with gatsby" action={<Button aria-label="start with gatsby" as={Link} href='/tutorial/getting-started/gatsby'>get started...</Button>}>
+      Go beyond static sites: build blogs, e-commerce sites, full-blown apps, and more with Gatsby.
+    </BoxItem>
+    <BoxItem title="Start with next.js" action={<Button aria-label="start with nextjs" as={Link} href='/tutorial/getting-started/nextjs'>get started...</Button>}>
+      Production grade react applications: build static and dynamic websites and web applications that scale.
+    </BoxItem>
+    <BoxItem title="Start with storybook" action={<Button aria-label="start with storybook" as={Link} href='/tutorial/getting-started/storybook'>get started...</Button>}>
+      User interface development environment and playground: create components independently and showcase components interactively in an isolated development environment.
+    </BoxItem>
+  </Grid>
+</Flex>