@edgestore/react 0.0.0-alpha.12

package/README.md

@@ -0,0 +1,86 @@
+# Getting Started
+
+### Next.js Setup
+
+#### Install
+
+```bash
+npm install @edgestore/react
+```
+
+#### Environment Variables
+
+```bash
+# .env
+EDGE_STORE_ACCESS_KEY=your-access-key
+EDGE_STORE_SECRET_KEY=your-secret-key
+```
+
+#### API Route
+
+```jsx
+// pages/api/edgestore/[...edgestore].js
+import EdgeStore from '@edgestore/react/next';
+
+export default EdgeStore();
+```
+
+#### Provider
+
+```jsx
+// pages/_app.jsx
+import { EdgeStoreProvider } from '@edgestore/react';
+
+export default function App({ Component, pageProps }) {
+  return (
+    <EdgeStoreProvider>
+      <Component {...pageProps} />
+    </EdgeStoreProvider>
+  );
+}
+```
+
+### Upload image
+
+```jsx
+import { useEdgeStore } from '@edgestore/react';
+
+const Page = () => {
+  const [file, setFile] = useState(null);
+  const { upload } = useEdgeStore();
+
+  return (
+    <div>
+      <input type="file" onChange={(e) => setFile(e.target.files[0])} />
+      <button
+        onClick={async () => {
+          await upload({
+            file,
+            key: 'path/to/image.jpg',
+          });
+        }}
+      >
+        Upload
+      </button>
+    </div>
+  );
+};
+
+export default Page;
+```
+
+### Show image
+
+```jsx
+import { useEdgeStore } from '@edgestore/react';
+
+const Page = () => {
+  const { getImgSrc } = useEdgeStore();
+
+  return (
+    <div>
+      <img src={getImgSrc('path/to/image.jpg')} />
+    </div>
+  );
+};
+```

package/dist/contextProvider.d.ts

@@ -0,0 +1,36 @@
+import { AnyRouter } from '@edgestore/server/core';
+import * as React from 'react';
+import { BucketFunctions } from './createNextProxy';
+type EdgeStoreContextValue<TRouter extends AnyRouter> = {
+    edgestore: BucketFunctions<TRouter>;
+    /**
+     * In development, if this is a protected file, this function will add the token as a query param to the url.
+     * This is needed because third party cookies don't work with http urls.
+     */
+    getSrc: (url: string) => string;
+};
+export declare function createEdgeStoreProvider<TRouter extends AnyRouter>(opts?: {
+    /**
+     * The maximum number of concurrent uploads.
+     *
+     * Uploads will automatically be queued if this limit is reached.
+     *
+     * @default 5
+     */
+    maxConcurrentUploads?: number;
+}): {
+    EdgeStoreProvider: ({ children, basePath, }: {
+        children: React.ReactNode;
+        /**
+         * In case your app is not hosted at the root of your domain, you can specify the base path here.
+         * If you set this, make sure to set the full path to the EdgeStore API.
+         * e.g. `/my-app/api/edgestore` or `https://example.com/my-app/api/edgestore`
+         *
+         * @example - If your app is hosted at `https://example.com/my-app`, you can set the `basePath` to `/my-app/api/edgestore`.
+         */
+        basePath?: string | undefined;
+    }) => JSX.Element;
+    useEdgeStore: () => EdgeStoreContextValue<TRouter>;
+};
+export {};
+//# sourceMappingURL=contextProvider.d.ts.map

package/dist/contextProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"contextProvider.d.ts","sourceRoot":"","sources":["../src/contextProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAmB,MAAM,mBAAmB,CAAC;AAKrE,KAAK,qBAAqB,CAAC,OAAO,SAAS,SAAS,IAAI;IACtD,SAAS,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACpC;;;OAGG;IACH,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;CACjC,CAAC;AAEF,wBAAgB,uBAAuB,CAAC,OAAO,SAAS,SAAS,EAAE,IAAI,CAAC,EAAE;IACxE;;;;;;OAMG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;;kBAUa,MAAM,SAAS;QACzB;;;;;;WAMG;;;;EAgCN"}

