feat: support for astro v5

BREAKING CHANGE: Support for astro v5

Author: ido-pluto

examples/simple-form/astro.config.mjs

@@ -1,9 +1,13 @@
 import {defineConfig} from 'astro/config';
 import react from '@astrojs/react';
 import astroFormsDebug from "@astro-utils/forms/dist/integration.js";
+import node from '@astrojs/node';
 
 // https://astro.build/config
 export default defineConfig({
     output: "server",
+    adapter: node({
+        mode: 'standalone',
+    }),
     integrations: [react(), astroFormsDebug]
 });

examples/simple-form/package.json

@@ -13,17 +13,20 @@
   "dependencies": {
     "@astro-utils/express-endpoints": "^0.0.1",
     "@astro-utils/forms": "^0.0.1",
-    "@astrojs/check": "^0.7.0",
-    "@astrojs/react": "^3.6.0",
+    "@astrojs/node": "^9.3.0",
+    "@astrojs/react": "^4.3.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "astro": "^4.7.0",
+    "astro": "^5.11.0",
     "bootstrap": "^5.3.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "reactstrap": "^9.2.1",
     "sleep-promise": "^9.1.0",
-    "typescript": "^5.5.3",
     "zod": "^3.22.4"
+  },
+  "devDependencies": {
+    "@astrojs/check": "^0.9.4",
+    "typescript": "^5.8.3"
   }
-}
+}

package-lock.json

@@ -81,6 +81,6 @@
     "zod": "^3.19.1"
   },
   "peerDependencies": {
-    "astro": "^4.0.6"
+    "astro": "^5.0.0"
   }
 }

packages/forms/package.json

@@ -22,9 +22,8 @@ if (webFormsSettings.haveFileUpload) {
     props.enctype = 'multipart/form-data';
 }
 
-await Promise.all(
-    disposeFiles.map(file => fs.unlink(file).catch(() => {}))
-);
+await Promise.all(disposeFiles.map(file => fs.unlink(file).catch(() => {
+})));
 
 const useSession = getFormOptions(Astro).session?.cookieOptions?.maxAge;
 const formRequestToken = useSession && (await createFormToken(Astro));
