superglue 2.0.0.alpha.10 → 2.0.0.beta.2

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

@@ -1,5 +1,3 @@
-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
@@ -8,7 +6,7 @@ import { visit, remote } from "@thoughtbot/superglue/action_creators"
  * 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 = (ref, store) => {
+export const buildVisitAndRemote = ({ navigateTo, visit, remote }) => {
   const appRemote = (path, { dataset, ...options } = {}) => {
     /**
      * You can make use of `dataset` to add custom UJS options.
@@ -23,27 +21,38 @@ export const buildVisitAndRemote = (ref, store) => {
      *
      * This would be available as `sgHideProgress` on the dataset
      */
-    return store.dispatch(remote(path, options))
+    return remote(path, options).then(result => {
+      if (result.hasError) {
+        const { response } = result
+
+        if (response.status >= 400 && response.status < 500) {
+          window.location.href = "/400.html"
+        } else if (response.status >= 500) {
+          window.location.href = "/500.html"
+        }
+      }
+
+      return result
+    })
   }
 
   const appVisit = (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
+    return visit(path, options)
+      .then(result => {
+        if (result.hasError) {
+          const { response } = result
+
+          if (response.status >= 400 && response.status < 500) {
+            window.location.href = "/400.html"
+          } else if (response.status >= 500) {
+            window.location.href = "/500.html"
+          }
+
+          return result
         }
 
         /**
@@ -52,19 +61,14 @@ export const buildVisitAndRemote = (ref, store) => {
          * 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
+        const navigationAction = !!dataset?.sgReplace
           ? "replace"
-          : meta.navigationAction
-        ref.current?.navigateTo(meta.pageKey, {
-          action: navigatonAction
+          : result.navigationAction
+        navigateTo(result.pageKey, {
+          action: navigationAction
         })
 
-        /**
-         * 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
+        return result
       })
       .finally(() => {
         /**
@@ -73,40 +77,6 @@ export const buildVisitAndRemote = (ref, store) => {
          * 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/js/build.mjs

@@ -0,0 +1,26 @@
+import * as esbuild from 'esbuild'
+
+const isWatch = process.argv.includes('--watch')
+
+const buildOptions = {
+  entryPoints: [
+    'app/javascript/application.jsx',
+  ],
+  bundle: true,
+  sourcemap: true,
+  format: 'esm',
+  outdir: 'app/assets/builds',
+  publicPath: '/assets',
+  plugins:  process.env.NODE_ENV === 'production' ? [] : [] ,
+  metafile: true,
+  conditions: process.env.NODE_ENV === 'production' ? ['production'] : [],
+}
+
+if (isWatch) {
+  const ctx = await esbuild.context(buildOptions)
+  await ctx.watch()
+  console.log('Watching for changes...')
+} else {
+  const result = await esbuild.build(buildOptions)
+  console.log(await esbuild.analyzeMetafile(result.metafile))
+}

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

@@ -1,48 +1,7 @@
-import { createSlice } from "@reduxjs/toolkit"
-import { receiveResponse , beforeVisit } from "@thoughtbot/superglue"
+import { useFlash } from "@thoughtbot/superglue"
 
-const initialState = {}
-
-export const flashSlice = createSlice({
-  name: "flash",
-  initialState: initialState,
-  reducers: {
-    clearFlash(state, { payload }) {
-      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(receiveResponse , (state, action) => {
-      const { response } = action.payload
-
-      if(response.slices) {
-        return {
-          ...state,
-          ...response.slices.flash
-        }
-      } else {
-        return state
-      }
-    })
-  }
-})
-
-export const { clearFlash, flash } = flashSlice.actions
+/**
+ * A typed wrapper around useFlash. Customize the return shape
+ * to match the flash keys your application uses.
+ */
+export const useAppFlash = () => useFlash()

data/lib/generators/superglue/install/templates/js/layout.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import { useSelector } from 'react-redux'
+import { useAppFlash } from '@javascript/flash'
 
 export const Layout = ({children}) => {
-  const flash = useSelector((state) => state.flash)
+  const flash = useAppFlash()
 
   return (
     <div>

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

@@ -0,0 +1,9 @@
+const pageIdentifierToPageComponent = {}
+const pages = import.meta.glob('../views/**/*.jsx', { eager: true })
+
+for (const key in pages) {
+  const identifier = key.replace('../views/', '').split('.')[0]
+  pageIdentifierToPageComponent[identifier] = pages[key].default
+}
+
+export { pageIdentifierToPageComponent }

data/lib/generators/superglue/install/templates/rollup/page_to_page_mapping.ts

@@ -0,0 +1,9 @@
+const pageIdentifierToPageComponent: Record<string, React.ComponentType> = {}
+const pages = import.meta.glob('../views/**/*.tsx', { eager: true })
+
+for (const key in pages) {
+  const identifier = key.replace('../views/', '').split('.')[0]
+  pageIdentifierToPageComponent[identifier] = (pages[key] as { default: React.ComponentType }).default
+}
+
+export { pageIdentifierToPageComponent }

data/lib/generators/superglue/install/templates/rollup/rollup.config.deepkit.js

@@ -0,0 +1,37 @@
+import path from "path"
+import resolve from "@rollup/plugin-node-resolve"
+import commonjs from "@rollup/plugin-commonjs"
+import babel from "@rollup/plugin-babel"
+import alias from "@rollup/plugin-alias"
+import importMetaGlob from "rollup-plugin-import-meta-glob"
+import { rollup as deepkitPlugin } from "@thoughtbot/superglue/deepkit"
+
+export default {
+  input: "app/javascript/application.tsx",
+  output: {
+    file: "app/assets/builds/application.js",
+    format: "esm",
+    inlineDynamicImports: true,
+    sourcemap: true
+  },
+  plugins: [
+    importMetaGlob(),
+    alias({
+      entries: [
+        { find: "@javascript", replacement: path.resolve("app/javascript") },
+        { find: "@views", replacement: path.resolve("app/views") }
+      ]
+    }),
+    resolve({ extensions: [".ts", ".tsx", ".js", ".jsx"] }),
+    commonjs(),
+    babel({
+      babelHelpers: "bundled",
+      presets: [
+        ["@babel/preset-react", { runtime: "automatic" }],
+        "@babel/preset-typescript"
+      ],
+      extensions: [".ts", ".tsx", ".js", ".jsx"]
+    }),
+    ...(process.env.NODE_ENV === 'production' ? [] : [deepkitPlugin()])
+  ]
+}

data/lib/generators/superglue/install/templates/rollup/rollup.config.js

@@ -0,0 +1,32 @@
+import path from "path"
+import resolve from "@rollup/plugin-node-resolve"
+import commonjs from "@rollup/plugin-commonjs"
+import babel from "@rollup/plugin-babel"
+import alias from "@rollup/plugin-alias"
+import importMetaGlob from "rollup-plugin-import-meta-glob"
+
+export default {
+  input: "app/javascript/application.jsx",
+  output: {
+    file: "app/assets/builds/application.js",
+    format: "esm",
+    inlineDynamicImports: true,
+    sourcemap: true
+  },
+  plugins: [
+    importMetaGlob(),
+    alias({
+      entries: [
+        { find: "@javascript", replacement: path.resolve("app/javascript") },
+        { find: "@views", replacement: path.resolve("app/views") }
+      ]
+    }),
+    resolve({ extensions: [".js", ".jsx"] }),
+    commonjs(),
+    babel({
+      babelHelpers: "bundled",
+      presets: [["@babel/preset-react", { runtime: "automatic" }]],
+      extensions: [".js", ".jsx"]
+    })
+  ]
+}

data/lib/generators/superglue/install/templates/rollup/rollup.config.ts.js

@@ -0,0 +1,35 @@
+import path from "path"
+import resolve from "@rollup/plugin-node-resolve"
+import commonjs from "@rollup/plugin-commonjs"
+import babel from "@rollup/plugin-babel"
+import alias from "@rollup/plugin-alias"
+import importMetaGlob from "rollup-plugin-import-meta-glob"
+
+export default {
+  input: "app/javascript/application.tsx",
+  output: {
+    file: "app/assets/builds/application.js",
+    format: "esm",
+    inlineDynamicImports: true,
+    sourcemap: true
+  },
+  plugins: [
+    importMetaGlob(),
+    alias({
+      entries: [
+        { find: "@javascript", replacement: path.resolve("app/javascript") },
+        { find: "@views", replacement: path.resolve("app/views") }
+      ]
+    }),
+    resolve({ extensions: [".ts", ".tsx", ".js", ".jsx"] }),
+    commonjs(),
+    babel({
+      babelHelpers: "bundled",
+      presets: [
+        ["@babel/preset-react", { runtime: "automatic" }],
+        "@babel/preset-typescript"
+      ],
+      extensions: [".ts", ".tsx", ".js", ".jsx"]
+    })
+  ]
+}

data/lib/generators/superglue/install/templates/stream.json.props

@@ -14,6 +14,4 @@ end
 
 json.action "handleStreamResponse"
 
-json.slices do
-  json.flash flash.to_h
-end
+json.flash flash.to_h

data/lib/generators/superglue/install/templates/ts/application.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
-import { Application, SaveResponse } from "@thoughtbot/superglue";
+import { createApp, SaveResponse } from "@thoughtbot/superglue";
 import { buildVisitAndRemote } from "./application_visit";
 import { pageIdentifierToPageComponent } from "./page_to_page_mapping";
-import { store } from "./store";
+import { Layout } from "./components";
 
 declare global {
   interface Window {
@@ -17,24 +17,30 @@ if (typeof window !== "undefined" && window.SUPERGLUE_INITIAL_PAGE_STATE) {
     const location = window.location;
 
     if (appEl) {
+      const { Provider, Outlet, ujs } = createApp({
+        // The base url prefixed to all calls made by the `visit`
+        // and `remote` thunks.
+        baseUrl: location.origin,
+        // The global var SUPERGLUE_INITIAL_PAGE_STATE is set by your erb
+        // template, e.g., index.html.erb
+        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,
+        // Mapping between the page identifier to page component
+        mapping: pageIdentifierToPageComponent,
+      });
+
       const root = createRoot(appEl);
       root.render(
-        <Application
-          // The base url prefixed to all calls made by the `visit`
-          // and `remote` thunks.
-          baseUrl={location.origin}
-          // The global var SUPERGLUE_INITIAL_PAGE_STATE is set by your erb
-          // template, e.g., index.html.erb
-          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}
-        />
+        <div onClick={ujs.onClick} onSubmit={ujs.onSubmit}>
+          <Provider>
+            <Layout>
+              <Outlet />
+            </Layout>
+          </Provider>
+        </div>
       );
     }
   });

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

@@ -1,10 +1,8 @@
 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,
@@ -14,10 +12,11 @@ import { visit, remote } from "@thoughtbot/superglue/action_creators";
  * 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
-) => {
+export const buildVisitAndRemote: BuildVisitAndRemote = ({
+  navigateTo,
+  visit,
+  remote,
+}) => {
   const appRemote: ApplicationRemote = (path, { dataset, ...options } = {}) => {
     /**
      * You can make use of `dataset` to add custom UJS options.
@@ -32,27 +31,38 @@ export const buildVisitAndRemote: BuildVisitAndRemote = (
      *
      * This would be available as `sgHideProgress` on the dataset
      */
-    return store.dispatch(remote(path, options));
+    return remote(path, options).then((result) => {
+      if (result.hasError) {
+        const { response } = result;
+
+        if (response.status >= 400 && response.status < 500) {
+          window.location.href = "/400.html";
+        } else if (response.status >= 500) {
+          window.location.href = "/500.html";
+        }
+      }
+
+      return result;
+    });
   };
 
   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;
+    return visit(path, options)
+      .then((result) => {
+        if (result.hasError) {
+          const { response } = result;
+
+          if (response.status >= 400 && response.status < 500) {
+            window.location.href = "/400.html";
+          } else if (response.status >= 500) {
+            window.location.href = "/500.html";
+          }
+
+          return result;
         }
 
         /**
@@ -61,19 +71,14 @@ export const buildVisitAndRemote: BuildVisitAndRemote = (
          * 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
+        const navigationAction = !!dataset?.sgReplace
           ? "replace"
-          : meta.navigationAction;
-        ref.current?.navigateTo(meta.pageKey, {
-          action: navigatonAction,
+          : result.navigationAction;
+        navigateTo(result.pageKey, {
+          action: navigationAction,
         });
 
-        /**
-         * 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;
+        return result;
       })
       .finally(() => {
         /**
@@ -81,40 +86,6 @@ export const buildVisitAndRemote: BuildVisitAndRemote = (
          *
          * 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;
-          }
-        }
       });
   };
 

data/lib/generators/superglue/install/templates/ts/build.deepkit.mjs

@@ -0,0 +1,27 @@
+import * as esbuild from 'esbuild'
+import { esbuild as deepkitPlugin } from '@thoughtbot/superglue/deepkit'
+
+const isWatch = process.argv.includes('--watch')
+
+const buildOptions = {
+  entryPoints: [
+    'app/javascript/application.tsx',
+  ],
+  bundle: true,
+  sourcemap: true,
+  format: 'esm',
+  outdir: 'app/assets/builds',
+  publicPath: '/assets',
+  plugins: process.env.NODE_ENV === 'production' ? [] : [deepkitPlugin()],
+  metafile: true,
+  conditions: process.env.NODE_ENV === 'production' ? ['production'] : [],
+}
+
+if (isWatch) {
+  const ctx = await esbuild.context(buildOptions)
+  await ctx.watch()
+  console.log('Watching for changes...')
+} else {
+  const result = await esbuild.build(buildOptions)
+  console.log(await esbuild.analyzeMetafile(result.metafile))
+}

data/lib/generators/superglue/install/templates/ts/build.mjs

@@ -0,0 +1,26 @@
+import * as esbuild from 'esbuild'
+
+const isWatch = process.argv.includes('--watch')
+
+const buildOptions = {
+  entryPoints: [
+    'app/javascript/application.tsx',
+  ],
+  bundle: true,
+  sourcemap: true,
+  format: 'esm',
+  outdir: 'app/assets/builds',
+  publicPath: '/assets',
+  plugins: [],
+  metafile: true,
+  conditions: process.env.NODE_ENV === 'production' ? ['production'] : [],
+}
+
+if (isWatch) {
+  const ctx = await esbuild.context(buildOptions)
+  await ctx.watch()
+  console.log('Watching for changes...')
+} else {
+  const result = await esbuild.build(buildOptions)
+  console.log(await esbuild.analyzeMetafile(result.metafile))
+}