Create @fujocoded/astro-smooth-actions package

Author: essential-randomness

astro-smooth-actions/README.md

@@ -0,0 +1,38 @@
+`@fujocoded/astro-smooth-actions`
+
+A quick integration to make Astro Action smoother, even when used without
+client-side JavaScript.
+
+When installed, it automatically persists <u>form</u> action results in the
+session, preventing URL changes and form resubmission dialogs. and providing a
+smooth user experience
+
+If you don't know what any of this means, you should likely install this if:
+
+- use Astro Actions with Forms
+- [have access to session storage](https://docs.astro.build/en/guides/sessions/)
+- want your forms to work smoothly without client side JavaScript, .
+
+## How It Works
+
+> [!NOTE]
+>
+> In practice, this integration wraps the pattern described in ["Advanced:
+> Persist action results with a
+> session"](https://docs.astro.build/en/guides/actions/#advanced-persist-action-results-with-a-session)
+> into an installable plugin.
+
+This integration implements the [POST/Redirect/GET
+pattern](https://docs.astro.bu
+ild/en/guides/actions/#advanced-persist-action-results-with-a-session):
+
+1. Form submission (with form payload) is intercepted by its middleware
+2. Action is executed on the server
+3. Result is stored in the session
+4. User is redirected back to original page (without form payload)
+5. New page load retrieves result from session
+6. Result is cleared from session
+7. Page is displayed to the user
+
+Since this final page is just a regular page with no form submission data, the
+user avoids all the issues associated with pages resulting from form requests.

astro-smooth-actions/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@fujocoded/astro-smooth-action",
+  "type": "module",
+  "version": "0.0.1",
+  "description": "An Astro integration for smooth action handling",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    }
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md",
+    "package.json"
+  ],
+  "scripts": {
+    "build": "tsdown",
+    "validate": " npx publint"
+  },
+  "keywords": [
+    "withastro",
+    "astro-integration"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/fujowebdev/fujocoded-plugins.git"
+  },
+  "author": "FujoCoded LLC",
+  "license": "MIT",
+  "devDependencies": {
+    "astro": "^5.0.0",
+    "tsdown": "^0.14.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

astro-smooth-actions/src/index.ts

@@ -0,0 +1,25 @@
+import type { AstroIntegration } from "astro";
+import path from "node:path";
+
+export { onRequest } from "./middleware.js";
+
+export default function astroActionSessions(): AstroIntegration {
+  return {
+    name: "astro-smooth-actions",
+    hooks: {
+      "astro:config:setup": ({ addMiddleware }) => {
+        addMiddleware({
+          order: "pre",
+          entrypoint: path.join(import.meta.dirname, "./middleware.js"),
+        });
+      },
+      "astro:config:done": ({ config, logger }) => {
+        if (!config.session?.driver && !config.adapter) {
+          logger.warn(
+            "The astro-smooth-actions integration uses Astro's session storage, which requires a session driver or an adapter. You have neither set. For more information, see https://docs.astro.build/en/guides/sessions/"
+          );
+        }
+      },
+    },
+  };
+}

astro-smooth-actions/src/middleware.ts

@@ -0,0 +1,51 @@
+import { getActionContext } from "astro:actions";
+import { type MiddlewareHandler } from "astro";
+
+export const onRequest: MiddlewareHandler = async (context, next) => {
+  const { action, setActionResult, serializeActionResult } =
+    getActionContext(context);
+
+  const latestAction = await context.session?.get(
+    `smooth-actions:latest-astro-action`
+  );
+
+  if (latestAction) {
+    // There was an action result stored in the session, so we can restore it
+    // for this request and then delete the session entry. This makes it look
+    // like the action was executed on this request, and there was no magic
+    // redirect happening behind the scenes.
+    setActionResult(latestAction.name, latestAction.result);
+    await context.session?.delete(`smooth-actions:latest-astro-action`);
+    return next();
+  }
+
+  if (action?.calledFrom !== "form") {
+    // If the action was not called from a form, we can just move on to the next
+    // middleware. This is not this middleware's job to handle.
+    return next();
+  }
+
+  // If we're here, there was an action called from a form, so we need to execute it. Then we
+  // store the result in the session so that it can be restored for the next
+  // request.
+  const result = await action.handler();
+  context.session?.set(`smooth-actions:latest-astro-action`, {
+    name: action.name,
+    result: serializeActionResult(result),
+  });
+
+  if (result.error) {
+    // If the action failed, we need to redirect back to the page where the
+    // form is located. This is because the form will need to be resubmitted
+    // with the error message.
+    const referer = context.request.headers.get("Referer");
+    if (!referer) {
+      throw new Error("Action submission went wrong");
+    }
+    return context.redirect(referer);
+  }
+
+  // If the action succeeded, we can redirect to the original page. This will
+  // get rid of the POST request and replace it with a GET request.
+  return context.redirect(context.originPathname);
+};

astro-smooth-actions/tsdown.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig, type UserConfig } from "tsdown";
+import { glob } from "glob";
+
+export default defineConfig([
+  {
+    name: "integration",
+    dts: true,
+    clean: true,
+    unbundle: true,
+    entry: ["src/index.ts", "src/middleware.ts"],
+    external: [/^astro:/],
+  },
+]);