Typescript Code Editor Project

Building a browser-based code editor

Using Typescript, ESBuild, React, Vite, IndexedDB

Based on the Udemy course

Notes

Offline Browser Storage: IndexedDB vs CacheAPI

See the cacheAPI solution version here

Both have unlimitied storage (vs localStorage)
Needing to cache HTML, JS, assets? Use a CDN instead of offline storage
Cache API is tied to network requests, which at first glance made it better for this project. However, because what is actually returned is a new object with the response as a property, we're not able to take advantage of cache.add, which would both conditionally make the request and add it to the cache, leading to more code than using IndexedDB.
The Type required for Cache API is Response, so we can't make this simpler by putting the new object in the cache; instead, we must cache the network response.
Using a library like localForage (or IDB) abstracts a lot of the complexity of implementing IndexedDB and provides Promises as well.
See unpkgPathPlugin for usage.