feat: initial recoil state

core/store/package.json

@@ -37,10 +37,8 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@analytics/google-analytics": "^0.4.0",
     "@component-controls/core": "^1.10.0",
     "@component-controls/loader": "^1.10.2",
-    "analytics": "^0.5.2",
     "broadcast-channel": "^3.1.0",
     "react": "^16.13.1",
     "typescript": "^3.8.3"

core/store/src/Store/Store.ts

@@ -1,5 +1,3 @@
-import Analytics from 'analytics';
-import googleAnalytics from '@analytics/google-analytics';
 import {
   StoriesStore,
   Pages,
@@ -323,30 +321,6 @@ export class Store implements StoryStore {
     return getStoryPath(story.id, doc, this.config?.pages, activeTab);
   };
 
-  initializeAnalytics = () => {
-    if (this.loadedStore) {
-      const options = this.loadedStore.config?.analytics;
-      if (options) {
-        if (typeof options === 'string') {
-          this._analytics = Analytics({
-            app: this.loadedStore.config?.siteTitle,
-            plugins: [
-              googleAnalytics({
-                trackingId: options,
-              }),
-            ],
-          });
-        } else {
-          this._analytics = Analytics(options);
-        }
-      }
-    }
-  };
-  visitPage = () => {
-    if (this._analytics) {
-      this._analytics.page();
-    }
-  };
   getDocDescription = (doc: Document): string | undefined => {
     if (doc.description) {
       return doc.description;

core/store/src/types.ts

@@ -50,7 +50,6 @@ export interface StoryStore {
   getStoryPath: (storyId: string, activeTab?: string) => string;
   addObserver: (observer: StoreObserver) => void;
   removeObserver: (observer: StoreObserver) => void;
-  visitPage: () => void;
   getDocDescription: (doc: Document) => string | undefined;
 
   getIndexPage: () => HomePageInfo;

core/store/src/typings.d.ts

@@ -1,3 +1,2 @@
 declare module '@component-controls/loader/story-store-data';
-declare module '@analytics/google-analytics';
 declare module '@component-controls/webpack-compile/bundle';

ui/app/package.json

@@ -30,11 +30,13 @@
   },
   "license": "MIT",
   "dependencies": {
+    "@analytics/google-analytics": "^0.4.0",
     "@component-controls/blocks": "^1.10.2",
     "@component-controls/components": "^1.10.0",
     "@component-controls/core": "^1.10.0",
     "@component-controls/pages": "^1.10.2",
     "@theme-ui/match-media": "next",
+    "analytics": "^0.5.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-helmet": "^6.0.0",

ui/app/src/App/App.tsx

@@ -1,11 +1,12 @@
 /** @jsx jsx */
-import { FC, Fragment, useContext, useEffect } from 'react';
+import { FC, Fragment, useContext } from 'react';
 import { jsx, Box } from 'theme-ui';
 import { SkipLinks, SkiLinksItemProps } from '@component-controls/components';
 import { BlockContext } from '@component-controls/blocks';
 import { SEO } from '../SEO';
 import { Header } from '../Header';
 import { Footer } from '../Footer';
+import { useAnalytics } from './useAnalytics';
 
 export interface AppProps {
   /**
@@ -43,9 +44,8 @@ export const App: FC<AppProps> = ({ title = '', children }) => {
   const pageDescription = doc
     ? storeProvider.getDocDescription(doc)
     : undefined;
-  useEffect(() => {
-    storeProvider.visitPage();
-  }, [storeProvider]);
+  useAnalytics(storeProvider);
+
   return (
     <Fragment>
       <SEO title={pageTitle} description={pageDescription} />

ui/app/src/App/useAnalytics.tsx

@@ -0,0 +1,34 @@
+import { useMemo, useEffect } from 'react';
+
+import Analytics from 'analytics';
+import googleAnalytics from '@analytics/google-analytics';
+
+import { StoryStore } from '@component-controls/store';
+
+export const useAnalytics = (store: StoryStore) => {
+  const analytics = useMemo(() => {
+    if (store) {
+      const options = store.config?.analytics;
+      if (options) {
+        if (typeof options === 'string') {
+          return Analytics({
+            app: store.config?.siteTitle,
+            plugins: [
+              googleAnalytics({
+                trackingId: options,
+              }),
+            ],
+          });
+        } else {
+          return Analytics(options);
+        }
+      }
+    }
+    return undefined;
+  }, [store]);
+  useEffect(() => {
+    if (analytics) {
+      analytics.page();
+    }
+  }, [analytics]);
+};

ui/app/src/DocPage/DocPage.tsx

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { FC } from 'react';
 import { jsx } from 'theme-ui';
-import { useDocContext } from '@component-controls/blocks';
+import { useDocument } from '@component-controls/blocks';
 import { PageContainer } from '../PageContainer';
 import { SidebarsPage, DocPageProps } from '../SidebarsPage';
 import { CategoryPage } from '../CategoryPage';
@@ -15,7 +15,7 @@ export const DocPage: FC<Omit<DocPageProps, 'doc'> & { category?: string }> = ({
   category,
   ...props
 }) => {
-  const { doc } = useDocContext();
+  const doc = useDocument();
   if (category) {
     return <CategoryPage type={type} category={category} />;
   }

ui/app/src/typings.d.ts

@@ -0,0 +1 @@
+declare module '@analytics/google-analytics';

ui/blocks/src/Container/Container.tsx

@@ -7,7 +7,7 @@ import { Title } from '../Title';
 import { Subtitle } from '../Subtitle';
 import { EditPage } from '../EditPage';
 
-import { useDocContext } from '../context';
+import { useDocument } from '../context';
 
 export interface ContainerProps {
   author?: ReactNode;
@@ -21,7 +21,7 @@ export const Container: FC<ContainerProps> = ({
   author,
   secondRow,
 }) => {
-  const { doc } = useDocContext();
+  const doc = useDocument();
   return (
     <Box variant="blockpagecontainer.container">
       <Box variant="blockpagecontainer.inforow">

ui/blocks/src/EditPage/EditPage.tsx

@@ -5,14 +5,14 @@ import { FC } from 'react';
 import { Box, Text } from 'theme-ui';
 import { MarkGithubIcon } from '@primer/octicons-react';
 import { ExternalLink } from '@component-controls/components';
-import { useDocContext } from '../context';
+import { useDocument } from '../context';
 
 /**
  * Display a Edit this page link to the page source repository.
  * In order for this to work, you need to set up the `repository` field in `package.json`.
  */
 export const EditPage: FC = () => {
-  const { package: docPackage } = useDocContext();
+  const { package: docPackage } = useDocument() || {};
   return docPackage && docPackage.repository && docPackage.repository.browse ? (
     <Box variant="editpage.container">
       <ExternalLink

ui/blocks/src/context/block/BlockContext.tsx

@@ -1,9 +1,10 @@
 import React, { useContext } from 'react';
-import { deepMerge } from '@component-controls/core';
+import { deepMerge, Document } from '@component-controls/core';
 import { StoryStore } from '@component-controls/store';
 import { RecoilRoot } from 'recoil';
 import { BlockDataContextProvider } from './BlockDataContext';
 import { ErrorBoundary } from './ErrorBoundary';
+import { documentAtom } from './storeState';
 
 export interface BlockContextInputProps {
   /**
@@ -64,16 +65,28 @@ export const BlockContextProvider: React.FC<BlockContextInputProps> = ({
 }) => {
   let storyId = propsStoryId;
   let docId = propsDocId;
+  let doc: Document | undefined;
   if (storyId && !docId) {
     const story = store.getStory(storyId);
     docId = story?.doc;
+    doc = docId ? store.getStoryDoc(docId) : undefined;
   } else if (!storyId && docId) {
-    const doc = store.getStoryDoc(docId);
+    doc = store.getStoryDoc(docId);
     storyId =
       doc && doc.stories && doc.stories.length ? doc.stories[0] : undefined;
   }
   return (
-    <RecoilRoot>
+    <RecoilRoot
+      initializeState={({ set }) => {
+        set(documentAtom, {
+          ...doc,
+          package:
+            doc && doc.package
+              ? store.getStore()?.packages[doc.package]
+              : undefined,
+        });
+      }}
+    >
       <ErrorBoundary>
         <StoreContext.Provider
           value={{

ui/blocks/src/context/block/storeState.ts

@@ -1,18 +1,17 @@
 import { atom, useRecoilValue, useSetRecoilState } from 'recoil';
-import { StoryStore } from '@component-controls/store';
+import { Document, PackageInfo } from '@component-controls/core';
 
-export const storeAtom = atom<StoryStore | null>({
-  key: 'storyStore', // unique ID (with respect to other atoms/selectors)
-  default: null, // default value (aka initial value)
+export type DocumentAtom = Document & { package?: PackageInfo };
+
+export const documentAtom = atom<DocumentAtom | undefined>({
+  key: 'document',
+  default: undefined,
 });
 
-export const useStore = (): StoryStore => {
-  const store = useRecoilValue(storeAtom);
-  if (store === null) {
-    throw new Error('You can not access store before assigning it');
-  }
-  return store;
+export const useDocument = (): DocumentAtom | undefined => {
+  const doc = useRecoilValue(documentAtom);
+  return doc;
 };
 
-export const setStore = (store: StoryStore) =>
-  useSetRecoilState(storeAtom)(store);
+export const setDocument = (doc: DocumentAtom) =>
+  useSetRecoilState(documentAtom)(doc);

ui/blocks/src/context/index.ts

@@ -1,3 +1,4 @@
 export * from './block';
 export * from './components';
 export * from './story';
+export * from './block/storeState';