@warp-drive/experiments 0.2.6-beta.0 → 0.2.6-beta.2

package/dist/unpkg/dev/document-storage.js

@@ -0,0 +1,349 @@
+const WARP_DRIVE_STORAGE_FILE_NAME = 'warp-drive_document-storage';
+const WARP_DRIVE_STORAGE_VERSION = 1;
+
+/**
+ * DocumentStorage is specifically designed around WarpDrive Cache and Request concepts.
+ *
+ * CacheFileDocument is a StructuredDocument (request response) whose `content` is
+ * the ResourceDocument returned by inserting the request into a Store's Cache.
+ */
+
+/**
+ * A CacheDocument is a reconstructed request response that rehydrates ResourceDocument
+ * with the associated resources based on their identifiers.
+ */
+
+class InternalDocumentStorage {
+  constructor(options) {
+    this.options = options;
+    this._lastModified = 0;
+    this._invalidated = true;
+    this._fileHandle = this._open(options.scope);
+    this._channel = Object.assign(new BroadcastChannel(options.scope), {
+      onmessage: this._onMessage.bind(this)
+    });
+  }
+  _onMessage(_event) {
+    this._invalidated = true;
+  }
+  async _open(scope) {
+    const directoryHandle = await navigator.storage.getDirectory();
+    const fileHandle = await directoryHandle.getFileHandle(scope, {
+      create: true
+    });
+    return fileHandle;
+  }
+  async _read() {
+    if (this._filePromise) {
+      return this._filePromise;
+    }
+    if (this._invalidated) {
+      const updateFile = async () => {
+        const fileHandle = await this._fileHandle;
+        const file = await fileHandle.getFile();
+        const lastModified = file.lastModified;
+        if (lastModified === this._lastModified && this._cache) {
+          return this._cache;
+        }
+        const contents = await file.text();
+        const cache = contents ? JSON.parse(contents) : {
+          documents: [],
+          resources: []
+        };
+        const documents = new Map(cache.documents);
+        const resources = new Map(cache.resources);
+        const cacheMap = {
+          documents,
+          resources
+        };
+        this._cache = cacheMap;
+        this._invalidated = false;
+        this._lastModified = lastModified;
+        return cacheMap;
+      };
+      this._filePromise = updateFile();
+      await this._filePromise;
+      this._filePromise = null;
+    }
+    return this._cache;
+  }
+  async _patch(documentKey, document, updatedResources) {
+    const fileHandle = await this._fileHandle;
+    // secure a lock before getting latest state
+    const writable = await fileHandle.createWritable();
+    const cache = await this._read();
+    cache.documents.set(documentKey, document);
+    updatedResources.forEach((resource, key) => {
+      cache.resources.set(key, resource);
+    });
+    const documents = [...cache.documents.entries()];
+    const resources = [...cache.resources.entries()];
+    const cacheFile = {
+      documents,
+      resources
+    };
+    await writable.write(JSON.stringify(cacheFile));
+    await writable.close();
+    this._channel.postMessage({
+      type: 'patch',
+      key: documentKey,
+      resources: [...updatedResources.keys()]
+    });
+  }
+  async getDocument(key) {
+    const cache = await this._read();
+    // clone the document to avoid leaking the internal cache
+    const document = safeDocumentHydrate(cache.documents.get(key.lid));
+    if (!document) {
+      return null;
+    }
+
+    // expand the document with the resources
+    if (document.content) {
+      if (docHasData(document.content)) {
+        let data = null;
+        if (Array.isArray(document.content.data)) {
+          data = document.content.data.map(resourceIdentifier => {
+            const resource = cache.resources.get(resourceIdentifier.lid);
+            if (!resource) {
+              throw new Error(`Resource not found for ${resourceIdentifier.lid}`);
+            }
+
+            // clone the resource to avoid leaking the internal cache
+            return structuredClone(resource);
+          });
+        } else if (document.content.data) {
+          const resource = cache.resources.get(document.content.data.lid);
+          if (!resource) {
+            throw new Error(`Resource not found for ${document.content.data.lid}`);
+          }
+
+          // clone the resource to avoid leaking the internal cache
+          data = structuredClone(resource);
+        }
+        if (document.content.included) {
+          const included = document.content.included.map(resourceIdentifier => {
+            const resource = cache.resources.get(resourceIdentifier.lid);
+            if (!resource) {
+              throw new Error(`Resource not found for ${resourceIdentifier.lid}`);
+            }
+
+            // clone the resource to avoid leaking the internal cache
+            return structuredClone(resource);
+          });
+          document.content.included = included;
+        }
+        document.content.data = data;
+      }
+    }
+    return document;
+  }
+  async putDocument(document, resourceCollector) {
+    const resources = new Map();
+    if (!document.content) {
+      throw new Error(`Document content is missing, only finalized documents can be stored`);
+    }
+    if (!document.content.lid) {
+      throw new Error(`Document content is missing a lid, only documents with a cache-key can be stored`);
+    }
+    if (docHasData(document.content)) {
+      this._getResources(document.content, resourceCollector, resources);
+    }
+    await this._patch(document.content.lid, safeDocumentSerialize(document), resources);
+  }
+  _getResources(document, resourceCollector, resources = new Map()) {
+    if (Array.isArray(document.data)) {
+      document.data.forEach(resourceIdentifier => {
+        const resource = resourceCollector(resourceIdentifier);
+        resources.set(resourceIdentifier.lid, structuredClone(resource));
+      });
+    } else if (document.data) {
+      const resource = resourceCollector(document.data);
+      resources.set(document.data.lid, structuredClone(resource));
+    }
+    if (document.included) {
+      document.included.forEach(resourceIdentifier => {
+        const resource = resourceCollector(resourceIdentifier);
+        resources.set(resourceIdentifier.lid, structuredClone(resource));
+      });
+    }
+    return resources;
+  }
+  async putResources(document, resourceCollector) {
+    const fileHandle = await this._fileHandle;
+    // secure a lock before getting latest state
+    const writable = await fileHandle.createWritable();
+    const cache = await this._read();
+    const updatedResources = this._getResources(document, resourceCollector);
+    updatedResources.forEach((resource, key) => {
+      cache.resources.set(key, resource);
+    });
+    const documents = [...cache.documents.entries()];
+    const resources = [...cache.resources.entries()];
+    const cacheFile = {
+      documents,
+      resources
+    };
+    await writable.write(JSON.stringify(cacheFile));
+    await writable.close();
+    this._channel.postMessage({
+      type: 'patch',
+      key: null,
+      resources: [...updatedResources.keys()]
+    });
+  }
+  async clear(reset) {
+    const fileHandle = await this._fileHandle;
+    const writable = await fileHandle.createWritable();
+    await writable.write('');
+    await writable.close();
+    this._invalidated = true;
+    this._lastModified = 0;
+    this._cache = null;
+    this._filePromise = null;
+    this._channel.postMessage({
+      type: 'clear'
+    });
+    if (!reset) {
+      this._channel.close();
+      this._channel = null;
+      if (!this.options.isolated) {
+        Storages.delete(this.options.scope);
+      }
+    }
+  }
+}
+function safeDocumentSerialize(document) {
+  (test => {
+    if (!test) {
+      throw new Error(`Expected to receive a document`);
+    }
+  })(document && typeof document === 'object');
+  const doc = document;
+  const newDoc = {};
+  if ('request' in doc) {
+    newDoc.request = prepareRequest(doc.request);
+  }
+  if ('response' in doc) {
+    newDoc.response = prepareResponse(doc.response);
+  }
+  if ('content' in doc) {
+    newDoc.content = structuredClone(doc.content);
+  }
+  return newDoc;
+}
+function prepareRequest(request) {
+  const {
+    signal,
+    headers
+  } = request;
+  const requestCopy = Object.assign({}, request);
+  delete requestCopy.store;
+  if (signal instanceof AbortSignal) {
+    delete requestCopy.signal;
+  }
+  if (headers instanceof Headers) {
+    requestCopy.headers = Array.from(headers);
+  }
+  return requestCopy;
+}
+function prepareResponse(response) {
+  if (!response) return null;
+  const clone = {};
+  if (response.headers) {
+    clone.headers = Array.from(response.headers);
+  }
+  clone.ok = response.ok;
+  clone.redirected = response.redirected;
+  clone.status = response.status;
+  clone.statusText = response.statusText;
+  clone.type = response.type;
+  clone.url = response.url;
+  return clone;
+}
+function safeDocumentHydrate(document) {
+  (test => {
+    if (!test) {
+      throw new Error(`Expected to receive a document`);
+    }
+  })(document && typeof document === 'object');
+  const doc = document;
+  const newDoc = {};
+  if ('request' in doc) {
+    const headers = new Headers(doc.request.headers);
+    const req = Object.assign({}, doc.request, {
+      headers
+    });
+    newDoc.request = new Request(doc.request.url ?? '', req);
+  }
+  if ('response' in doc) {
+    const headers = new Headers(doc.response.headers);
+    const resp = Object.assign({}, doc.response, {
+      headers
+    });
+    newDoc.response = new Response(null, resp);
+  }
+  if ('content' in doc) {
+    newDoc.content = structuredClone(doc.content);
+  }
+  return newDoc;
+}
+function docHasData(doc) {
+  return 'data' in doc;
+}
+const Storages = new Map();
+
+/**
+ * DocumentStorage is a wrapper around the StorageManager API that provides
+ * a simple interface for reading and updating documents and requests.
+ *
+ * Some goals for this experiment:
+ *
+ * - optimize for storing requests/documents
+ * - optimize for storing resources
+ * - optimize for looking up resources associated to a document
+ * - optimize for notifying cross-tab when data is updated
+ *
+ * optional features:
+ *
+ * - support for offline mode
+ * - ?? support for relationship based cache traversal
+ * - a way to index records by type + another field (e.g updatedAt/createAt/name)
+ *   such that simple queries can be done without having to scan all records
+ */
+class DocumentStorage {
+  constructor(options = {}) {
+    options.isolated = options.isolated ?? false;
+    options.scope = options.scope ?? 'default';
+    const fileName = `${WARP_DRIVE_STORAGE_FILE_NAME}@version_${WARP_DRIVE_STORAGE_VERSION}:${options.scope}`;
+    if (!options.isolated && Storages.has(fileName)) {
+      const storage = Storages.get(fileName);
+      if (storage) {
+        this._storage = storage.deref();
+        return;
+      }
+    }
+    const storage = new InternalDocumentStorage({
+      scope: fileName,
+      isolated: options.isolated
+    });
+    this._storage = storage;
+    if (!options.isolated) {
+      Storages.set(fileName, new WeakRef(storage));
+    }
+  }
+  getDocument(key) {
+    return this._storage.getDocument(key);
+  }
+  putDocument(document, resourceCollector) {
+    return this._storage.putDocument(document, resourceCollector);
+  }
+  putResources(document, resourceCollector) {
+    return this._storage.putResources(document, resourceCollector);
+  }
+  clear(reset) {
+    return this._storage.clear(reset);
+  }
+}
+
+export { DocumentStorage };