package/dist/createNextProxy.d.ts

@@ -0,0 +1,42 @@
+/// <reference types="react" />
+import { AnyRouter, InferBucketPathKeys, InferMetadataObject } from '@edgestore/server/core';
+import { z } from 'zod';
+export type BucketFunctions<TRouter extends AnyRouter> = {
+    [K in keyof TRouter['buckets']]: {
+        upload: (params: z.infer<TRouter['buckets'][K]['_def']['input']> extends object ? {
+            file: File;
+            input: z.infer<TRouter['buckets'][K]['_def']['input']>;
+            onProgressChange?: OnProgressChangeHandler;
+            options?: UploadOptions;
+        } : {
+            file: File;
+            onProgressChange?: OnProgressChangeHandler;
+            options?: UploadOptions;
+        }) => Promise<{
+            url: string;
+            thumbnailUrl: TRouter['buckets'][K]['_def']['type'] extends 'IMAGE' ? string | null : never;
+            size: number;
+            uploadedAt: Date;
+            metadata: InferMetadataObject<TRouter['buckets'][K]>;
+            path: {
+                [TKey in InferBucketPathKeys<TRouter['buckets'][K]>]: string;
+            };
+        }>;
+        delete: (params: {
+            url: string;
+        }) => Promise<{
+            success: boolean;
+        }>;
+    };
+};
+type OnProgressChangeHandler = (progress: number) => void;
+type UploadOptions = {
+    replaceTargetUrl?: string;
+};
+export declare function createNextProxy<TRouter extends AnyRouter>({ apiPath, uploadingCountRef, maxConcurrentUploads, }: {
+    apiPath: string;
+    uploadingCountRef: React.MutableRefObject<number>;
+    maxConcurrentUploads?: number;
+}): BucketFunctions<TRouter>;
+export {};
+//# sourceMappingURL=createNextProxy.d.ts.map

package/dist/createNextProxy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createNextProxy.d.ts","sourceRoot":"","sources":["../src/createNextProxy.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,SAAS,EACT,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAGxB,MAAM,MAAM,eAAe,CAAC,OAAO,SAAS,SAAS,IAAI;KACtD,CAAC,IAAI,MAAM,OAAO,CAAC,SAAS,CAAC,GAAG;QAC/B,MAAM,EAAE,CACN,MAAM,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,SAAS,MAAM,GAClE;YACE,IAAI,EAAE,IAAI,CAAC;YACX,KAAK,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;YACvD,gBAAgB,CAAC,EAAE,uBAAuB,CAAC;YAC3C,OAAO,CAAC,EAAE,aAAa,CAAC;SACzB,GACD;YACE,IAAI,EAAE,IAAI,CAAC;YACX,gBAAgB,CAAC,EAAE,uBAAuB,CAAC;YAC3C,OAAO,CAAC,EAAE,aAAa,CAAC;SACzB,KACF,OAAO,CAAC;YACX,GAAG,EAAE,MAAM,CAAC;YACZ,YAAY,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,SAAS,OAAO,GAC/D,MAAM,GAAG,IAAI,GACb,KAAK,CAAC;YACV,IAAI,EAAE,MAAM,CAAC;YACb,UAAU,EAAE,IAAI,CAAC;YACjB,QAAQ,EAAE,mBAAmB,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACrD,IAAI,EAAE;iBACH,IAAI,IAAI,mBAAmB,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM;aAC7D,CAAC;SACH,CAAC,CAAC;QACH,MAAM,EAAE,CAAC,MAAM,EAAE;YAAE,GAAG,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO,CAAC;YAC3C,OAAO,EAAE,OAAO,CAAC;SAClB,CAAC,CAAC;KACJ;CACF,CAAC;AAEF,KAAK,uBAAuB,GAAG,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;AAE1D,KAAK,aAAa,GAAG;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,wBAAgB,eAAe,CAAC,OAAO,SAAS,SAAS,EAAE,EACzD,OAAO,EACP,iBAAiB,EACjB,oBAAwB,GACzB,EAAE;IACD,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,EAAE,KAAK,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAClD,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B,4BAiCA"}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './contextProvider';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC"}

