Merge pull request #107 from SheepTester/updates

Make npm package

Author: SheepTester

README.md

@@ -1,23 +1,32 @@
 # htmlifier
 
-The HTMLifier "converts" Scratch 3.0 projects to an HTML file by putting all the project data and the entire Scratch engine into one enormous file.
-It does this by making Scratch VM fetch a project, and in doing so, it tracks the assets it fetches from the project.json. It converts the fetched assets and project.json into a base64 data URI. It also fetches the code for the Scratch VM. It inserts all this in a template HTML file, which has been set up to load the project from the base64 data URIs and do other things that the Scratch VM doesn't take of, which is normally handled by [scratch-gui](https://github.com/LLK/scratch-gui/), such as variable/list monitors and ask and wait prompts.
+The HTMLifier "converts" Scratch 3.0 projects to an HTML file by putting all the
+project data and the entire Scratch engine into one enormous file.
 
-[hacky-file-getter.js](./hacky-file-getter.js) is based on [Scratch VM's benchmark page](https://github.com/LLK/scratch-vm/blob/develop/src/playground/benchmark.js).
+It does this by making Scratch VM fetch a project, and in doing so, it tracks
+the assets it fetches from the project.json. It converts the fetched assets and
+project.json into a base64 data URI. It also fetches the code for the Scratch
+VM. It inserts all this in a template HTML file, which has been set up to load
+the project from the base64 data URIs and do other things that the Scratch VM
+doesn't take of, which is normally handled by
+[scratch-gui](https://github.com/LLK/scratch-gui/), such as variable/list
+monitors and ask and wait prompts.
+
+The HTMLifier is also available as an [npm
+package](https://www.npmjs.com/package/@sheeptester/htmlifier).
 
 ## Credits
 
 CSS by [Mr. Cringe Kid](https://scratch.mit.edu/users/mrcringekidyt/).
 
 The Scratch engine is from [scratch-vm](https://github.com/LLK/scratch-vm/).
 
-[download.js](http://danml.com/download.html) is used to download the HTML file.
-
 [JSZip](https://stuk.github.io/jszip/) for downloading as a zip.
 
 ## See also
 
-The Scratch mod used by the HTMLifier: [E羊icques](https://sheeptester.github.io/scratch-gui/) ([Github](https://github.com/SheepTester/scratch-gui))
+The Scratch mod used by the HTMLifier: [E羊icques](https://sheeptester.github.io/scratch-gui/)
+([Github](https://github.com/SheepTester/scratch-gui)).
 
 Depending on your use case, the HTMLifier may not be the best option for you.
 The HTMLifier prioritizes accuracy by using almost the same engine that vanilla
@@ -43,4 +52,8 @@ deno run --allow-run --allow-read=src --allow-write=index.bundle.min.js \
 # Automatically build when the files change (for development)
 nodemon --exec "deno run --allow-all" --watch src --watch client \
   --ext ts,css,html,js bin/build.ts -- dev
+
+# Build for Node
+deno run --allow-run --allow-read=src --allow-write=node/index.min.js \
+  --allow-net=sheeptester.github.io bin/build.ts node
 ```

bin/build.ts

@@ -3,7 +3,8 @@
 import { vm, extensionWorker, template } from '../src/dependencies.ts'
 import { writeAll } from 'https://deno.land/std@0.101.0/io/util.ts'
 
-const minify = Deno.args[0] !== 'dev'
+const minify = !Deno.args.includes('dev')
+const isNode = Deno.args.includes('node')
 
 const decoder = new TextDecoder()
 const encoder = new TextEncoder()
@@ -15,7 +16,10 @@ const bundleProcess = Deno.run({
     '--no-check',
     '--import-map',
     new URL('../import-map.json', import.meta.url).toString(),
-    new URL('../client/index.ts', import.meta.url).toString()
+    new URL(
+      isNode ? '../src/htmlifier.ts' : '../client/index.ts',
+      import.meta.url
+    ).toString()
   ],
   stdout: 'piped'
 })
@@ -27,7 +31,32 @@ if (!status.success) {
   )
 }
 
-let result = `(async () => {
+let result = isNode
+  ? `import fetch from 'node-fetch'
+import Blob from 'fetch-blob'
+
+// A lame "polyfill" for FileReader
+class FileReader {
+  addEventListener (_, callback) {
+    this.callback = callback
+  }
+
+  async readAsDataURL (blob) {
+    // https://stackoverflow.com/a/62684503
+    this.result = Buffer.from(await blob.arrayBuffer()).toString('base64')
+    this.callback()
+  }
+}
+
+const dependencies_vm = '__htmlifier_VM__'
+const dependencies_extensionWorker = '__htmlifier_EW__'
+const dependencies_template = '__htmlifier_TEMP__'
+
+${bundle.replace(
+  /(dependencies_\w+)\s*:[^;]+;/g,
+  (_, match) => `${match} : undefined;`
+)}`
+  : `;(async () => {
   const dependencies_vm = '__htmlifier_VM__'
   const dependencies_extensionWorker = '__htmlifier_EW__'
   const dependencies_template = '__htmlifier_TEMP__'
@@ -36,8 +65,12 @@ let result = `(async () => {
 
 if (minify) {
   console.log('Minifying...')
+  const options = ['terser', '--compress', 'unsafe']
+  if (isNode) {
+    options.push('--module')
+  }
   const minifyProcess = Deno.run({
-    cmd: ['terser', '--compress', 'unsafe'],
+    cmd: options,
     stdin: 'piped',
     stdout: 'piped'
   })
@@ -54,7 +87,10 @@ if (minify) {
 
 console.log('Substituting dependencies...')
 Deno.writeTextFile(
-  new URL('../index.bundle.min.js', import.meta.url),
+  new URL(
+    isNode ? '../node/index.min.js' : '../index.bundle.min.js',
+    import.meta.url
+  ),
   result
     .replace(/['"]__htmlifier_TEMP__['"]/, () => JSON.stringify(template))
     .replace(/['"]__htmlifier_EW__['"]/, () => JSON.stringify(extensionWorker))

index.html

@@ -131,7 +131,12 @@ <h2 id="updates">Update history</h2>
         See the code and previous versions on
         <a href="https://github.com/SheepTester/htmlifier/">Github</a>.
       </p>
-      <h3>2021-08-08</h3>
+      <h3>
+        2021-08-08 (<a
+          href="https://github.com/SheepTester/htmlifier/releases/download/v1.0.0/htmlifier-offline.html"
+          >download</a
+        >)
+      </h3>
       <ul>
         <li>
           To support the use of the HTMLifier in
@@ -449,7 +454,6 @@ <h2 id="credits">Credits</h2>
         Made by
         <a href="https://scratch.mit.edu/users/Sheep_maker/">Sheep_maker</a>,
         who used <a href="https://github.com/LLK/scratch-vm/">scratch-vm</a>,
-        <a href="http://danml.com/download.html">download.js</a>,
         <a href="https://stuk.github.io/jszip/">JSZip</a>,
         <a href="https://deno.land/">Deno</a>,
         <a href="https://reactjs.org/">React</a>, and their dependencies for

node/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+package-lock.json

node/README.md

@@ -0,0 +1,65 @@
+# [HTMLifier](https://sheeptester.github.io/htmlifier/) for Node
+
+Package a Scratch project inside an HTML file with no optimisations.
+
+## Installation
+
+```sh
+$ npm install @sheeptester/htmlifier
+```
+
+## Example usage
+
+The following example HTMLifies [Scratch 3.0 is
+here!](https://scratch.mit.edu/projects/276660763/) and writes the result to a
+file named `index.html`.
+
+```js
+import fs from 'fs/promises'
+import Htmlifier from '@sheeptester/htmlifier'
+
+async function main () {
+  const html = await new Htmlifier()
+    .htmlify({ type: 'id', id: '276660763' })
+    .then(blob => blob.text())
+  await fs.writeFile('./index.html', html)
+}
+
+main()
+```
+
+Because [`node-fetch`](https://www.npmjs.com/package/node-fetch) is strictly an
+ES module, this package is also an ES module. If you're using a CommonJS module,
+you can use [`esm`](https://www.npmjs.com/package/esm) to import this package.
+
+```js
+require = require('esm')(module)
+const Htmlifier = require('@sheeptester/htmlifier')
+```
+
+The HTMLifier was primarily written for Deno and the web, so it uses
+[`Blob`s](https://developer.mozilla.org/en-US/docs/Web/API/Blob) and
+[`File`s](https://developer.mozilla.org/en-US/docs/Web/API/File) to pass binary
+data around. You can use
+[`fetch-blob`](https://www.npmjs.com/package/fetch-blob) to create `Blob`s and
+`File`s for the HTMLifier.
+
+```js
+import Htmlifier from '@sheeptester/htmlifier'
+import { fileFrom } from 'fetch-blob/from.js'
+
+async function main () {
+  const html = await new Htmlifier()
+    .htmlify({ type: 'file', file: await fileFrom('./project.sb3') })
+    .then(blob => blob.text())
+  // ...
+}
+
+main()
+```
+
+## Documentation
+
+[Auto-generated
+documentation](https://doc.deno.land/https/github.com/SheepTester/htmlifier/raw/v1.0.0/src/htmlifier.ts)
+is available courtesy of deno doc.

node/index.min.js

@@ -0,0 +1,21 @@
+{
+  "name": "@sheeptester/htmlifier",
+  "version": "1.0.0",
+  "description": "Packages a Scratch project in an HTML file with no optimisations.",
+  "type": "module",
+  "main": "index.min.js",
+  "scripts": {
+    "test": "node test.js"
+  },
+  "keywords": [
+    "htmlifier",
+    "scratch",
+    "sb3"
+  ],
+  "author": "SheepTester",
+  "license": "MIT",
+  "dependencies": {
+    "fetch-blob": "^3.1.2",
+    "node-fetch": "^2.6.1"
+  }
+}

node/package.json

@@ -0,0 +1,40 @@
+// This should not throw an error
+
+import Htmlifier from './index.min.js'
+import fetch from 'node-fetch'
+
+function checkForReasonableHtml (html) {
+  if (html.length < 1_000_000) {
+    throw new RangeError(
+      `Shouldn't the result be at least a megabyte instead of ${html.length} characters?`
+    )
+  }
+  if (!html.startsWith('<!DOCTYPE html>')) {
+    throw new SyntaxError(
+      `HTML does not start with DOCTYPE. Instead, it starts with ${html.slice(
+        0,
+        20
+      )}...`
+    )
+  }
+}
+
+new Htmlifier()
+  .htmlify({ type: 'id', id: '276660763' })
+  .then(blob => blob.text())
+  .then(checkForReasonableHtml)
+
+fetch('https://sheeptester.gitlab.io/test/special_cloud_behaviours_example.sb3')
+  .then(r => r.blob())
+  .then(blob => new Htmlifier().htmlify({ type: 'file', file: blob }))
+  .then(blob => blob.text())
+  .then(checkForReasonableHtml)
+
+new Htmlifier()
+  .htmlify({
+    type: 'url',
+    url:
+      'https://sheeptester.gitlab.io/test/special_cloud_behaviours_example.sb3'
+  })
+  .then(blob => blob.text())
+  .then(checkForReasonableHtml)

node/test.js

@@ -6,6 +6,6 @@
  * - 'init' -> ''
  */
 export default function getFileExtension (nameOrFile: string | File): string {
-  const fileName = nameOrFile instanceof File ? nameOrFile.name : nameOrFile
+  const fileName = typeof nameOrFile === 'string' ? nameOrFile : nameOrFile.name
   return fileName.includes('.') ? fileName.slice(fileName.lastIndexOf('.')) : ''
 }

src/get-file-extension.ts

@@ -348,7 +348,9 @@ export default class Htmlifier {
         return `./${fileName}`
       } else {
         return await getDataUrl(
-          file instanceof Blob ? file : new Blob([file], { type: 'text/plain' })
+          typeof file === 'string'
+            ? new Blob([file], { type: 'text/plain' })
+            : file
         )
       }
     }
@@ -393,7 +395,7 @@ export default class Htmlifier {
       )
       const extensionScripts: string[] = []
       for (const extensionSource of extensions) {
-        if (extensionSource instanceof File) {
+        if (typeof extensionSource !== 'string') {
           extensionScripts.push(
             outputZip
               ? await registerFile(
@@ -446,20 +448,20 @@ export default class Htmlifier {
           injectedJs.push({
             type: 'url',
             url:
-              source instanceof File
-                ? await registerFile(source.name, await source.text())
-                : await registerFile(
+              typeof source === 'string'
+                ? await registerFile(
                     source + '.js',
                     await fetch(source).then(toBlob)
                   )
+                : await registerFile(source.name, await source.text())
           })
         } else {
           injectedJs.push({
             type: 'inline',
             source:
-              source instanceof File
-                ? await source.text()
-                : await fetch(source).then(toText)
+              typeof source === 'string'
+                ? await fetch(source).then(toText)
+                : await source.text()
           })
         }
       }
@@ -543,12 +545,12 @@ export default class Htmlifier {
     }
     if (loadingImage) {
       const imageUrl =
-        loadingImage instanceof File
-          ? await registerFile(
+        typeof loadingImage === 'string'
+          ? loadingImage
+          : await registerFile(
               'loading' + getFileExtension(loadingImage),
               loadingImage
             )
-          : loadingImage
       html = html.replace(
         '{LOADING_IMAGE}',
         () => `<img src="${escapeHtml(imageUrl)}" id="loading-image">`