@edgestore/react 0.6.0-canary.2 → 0.6.0

package/dist/contextProvider.js

@@ -0,0 +1,152 @@
+'use strict';
+
+var React = require('react');
+var createNextProxy = require('./createNextProxy.js');
+var EdgeStoreClientError = require('./libs/errors/EdgeStoreClientError.js');
+var handleError = require('./libs/errors/handleError.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const DEFAULT_BASE_URL = (typeof process !== 'undefined' ? process.env.NEXT_PUBLIC_EDGE_STORE_BASE_URL : undefined?.EDGE_STORE_BASE_URL) ?? 'https://files.edgestore.dev';
+function createEdgeStoreProvider(opts) {
+    const EdgeStoreContext = /*#__PURE__*/ React__namespace.createContext(undefined);
+    const EdgeStoreProvider = ({ children, basePath })=>{
+        return EdgeStoreProviderInner({
+            children,
+            context: EdgeStoreContext,
+            basePath,
+            maxConcurrentUploads: opts?.maxConcurrentUploads,
+            disableDevProxy: opts?.disableDevProxy
+        });
+    };
+    function useEdgeStore() {
+        if (!EdgeStoreContext) {
+            throw new Error('React Context is unavailable in Server Components');
+        }
+        // @ts-expect-error - We know that the context value should not be undefined
+        const value = React__namespace.useContext(EdgeStoreContext);
+        if (!value && process.env.NODE_ENV !== 'production') {
+            throw new Error('[edgestore]: `useEdgeStore` must be wrapped in a <EdgeStoreProvider />');
+        }
+        return value;
+    }
+    return {
+        EdgeStoreProvider,
+        useEdgeStore
+    };
+}
+function EdgeStoreProviderInner({ children, context, basePath, maxConcurrentUploads, disableDevProxy }) {
+    const apiPath = basePath ? `${basePath}` : '/api/edgestore';
+    const [state, setState] = React__namespace.useState({
+        loading: true,
+        initialized: false,
+        error: false
+    });
+    const uploadingCountRef = React__namespace.useRef(0);
+    const initExecuted = React__namespace.useRef(false); // to make sure we don't run init twice
+    React__namespace.useEffect(()=>{
+        if (!initExecuted.current) {
+            void init();
+        }
+        return ()=>{
+            initExecuted.current = true;
+        };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    async function init() {
+        try {
+            setState({
+                loading: true,
+                initialized: false,
+                error: false
+            });
+            const res = await fetch(`${apiPath}/init`, {
+                method: 'POST',
+                credentials: 'include'
+            });
+            if (res.ok) {
+                const json = await res.json();
+                // Only call _init API if provider is edgestore
+                if (json.providerName === 'edgestore') {
+                    const innerRes = await fetch(`${DEFAULT_BASE_URL}/_init`, {
+                        method: 'GET',
+                        credentials: 'include',
+                        headers: {
+                            'x-edgestore-token': json.token
+                        }
+                    });
+                    if (innerRes.ok) {
+                        // update state
+                        setState({
+                            loading: false,
+                            initialized: true,
+                            error: false
+                        });
+                    } else {
+                        setState({
+                            loading: false,
+                            initialized: false,
+                            error: true
+                        });
+                        throw new EdgeStoreClientError("Couldn't initialize EdgeStore.");
+                    }
+                } else {
+                    // For non-edgestore providers, just update state without calling _init
+                    setState({
+                        loading: false,
+                        initialized: true,
+                        error: false
+                    });
+                }
+            } else {
+                setState({
+                    loading: false,
+                    initialized: false,
+                    error: true
+                });
+                await handleError.handleError(res);
+            }
+        } catch (err) {
+            setState({
+                loading: false,
+                initialized: false,
+                error: true
+            });
+            throw err;
+        }
+    }
+    async function reset() {
+        await init();
+    }
+    return /*#__PURE__*/ React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/ React__namespace.createElement(context.Provider, {
+        value: {
+            edgestore: createNextProxy.createNextProxy({
+                apiPath,
+                uploadingCountRef,
+                maxConcurrentUploads,
+                disableDevProxy
+            }),
+            reset,
+            state
+        }
+    }, children));
+}
+
+exports.createEdgeStoreProvider = createEdgeStoreProvider;

package/dist/contextProvider.mjs

@@ -0,0 +1,131 @@
+import * as React from 'react';
+import { createNextProxy } from './createNextProxy.mjs';
+import EdgeStoreClientError from './libs/errors/EdgeStoreClientError.mjs';
+import { handleError } from './libs/errors/handleError.mjs';
+
+const DEFAULT_BASE_URL = (typeof process !== 'undefined' ? process.env.NEXT_PUBLIC_EDGE_STORE_BASE_URL : import.meta.env?.EDGE_STORE_BASE_URL) ?? 'https://files.edgestore.dev';
+function createEdgeStoreProvider(opts) {
+    const EdgeStoreContext = /*#__PURE__*/ React.createContext(undefined);
+    const EdgeStoreProvider = ({ children, basePath })=>{
+        return EdgeStoreProviderInner({
+            children,
+            context: EdgeStoreContext,
+            basePath,
+            maxConcurrentUploads: opts?.maxConcurrentUploads,
+            disableDevProxy: opts?.disableDevProxy
+        });
+    };
+    function useEdgeStore() {
+        if (!EdgeStoreContext) {
+            throw new Error('React Context is unavailable in Server Components');
+        }
+        // @ts-expect-error - We know that the context value should not be undefined
+        const value = React.useContext(EdgeStoreContext);
+        if (!value && process.env.NODE_ENV !== 'production') {
+            throw new Error('[edgestore]: `useEdgeStore` must be wrapped in a <EdgeStoreProvider />');
+        }
+        return value;
+    }
+    return {
+        EdgeStoreProvider,
+        useEdgeStore
+    };
+}
+function EdgeStoreProviderInner({ children, context, basePath, maxConcurrentUploads, disableDevProxy }) {
+    const apiPath = basePath ? `${basePath}` : '/api/edgestore';
+    const [state, setState] = React.useState({
+        loading: true,
+        initialized: false,
+        error: false
+    });
+    const uploadingCountRef = React.useRef(0);
+    const initExecuted = React.useRef(false); // to make sure we don't run init twice
+    React.useEffect(()=>{
+        if (!initExecuted.current) {
+            void init();
+        }
+        return ()=>{
+            initExecuted.current = true;
+        };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    async function init() {
+        try {
+            setState({
+                loading: true,
+                initialized: false,
+                error: false
+            });
+            const res = await fetch(`${apiPath}/init`, {
+                method: 'POST',
+                credentials: 'include'
+            });
+            if (res.ok) {
+                const json = await res.json();
+                // Only call _init API if provider is edgestore
+                if (json.providerName === 'edgestore') {
+                    const innerRes = await fetch(`${DEFAULT_BASE_URL}/_init`, {
+                        method: 'GET',
+                        credentials: 'include',
+                        headers: {
+                            'x-edgestore-token': json.token
+                        }
+                    });
+                    if (innerRes.ok) {
+                        // update state
+                        setState({
+                            loading: false,
+                            initialized: true,
+                            error: false
+                        });
+                    } else {
+                        setState({
+                            loading: false,
+                            initialized: false,
+                            error: true
+                        });
+                        throw new EdgeStoreClientError("Couldn't initialize EdgeStore.");
+                    }
+                } else {
+                    // For non-edgestore providers, just update state without calling _init
+                    setState({
+                        loading: false,
+                        initialized: true,
+                        error: false
+                    });
+                }
+            } else {
+                setState({
+                    loading: false,
+                    initialized: false,
+                    error: true
+                });
+                await handleError(res);
+            }
+        } catch (err) {
+            setState({
+                loading: false,
+                initialized: false,
+                error: true
+            });
+            throw err;
+        }
+    }
+    async function reset() {
+        await init();
+    }
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(context.Provider, {
+        value: {
+            edgestore: createNextProxy({
+                apiPath,
+                uploadingCountRef,
+                maxConcurrentUploads,
+                disableDevProxy
+            }),
+            reset,
+            state
+        }
+    }, children));
+}
+
+export { createEdgeStoreProvider };

package/dist/createNextProxy.js

@@ -0,0 +1,322 @@
+'use strict';
+
+var EdgeStoreClientError = require('./libs/errors/EdgeStoreClientError.js');
+var handleError = require('./libs/errors/handleError.js');
+var uploadAbortedError = require('./libs/errors/uploadAbortedError.js');
+
+function createNextProxy({ apiPath, uploadingCountRef, maxConcurrentUploads = 5, disableDevProxy }) {
+    return new Proxy({}, {
+        get (_, prop) {
+            const bucketName = prop;
+            const bucketFunctions = {
+                upload: async (params)=>{
+                    try {
+                        params.onProgressChange?.(0);
+                        // This handles the case where the user cancels the upload while it's waiting in the queue
+                        const abortPromise = new Promise((resolve)=>{
+                            params.signal?.addEventListener('abort', ()=>{
+                                resolve();
+                            }, {
+                                once: true
+                            });
+                        });
+                        while(uploadingCountRef.current >= maxConcurrentUploads && uploadingCountRef.current > 0){
+                            await Promise.race([
+                                new Promise((resolve)=>setTimeout(resolve, 300)),
+                                abortPromise
+                            ]);
+                            if (params.signal?.aborted) {
+                                throw new uploadAbortedError.UploadAbortedError('File upload aborted');
+                            }
+                        }
+                        uploadingCountRef.current++;
+                        const fileInfo = await uploadFile(params, {
+                            bucketName: bucketName,
+                            apiPath
+                        }, disableDevProxy);
+                        return fileInfo;
+                    } finally{
+                        uploadingCountRef.current--;
+                    }
+                },
+                confirmUpload: async (params)=>{
+                    const { success } = await confirmUpload(params, {
+                        bucketName: bucketName,
+                        apiPath
+                    });
+                    if (!success) {
+                        throw new EdgeStoreClientError('Failed to confirm upload');
+                    }
+                },
+                delete: async (params)=>{
+                    const { success } = await deleteFile(params, {
+                        bucketName: bucketName,
+                        apiPath
+                    });
+                    if (!success) {
+                        throw new EdgeStoreClientError('Failed to delete file');
+                    }
+                }
+            };
+            return bucketFunctions;
+        }
+    });
+}
+async function uploadFile({ file, signal, input, onProgressChange, options }, { apiPath, bucketName }, disableDevProxy) {
+    try {
+        onProgressChange?.(0);
+        const res = await fetch(`${apiPath}/request-upload`, {
+            method: 'POST',
+            credentials: 'include',
+            signal: signal,
+            body: JSON.stringify({
+                bucketName,
+                input,
+                fileInfo: {
+                    extension: file.name.split('.').pop(),
+                    type: file.type,
+                    size: file.size,
+                    fileName: options?.manualFileName,
+                    replaceTargetUrl: options?.replaceTargetUrl,
+                    temporary: options?.temporary
+                }
+            }),
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        });
+        if (!res.ok) {
+            await handleError.handleError(res);
+        }
+        const json = await res.json();
+        if ('multipart' in json) {
+            await multipartUpload({
+                bucketName,
+                multipartInfo: json.multipart,
+                onProgressChange,
+                signal,
+                file,
+                apiPath
+            });
+        } else if ('uploadUrl' in json) {
+            // Single part upload
+            // Upload the file to the signed URL and get the progress
+            await uploadFileInner({
+                file,
+                uploadUrl: json.uploadUrl,
+                onProgressChange,
+                signal
+            });
+        } else {
+            throw new EdgeStoreClientError('An error occurred');
+        }
+        return {
+            url: getUrl(json.accessUrl, apiPath, disableDevProxy),
+            thumbnailUrl: json.thumbnailUrl ? getUrl(json.thumbnailUrl, apiPath, disableDevProxy) : null,
+            size: json.size,
+            uploadedAt: new Date(json.uploadedAt),
+            path: json.path,
+            pathOrder: json.pathOrder,
+            metadata: json.metadata
+        };
+    } catch (e) {
+        if (e instanceof Error && e.name === 'AbortError') {
+            throw new uploadAbortedError.UploadAbortedError('File upload aborted');
+        }
+        onProgressChange?.(0);
+        throw e;
+    }
+}
+/**
+ * Protected files need third-party cookies to work.
+ * Since third party cookies don't work on localhost,
+ * we need to proxy the file through the server.
+ */ function getUrl(url, apiPath, disableDevProxy) {
+    const mode = typeof process !== 'undefined' ? process.env.NODE_ENV : undefined?.DEV ? 'development' : 'production';
+    if (mode === 'development' && !url.includes('/_public/') && !disableDevProxy) {
+        const proxyUrl = new URL(window.location.origin);
+        proxyUrl.pathname = `${apiPath}/proxy-file`;
+        proxyUrl.search = new URLSearchParams({
+            url
+        }).toString();
+        return proxyUrl.toString();
+    }
+    return url;
+}
+async function uploadFileInner(props) {
+    const { file, uploadUrl, onProgressChange, signal } = props;
+    const promise = new Promise((resolve, reject)=>{
+        if (signal?.aborted) {
+            reject(new uploadAbortedError.UploadAbortedError('File upload aborted'));
+            return;
+        }
+        const request = new XMLHttpRequest();
+        request.open('PUT', uploadUrl);
+        // This is for Azure provider. Specifies the blob type
+        request.setRequestHeader('x-ms-blob-type', 'BlockBlob');
+        request.addEventListener('loadstart', ()=>{
+            onProgressChange?.(0);
+        });
+        request.upload.addEventListener('progress', (e)=>{
+            if (e.lengthComputable) {
+                // 2 decimal progress
+                const progress = Math.round(e.loaded / e.total * 10000) / 100;
+                onProgressChange?.(progress);
+            }
+        });
+        request.addEventListener('error', ()=>{
+            reject(new Error('Error uploading file'));
+        });
+        request.addEventListener('abort', ()=>{
+            reject(new uploadAbortedError.UploadAbortedError('File upload aborted'));
+        });
+        request.addEventListener('loadend', ()=>{
+            // Return the ETag header (needed to complete multipart upload)
+            resolve(request.getResponseHeader('ETag'));
+        });
+        if (signal) {
+            signal.addEventListener('abort', ()=>{
+                request.abort();
+            });
+        }
+        request.send(file);
+    });
+    return promise;
+}
+async function multipartUpload(params) {
+    const { bucketName, multipartInfo, onProgressChange, file, signal, apiPath } = params;
+    const { partSize, parts, totalParts, uploadId, key } = multipartInfo;
+    const uploadingParts = [];
+    const uploadPart = async (params)=>{
+        const { part, chunk } = params;
+        const { uploadUrl } = part;
+        const eTag = await uploadFileInner({
+            file: chunk,
+            uploadUrl,
+            signal,
+            onProgressChange: (progress)=>{
+                const uploadingPart = uploadingParts.find((p)=>p.partNumber === part.partNumber);
+                if (uploadingPart) {
+                    uploadingPart.progress = progress;
+                } else {
+                    uploadingParts.push({
+                        partNumber: part.partNumber,
+                        progress
+                    });
+                }
+                const totalProgress = Math.round(uploadingParts.reduce((acc, p)=>acc + p.progress * 100, 0) / totalParts) / 100;
+                onProgressChange?.(totalProgress);
+            }
+        });
+        if (!eTag) {
+            throw new EdgeStoreClientError('Could not get ETag from multipart response');
+        }
+        return {
+            partNumber: part.partNumber,
+            eTag
+        };
+    };
+    // Upload the parts in parallel
+    const completedParts = await queuedPromises({
+        items: parts.map((part)=>({
+                part,
+                chunk: file.slice((part.partNumber - 1) * partSize, part.partNumber * partSize)
+            })),
+        fn: uploadPart,
+        maxParallel: 5,
+        maxRetries: 10
+    });
+    // Complete multipart upload
+    const res = await fetch(`${apiPath}/complete-multipart-upload`, {
+        method: 'POST',
+        credentials: 'include',
+        body: JSON.stringify({
+            bucketName,
+            uploadId,
+            key,
+            parts: completedParts
+        }),
+        headers: {
+            'Content-Type': 'application/json'
+        }
+    });
+    if (!res.ok) {
+        await handleError.handleError(res);
+    }
+}
+async function confirmUpload({ url }, { apiPath, bucketName }) {
+    const res = await fetch(`${apiPath}/confirm-upload`, {
+        method: 'POST',
+        credentials: 'include',
+        body: JSON.stringify({
+            url,
+            bucketName
+        }),
+        headers: {
+            'Content-Type': 'application/json'
+        }
+    });
+    if (!res.ok) {
+        await handleError.handleError(res);
+    }
+    return res.json();
+}
+async function deleteFile({ url }, { apiPath, bucketName }) {
+    const res = await fetch(`${apiPath}/delete-file`, {
+        method: 'POST',
+        credentials: 'include',
+        body: JSON.stringify({
+            url,
+            bucketName
+        }),
+        headers: {
+            'Content-Type': 'application/json'
+        }
+    });
+    if (!res.ok) {
+        await handleError.handleError(res);
+    }
+    return res.json();
+}
+async function queuedPromises({ items, fn, maxParallel, maxRetries = 0 }) {
+    const results = new Array(items.length);
+    const executeWithRetry = async (func, retries)=>{
+        try {
+            return await func();
+        } catch (error) {
+            if (error instanceof uploadAbortedError.UploadAbortedError) {
+                throw error;
+            }
+            if (retries > 0) {
+                await new Promise((resolve)=>setTimeout(resolve, 5000));
+                return executeWithRetry(func, retries - 1);
+            } else {
+                throw error;
+            }
+        }
+    };
+    const semaphore = {
+        count: maxParallel,
+        async wait () {
+            // If we've reached our maximum concurrency, or it's the last item, wait
+            while(this.count <= 0)await new Promise((resolve)=>setTimeout(resolve, 500));
+            this.count--;
+        },
+        signal () {
+            this.count++;
+        }
+    };
+    const tasks = items.map((item, i)=>(async ()=>{
+            await semaphore.wait();
+            try {
+                const result = await executeWithRetry(()=>fn(item), maxRetries);
+                results[i] = result;
+            } finally{
+                semaphore.signal();
+            }
+        })());
+    await Promise.all(tasks);
+    return results;
+}
+
+exports.createNextProxy = createNextProxy;