package/dist/index.js

@@ -0,0 +1,222 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return 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__*/_interopNamespace(React);
+
+class EdgeStoreError extends Error {
+    constructor(message){
+        super(message);
+        this.name = 'EdgeStoreError';
+    }
+}
+
+function createNextProxy({ apiPath, uploadingCountRef, maxConcurrentUploads = 5 }) {
+    return new Proxy({}, {
+        get (_, prop) {
+            const bucketName = prop;
+            const bucketFunctions = {
+                upload: async (params)=>{
+                    try {
+                        params.onProgressChange?.(0);
+                        while(uploadingCountRef.current >= maxConcurrentUploads && uploadingCountRef.current > 0){
+                            await new Promise((resolve)=>setTimeout(resolve, 300));
+                        }
+                        uploadingCountRef.current++;
+                        return await uploadFile(params, {
+                            bucketName: bucketName,
+                            apiPath
+                        });
+                    } finally{
+                        uploadingCountRef.current--;
+                    }
+                },
+                delete: async (params)=>{
+                    return await deleteFile(params, {
+                        bucketName: bucketName,
+                        apiPath
+                    });
+                }
+            };
+            return bucketFunctions;
+        }
+    });
+}
+async function uploadFile({ file, input, onProgressChange, options }, { apiPath, bucketName }) {
+    try {
+        onProgressChange?.(0);
+        const res = await fetch(`${apiPath}/request-upload`, {
+            method: 'POST',
+            body: JSON.stringify({
+                bucketName,
+                input,
+                fileInfo: {
+                    extension: file.name.split('.').pop(),
+                    type: file.type,
+                    size: file.size,
+                    replaceTargetUrl: options?.replaceTargetUrl
+                }
+            }),
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        });
+        const json = await res.json();
+        if (!json.uploadUrl) {
+            throw new EdgeStoreError('An error occurred');
+        }
+        // Upload the file to the signed URL and get the progress
+        await uploadFileInner(file, json.uploadUrl, onProgressChange);
+        return {
+            url: json.accessUrl,
+            thumbnailUrl: json.thumbnailUrl,
+            size: json.size,
+            uploadedAt: new Date(json.uploadedAt),
+            path: json.path,
+            metadata: json.metadata
+        };
+    } catch (e) {
+        onProgressChange?.(0);
+        throw e;
+    }
+}
+const uploadFileInner = async (file, uploadUrl, onProgressChange)=>{
+    const promise = new Promise((resolve, reject)=>{
+        const request = new XMLHttpRequest();
+        request.open('PUT', uploadUrl);
+        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 Error('File upload aborted'));
+        });
+        request.addEventListener('loadend', ()=>{
+            resolve();
+        });
+        request.send(file);
+    });
+    return promise;
+};
+async function deleteFile({ url }, { apiPath, bucketName }) {
+    const res = await fetch(`${apiPath}/delete-file`, {
+        method: 'POST',
+        body: JSON.stringify({
+            url,
+            bucketName
+        }),
+        headers: {
+            'Content-Type': 'application/json'
+        }
+    });
+    if (!res.ok) {
+        throw new EdgeStoreError('An error occurred');
+    }
+    return {
+        success: true
+    };
+}
+
+const DEFAULT_BASE_URL = process.env.NEXT_PUBLIC_EDGE_STORE_BASE_URL ?? 'https://files.edge-store.com';
+function createEdgeStoreProvider(opts) {
+    const EdgeStoreContext = /*#__PURE__*/ React__namespace.createContext(undefined);
+    const EdgeStoreProvider = ({ // TODO: Add basePath when custom domain is supported
+    children, basePath })=>{
+        return EdgeStoreProviderInner({
+            children,
+            context: EdgeStoreContext,
+            basePath,
+            maxConcurrentUploads: opts?.maxConcurrentUploads
+        });
+    };
+    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('[edge-store]: `useEdgeStore` must be wrapped in a <EdgeStoreProvider />');
+        }
+        return value;
+    }
+    return {
+        EdgeStoreProvider,
+        useEdgeStore
+    };
+}
+function EdgeStoreProviderInner({ children, context, basePath, maxConcurrentUploads }) {
+    const apiPath = basePath ? `${basePath}` : '/api/edgestore';
+    const [token, setToken] = React__namespace.useState(null);
+    const uploadingCountRef = React__namespace.useRef(0);
+    React__namespace.useEffect(()=>{
+        void fetch(`${apiPath}/init`, {
+            method: 'POST'
+        }).then(async (res)=>{
+            if (res.ok) {
+                const json = await res.json();
+                setToken(json.token);
+                await fetch(`${DEFAULT_BASE_URL}/_init`, {
+                    method: 'GET',
+                    headers: {
+                        'x-edgestore-token': json.token
+                    }
+                });
+            }
+        });
+    }, []);
+    function getSrc(url) {
+        if (// in production we use cookies, so we don't need a token
+        process.env.NODE_ENV === 'production' || // public urls don't need a token
+        // e.g. https://files.edge-store.com/project/bucket/_public/...
+        url.match(/^https?:\/\/[^\/]+\/[^\/]+\/[^\/]+\/_public\/.+/)) {
+            return `${url}`;
+        } else {
+            // in development, third party cookies don't work, so we need to pass the token as a query param
+            const uri = new URL(url);
+            uri.searchParams.set('token', token ?? '');
+            return `${uri}`;
+        }
+    }
+    return /*#__PURE__*/ React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/ React__namespace.createElement(context.Provider, {
+        value: {
+            edgestore: createNextProxy({
+                apiPath,
+                uploadingCountRef,
+                maxConcurrentUploads
+            }),
+            getSrc
+        }
+    }, children));
+}
+
+exports.createEdgeStoreProvider = createEdgeStoreProvider;

