superglue 0.54.0 → 1.0.0

data/lib/generators/superglue/install/templates/js/page_to_page_mapping.js

@@ -0,0 +1,35 @@
+// import your page component
+// e.g import PostsEdit from '../views/posts/edit'
+
+// Mapping between your props template to Component, you must add to this
+// to register any new page level component you create. If you are using the
+// scaffold, it will auto append the identifers for you.
+//
+// For example:
+//
+// const pageIdentifierToPageComponent =  {
+//   'posts/new': PostNew
+// };
+//
+//
+// If you are using a build tool that supports globbing, you can automatically
+// populate `pageIdentiferToPageComponent`. For example, if you are using vite,
+// you can use the following snippet instead of manually importing.
+//
+// ```
+// const pageIdentifierToPageComponent = {}
+// const pages = import.meta.glob('../views/**/*.jsx', {eager: true})
+//
+// for (const key in pages) {
+//   if (pages.hasOwnProperty(key)) {
+//     const identifier = key.replace("../views/", "").split('.')[0];
+//     pageIdentifierToPageComponent[identifier] = pages[key].default;
+//   }
+// }
+// ```
+//
+const pageIdentifierToPageComponent = {
+};
+
+export { pageIdentifierToPageComponent }
+

data/lib/generators/superglue/install/templates/js/store.js

@@ -0,0 +1,30 @@
+import { configureStore } from "@reduxjs/toolkit"
+import { useDispatch, useSelector, useStore } from "react-redux"
+import { flashSlice } from "./slices/flash"
+import {
+  beforeVisit,
+  beforeFetch,
+  beforeRemote,
+  rootReducer
+} from "@thoughtbot/superglue"
+
+const { pages, superglue } = rootReducer
+
+export const store = configureStore({
+  devTools: process.env.NODE_ENV !== "production",
+  middleware: getDefaultMiddleware =>
+    getDefaultMiddleware({
+      serializableCheck: {
+        ignoredActions: [beforeFetch.type, beforeVisit.type, beforeRemote.type]
+      }
+    }),
+  reducer: {
+    superglue,
+    pages,
+    flash: flashSlice.reducer
+  }
+})
+
+export const useAppDispatch = useDispatch.withTypes()
+export const useAppSelector = useSelector.withTypes()
+export const useAppStore = useStore.withTypes()

data/lib/{install/templates/web/application.js → generators/superglue/install/templates/ts/application.tsx}

@@ -1,22 +1,12 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import { ApplicationBase } from '@thoughtbot/superglue';
+import { Application, VisitResponse } from '@thoughtbot/superglue';
 import { buildVisitAndRemote } from './application_visit';
 import { pageIdentifierToPageComponent } from './page_to_page_mapping';
-import { buildStore } from './store'
+import { store } from './store'
 
-class Application extends ApplicationBase {
-  mapping() {
-    return pageIdentifierToPageComponent;
-  }
-
-  visitAndRemote(navRef, store) {
-    return buildVisitAndRemote(navRef, store);
-  }
-
-  buildStore(initialState, { superglue, pages}) {
-    return buildStore(initialState, superglue, pages);
-  }
+declare global {
+  interface Window { SUPERGLUE_INITIAL_PAGE_STATE: VisitResponse; }
 }
 
 if (typeof window !== "undefined") {
@@ -28,7 +18,6 @@ if (typeof window !== "undefined") {
       const root = createRoot(appEl);
       root.render(
         <Application
-          appEl={appEl}
           // The base url prefixed to all calls made by the `visit`
           // and `remote` thunks.
           baseUrl={location.origin}
@@ -37,10 +26,15 @@ if (typeof window !== "undefined") {
           initialPage={window.SUPERGLUE_INITIAL_PAGE_STATE}
           // The initial path of the page, e.g., /foobar
           path={location.pathname + location.search + location.hash}
+          // Callback used to setup visit and remote
+          buildVisitAndRemote={buildVisitAndRemote}
+          // Callback used to setup the store
+          store={store}
+          // Mapping between the page identifier to page component
+          mapping={pageIdentifierToPageComponent}
         />
       );
     }
   });
 }
 
-

data/lib/generators/superglue/install/templates/ts/application_visit.ts