@@ -45,7 +44,7 @@ const clientWFS = { loadingClassName, bigFileUploadOptions: bigFileClientOptions
 </script>
 
 <script>
-    import { BigFileUploadOptions, countTotalUploads } from './form/UploadBigFile/uploadBigFileClient.js';
+import { BigFileUploadOptions, countTotalUploads, finishFormSubmission, uploadAllFiles } from './form/UploadBigFile/uploadBigFileClient.js';
 
     declare global {
         interface Window {
@@ -82,7 +81,7 @@ const clientWFS = { loadingClassName, bigFileUploadOptions: bigFileClientOptions
     const form = document.querySelector('form') as HTMLFormElement;
     form?.querySelectorAll('button[type="submit"]').forEach(button => {
         button.addEventListener('click', () => {
-            if (button instanceof HTMLButtonElement === false || !button.formNoValidate && !form.checkValidity()) return;
+            if (button instanceof HTMLButtonElement === false || (!button.formNoValidate && !form.checkValidity())) return;
 
             if (window.clientWFS.loadingClassName) {
                 button.classList.add(window.clientWFS.loadingClassName);
@@ -94,11 +93,31 @@ const clientWFS = { loadingClassName, bigFileUploadOptions: bigFileClientOptions
         });
     });
 
-    form?.addEventListener('submit', () => {
+form?.addEventListener('submit', event => {
         setTimeout(() => {
             form.querySelectorAll('button[type="submit"]').forEach(button => {
                 (button as HTMLButtonElement).disabled = true;
             });
         }, 0);
+
+    // big files upload
+        const allBigUploads = document.querySelectorAll('input[name].big-upload') as NodeListOf<HTMLInputElement>;
+    const { count } = countTotalUploads(allBigUploads);
+    if (count === 0) return;
+
+    let buttonCallback = '';
+    if (document.activeElement instanceof HTMLButtonElement && document.activeElement.name === 'button-callback') {
+    buttonCallback = document.activeElement.value;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    handleUploads(allBigUploads, buttonCallback);
     });
+
+async function handleUploads(allBigUploads: NodeListOf<HTMLInputElement>, clickAfter?: string) {
+    await uploadAllFiles(allBigUploads);
+    finishFormSubmission(form, clickAfter);
+    }
 </script>

packages/forms/src/components/WebForms.astro

@@ -9,31 +9,4 @@ export interface Props<T extends keyof JSX.IntrinsicElements | React.JSXElementC
 const { class: className, tempDirectory, name, ...props } = Astro.props;
 await processBigFileUpload(Astro);
 ---
-
-<BInput type='file' {...props} name={name} class:list={[className, 'big-upload']} />
-
-<script>
-    import { countTotalUploads, finishFormSubmission, uploadAllFiles } from './uploadBigFileClient.js';
-
-    const form = document.querySelector('form') as HTMLFormElement;
-    form?.addEventListener('submit', event => {
-        const allBigUploads = document.querySelectorAll('input[name].big-upload') as NodeListOf<HTMLInputElement>;
-        const { count } = countTotalUploads(allBigUploads);
-        if (count === 0) return;
-
-        let buttonCallback = "";
-        if(document.activeElement instanceof HTMLButtonElement && document.activeElement.name === "button-callback") {
-            buttonCallback = document.activeElement.value;
-        }
-
-        event.preventDefault();
-        event.stopPropagation();
-
-        handleUploads(allBigUploads, buttonCallback);
-    });
-
-    async function handleUploads(allBigUploads: NodeListOf<HTMLInputElement>, clickAfter?: string) {
-        await uploadAllFiles(allBigUploads);
-        finishFormSubmission(form, clickAfter);
-    }
-</script>
+<BInput type='file' {...props} name={name} class:list={[className, 'big-upload']} />

packages/forms/src/components/form/UploadBigFile/UploadBigFile.astro

@@ -1,4 +1,4 @@
-import { v4 as uuid } from 'uuid';
+import {v4 as uuid} from 'uuid';
 
 const sleep = (ms: number) => new Promise(res => setTimeout(res, ms));
 
@@ -95,7 +95,7 @@ async function finishUpload(uploadId: string, options: BigFileUploadOptions) {
 
             await sleep(options.waitFinishDelay);
         } catch (error) {
-            if(maxError === 0){
+            if (maxError === 0) {
                 throw error;
             }
             maxError--;
@@ -133,6 +133,7 @@ async function uploadBigFile(fileId: string, file: File, progressCallback: Progr
             total: totalChunks,
         };
 
+        const stopRetrying = new AbortController();
         const uploadPromiseWithRetry = retry(async () => {
             const upload = await uploadChunkWithXHR(chunk, info, (loaded) => {
                 activeLoads.set(i, loaded);
@@ -151,9 +152,12 @@ async function uploadBigFile(fileId: string, file: File, progressCallback: Progr
             }
 
             if (!response?.ok) {
+                if (response.retry === false) {
+                    stopRetrying.abort('Not retryable error');
+                }
                 throw new Error(response.error);
             }
-        }, { retries: options.retryChunks, delay: options.retryDelay })
+        }, {retries: options.retryChunks, delay: options.retryDelay, stopRetying: stopRetrying.signal})
             .then(() => {
                 activeLoads.delete(i);
                 activeChunks.delete(uploadPromiseWithRetry);
@@ -271,18 +275,24 @@ export function finishFormSubmission(form: HTMLFormElement, onClick?: string) {
     form.submit();
 }
 
-async function retry(fn: () => Promise<void>, options: { retries: number, delay: number; } = { retries: 5, delay: 1000 }) {
+type RetryOptions = {
+    retries: number,
+    delay: number;
+    stopRetying?: AbortSignal;
+};
+
+async function retry(fn: () => Promise<void>, options: RetryOptions = {retries: 5, delay: 1000}) {
     let attempts = 0;
     while (attempts < options.retries) {
         try {
             await fn();
             return;
         } catch (error) {
             attempts++;
-            if (attempts >= options.retries) {
+            if (attempts >= options.retries || options.stopRetying?.aborted) {
                 throw error;
             }
             await sleep(options.delay);
         }
     }
-}
+}

packages/forms/src/components/form/UploadBigFile/uploadBigFileClient.ts

@@ -1,12 +1,12 @@
-import fsExtra from "fs-extra/esm";
-import fs from "fs/promises";
-import oldFs from "fs";
-import path from "path";
-import z from "zod";
-import os from "os";
-import { validateFrom } from "../../../form-tools/csrf.js";
-import { AstroGlobal } from "astro";
-import { getFormValue } from "../../../form-tools/post.js";
+import fsExtra from 'fs-extra/esm';
+import fs from 'fs/promises';
+import oldFs from 'fs';
+import path from 'path';
+import z from 'zod';
+import os from 'os';
+import {validateFrom} from '../../../form-tools/csrf.js';
+import {AstroGlobal} from 'astro';
+import {getFormValue} from '../../../form-tools/post.js';
 import ThrowOverrideResponse from '../../../throw-action/throwOverrideResponse.js';
 
 const zodValidationInfo =
@@ -91,12 +91,12 @@ async function loadUploadFiles(astro: AstroGlobal, options: Partial<LoadUploadFi
 
     if (typeof allowUpload === "function") {
         if (!await allowUpload(uploadFile, data)) {
-            return await sendError("File not allowed");
+            return await sendError('File not allowed', true, {retry: false});
         }
     }
 
     if (uploadSize > maxUploadSize) {
-        return await sendError("File size exceeded");
+        return await sendError('File size exceeded', true, {retry: false});
     }
 
     const totalDirectorySizeWithNewUpload = (await totalDirectorySize(tempDirectory)) + part === 1 ? uploadSize : uploadFile.size;
@@ -221,4 +221,4 @@ export async function checkIfFileExists(filePath: string) {
     } catch {
         return false;
     }
-}
+}

packages/forms/src/components/form/UploadBigFile/uploadBigFileServer.ts

@@ -1,29 +1,90 @@
+const ASYNC_RENDERS_REGEX = /render\s*\(\s*destination\s*\)\s*{\s*const\s+flushers\s*=\s*this\.expressions\.map\s*\(\s*\(?exp\)?\s*=>\s*{\s*return\s+createBufferedRenderer\s*\(\s*destination\s*,\s*\(?bufferDestination\)?\s*=>\s*{\s*if\s*\(\s*exp\s*\|\|\s*exp\s*===\s*0\s*\)\s*{\s*return\s+renderChild\s*\(\s*bufferDestination\s*,\s*exp\s*\);\s*}\s*}\s*\);\s*}\s*\);/gs;
 
-/**
-const expRenders = this.expressions.map(exp => {
-  return renderToBufferDestination(bufferDestination => {
-    if (exp || exp === 0) {
-      return renderChild(bufferDestination, exp);
+const SYNC_RENDERS_CODE_HELPERS = `
+const locks = new Map();
+async function withLock(scope, key, acquireLockSignalOrCallback, maybeCallback) {
+    const signal = acquireLockSignalOrCallback instanceof AbortSignal
+        ? acquireLockSignalOrCallback
+        : undefined;
+
+    const callback = typeof acquireLockSignalOrCallback === 'function'
+        ? acquireLockSignalOrCallback
+        : maybeCallback;
+
+    if (typeof callback !== 'function') {
+        throw new Error("callback is required");
     }
-  });
-});
- */
-const ASYNC_RENDERS_REGEX = /const\s+expRenders\s*=\s*this\.expressions\.map\s*\(\s*\(?exp\)?\s*=>\s*{\s*return\s+renderToBufferDestination\s*\(\s*\(?bufferDestination\)?\s*=>\s*{\s*if\s*\(\s*exp\s*\|\|\s*exp\s*===\s*0\s*\)\s*{\s*return\s+renderChild\s*\(\s*bufferDestination\s*,\s*exp\s*\);\s*}\s*}\s*\);\s*}\s*\);/gs;
 
-const SYNC_RENDERS_CODE = `
-const expRenders = [];
-for (const exp of this.expressions) {
-    const promise = renderToBufferDestination(bufferDestination => {
-    if (exp || exp === 0) {
-        return renderChild(bufferDestination, exp);
+    if (signal?.aborted) {
+        throw signal.reason;
     }
-    });
 
-    await promise.renderPromise;
-    expRenders.push(promise);
-}
+    let keyMap = locks.get(scope);
+    if (!keyMap) {
+        keyMap = new Map();
+        locks.set(scope, keyMap);
+    }
+
+    let entry = keyMap.get(key);
+    let queue, onDelete;
+
+    if (entry) {
+        [queue, onDelete] = entry;
+
+        await new Promise((resolve, reject) => {
+            const onResolve = () => {
+                signal?.removeEventListener("abort", onAbort);
+                resolve();
+            };
+
+            const onAbort = () => {
+                const index = queue.indexOf(onResolve);
+                if (index >= 0) queue.splice(index, 1);
+                signal.removeEventListener("abort", onAbort);
+                reject(signal.reason);
+            };
+
+            queue.push(onResolve);
+            if (signal) signal.addEventListener("abort", onAbort);
+        });
+
+    } else {
+        queue = [];
+        onDelete = [];
+        keyMap.set(key, [queue, onDelete]);
+    }
+
+    try {
+        return await callback.call(scope);
+    } finally {
+        if (queue.length > 0) {
+            queue.shift()?.();
+        } else {
+            keyMap.delete(key);
+            if (keyMap.size === 0) {
+                locks.delete(scope);
+            }
+            for (const fn of onDelete) fn();
+        }
+    }
+}`;
+
+const SYNC_RENDERS_CODE = `
+render(destination) {
+  const flushers = this.expressions.map((exp) => {
+      return createBufferedRenderer(destination, (bufferDestination) => {
+          // Skip render if falsy, except the number 0
+          if (exp || exp === 0) {
+              return withLock(this, '_lockRender', () => renderChild(bufferDestination, exp));
+          }
+      });
+  });
 `;
 
 export function refactorCodeInlineRenderComponent(sourceCode: string): string {
-    return sourceCode.replace(ASYNC_RENDERS_REGEX, SYNC_RENDERS_CODE);
-}
+  if (ASYNC_RENDERS_REGEX.test(sourceCode)) {
+    return SYNC_RENDERS_CODE_HELPERS + sourceCode.replace(ASYNC_RENDERS_REGEX, SYNC_RENDERS_CODE);
+  }
+
+  return sourceCode;
+}