package/dist/index.mjs

@@ -0,0 +1,198 @@
+import * as React from 'react';
+
+class EdgeStoreError extends Error {
+    constructor(message){
+        super(message);
+        this.name = 'EdgeStoreError';
+    }
+}
+
+function createNextProxy({ apiPath, uploadingCountRef, maxConcurrentUploads = 5 }) {
+    return new Proxy({}, {
+        get (_, prop) {
+            const bucketName = prop;
+            const bucketFunctions = {
+                upload: async (params)=>{
+                    try {
+                        params.onProgressChange?.(0);
+                        while(uploadingCountRef.current >= maxConcurrentUploads && uploadingCountRef.current > 0){
+                            await new Promise((resolve)=>setTimeout(resolve, 300));
+                        }
+                        uploadingCountRef.current++;
+                        return await uploadFile(params, {
+                            bucketName: bucketName,
+                            apiPath
+                        });
+                    } finally{
+                        uploadingCountRef.current--;
+                    }
+                },
+                delete: async (params)=>{
+                    return await deleteFile(params, {
+                        bucketName: bucketName,
+                        apiPath
+                    });
+                }
+            };
+            return bucketFunctions;
+        }
+    });
+}
+async function uploadFile({ file, input, onProgressChange, options }, { apiPath, bucketName }) {
+    try {
+        onProgressChange?.(0);
+        const res = await fetch(`${apiPath}/request-upload`, {
+            method: 'POST',
+            body: JSON.stringify({
+                bucketName,
+                input,
+                fileInfo: {
+                    extension: file.name.split('.').pop(),
+                    type: file.type,
+                    size: file.size,
+                    replaceTargetUrl: options?.replaceTargetUrl
+                }
+            }),
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        });
+        const json = await res.json();
+        if (!json.uploadUrl) {
+            throw new EdgeStoreError('An error occurred');
+        }
+        // Upload the file to the signed URL and get the progress
+        await uploadFileInner(file, json.uploadUrl, onProgressChange);
+        return {
+            url: json.accessUrl,
+            thumbnailUrl: json.thumbnailUrl,
+            size: json.size,
+            uploadedAt: new Date(json.uploadedAt),
+            path: json.path,
+            metadata: json.metadata
+        };
+    } catch (e) {
+        onProgressChange?.(0);
+        throw e;
+    }
+}
+const uploadFileInner = async (file, uploadUrl, onProgressChange)=>{
+    const promise = new Promise((resolve, reject)=>{
+        const request = new XMLHttpRequest();
+        request.open('PUT', uploadUrl);
+        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 Error('File upload aborted'));
+        });
+        request.addEventListener('loadend', ()=>{
+            resolve();
+        });
+        request.send(file);
+    });
+    return promise;
+};
+async function deleteFile({ url }, { apiPath, bucketName }) {
+    const res = await fetch(`${apiPath}/delete-file`, {
+        method: 'POST',
+        body: JSON.stringify({
+            url,
+            bucketName
+        }),
+        headers: {
+            'Content-Type': 'application/json'
+        }
+    });
+    if (!res.ok) {
+        throw new EdgeStoreError('An error occurred');
+    }
+    return {
+        success: true
+    };
+}
+
+const DEFAULT_BASE_URL = process.env.NEXT_PUBLIC_EDGE_STORE_BASE_URL ?? 'https://files.edge-store.com';
+function createEdgeStoreProvider(opts) {
+    const EdgeStoreContext = /*#__PURE__*/ React.createContext(undefined);
+    const EdgeStoreProvider = ({ // TODO: Add basePath when custom domain is supported
+    children, basePath })=>{
+        return EdgeStoreProviderInner({
+            children,
+            context: EdgeStoreContext,
+            basePath,
+            maxConcurrentUploads: opts?.maxConcurrentUploads
+        });
+    };
+    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('[edge-store]: `useEdgeStore` must be wrapped in a <EdgeStoreProvider />');
+        }
+        return value;
+    }
+    return {
+        EdgeStoreProvider,
+        useEdgeStore
+    };
+}
+function EdgeStoreProviderInner({ children, context, basePath, maxConcurrentUploads }) {
+    const apiPath = basePath ? `${basePath}` : '/api/edgestore';
+    const [token, setToken] = React.useState(null);
+    const uploadingCountRef = React.useRef(0);
+    React.useEffect(()=>{
+        void fetch(`${apiPath}/init`, {
+            method: 'POST'
+        }).then(async (res)=>{
+            if (res.ok) {
+                const json = await res.json();
+                setToken(json.token);
+                await fetch(`${DEFAULT_BASE_URL}/_init`, {
+                    method: 'GET',
+                    headers: {
+                        'x-edgestore-token': json.token
+                    }
+                });
+            }
+        });
+    }, []);
+    function getSrc(url) {
+        if (// in production we use cookies, so we don't need a token
+        process.env.NODE_ENV === 'production' || // public urls don't need a token
+        // e.g. https://files.edge-store.com/project/bucket/_public/...
+        url.match(/^https?:\/\/[^\/]+\/[^\/]+\/[^\/]+\/_public\/.+/)) {
+            return `${url}`;
+        } else {
+            // in development, third party cookies don't work, so we need to pass the token as a query param
+            const uri = new URL(url);
+            uri.searchParams.set('token', token ?? '');
+            return `${uri}`;
+        }
+    }
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(context.Provider, {
+        value: {
+            edgestore: createNextProxy({
+                apiPath,
+                uploadingCountRef,
+                maxConcurrentUploads
+            }),
+            getSrc
+        }
+    }, children));
+}
+
+export { createEdgeStoreProvider };

