Monitor for injected vuex data in the Inertia props

Author: drewbindon

README.md

@@ -0,0 +1,34 @@
+Front end package for capturing backend vuex injection that works with InertiaJS
+
+### Update your Vue instance
+```
+createInertiaApp({
+    resolve: name => {
+        const page = require(`./pages/${name}`).default;
+        page.layout = MainLayout;
+        return page;
+    },
+    setup({ el, App, props, plugin }) {
+        Vue.use(plugin);
+        
+        new Vue({
+            modals,
+            store,
+            mounted() {
+                hydrateWatch(this, store);
+            },
+            render: h => h(App, props)
+        }).$mount(el);
+    },
+});
+```
+The `mounted()` event is where it all happens - it calls the hydration method to monitor for inertia props.
+
+### How to inject vuex data in your render calls
+```
+Vuex::load('user', 'profile');
+
+return Inertia::render('Page/Example', [
+    '$vuex' => Vuex::toJson()
+]);
+```

packages/@pderas/state/lib/committer.ts

@@ -8,7 +8,7 @@ export const VuexcellentAutoCommitter = (
 ) => {
   const { axios, logger } = options
   if (!axios) {
-    logger.warning("[Phase] Axios not found, skipping API auto mutation Vuex Plugin");
+    logger.warning("[VuexHydrate] Axios not found, skipping API auto mutation Vuex Plugin");
     return [];
   }
 
@@ -31,7 +31,7 @@ export const VuexcellentAutoCommitter = (
  *
  * @param {Object} data_2 server supplied state for mutations
  */
-const autoCommitData = (
+export const autoCommitData = (
   { store, _state, mutator }: { store: InitializedVuexStore; _state: VuexModule; mutator: (key: string, ns?: string | null) => string; },
   { state = {}, modules = {} }: VuexModule,
   logger: IPhaseLogger
@@ -113,11 +113,11 @@ const autoMutateInterceptor = (
    */
   (response: AxiosResponse) => {
     if (!response.data.$vuex) {
-      logger.debug("[Phase] no vuex data detected. Skipping auto mutations.")
+      logger.debug("[VuexHydrate] no vuex data detected. Skipping auto mutations.")
       return response;
     }
 
-    logger.debug("[Phase] vuex data detected, attempting to auto-commit")
+    logger.debug("[VuexHydrate] vuex data detected, attempting to auto-commit")
 
     try {
       // grab state & modules, if existing & auto-commit
@@ -140,4 +140,4 @@ const autoMutateInterceptor = (
     }
 
     return response;
-  };
+  };

packages/@pderas/state/lib/index.ts

@@ -1,7 +1,7 @@
-import { VuexcellentOptions, VuexStore, VuexModule } from "@pderas/vuex-hydrate-state";
+import { InitializedVuexStore, VuexcellentOptions, VuexStore, VuexModule, IPhaseLogger } from "@pderas/vuex-hydrate-state";
 import { loggingMerge, objectMerge } from "./objectMerge";
 import { mutantGenerator } from "./mutations";
-import { VuexcellentAutoCommitter } from "./committer";
+import { VuexcellentAutoCommitter, autoCommitData } from "./committer";
 import { AxiosInstance } from "axios";
 import { createLogger } from './logger'
 
@@ -30,6 +30,7 @@ const defaultOptions = <VuexcellentOptions>{
 
 export const hydrate = (vuexState: VuexStore, options: VuexcellentOptions = defaultOptions) => {
   let __PHASE_STATE__ = globalBase.__PHASE_STATE__ ?? {}
+
   options = {
     ...defaultOptions,
     ...options
@@ -57,7 +58,6 @@ export const hydrate = (vuexState: VuexStore, options: VuexcellentOptions = defa
     : mergedState;
 
   logger.info(`[Phase] State Merged, Mutations Generated`, newState)
-
   if (options.axios && options.generateMutations && __BROWSER__) {
     // prepare plugin
     const VuexcellentPlugins = VuexcellentAutoCommitter(
@@ -74,9 +74,87 @@ export const hydrate = (vuexState: VuexStore, options: VuexcellentOptions = defa
 
   } else if (options.generateMutations) {
     logger.error(
-      "[Phase] It appears that auto-mutate could not be initialized.\nAn instance of axios could not be found. Make sure window.axios is available"
+      "[VuexHydrate] It appears that auto-mutate could not be initialized.\nAn instance of axios could not be found. Make sure window.axios is available"
     );
   }
 
   return newState;
 };
+
+export const hydrateWatch = (
+  _this: any, 
+  store: InitializedVuexStore,
+  options: VuexcellentOptions = defaultOptions,
+  logger: IPhaseLogger
+) => {
+  const inertia = _this.$inertia.page.props;
+  if (inertia && inertia.$vuex) {
+    let __PHASE_STATE__ = globalBase.__PHASE_STATE__ ?? {}
+
+  // Currently not running actions/mutations on page load
+  const { mutations, actions, ...phaseState } = __PHASE_STATE__
+  const vuexState = _this.$store._modules.root._rawModule;
+
+  // merge incoming (store) options with window.__PHASE_STATE__
+  const mergedState = loggingMerge(logger, vuexState, <VuexStore>phaseState);
+
+  // generate mutations
+  const { createMutant, getMutation } = mutantGenerator(options);
+  const newState = options.generateMutations
+    ? createMutant(mergedState)
+    : mergedState;
+    
+    autoMutateInertiaInterceptor(inertia, _this.$store, newState, getMutation);
+  }
+}
+
+/**
+ * Axios interceptor Generator to automatically call mutations
+ * and commit changed data. Sets up interceptor
+ *
+ * @param {Object} response the vuex response
+ * @param {Object} store initialized vuex store
+ * @param {Object} _state raw vuex starting data
+ * @param {Function} mutator function name generator
+ * @param {Object} options default options
+ *
+ * @return void
+ */
+ const autoMutateInertiaInterceptor = (
+  response: any,
+  store: InitializedVuexStore,
+  _state: VuexModule,
+  mutator: any,
+  options: VuexcellentOptions = defaultOptions, 
+) => {
+
+  const logger = options.logger = createLogger(options.logLevel)
+
+  if (!response.$vuex) {
+    logger.debug("[VuexHydrate] no vuex data detected. Skipping auto mutations.")
+    return response;
+  }
+
+  logger.debug("[VuexHydrate] vuex data detected, attempting to auto-commit")
+
+  try {
+    let $vuex = JSON.parse(response.$vuex);
+    // grab state & modules, if existing & auto-commit
+    autoCommitData({ store, _state, mutator }, $vuex, logger);
+
+    // user specified mutations
+    ($vuex.mutations || []).forEach(
+      ([mutation, value]: [string, any?]) => store.commit(mutation, value)
+    );
+
+    // user specified actions
+    ($vuex.actions || []).forEach(
+      ([action, value]: [string, any?]) => store.dispatch(action, value)
+    );
+  } catch (err) {
+    logger.error(err);
+    logger.warning(
+      `[@pderas/vuex-hydrate-state] An error occurred during the auto commit process.\nYour vuex state may not be what you expected.`
+    );
+  }
+};

packages/@pderas/state/tsconfig.json

@@ -7,7 +7,7 @@
     "moduleResolution": "node",
     "target": "ESNext",
     "lib": ["ESNext", "DOM"],
-    "noImplicitAny": true,
+    "noImplicitAny": false,
     "removeComments": true,
     "preserveConstEnums": true,
     "noEmit": false,