@@ -0,0 +1,122 @@
+import {
+  ApplicationRemote,
+  ApplicationVisit,
+  SuperglueStore,
+  BuildVisitAndRemote,
+} from "@thoughtbot/superglue";
+import { visit, remote } from "@thoughtbot/superglue/action_creators";
+
+/**
+ * This function returns a wrapped visit and remote that will be used by UJS,
+ * the Navigation component, and passed to your page components through the
+ * NavigationContext.
+ *
+ * You can customize both functions to your liking. For example, for a progress
+ * bar. This file also adds support for data-sg-remote.
+ */
+export const buildVisitAndRemote: BuildVisitAndRemote = (
+  ref,
+  store: SuperglueStore
+) => {
+  const appRemote: ApplicationRemote = (path, { dataset, ...options }) => {
+    /**
+     * You can make use of `dataset` to add custom UJS options.
+     * If you are implementing a progress bar, you can selectively
+     * hide it for some links. For example:
+     *
+     * ```
+     * <a href="/posts?props_at=data.header" data-sg-remote data-sg-hide-progress>
+     *   Click me
+     * </a>
+     * ```
+     *
+     * This would be available as `sgHideProgress` on the dataset
+     */
+    return store.dispatch(remote(path, options));
+  };
+
+  const appVisit: ApplicationVisit = (path, { dataset, ...options } = {}) => {
+    /**
+     * Do something before we make a request.
+     * e.g, show a [progress bar](https://thoughtbot.github.io/superglue/recipes/progress-bar/).
+     *
+     * Hint: you can access the current pageKey
+     * via `store.getState().superglue.currentPageKey`
+     */
+    return store
+      .dispatch(visit(path, options))
+      .then((meta) => {
+        /**
+         * The assets fingerprints changed, instead of transitioning
+         * just go to the URL directly to retrieve new assets
+         */
+        if (meta.needsRefresh) {
+          window.location.href = meta.pageKey;
+          return meta;
+        }
+
+        /**
+         * Your first expanded UJS option, `data-sg-replace`
+         *
+         * This option overrides the `navigationAction` to allow a link click or
+         * a form submission to replace history instead of the usual push.
+         */
+        const navigatonAction = !!dataset?.sgReplace
+          ? "replace"
+          : meta.navigationAction;
+        ref.current?.navigateTo(meta.pageKey, {
+          action: navigatonAction,
+        });
+
+        /**
+         * Return the meta object, it's used for scroll restoration when
+         * handling the back button. You can skip returning, but Superglue
+         * will warn you about scroll restoration.
+         */
+        return meta;
+      })
+      .finally(() => {
+        /**
+         * Do something after a request.
+         *
+         * This is where you hide a progress bar.
+         */
+      })
+      .catch((err) => {
+        const response = err.response;
+
+        if (!response) {
+          /**
+           * This is for errors that are NOT from a HTTP request.
+           *
+           * Tooling like Sentry can capture console errors. If not, feel
+           * free to customize to send the error to your telemetry tool of choice.
+           */
+          console.error(err);
+          return;
+        }
+
+        if (response.ok) {
+          /**
+           * This is for errors that are from a HTTP request.
+           *
+           * If the response is OK, it must be an HTML body, we'll
+           * go to that locaton directly.
+           */
+          window.location = response.url;
+        } else {
+          if (response.status >= 400 && response.status < 500) {
+            window.location.href = "/400.html";
+            return;
+          }
+
+          if (response.status >= 500) {
+            window.location.href = "/500.html";
+            return;
+          }
+        }
+      });
+  };
+
+  return { visit: appVisit, remote: appRemote };
+};

data/lib/generators/superglue/install/templates/ts/components.ts

@@ -0,0 +1,2 @@
+export * from "./Layout";
+export * from "./Inputs";

data/lib/generators/superglue/install/templates/ts/flash.ts

@@ -0,0 +1,46 @@
+import { createSlice } from "@reduxjs/toolkit";
+import { saveResponse, beforeVisit } from "@thoughtbot/superglue";
+
+type FlashState = Record<string, any>
+
+const initialState: FlashState = {};
+
+export const flashSlice = createSlice({
+  name: "flash",
+  initialState: initialState,
+  reducers: {
+    clearFlash(state, { payload }: { payload: string }) {
+      const key = payload;
+      if (!key) {
+        return {};
+      }
+
+      delete state[key];
+
+      return {
+        ...state,
+      };
+    },
+    flash(state, { payload }) {
+      return {
+        ...state,
+        ...payload,
+      };
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(beforeVisit, (_state, _action) => {
+      return {};
+    });
+    builder.addCase(saveResponse, (state, action) => {
+      const { page } = action.payload;
+
+      return {
+        ...state,
+        ...(page.slices.flash as FlashState),
+      };
+    });
+  },
+});
+
+export const { clearFlash, flash } = flashSlice.actions;