package/dist/unpkg/dev/image-fetch.js

@@ -0,0 +1,74 @@
+import { createDeferred } from '@warp-drive/core/request';
+
+// @ts-expect-error untyped global
+const isServerEnv = typeof FastBoot !== 'undefined';
+class ImageFetch {
+  constructor(worker) {
+    this.threadId = isServerEnv ? '' : crypto.randomUUID();
+    this.pending = new Map();
+    this.cache = new Map();
+    this.worker = worker;
+    if (!isServerEnv) {
+      const fn = event => {
+        const {
+          type,
+          url
+        } = event.data;
+        const deferred = this.cleanupRequest(url);
+        if (!deferred) {
+          return;
+        }
+        if (type === 'success-response') {
+          deferred.resolve(url);
+          return;
+        }
+        if (type === 'error-response') {
+          deferred.reject(null);
+          return;
+        }
+      };
+      if (worker instanceof SharedWorker) {
+        worker.port.postMessage({
+          type: 'connect',
+          thread: this.threadId
+        });
+        worker.port.onmessage = fn;
+      } else if (worker) {
+        this.channel = new MessageChannel();
+        worker.postMessage({
+          type: 'connect',
+          thread: this.threadId
+        }, [this.channel.port2]);
+        this.channel.port1.onmessage = fn;
+      }
+    }
+  }
+  cleanupRequest(url) {
+    const deferred = this.pending.get(url);
+    this.pending.delete(url);
+    return deferred;
+  }
+  _send(event) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    this.worker instanceof SharedWorker ? this.worker.port.postMessage(event) : this.channel.port1.postMessage(event);
+  }
+  load(url) {
+    if (isServerEnv) {
+      return Promise.resolve(url);
+    }
+    const objectUrl = this.cache.get(url);
+    if (objectUrl) {
+      return Promise.resolve(objectUrl);
+    }
+    const deferred = createDeferred();
+    this.pending.set(url, deferred);
+    this._send({
+      type: 'load',
+      thread: this.threadId,
+      url
+    });
+    return deferred.promise;
+  }
+}
+
+export { ImageFetch };

