Actually package the project into the file

src/packager/P4.svelte

@@ -2,13 +2,137 @@
   import ProjectPackager from './packager';
   import downloadFile from './download-file';
 
+  let projectId = '1';
+  let turbo = false;
+  let interpolation = false;
+  let framerate = 30;
+  let highQualityPen = false;
+  let width = 480;
+  let height = 360;
+  let autoplay = false;
+  let runtimeOptions = {
+    maxClones: 300,
+    fencing: true,
+    miscLimits: true
+  };
+  let compilerOptions = {
+    enabled: true,
+    warpTimer: false
+  };
+  let backgroundColor = '#000000';
+  let textColor = '#ffffff';
+  let addons = false;
+
   const pack = async () => {
     const packager = new ProjectPackager();
-    await packager.loadProjectById('1');
+    await packager.loadProjectById(projectId);
     await packager.loadResources();
     const result = await packager.package();
-    downloadFile(result, 'test.html');
+    downloadFile(result, 'project.html');
   };
 </script>
 
-<button on:click={pack}>Package</button>
+<style>
+  main {
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    max-width: 700px;
+    margin: auto;
+  }
+  label {
+    display: block;
+  }
+</style>
+
+<main>
+  <h1>TurboWarp Packager</h1>
+
+  <p>We're currently rewriting the packager to make it faster, more customizable, and more maintainable. Noteworthy changes:</p>
+  <ul>
+    <li>Packaged projects are now about a megabyte smaller</li>
+    <li>Packaged projects load slightly faster</li>
+    <li>Packaged projects can run slightly (in some cases, significantly) faster due to less Scratch overhead</li>
+    <li>Things like monitors, ask prompts, etc. can look and function a bit different, we're working on it.</li>
+    <li>Redesigned minimal loading screen. Easy to edit. Just open the HTML and look for the part that says "progress bar".</li>
+  </ul>
+
+  <h2>Project Options</h2>
+  <label>
+    Project ID
+    <input type="number" bind:value={projectId}>
+  </label>
+
+  <h2>Runtime Options</h2>
+  <label>
+    <input type="checkbox" bind:checked={turbo}>
+    Turbo Mode
+  </label>
+  <label>
+    <input type="checkbox" bind:checked={interpolation}>
+    Interpolation
+  </label>
+  <label>
+    Framerate
+    <input type="number" min="0" max="240" bind:value={framerate}>
+  </label>
+  <label>
+    <input type="checkbox" bind:checked={highQualityPen}>
+    High Quality Pen
+  </label>
+  <label>
+    <input type="checkbox" checked={runtimeOptions.maxClones === Infinity} on:change={(e) => {
+      runtimeOptions.maxClones = e.target.checked ? Infinity : 300;
+    }}>
+    Infinite Clones
+  </label>
+  <label>
+    <input type="checkbox" checked={!runtimeOptions.fencing} on:change={(e) => {
+      runtimeOptions.fencing = !e.target.checked;
+    }}>
+    Remove Fencing
+  </label>
+  <label>
+    <input type="checkbox" checked={!runtimeOptions.miscLimits} on:change={(e) => {
+      runtimeOptions.miscLimits = !e.target.checked;
+    }}>
+    Remove Miscellanous Limits
+  </label>
+  <label>
+    Stage Size
+    <input type="number" min="0" max="4096" step="1" bind:value={width}>
+    &times;
+    <input type="number" min="0" max="4096" step="1" bind:value={height}>
+  </label>
+  <label>
+    <input type="checkbox" bind:checked={autoplay}>
+    Autoplay
+  </label>
+
+  <h2>Compiler Options</h2>
+  <label>
+    <input type="checkbox" bind:checked={compilerOptions.enabled}>
+    Enable compiler
+  </label>
+  <label>
+    <input type="checkbox" bind:checked={compilerOptions.warpTimer}>
+    Warp Timer
+  </label>
+
+  <h2>Appearance</h2>
+  <label>
+    <input type="color" bind:value={backgroundColor}>
+    Background Color
+  </label>
+  <label>
+    <input type="color" bind:value={textColor}>
+    Text Color
+  </label>
+
+  <h2>Addons</h2>
+  <label>
+    <input type="checkbox" bind:checked={addons}>
+    Include gamepad addon
+  </label>
+
+  <button on:click={pack}>Package</button>
+</main>
+

src/packager/packager.js

@@ -1,5 +1,12 @@
 import downloadProject from './downloader';
 
+const readAsDataURL = (buffer) => new Promise((resolve, reject) => {
+  const fr = new FileReader();
+  fr.onload = () => resolve(fr.result);
+  fr.onerror = () => reject(new Error('Cannot read as URL'));
+  fr.readAsDataURL(buffer);
+});
+
 export class Packager {
   constructor () {
     this.projectSource = null;
@@ -7,8 +14,8 @@ export class Packager {
 
   async loadProjectById (id) {
     const project = await downloadProject(id);
-    const buffer = await project.asArrayBuffer();
-    this.projectSource = buffer;
+    const blob = await project.asBlob();
+    this.projectSource = blob;
   }
 
   async loadResources () {
@@ -131,18 +138,9 @@ export class Packager {
     const scaffolding = new Scaffolding.Scaffolding();
     scaffolding.setup();
     scaffolding.appendTo(appElement);
-
     ScaffoldingAddons.run(scaffolding);
 
     const {storage, vm} = scaffolding;
-    storage.addWebStore(
-      [storage.AssetType.Project],
-      (asset) => "https://projects.scratch.mit.edu/" + asset.assetId
-    );
-    storage.addWebStore(
-      [storage.AssetType.ImageVector, storage.AssetType.ImageBitmap, storage.AssetType.Sound],
-      (asset) => "https://assets.scratch.mit.edu/internalapi/asset/" + asset.assetId + "." + asset.dataFormat + "/get/"
-    );
     const setProgress = (progress) => {
       loadingInner.style.width = progress * 100 + "%";
     }
@@ -152,9 +150,8 @@ export class Packager {
     setProgress(0.1);
 
     const getProjectJSON = async () => {
-      const PROJECT_ID = '413072152';
-      const asset = await storage.load(Scaffolding.Storage.AssetType.Project, PROJECT_ID);
-      return asset.data;
+      const res = await fetch(${JSON.stringify(await readAsDataURL(this.projectSource))});
+      return res.arrayBuffer();
     };
 
     const run = async () => {