chore: hmr load store

core/core/src/configuration.ts

@@ -29,6 +29,20 @@ export type PageTabs = TabConfiguration[];
 
 export type DocType = 'story' | 'blog' | 'page' | 'tags' | 'author' | string;
 
+export interface PageLayout {
+  /**
+   * whether to add navigation sidebar to the page
+   */
+  navSidebar?: boolean;
+  /**
+   * whether to add conext sidebar to navigate the sections of the current document
+   */
+  contextSidebar?: boolean;
+  /**
+   * whether to take a fullpage theme option
+   */
+  fullPage?: boolean;
+}
 export interface PageConfiguration {
   /**
    * base url path for the page
@@ -44,27 +58,16 @@ export interface PageConfiguration {
    * label - used for menu labels
    */
   label?: string;
-
-  /**
-   * whether to take a fullpage theme option
-   */
-  fullPage?: boolean;
-
   /**
    * whether to have an index home page for the doc type.
    * if false, will show the first document of the doc type as the home page.
    */
   indexHome?: boolean;
 
   /**
-   * whether to add navigation sidebar to the page
+   * page layout - sidebars, full width
    */
-  navSidebar?: boolean;
-
-  /**
-   * whether to add conext sidebar to navigate the sections of the current document
-   */
-  contextSidebar?: boolean;
+  layout?: PageLayout;
 
   /**
    * whether to add to the top navigation menu
@@ -233,8 +236,10 @@ export const defaultRunConfig: RunConfiguration = {
   pages: {
     story: {
       label: 'Docs',
-      navSidebar: true,
-      contextSidebar: true,
+      layout: {
+        navSidebar: true,
+        contextSidebar: true,
+      },
       topMenu: true,
       tabs: [
         { title: 'Documentation', type: 'ClassicPage' },
@@ -243,7 +248,9 @@ export const defaultRunConfig: RunConfiguration = {
     },
     blog: {
       label: 'Blog',
-      contextSidebar: true,
+      layout: {
+        contextSidebar: true,
+      },
       topMenu: true,
       indexHome: true,
     },

core/core/src/document.ts

@@ -1,7 +1,7 @@
 import { CodeLocation, PackageInfo, StoryRenderFn } from './utility';
 import { StoryComponent } from './components';
 import { ComponentControls } from './controls';
-import { RunConfiguration, DocType } from './configuration';
+import { RunConfiguration, DocType, PageLayout } from './configuration';
 /**
  * an identifier/variable.argument in the source code
  */
@@ -74,10 +74,43 @@ export interface SmartControls {
    */
   exclude?: string[];
 }
+
+/**
+ * story prooperties that can be inherited from the document, or each story can have its properties
+ */
+
+export interface StoryProps {
+  /**
+   * id for component associated with the story
+   */
+  component?: string | object;
+
+  /**
+   * multiple components option
+   */
+  subcomponents?: {
+    [key: string]: string | object;
+  };
+
+  /**
+   * object of key/value pairs specifying the controls for the story
+   */
+  controls?: ComponentControls;
+
+  /**
+   * "smart" controls options
+   */
+  smartControls?: SmartControls;
+  /**
+   * array of wrapper functions (decorators) to be called when rendering each individual story.
+   */
+  decorators?: StoryRenderFn[];
+}
+
 /**
  * Story interface - usually extracted by the AST instrumenting loader
  */
-export interface Story {
+export type Story = {
   /**
    * name of the Story.
    */
@@ -121,33 +154,7 @@ export interface Story {
    * optional story subtitle property
    */
   subtitle?: string;
-
-  /**
-   * id for component associated with the story
-   */
-  component?: string | object;
-
-  /**
-   * multiple components option
-   */
-  subcomponents?: {
-    [key: string]: string | object;
-  };
-
-  /**
-   * object of key/value pairs specifying the controls for the story
-   */
-  controls?: ComponentControls;
-
-  /**
-   * "smart" controls options
-   */
-  smartControls?: SmartControls;
-  /**
-   * array of wrapper functions (decorators) to be called when rendering each individual story.
-   */
-  decorators?: StoryRenderFn[];
-}
+} & StoryProps;
 
 /**
  * map of stories. The id is compatible with storybook's story ids
@@ -162,7 +169,7 @@ export const defDocType: DocType = 'story';
  * For MDX files, fromtmatter is used to declare the document properties.
  * For ESM (ES Modules) documentation files, the default export is used.
  */
-export interface Document {
+export type Document = {
   /**
    * title of the document. If no 'route' parameter is specifified, the title is used to generate the document url.
    * This is the only required field, to show the document in the menu structures.
@@ -181,43 +188,9 @@ export interface Document {
   route?: string;
 
   /**
-   * id for component associated with the stories file
+   * page layout - sidebars, full width
    */
-  component?: string | object;
-
-  /**
-   * multiple components option
-   */
-  subcomponents?: Record<string, Document['component']>;
-
-  /**
-   * array of wrapper functions (decorators) to be called when rendering each individual story.
-   */
-  decorators?: StoryRenderFn[];
-
-  /**
-   * object of key/value pairs specifying the controls for the stories file
-   * this will apply to all the stories in the file
-   */
-  controls?: ComponentControls;
-
-  /**
-   * if true, will display the documentation page full size (pagecontainer.full theme variant)
-   * the default value is from the doc type configuration
-   */
-  fullPage?: boolean;
-
-  /**
-   * whether to add navigation sidebar to the page
-   * the default value is from the doc type configuration
-   */
-  navSidebar?: boolean;
-
-  /**
-   * whether to add conext sidebar to navigate the sections of the page
-   * the default value is from the doc type configuration
-   */
-  contextSidebar?: boolean;
+  layout?: PageLayout;
 
   /**
    *  optional date the document was created. If not assigned, the instrumentation process will use birthtime
@@ -294,7 +267,7 @@ export interface Document {
    * custom prop set by mdxjs
    */
   isMDXComponent?: boolean;
-}
+} & StoryProps;
 
 export const dateToLocalString = (date?: Date): string =>
   date

core/loader/src/loader.ts

@@ -23,7 +23,7 @@ module.exports = async function() {
   if (store?.doc) {
     console.log(chalk.bgRgb(244, 147, 66)('@loaded: '), filePath);
     if (store.stories && store.components && store.packages) {
-      addStoriesDoc(filePath, {
+      addStoriesDoc(filePath, context._compilation.records.hash, {
         stories: store.stories,
         components: store.components,
         packages: store.packages,

core/loader/src/runtimeLoader.ts

@@ -27,5 +27,9 @@ module.exports = function(content: string) {
     store.buildConfig,
     `__COMPILATION_HASH__${params.compilationHash}`,
   );
+  //add dependencies for HMR
+  // stories.forEach(story =>
+  //   context.addDependency(path.normalize(story.absPath)),
+  // );
   return content;
 };

core/loader/src/store.ts

@@ -42,6 +42,7 @@ export interface LoadingStore {
    */
   stores: (Partial<Pick<LoadingDocStore, 'stories' | 'doc'>> & {
     filePath: string;
+    hash?: string;
   })[];
 
   getDocs: (docType: DocType) => Pages;
@@ -248,7 +249,11 @@ export const reserveStories = (filePaths: string[]) => {
 export const removeStoriesDoc = (filePath: string) => {
   store.stores = store.stores.filter(s => s.filePath !== filePath);
 };
-export const addStoriesDoc = (filePath: string, added: LoadingDocStore) => {
+export const addStoriesDoc = (
+  filePath: string,
+  hash: string,
+  added: LoadingDocStore,
+) => {
   const { components, packages, stories, doc } = added;
   if (!doc) {
     throw new Error(`Invalid store with no document ${filePath}`);
@@ -270,7 +275,8 @@ export const addStoriesDoc = (filePath: string, added: LoadingDocStore) => {
   if (storeStore) {
     storeStore.stories = stories;
     storeStore.doc = doc;
+    storeStore.hash = hash;
   } else {
-    store.stores.push({ filePath, stories, doc });
+    store.stores.push({ filePath, hash, stories, doc });
   }
 };

core/store/src/Store/BroadcastStore.ts

@@ -1,16 +1,18 @@
 import { BroadcastChannel } from 'broadcast-channel';
-import { MessageType, UPDATE_STORY_MSG, StoreOptions } from '../types';
-import { Store } from './Store';
+import { StoriesStore } from '@component-controls/core';
+import { LoadingStore } from '@component-controls/loader';
+import { MessageType, UPDATE_STORY_MSG } from '../types';
+import { HMRStore } from './HMRStore';
 import { readStore, updateStory } from '../serialization/StoreStorage';
 
 export { BroadcastChannel };
 
-export class BroadcastStore extends Store {
+export class BroadcastStore extends HMRStore {
   private moduleId: number;
   private channel: BroadcastChannel | undefined;
 
-  constructor(options?: StoreOptions) {
-    super(options);
+  constructor(store?: LoadingStore) {
+    super(store);
     this.moduleId = Math.random();
     this.channel = new BroadcastChannel<MessageType>(UPDATE_STORY_MSG, {
       type: 'localstorage',
@@ -24,7 +26,13 @@ export class BroadcastStore extends Store {
       }
     };
   }
-
+  /**
+   * internal set store, use for testing with mockup store.
+   */
+  setStore = (store?: StoriesStore) => {
+    this.loadedStore = store;
+    this.notifyObservers();
+  };
   private readData = (storyId?: string, propName?: string) => {
     this.setStore(readStore(this.loadedStore, storyId, propName));
   };

core/store/src/Store/HMRStore.ts

@@ -0,0 +1,15 @@
+import { LoadingStore } from '@component-controls/loader';
+import { Store } from './Store';
+import { loadStoryStore } from '../serialization/load-store';
+import { StoryStore } from '../types';
+
+export class HMRStore extends Store {
+  constructor(store?: LoadingStore) {
+    super(store ? loadStoryStore(store) : undefined);
+  }
+
+  hmr = (store?: LoadingStore): StoryStore => {
+    console.log(store);
+    return new HMRStore(store);
+  };
+}

core/store/src/Store/Store.ts

@@ -12,7 +12,7 @@ import {
   getComponentName,
 } from '@component-controls/core';
 
-import { StoreObserver, StoryStore, StoreOptions } from '../types';
+import { StoreObserver, StoryStore } from '../types';
 
 export { StoreObserver, StoryStore };
 
@@ -33,8 +33,7 @@ export class Store implements StoryStore {
   /**
    * create a store with options
    */
-  constructor(options?: StoreOptions) {
-    const { store } = options || {};
+  constructor(store?: StoriesStore) {
     this.loadedStore = store;
     this.observers = [];
     this.initDocs();
@@ -109,14 +108,6 @@ export class Store implements StoryStore {
     }
   };
 
-  /**
-   * internal set store, use for testing with mockup store.
-   */
-  setStore = (store?: StoriesStore) => {
-    this.loadedStore = store;
-    this.notifyObservers();
-  };
-
   /**
    * returns an instance of the store
    */

core/store/src/live_store.ts

@@ -1,18 +1,14 @@
 import { BroadcastStore } from './Store/BroadcastStore';
-import { loadStoryStore } from './serialization/load-store';
+
 import { saveStore } from './serialization/StoreStorage';
 
 export * from './Store/Store';
 
 /**
  * store variable, automatically filled with stories.
  */
-export const store = new BroadcastStore();
-
-const stores = loadStoryStore(
+export const store = new BroadcastStore(
   require('@component-controls/loader/story-store-data.js'),
 );
-if (stores) {
-  store.setStore(stores);
-  saveStore(stores);
-}
+store.notifyObservers();
+saveStore(store);