feat: hmr update

core/store/README.md

@@ -2,14 +2,10 @@
 
 -   [Overview](#overview)
 -   [Installation](#installation)
--   [API](#api)
-    -   [Store](#store)
-    -   [StoreOptions](#storeoptions)
-    -   [StoreObserver](#storeobserver)
 
 # Overview
 
-Utility class to abstract loading the stories store from the webpack loader and provides an interface to access the store. Will also share the store accross bundles using localStorage and broadcastig messages.
+Utility classes to abstract loading the stories store from the webpack loader and provides an interface to access the store. Will also share the store accross bundles using localStorage and broadcastig messages.
 
 # Installation
 
@@ -19,73 +15,3 @@ This package is usually installed as part of the @component-controls package, bu
 $ npm install @component-controls/store --save-dev
 ```
 
-# API
-
-<tsdoc-typescript files="./src/types.ts" entry="./src/Store/Store.ts"/>
-
-<!-- START-TSDOC-TYPESCRIPT -->
-
-## Store
-
-Store class used to query the stories and exchange information between processes
-
-_defined in [@component-controls/store/src/Store/Store.ts](https://github.com/ccontrols/component-controls/tree/master/core/store/src/Store/Store.ts#L36)_
-
-
-
-### properties
-
-| Name                    | Type                                                                                                                                        | Description                                                                                                           |
-| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
-| `constructor*`          | **function** constructor                                                                                                                    | create a store with options                                                                                           |
-| `config*`               | **function** config                                                                                                                         | returns the run time configuration object.                                                                            |
-| `pages*`                | **function** pages                                                                                                                          | returns all pages(documents) in the store                                                                             |
-| `addObserver*`          | **function** addObserver(`observer`\*: [StoreObserver](#storeobserver)): number;                                                            | add observer callback function                                                                                        |
-| `getFirstDocument*`     | **function** getFirstDocument(`type`\*: [DocType](#doctype)): string \| undefined;                                                          |                                                                                                                       |
-| `getNextPage*`          | **function** getNextPage(`type`\*: [DocType](#doctype) \| undefined, `docId`\*: string): [Document](#document) \| undefined;                | returns the next page of the same type.                                                                               |
-| `getPageList*`          | **function** getPageList(`type`\*: [DocType](#doctype)): [Pages](#pages);                                                                   | returns all the documents/pages of a certain type.                                                                    |
-| `getPagePath*`          | **function** getPagePath(`type`\*: [DocType](#doctype) \| undefined, `name`\*: string, `activeTab`: string): string;                        | returns the url path to a document.                                                                                   |
-| `getPagesByCategory*`   | **function** getPagesByCategory(`category`\*: string, `value`: any): [Pages](#pages);                                                       | returns all the documents/pages of a certain category value.                                                          |
-| `getPrevPage*`          | **function** getPrevPage(`type`\*: [DocType](#doctype) \| undefined, `docId`\*: string): [Document](#document) \| undefined;                | returns the previous page of the same type.                                                                           |
-| `getStore*`             | **function** getStore(): [StoriesStore](#storiesstore);                                                                                     | returns an instance of the store                                                                                      |
-| `getStory*`             | **function** getStory(`storyId`\*: string): [Story](#story);                                                                                | given a story id return a story from the store                                                                        |
-| `getStoryDoc*`          | **function** getStoryDoc(`name`\*: string): [Document](#document);                                                                          | given a story doc file title, return a story doc file from the store                                                  |
-| `getStoryPath*`         | **function** getStoryPath(`storyId`\*: string, `activeTab`: string): string;                                                                | returns the url path to a story.                                                                                      |
-| `getUniquesByCategory*` | **function** getUniquesByCategory(`category`\*: string): \[key: string]: number;                                                            | returns all the unique category values (and their cound) for a category field.                                        |
-| `initDocs*`             | **function** initDocs(): void;                                                                                                              | sort documents if a sortfunction is provided. separate docs and blogs                                                 |
-| `removeObserver*`       | **function** removeObserver(`observer`\*: [StoreObserver](#storeobserver)): **function** (`storyId`: string, `propName`: string): void;\[]; | remove installed observer callback function                                                                           |
-| `setStore*`             | **function** setStore(`store`: [StoriesStore](#storiesstore)): void;                                                                        | internal set store, use for testing with mockup store.                                                                |
-| `updateStoryProp*`      | **function** updateStoryProp(`storyId`\*: string, `propName`\*: string, `newValue`\*: any): [StoriesStore](#storiesstore) \| undefined;     | modify story properties, for example controls values. will notify all installed store observers of the changed story. |
-
-## StoreOptions
-
-_defined in [@component-controls/store/src/Store/Store.ts](https://github.com/ccontrols/component-controls/tree/master/core/store/src/Store/Store.ts#L23)_
-
-
-
-### properties
-
-| Name                 | Type                          | Description                                                         |
-| -------------------- | ----------------------------- | ------------------------------------------------------------------- |
-| `store`              | [StoriesStore](#storiesstore) | optional store initializer                                          |
-| `updateLocalStorage` | boolean                       | set to false to prevent the Store from updating localStorage values |
-
-## StoreObserver
-
-store on change observer.
-when updateStoryProp is called on the store, the store observers will be notified
-so they can re-load the stories
-
-_defined in [@component-controls/store/src/types.ts](https://github.com/ccontrols/component-controls/tree/master/core/store/src/types.ts#L15)_
-
-**function** (`storyId`: string, `propName`: string): void;
-
-### parameters
-
-| Name       | Type   | Description |
-| ---------- | ------ | ----------- |
-| `storyId`  | string |             |
-| `propName` | string |             |
-| `returns`  | void   |             |
-
-<!-- END-TSDOC-TYPESCRIPT -->

core/store/package.json

@@ -13,8 +13,8 @@
     "live_store.d.ts",
     "static_store.js",
     "static_store.d.ts",
-    "singleton_store.js",
-    "singleton_store.d.ts"
+    "store.js",
+    "store.d.ts"
   ],
   "scripts": {
     "build": "yarn cross-env NODE_ENV=production rollup -c",
@@ -40,6 +40,7 @@
     "@component-controls/loader": "^1.9.0",
     "analytics": "^0.5.2",
     "broadcast-channel": "^3.1.0",
+    "react": "^16.13.1",
     "typescript": "^3.8.3"
   },
   "devDependencies": {
@@ -49,7 +50,12 @@
     "cross-env": "^5.2.1",
     "eslint": "^6.5.1",
     "jest": "^24.9.0"
+
   },
+  "peerDependencies": {
+    "react": "^16.13.1"
+  },
+
   "publishConfig": {
     "access": "public"
   },

core/store/rollup.config.js

@@ -5,6 +5,6 @@ export default config({
     './src/index.ts',
     './src/live_store.ts',
     './src/static_store.ts',
-    './src/singleton_store.ts',
+    './src/store.ts',
   ],
 });

core/store/src/Store/BroadcastStore.ts

@@ -0,0 +1,59 @@
+import { BroadcastChannel } from 'broadcast-channel';
+import { MessageType, UPDATE_STORY_MSG, StoreOptions } from '../types';
+import { Store } from './Store';
+import { readStore, updateStory } from '../serialization/StoreStorage';
+
+export { BroadcastChannel };
+
+export class BroadcastStore extends Store {
+  private moduleId: number;
+  private channel: BroadcastChannel | undefined;
+
+  constructor(options?: StoreOptions) {
+    super(options);
+    this.moduleId = Math.random();
+    this.channel = new BroadcastChannel<MessageType>(UPDATE_STORY_MSG, {
+      type: 'localstorage',
+    });
+    this.channel.onmessage = ({ storyId, moduleId, propName }: MessageType) => {
+      if (storyId && moduleId) {
+        if (this.moduleId !== moduleId) {
+          this.readData(storyId, propName);
+          super.notifyObservers(storyId, propName);
+        }
+      }
+    };
+  }
+
+  private readData = (storyId?: string, propName?: string) => {
+    this.setStore(readStore(this.loadedStore, storyId, propName));
+  };
+
+  /**
+   * modify story properties, for example controls values.
+   * will notify all installed store observers of the changed story.
+   */
+  updateStoryProp = (
+    storyId: string,
+    propName: string,
+    newValue: any,
+  ): void => {
+    this.loadedStore = updateStory(
+      this.loadedStore,
+      storyId,
+      propName,
+      newValue,
+    );
+    if (this.loadedStore) {
+      if (this.channel) {
+        const message: MessageType = {
+          storyId,
+          moduleId: this.moduleId,
+          propName,
+        };
+        this.channel.postMessage(message);
+      }
+      this.notifyObservers(storyId, propName);
+    }
+  };
+}

core/store/src/Store/Store.ts

@@ -11,37 +11,17 @@ import {
   defDocType,
   getComponentName,
 } from '@component-controls/core';
-import { BroadcastChannel } from 'broadcast-channel';
-import {
-  StoreObserver,
-  StoryStore,
-  MessageType,
-  UPDATE_STORY_MSG,
-} from '../types';
-import { readStore, updateStory } from '../serialization/StoreStorage';
 
-export { BroadcastChannel };
+import { StoreObserver, StoryStore, StoreOptions } from '../types';
+
 export { StoreObserver, StoryStore };
 
-export interface StoreOptions {
-  /**
-   * optional store initializer
-   */
-  store?: StoriesStore;
-  /**
-   * set to false to prevent the Store from updating localStorage values
-   */
-  updateLocalStorage?: boolean;
-}
 /**
  * Store class used to query the stories and exchange information between processes
  */
 export class Store implements StoryStore {
-  private loadedStore: StoriesStore | undefined;
-  private updateLocalStorage: boolean = true;
-  private channel: BroadcastChannel | undefined;
+  protected loadedStore: StoriesStore | undefined;
   private observers: StoreObserver[];
-  private moduleId: number;
   private _cachedPages: { [key: string]: Pages } = {};
   private _analytics: any = null;
   private _categoryItems: {
@@ -54,29 +34,10 @@ export class Store implements StoryStore {
    * create a store with options
    */
   constructor(options?: StoreOptions) {
-    const { store, updateLocalStorage = true } = options || {};
-    this.moduleId = Math.random();
+    const { store } = options || {};
     this.loadedStore = store;
-    this.updateLocalStorage = updateLocalStorage;
     this.observers = [];
     this.initDocs();
-    if (updateLocalStorage) {
-      this.channel = new BroadcastChannel<MessageType>(UPDATE_STORY_MSG, {
-        type: 'localstorage',
-      });
-      this.channel.onmessage = ({
-        storyId,
-        moduleId,
-        propName,
-      }: MessageType) => {
-        if (storyId && moduleId) {
-          if (this.moduleId !== moduleId) {
-            this.readData(storyId, propName);
-            this.notifyObservers(storyId, propName);
-          }
-        }
-      };
-    }
     this.initializeAnalytics();
   }
 
@@ -142,7 +103,7 @@ export class Store implements StoryStore {
   removeObserver = (observer: StoreObserver) =>
     (this.observers = this.observers.filter(o => o !== observer));
 
-  private notifyObservers = (storyId?: string, propName?: string) => {
+  notifyObservers = (storyId?: string, propName?: string) => {
     if (this.observers.length > 0) {
       this.observers.forEach(observer => observer(storyId, propName));
     }
@@ -155,18 +116,11 @@ export class Store implements StoryStore {
     this.loadedStore = store;
     this.notifyObservers();
   };
-  private readData = (storyId?: string, propName?: string) => {
-    this.loadedStore = readStore(this.loadedStore, storyId, propName);
-  };
 
   /**
    * returns an instance of the store
    */
   getStore = () => {
-    if (this.loadedStore) {
-      return this.loadedStore;
-    }
-    this.readData();
     return this.loadedStore;
   };
 
@@ -348,35 +302,6 @@ export class Store implements StoryStore {
     return getStoryPath(story.id, doc, this.config?.pages, activeTab);
   };
 
-  /**
-   * modify story properties, for example controls values.
-   * will notify all installed store observers of the changed story.
-   */
-  updateStoryProp = (
-    storyId: string,
-    propName: string,
-    newValue: any,
-  ): StoriesStore | undefined => {
-    this.loadedStore = updateStory(
-      this.loadedStore,
-      storyId,
-      propName,
-      newValue,
-      this.updateLocalStorage,
-    );
-    if (this.loadedStore) {
-      if (this.channel) {
-        const message: MessageType = {
-          storyId,
-          moduleId: this.moduleId,
-          propName,
-        };
-        this.channel.postMessage(message);
-      }
-      this.notifyObservers(storyId, propName);
-    }
-    return this.loadedStore;
-  };
   initializeAnalytics = () => {
     if (this.loadedStore) {
       const options = this.loadedStore.config?.analytics;

core/store/src/live_store.ts

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

core/store/src/serialization/StoreStorage.ts

@@ -54,7 +54,6 @@ export const updateStory = (
   storyId: string,
   propName: string,
   newValue: any,
-  updateLocalStorage?: boolean,
 ): StoriesStore | undefined => {
   if (store) {
     store.stories = {
@@ -64,12 +63,10 @@ export const updateStory = (
         [propName]: newValue,
       },
     };
-    if (updateLocalStorage) {
-      localStorage.setItem(
-        COMPONENT_CONTROLS_STORAGE,
-        JSON.stringify(store, encodeFn),
-      );
-    }
+    localStorage.setItem(
+      COMPONENT_CONTROLS_STORAGE,
+      JSON.stringify(store, encodeFn),
+    );
   }
   return store;
 };