package/dist/libs/errors/EdgeStoreError.d.ts

@@ -0,0 +1,5 @@
+declare class EdgeStoreError extends Error {
+    constructor(message: string);
+}
+export default EdgeStoreError;
+//# sourceMappingURL=EdgeStoreError.d.ts.map

package/dist/libs/errors/EdgeStoreError.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EdgeStoreError.d.ts","sourceRoot":"","sources":["../../../src/libs/errors/EdgeStoreError.ts"],"names":[],"mappings":"AAAA,cAAM,cAAe,SAAQ,KAAK;gBACpB,OAAO,EAAE,MAAM;CAI5B;AAED,eAAe,cAAc,CAAC"}

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@edgestore/react",
+  "version": "0.0.0-alpha.12",
+  "description": "Image Handling for React/Next.js",
+  "homepage": "https://edge-store.com",
+  "repository": "https://github.com/edgestorejs/edge-store.git",
+  "author": "Ravi <me@ravi.com>",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "typings": "dist/index.d.ts",
+  "keywords": [
+    "react",
+    "nodejs",
+    "nextjs",
+    "image",
+    "cdn",
+    "edgestore",
+    "edge-store"
+  ],
+  "scripts": {
+    "build": "rollup --config rollup.config.ts --configPlugin rollup-plugin-swc3",
+    "dev": "pnpm build --watch",
+    "codegen:entrypoints": "tsx entrypoints.script.ts",
+    "lint": "eslint --cache --ext \".js,.ts,.tsx\" --ignore-path ../../.gitignore --report-unused-disable-directives src"
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "package.json",
+    "!**/*.test.*"
+  ],
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@aws-sdk/client-s3": "^3.294.0",
+    "@aws-sdk/s3-request-presigner": "^3.294.0",
+    "@panva/hkdf": "^1.0.4",
+    "cookie": "^0.5.0",
+    "jose": "^4.13.1",
+    "uuid": "^9.0.0"
+  },
+  "peerDependencies": {
+    "@edgestore/server": "0.0.0-alpha.12",
+    "next": "*",
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0",
+    "zod": ">=3.0.0"
+  },
+  "devDependencies": {
+    "@edgestore/server": "0.0.0-alpha.12",
+    "@types/cookie": "^0.5.1",
+    "@types/node": "^18.11.18",
+    "@types/uuid": "^9.0.1",
+    "next": "^13.4.9",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.1.6",
+    "zod": "^3.21.4"
+  },
+  "gitHead": "bec47f77e223a231f5e04070aa8da6a609838e6b"
+}