package/dist/unpkg/dev/image-worker.js

@@ -0,0 +1,99 @@
+const WorkerScope = globalThis.SharedWorkerGlobalScope;
+async function loadImage(url) {
+  const response = await fetch(url);
+  const fileBlob = await response.blob();
+  return URL.createObjectURL(fileBlob);
+}
+class ImageWorker {
+  constructor(options) {
+    // disable if running on main thread
+    if (typeof window !== 'undefined') {
+      return;
+    }
+    this.threads = new Map();
+    this.pendingImages = new Map();
+    this.cache = new Map();
+    this.options = options || {
+      persisted: false
+    };
+    this.isSharedWorker = WorkerScope && globalThis instanceof WorkerScope;
+    this.initialize();
+  }
+  fetch(url) {
+    const objectUrl = this.cache.get(url);
+    if (objectUrl) {
+      return Promise.resolve(objectUrl);
+    }
+    const pending = this.pendingImages.get(url);
+    if (pending) {
+      return pending;
+    }
+    const promise = loadImage(url);
+    this.pendingImages.set(url, promise);
+    return promise.finally(() => {
+      this.pendingImages.delete(url);
+    });
+  }
+  initialize() {
+    if (this.isSharedWorker) {
+      globalThis.onconnect = e => {
+        const port = e.ports[0];
+        port.onmessage = event => {
+          const {
+            type
+          } = event.data;
+          switch (type) {
+            case 'connect':
+              this.setupThread(event.data.thread, port);
+              break;
+          }
+        };
+        port.start();
+      };
+    } else {
+      globalThis.onmessage = event => {
+        const {
+          type
+        } = event.data;
+        switch (type) {
+          case 'connect':
+            this.setupThread(event.data.thread, event.ports[0]);
+            break;
+        }
+      };
+    }
+  }
+  setupThread(thread, port) {
+    this.threads.set(thread, port);
+    port.onmessage = event => {
+      if (event.type === 'close') {
+        this.threads.delete(thread);
+        return;
+      }
+      const {
+        type
+      } = event.data;
+      switch (type) {
+        case 'load':
+          void this.request(event.data);
+          break;
+      }
+    };
+  }
+  async request(event) {
+    const {
+      thread,
+      url
+    } = event;
+    const objectUrl = await this.fetch(url);
+    const port = this.threads.get(thread);
+    port.postMessage({
+      type: 'success-response',
+      thread,
+      url,
+      objectUrl
+    });
+  }
+}
+
+export { ImageWorker };

