npm package: @moarhaus/scratch-browser-snapshots
Description: Scratch Blocks extension that'll add local storage, devlog pages, Notion backend, scratchblocks coding, realtime collab, and Ai editing tools
Author: Oz Ramos
Latest version: 0.0.14

# Snapshots - A [Scratch](https://github.com/LLK/scratch-blocks) project management extension for [TurboWarp](https://github.com/TurboWarp)
- Autosaving and autoloading using your browser's long term storage system (IndexedDB)
- Save, load, and update unlimited snapshots within a single project and file
- Exports to `.snaps.sb3` which is compatible with Scratch (though you'll only see the active snapshot)

![Screenshot 2023-03-14 113752](https://user-images.githubusercontent.com/69949201/225105285-a059f73d-24bc-4e84-a5d9-39bd292c055c.png)

## Video Demo

https://user-images.githubusercontent.com/69949201/223190423-109484d7-a764-48d8-9ad7-ef421da6825e.mp4

<br>
<br>
<br>
<hr>
<br>
<br>
<br>

## Features & Use Cases

- Works offline
- Project histories
- Code organization
- New workflows
- Collaboration

<br>
<br>
<br>
<hr>
<br>
<br>
<br>

## Notes

### Scratch compatible (but...)
Without this extension Scratch will treat `.snaps.sb3` as a regular `.sb3`, loading and saving just the active snapshot. When you export from Scratch you'll get the usual `.sb3` with no snapshots but you can always use this extension to load the changes back into your snapshots.

<br>
<br>
<br>
<hr>
<br>
<br>
<br>

## Roadmap

```mermaid
graph TD;
snapshots -.-> soon[Coming Soon]
snapshots[[Snapshots]] ==> future[[Future extensions]] --> blocks[Snapshot Blocks] & cloud[Snapshot Cloud]
```

### Coming soon
- Make it so that snapshots are maintained on Scratch even without the extension
- Allow broadcasts to trigger events across snapshots
- Ability to import and merge snapshots together, allowing for a kind of templating system
- Markdown notes for snapshots

### Future extensions
- **Snapshot Blocks** to programmatically load and transition snapshots, allowing you to organize your code across snapshots in addition to across Sprites. Other blocks can allow for running multiple snapshots at once and "stacking" their outputs.
- **Snapshots Cloud** to save snapshots to a private cloud (provided by Dexie Cloud)

<br>
<br>
<br>
<hr>
<br>
<br>
<br>

## Local development
### Requirements
- [NodeJS](https://nodejs.org/en/download/)

### Setup
```bash
# Install dependencies
npm i

# Start a local server at http://localhost:8000
npm start
```

### Developing
- Visit any of these to develop the extension live:
  - [http://localhost:8000](http://localhost:8000)
  - [https://scratchmoar.netlify.app/editor.html?extension=http://localhost:8000/src/index.js](https://scratchmoar.netlify.app/editor.html?extension=http://localhost:8000/src/index.js)
  - [https://turbowarp.org/editor/?extension=http://localhost:8000/src/index.js](https://turbowarp.org/editor/?extension=http://localhost:8000/src/index.js)

### Troubleshooting
- If you get any weirdness in the npm console, try clearing .parcel-cache
- Add `&reset` to URL to force clear everything incase you accidently corrupt IndexedDB while developing


<br>
<br>
<br>
<hr>
<br>
<br>
<br>