package/src/contextProvider.tsx

@@ -0,0 +1,141 @@
+import { AnyRouter } from '@edgestore/server/core';
+import * as React from 'react';
+import { BucketFunctions, createNextProxy } from './createNextProxy';
+
+const DEFAULT_BASE_URL =
+  process.env.NEXT_PUBLIC_EDGE_STORE_BASE_URL ?? 'https://files.edge-store.com';
+
+type EdgeStoreContextValue<TRouter extends AnyRouter> = {
+  edgestore: BucketFunctions<TRouter>;
+  /**
+   * In development, if this is a protected file, this function will add the token as a query param to the url.
+   * This is needed because third party cookies don't work with http urls.
+   */
+  getSrc: (url: string) => string;
+};
+
+export function createEdgeStoreProvider<TRouter extends AnyRouter>(opts?: {
+  /**
+   * The maximum number of concurrent uploads.
+   *
+   * Uploads will automatically be queued if this limit is reached.
+   *
+   * @default 5
+   */
+  maxConcurrentUploads?: number;
+}) {
+  const EdgeStoreContext = React.createContext<
+    EdgeStoreContextValue<TRouter> | undefined
+  >(undefined);
+
+  const EdgeStoreProvider = ({
+    // TODO: Add basePath when custom domain is supported
+    children,
+    basePath,
+  }: {
+    children: React.ReactNode;
+    /**
+     * In case your app is not hosted at the root of your domain, you can specify the base path here.
+     * If you set this, make sure to set the full path to the EdgeStore API.
+     * e.g. `/my-app/api/edgestore` or `https://example.com/my-app/api/edgestore`
+     *
+     * @example - If your app is hosted at `https://example.com/my-app`, you can set the `basePath` to `/my-app/api/edgestore`.
+     */
+    basePath?: string;
+  }) => {
+    return EdgeStoreProviderInner<TRouter>({
+      children,
+      context: EdgeStoreContext,
+      basePath,
+      maxConcurrentUploads: opts?.maxConcurrentUploads,
+    });
+  };
+
+  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: EdgeStoreContextValue<TRouter> =
+      React.useContext(EdgeStoreContext);
+    if (!value && process.env.NODE_ENV !== 'production') {
+      throw new Error(
+        '[edge-store]: `useEdgeStore` must be wrapped in a <EdgeStoreProvider />',
+      );
+    }
+
+    return value;
+  }
+
+  return {
+    EdgeStoreProvider,
+    useEdgeStore,
+  };
+}
+
+function EdgeStoreProviderInner<TRouter extends AnyRouter>({
+  children,
+  context,
+  basePath,
+  maxConcurrentUploads,
+}: {
+  children: React.ReactNode;
+  context: React.Context<EdgeStoreContextValue<TRouter> | undefined>;
+  basePath?: string;
+  maxConcurrentUploads?: number;
+}) {
+  const apiPath = basePath ? `${basePath}` : '/api/edgestore';
+  const [token, setToken] = React.useState<string | null>(null);
+  const uploadingCountRef = React.useRef(0);
+  React.useEffect(() => {
+    void fetch(`${apiPath}/init`, {
+      method: 'POST',
+    }).then(async (res) => {
+      if (res.ok) {
+        const json = await res.json();
+        setToken(json.token);
+        await fetch(`${DEFAULT_BASE_URL}/_init`, {
+          method: 'GET',
+          headers: {
+            'x-edgestore-token': json.token,
+          },
+        });
+      }
+    });
+  }, []);
+
+  function getSrc(url: string) {
+    if (
+      // in production we use cookies, so we don't need a token
+      process.env.NODE_ENV === 'production' ||
+      // public urls don't need a token
+      // e.g. https://files.edge-store.com/project/bucket/_public/...
+      url.match(/^https?:\/\/[^\/]+\/[^\/]+\/[^\/]+\/_public\/.+/)
+    ) {
+      return `${url}`;
+    } else {
+      // in development, third party cookies don't work, so we need to pass the token as a query param
+      const uri = new URL(url);
+      uri.searchParams.set('token', token ?? '');
+      return `${uri}`;
+    }
+  }
+
+  return (
+    <>
+      <context.Provider
+        value={{
+          edgestore: createNextProxy<TRouter>({
+            apiPath,
+            uploadingCountRef,
+            maxConcurrentUploads,
+          }),
+          getSrc,
+        }}
+      >
+        {children}
+      </context.Provider>
+    </>
+  );
+}