package/dist/unpkg/dev/worker-fetch.js

@@ -0,0 +1,158 @@
+import { createDeferred } from '@warp-drive/core/request';
+
+// @ts-expect-error untyped global
+const isServerEnv = typeof FastBoot !== 'undefined';
+function isAggregateError(error) {
+  return error instanceof AggregateError || error.name === 'AggregateError' && Array.isArray(error.errors);
+}
+function stitchTrace(stack, origin) {
+  if (origin.startsWith('Error\n')) {
+    return origin.slice(6) + '\n' + stack;
+  }
+  return origin + '\n' + stack;
+}
+function cloneError(error, stack) {
+  const isAggregate = isAggregateError(error);
+  const cloned = isAggregate ? new AggregateError(structuredClone(error.errors), error.message) : new Error(error.message);
+  cloned.stack = stitchTrace(error.stack || '', stack);
+  cloned.error = error.error;
+
+  // copy over enumerable properties
+  Object.assign(cloned, error);
+  return cloned;
+}
+class WorkerFetch {
+  constructor(worker) {
+    this.threadId = isServerEnv ? '' : crypto.randomUUID();
+    this.pending = new Map();
+    this.worker = worker;
+    if (!isServerEnv) {
+      const fn = event => {
+        const {
+          type,
+          id,
+          data
+        } = event.data;
+        const info = this.cleanupRequest(id);
+
+        // typically this means the request was aborted
+        if (!info) {
+          return;
+        }
+        if (type === 'success-response') {
+          const {
+            deferred
+          } = info;
+          const {
+            response,
+            content
+          } = data;
+          if (response) {
+            response.headers = new Headers(response.headers);
+            info.context.setResponse(new Response(null, response));
+          }
+          deferred.resolve(content);
+          return;
+        }
+        if (type === 'error-response') {
+          const {
+            deferred,
+            stack
+          } = info;
+          deferred.reject(cloneError(data, stack));
+          return;
+        }
+      };
+      if (worker instanceof SharedWorker) {
+        worker.port.postMessage({
+          type: 'connect',
+          thread: this.threadId
+        });
+        worker.port.onmessage = fn;
+      } else if (worker) {
+        this.channel = new MessageChannel();
+        worker.postMessage({
+          type: 'connect',
+          thread: this.threadId
+        }, [this.channel.port2]);
+        this.channel.port1.onmessage = fn;
+      }
+    }
+  }
+  cleanupRequest(id) {
+    const info = this.pending.get(id);
+    this.pending.delete(id);
+    if (info?.signal) {
+      info.signal.removeEventListener('abort', info.abortFn);
+    }
+    return info;
+  }
+  send(event) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    this.worker instanceof SharedWorker ? this.worker.port.postMessage(event) : this.channel.port1.postMessage(event);
+  }
+  request(context, next) {
+    if (isServerEnv) {
+      return next(context.request);
+    }
+    const deferred = createDeferred();
+    const {
+      signal,
+      request
+    } = prepareRequest(context.request);
+    const abortFn = signal ? () => {
+      deferred.reject(enhanceReason(signal.reason));
+      this.send({
+        type: 'abort',
+        thread: this.threadId,
+        id: context.id,
+        data: signal.reason
+      });
+      this.cleanupRequest(context.id);
+    } : () => {
+      return;
+    };
+    signal?.addEventListener('abort', abortFn);
+    try {
+      throw new Error();
+    } catch (e) {
+      this.pending.set(context.id, {
+        context,
+        deferred,
+        signal,
+        abortFn,
+        stack: e.stack
+      });
+    }
+    this.send({
+      type: 'request',
+      thread: this.threadId,
+      id: context.id,
+      data: request
+    });
+    return deferred.promise;
+  }
+}
+function enhanceReason(reason) {
+  return new DOMException(reason || 'The user aborted a request.', 'AbortError');
+}
+function prepareRequest(request) {
+  const {
+    signal,
+    headers
+  } = request;
+  const requestCopy = Object.assign({}, request);
+  delete requestCopy.store;
+  if (signal instanceof AbortSignal) {
+    delete requestCopy.signal;
+  }
+  if (headers instanceof Headers) {
+    requestCopy.headers = Array.from(headers);
+  }
+  return {
+    signal: signal || null,
+    request: requestCopy
+  };
+}
+
+export { WorkerFetch };