started 0.0.9; fixed index.tsx

Author: forman

dashi/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "dashipopashi",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "An experimental library for integrating interactive charts into existing JavaScript applications.",
   "type": "module",
   "files": [

dashi/package.json

@@ -1,8 +1,34 @@
+import type { StoreState } from "@/lib/types/state/store";
 import { store } from "@/lib/store";
+import { useMemo } from "react";
+import type { ContributionState } from "@/lib/types/state/contribution";
 
-export const useStore = store;
-export const useExtensions = () => useStore((state) => state.extensions);
-export const useContributionsResult = () =>
-  useStore((state) => state.contributionsResult);
-export const useContributionsRecord = () =>
-  useStore((state) => state.contributionsRecord);
+const selectConfiguration = (state: StoreState) => state.configuration;
+
+const selectExtensions = (state: StoreState) => state.extensions;
+
+const selectContributionsResult = (state: StoreState) =>
+  state.contributionsResult;
+
+const selectContributionsRecord = (state: StoreState) =>
+  state.contributionsRecord;
+
+const useStore = store;
+
+export const useConfiguration = () => useStore(selectConfiguration);
+export const useExtensions = () => useStore(selectExtensions);
+export const useContributionsResult = () => useStore(selectContributionsResult);
+export const useContributionsRecord = () => useStore(selectContributionsRecord);
+
+export function makeContributionsHook<S extends object = object>(
+  contribPoint: string,
+): () => ContributionState<S>[] {
+  return () => {
+    const selectContributions = (state: StoreState) =>
+      state.contributionsRecord[contribPoint];
+    const contributions = useStore(selectContributions);
+    return useMemo(() => {
+      return (contributions || []) as ContributionState<S>[];
+    }, [contributions]);
+  };
+}

dashi/src/lib/hooks.ts

@@ -8,15 +8,15 @@ export {
 } from "@/lib/types/model/event";
 // Actions (store changes)
 export { initializeContributions } from "@/lib/actions/initializeContributions";
-export { configureFramework } from "@/lib/actions/configureFramework";
 export { handleComponentChange } from "@/lib/actions/handleComponentChange";
 export { updateContributionContainer } from "@/lib/actions/updateContributionContainer";
 // React Components
 export { Component } from "@/lib/components/Component";
 // React Hooks
 export {
-  useStore,
+  useConfiguration,
   useExtensions,
   useContributionsResult,
   useContributionsRecord,
+  makeContributionsHook,
 } from "@/lib/hooks";

dashi/src/lib/index.ts

@@ -21,10 +21,10 @@ export interface FrameworkOptions<S extends object = object> {
 export interface StoreState<S extends object = object> {
   /** Framework configuration */
   configuration: FrameworkOptions<S>;
-  /** API call result from `GET /contributions`. */
-  contributionsResult: ApiResult<Contributions>;
   /** All extensions */
   extensions: Extension[];
+  /** API call result from `GET /contributions`. */
+  contributionsResult: ApiResult<Contributions>;
   /** A record that maps contribPoint --> ContributionState[].*/
   contributionsRecord: Record<ContribPoint, ContributionState[]>;
 }

dashi/src/lib/types/state/store.ts

@@ -1 +1 @@
-version = "0.0.8"
+version = "0.0.9"