package/src/createNextProxy.ts

@@ -0,0 +1,210 @@
+import {
+  AnyRouter,
+  InferBucketPathKeys,
+  InferMetadataObject,
+} from '@edgestore/server/core';
+import { z } from 'zod';
+import EdgeStoreError from './libs/errors/EdgeStoreError';
+
+export type BucketFunctions<TRouter extends AnyRouter> = {
+  [K in keyof TRouter['buckets']]: {
+    upload: (
+      params: z.infer<TRouter['buckets'][K]['_def']['input']> extends object
+        ? {
+            file: File;
+            input: z.infer<TRouter['buckets'][K]['_def']['input']>;
+            onProgressChange?: OnProgressChangeHandler;
+            options?: UploadOptions;
+          }
+        : {
+            file: File;
+            onProgressChange?: OnProgressChangeHandler;
+            options?: UploadOptions;
+          },
+    ) => Promise<{
+      url: string;
+      thumbnailUrl: TRouter['buckets'][K]['_def']['type'] extends 'IMAGE'
+        ? string | null
+        : never;
+      size: number;
+      uploadedAt: Date;
+      metadata: InferMetadataObject<TRouter['buckets'][K]>;
+      path: {
+        [TKey in InferBucketPathKeys<TRouter['buckets'][K]>]: string;
+      };
+    }>;
+    delete: (params: { url: string }) => Promise<{
+      success: boolean;
+    }>;
+  };
+};
+
+type OnProgressChangeHandler = (progress: number) => void;
+
+type UploadOptions = {
+  replaceTargetUrl?: string;
+};
+
+export function createNextProxy<TRouter extends AnyRouter>({
+  apiPath,
+  uploadingCountRef,
+  maxConcurrentUploads = 5,
+}: {
+  apiPath: string;
+  uploadingCountRef: React.MutableRefObject<number>;
+  maxConcurrentUploads?: number;
+}) {
+  return new Proxy<BucketFunctions<TRouter>>({} as BucketFunctions<TRouter>, {
+    get(_, prop) {
+      const bucketName = prop as keyof TRouter['buckets'];
+      const bucketFunctions: BucketFunctions<TRouter>[string] = {
+        upload: async (params) => {
+          try {
+            params.onProgressChange?.(0);
+            while (
+              uploadingCountRef.current >= maxConcurrentUploads &&
+              uploadingCountRef.current > 0
+            ) {
+              await new Promise((resolve) => setTimeout(resolve, 300));
+            }
+            uploadingCountRef.current++;
+            return await uploadFile(params, {
+              bucketName: bucketName as string,
+              apiPath,
+            });
+          } finally {
+            uploadingCountRef.current--;
+          }
+        },
+        delete: async (params: { url: string }) => {
+          return await deleteFile(params, {
+            bucketName: bucketName as string,
+            apiPath,
+          });
+        },
+      };
+      return bucketFunctions;
+    },
+  });
+}
+
+async function uploadFile(
+  {
+    file,
+    input,
+    onProgressChange,
+    options,
+  }: {
+    file: File;
+    input?: object;
+    onProgressChange?: OnProgressChangeHandler;
+    options?: UploadOptions;
+  },
+  {
+    apiPath,
+    bucketName,
+  }: {
+    apiPath: string;
+    bucketName: string;
+  },
+) {
+  try {
+    onProgressChange?.(0);
+    const res = await fetch(`${apiPath}/request-upload`, {
+      method: 'POST',
+      body: JSON.stringify({
+        bucketName,
+        input,
+        fileInfo: {
+          extension: file.name.split('.').pop(),
+          type: file.type,
+          size: file.size,
+          replaceTargetUrl: options?.replaceTargetUrl,
+        },
+      }),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+    const json = await res.json();
+    if (!json.uploadUrl) {
+      throw new EdgeStoreError('An error occurred');
+    }
+    // Upload the file to the signed URL and get the progress
+    await uploadFileInner(file, json.uploadUrl, onProgressChange);
+    return {
+      url: json.accessUrl,
+      thumbnailUrl: json.thumbnailUrl,
+      size: json.size,
+      uploadedAt: new Date(json.uploadedAt),
+      path: json.path,
+      metadata: json.metadata,
+    };
+  } catch (e) {
+    onProgressChange?.(0);
+    throw e;
+  }
+}
+
+const uploadFileInner = async (
+  file: File,
+  uploadUrl: string,
+  onProgressChange?: OnProgressChangeHandler,
+) => {
+  const promise = new Promise<void>((resolve, reject) => {
+    const request = new XMLHttpRequest();
+    request.open('PUT', uploadUrl);
+    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 Error('File upload aborted'));
+    });
+    request.addEventListener('loadend', () => {
+      resolve();
+    });
+
+    request.send(file);
+  });
+  return promise;
+};
+
+async function deleteFile(
+  {
+    url,
+  }: {
+    url: string;
+  },
+  {
+    apiPath,
+    bucketName,
+  }: {
+    apiPath: string;
+    bucketName: string;
+  },
+) {
+  const res = await fetch(`${apiPath}/delete-file`, {
+    method: 'POST',
+    body: JSON.stringify({
+      url,
+      bucketName,
+    }),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+  if (!res.ok) {
+    throw new EdgeStoreError('An error occurred');
+  }
+  return { success: true };
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './contextProvider';

package/src/libs/errors/EdgeStoreError.ts

@@ -0,0 +1,8 @@
+class EdgeStoreError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = 'EdgeStoreError';
+  }
+}
+
+export default EdgeStoreError;