Hi there! Are you looking for the official Deno documentation? Try docs.deno.com for all your Deno learning needs.

default

import { default } from "https://raw.githubusercontent.com/SheepTester/htmlifier/v1.0.2/src/htmlifier.ts";

A "converter" that "converts" a project to HTML.

I put "convert" in scare quotes because there's really no conversion going on. It just stuffs the Scratch VM and the project data into a single HTML file that makes the Scratch VM run the project. It's no different than a self-contained embed of the Scratch project player.

However, to the common Scratcher, this isn't a big concern. They just want to see the .sb3 file extension get turned into a .html that can be previewed immediately in the browser. That is "conversion" enough for them.

I often see Scratchers asking how to convert from an .sb3 file to some other language, like JavaScript, Python, or Java. But this is inherently flawed; programming languages alone aren't required to be able to render graphics or play sound. @apple502j said it well:

The whole idea of "converting something into another language" is flawed. Just like how cultural difference affects translation of real-life languages, there are big differences that make this idea very hard to implement. For example, JavaScript itself does not offer stage rendering, so you'll have to add a few hundreds of kilobytes of code just to make that cat appear.

The TurboWarp Packager has a more accurate and descriptive name, at the cost of not being what the common Scratcher would be thinking of when they want to turn their Scratch project into a web page. In contrast, the HTMLifier is somewhat deceptive, considering that similar existing programs (e.g. Phosphorus) actually do convert Scratch blocks into JavaScript. The HTMLifier can be seen as a joke, originally made as a lazy solution to vague demands.

Anyways, here's an example.

// Converts "Scratch 3.0 is here!" https://scratch.mit.edu/projects/276660763/
const result = await new Htmlifier()
  .htmlify({ type: 'id', id: '276660763' })
  .then(blob => blob.text())
class default {
private async _createHtml(projectSource: ProjectSource, { log, zip: outputZip?, includeVm, title, username, width, height, stretch: stretchStage?, autoStart, turbo, fps, limits, fencing, pointerLock, cursor, favicon, backgroundImage, extensions, injectedScripts, loading: { progressBar, image: loadingImage?, stretch: stretchLoadingImage? }?, buttons: { startStop: startStopBtns?, fullscreen: fullscreenBtn?, download: downloadBtn?, addSprite: addSpriteBtn? }?, monitors: { showContainer, valueBackground, text: monitorText? }?, cloud: { serverUrl, specialBehaviours, projectId }? }: Partial<HtmlifyOptions>): Promise<Blob>;
async htmlify(project: ProjectSource, options?: Partial<HtmlifyOptions>): Promise<Blob>;
}

§Methods

§
_createHtml(projectSource: ProjectSource, { log, zip: outputZip?, includeVm, title, username, width, height, stretch: stretchStage?, autoStart, turbo, fps, limits, fencing, pointerLock, cursor, favicon, backgroundImage, extensions, injectedScripts, loading: { progressBar, image: loadingImage?, stretch: stretchLoadingImage? }?, buttons: { startStop: startStopBtns?, fullscreen: fullscreenBtn?, download: downloadBtn?, addSprite: addSpriteBtn? }?, monitors: { showContainer, valueBackground, text: monitorText? }?, cloud: { serverUrl, specialBehaviours, projectId }? }: Partial<HtmlifyOptions>): Promise<Blob> private
[src]
§
htmlify(project: ProjectSource, options?: Partial<HtmlifyOptions>): Promise<Blob>
[src]

Convert project to HTML. Returns a Blob containing the HTML file, or a ZIP file if the zip option was enabled.