refactor: import wasm directly

Author: matmen

ImageScript.d.ts

@@ -344,15 +344,6 @@ export class Image {
    */
   async encodeJPEG(quality?: JPEGQuality): Promise<Uint8Array>;
 
-  /**
-   * Encodes the image into a WEBP.
-   *
-   * @param quality `0`-`100`, or `null` for lossless. `0` is lowest quality
-   *     (highest compression) and `100` is highest quality (lowest compression).
-   *     Default: `null`
-   */
-  async encodeWEBP(quality?: null | WEBPQuality): Promise<Uint8Array>;
-
   /**
    * Decodes an image (PNG, JPEG or TIFF).
    *
@@ -634,113 +625,6 @@ export type PNGCompressionLevel = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
  */
 export type SVGScaleMode = 1 | 2 | 3;
 
-/**
- * - `0` = **lowest** quality (smallest file size)
- * - `100` = **highest** quality (largest file size)
- */
-export type WEBPQuality =
-  | 0
-  | 1
-  | 2
-  | 3
-  | 4
-  | 5
-  | 6
-  | 7
-  | 8
-  | 9
-  | 10
-  | 11
-  | 12
-  | 13
-  | 14
-  | 15
-  | 16
-  | 17
-  | 18
-  | 19
-  | 20
-  | 21
-  | 22
-  | 23
-  | 24
-  | 25
-  | 26
-  | 27
-  | 28
-  | 29
-  | 30
-  | 31
-  | 32
-  | 33
-  | 34
-  | 35
-  | 36
-  | 37
-  | 38
-  | 39
-  | 40
-  | 41
-  | 42
-  | 43
-  | 44
-  | 45
-  | 46
-  | 47
-  | 48
-  | 49
-  | 50
-  | 51
-  | 52
-  | 53
-  | 54
-  | 55
-  | 56
-  | 57
-  | 58
-  | 59
-  | 60
-  | 61
-  | 62
-  | 63
-  | 64
-  | 65
-  | 66
-  | 67
-  | 68
-  | 69
-  | 70
-  | 71
-  | 72
-  | 73
-  | 74
-  | 75
-  | 76
-  | 77
-  | 78
-  | 79
-  | 80
-  | 81
-  | 82
-  | 83
-  | 84
-  | 85
-  | 86
-  | 87
-  | 88
-  | 89
-  | 90
-  | 91
-  | 92
-  | 93
-  | 94
-  | 95
-  | 96
-  | 97
-  | 98
-  | 99
-  | 100;
-
 /**
  * - `0` = **lowest** quality (smallest file size)
  * - `100` = **highest** quality (largest file size)

README.md

@@ -1,10 +1,10 @@
 # ImageScript
 ##### zero-dependency JavaScript image manipulation
-[![Discord Server](https://img.shields.io/discord/691713541262147687.svg?label=Discord&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2&style=for-the-badge)](https://discord.gg/8hPrwAH)
+![NPM Version](https://img.shields.io/npm/v/imagescript?style=for-the-badge&label=NPM%20(Node.JS))
+![JSR Version](https://img.shields.io/jsr/v/%40matmen/imagescript?style=for-the-badge&label=JSR%20(Deno))
 [![Documentation](https://img.shields.io/badge/Documentation-informational?style=for-the-badge)](https://imagescript.matmen.dev/)
 [![Github](https://img.shields.io/badge/Github-Repository-181717?logo=github&style=for-the-badge)](https://github.com/matmen/ImageScript)
-[![deno.land](https://shields.io/badge/deno.land-gray?logo=deno&style=for-the-badge)](https://deno.land/x/[email protected])
-[![NPM](https://nodei.co/npm/imagescript.png)](https://www.npmjs.com/package/imagescript)
+[![Discord Server](https://img.shields.io/discord/691713541262147687.svg?label=Discord&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2&style=for-the-badge)](https://discord.gg/8hPrwAH)
 
 ---
 
@@ -38,8 +38,16 @@ binaries for decoding and encoding.
 
 ### Example
 
-[![Example](https://github.com/matmen/ImageScript/raw/master/tests/targets/readme.png)](https://github.com/matmen/ImageScript/blob/master/tests/readme.js)
+```js
+import {Image} from "jsr:@matmen/imagescript";
+
+const input = await Deno.readFile('./image.png');
+const image = await Image.decode(input);
+image.rotate(180);
 
+const output = await image.encode();
+await Deno.writeFile('./output.png', output);
+```
 ---
 
 If you have any additional questions, feel free to join the [discord support server](https://discord.gg/8hPrwAH).

deno.json

@@ -3,7 +3,8 @@
   "version": "1.3.1",
   "exports": "./mod.ts",
   "imports": {
-    "@std/bytes": "jsr:@std/bytes@^1.0.0"
+    "@std/bytes": "jsr:@std/bytes@^1.0.0",
+    "env": "./utils/wasm/env.js"
   },
   "publish": {
     "exclude": ["tests/"]

example.js

@@ -0,0 +1,8 @@
+import {Image} from "jsr:@matmen/imagescript";
+
+const input = await Deno.readFile('./tests/targets/readme.png');
+const image = await Image.decode(input);
+image.rotate(180);
+
+const output = await image.encode();
+await Deno.writeFile('./output.png', output);

utils/wasm/env.js

@@ -0,0 +1,7 @@
+export const streams = new Map;
+
+export function emscripten_notify_memory_growth(...args) { console.log(...args) }
+export function push_to_stream(id, ptr) {
+    const mem = streams.get(id).m;
+    streams.get(id).cb(mem.u8(ptr, mem.length()).slice());
+}

utils/wasm/font.js

@@ -1,26 +1,17 @@
-let registry;
-let wasm_mod;
-let ref = { deref() {} };
-
-{
-  const path = new URL(import.meta.url.replace('.js', '.wasm'));
-  wasm_mod = new WebAssembly.Module(await ('file:' === path.protocol ? Deno.readFile(path) : fetch(path).then(r => r.arrayBuffer())));
-}
+import * as wasm from './font.wasm';
 
-function wasm() {
-  return ref.deref() || (ref = new WeakRef(new WebAssembly.Instance(wasm_mod).exports)).deref();
-}
+let registry;
 
 class mem {
-  static length() { return wasm().wlen(); }
-  static alloc(size) { return wasm().walloc(size); }
-  static free(ptr, size) { return wasm().wfree(ptr, size); }
-  static u8(ptr, size) { return new Uint8Array(wasm().memory.buffer, ptr, size); }
-  static u32(ptr, size) { return new Uint32Array(wasm().memory.buffer, ptr, size); }
+  static length() { return wasm.wlen(); }
+  static alloc(size) { return wasm.walloc(size); }
+  static free(ptr, size) { return wasm.wfree(ptr, size); }
+  static u8(ptr, size) { return new Uint8Array(wasm.memory.buffer, ptr, size); }
+  static u32(ptr, size) { return new Uint32Array(wasm.memory.buffer, ptr, size); }
 
   static copy_and_free(ptr, size) {
     let slice = mem.u8(ptr, size).slice();
-    return (wasm().wfree(ptr, size), slice);
+    return (wasm.wfree(ptr, size), slice);
   }
 }
 
@@ -30,71 +21,71 @@ const encode_utf8 = globalThis.Deno?.core?.encode ?? globalThis.Buffer?.from.bin
 if ('FinalizationRegistry' in globalThis) {
   registry = new FinalizationRegistry(([t, ptr]) => {
     if (!ref.deref()) return;
-    if (t === 0) wasm().font_free(ptr);
-    if (t === 1) wasm().layout_free(ptr);
+    if (t === 0) wasm.font_free(ptr);
+    if (t === 1) wasm.layout_free(ptr);
   });
 }
 
 export class Font {
   constructor(scale, buffer) {
-    this._w = wasm();
+    this._w = wasm;
     this.scale = scale;
     const ptr = mem.alloc(buffer.length);
     mem.u8(ptr, buffer.length).set(buffer);
-    this.ptr = wasm().font_new(ptr, buffer.length, scale);
+    this.ptr = wasm.font_new(ptr, buffer.length, scale);
 
     if (!this.ptr) throw new Error('invalid font');
     if (registry) registry.register(this, [0, this.ptr], this);
   }
 
   free() {
-    this.ptr = wasm().font_free(this.ptr);
+    this.ptr = wasm.font_free(this.ptr);
     if (registry) registry.unregister(this);
   }
 
   has(char) {
-    return wasm().font_has(this.ptr, String.prototype.charCodeAt.call(char, 0));
+    return wasm.font_has(this.ptr, String.prototype.charCodeAt.call(char, 0));
   }
 
   metrics(char, scale = this.scale) {
-    const ptr = wasm().font_metrics(this.ptr, String.prototype.charCodeAt.call(char, 0), scale);
-    const metrics = JSON.parse(decode_utf8(mem.u8(wasm().font_metrics_buffer(ptr), mem.length())));
+    const ptr = wasm.font_metrics(this.ptr, String.prototype.charCodeAt.call(char, 0), scale);
+    const metrics = JSON.parse(decode_utf8(mem.u8(wasm.font_metrics_buffer(ptr), mem.length())));
 
-    return (wasm().font_metrics_free(ptr), metrics);
+    return (wasm.font_metrics_free(ptr), metrics);
   }
 
   rasterize(char, scale = this.scale) {
-    const ptr = wasm().font_rasterize(this.ptr, String.prototype.charCodeAt.call(char, 0), scale);
+    const ptr = wasm.font_rasterize(this.ptr, String.prototype.charCodeAt.call(char, 0), scale);
 
     const glyph = {
-      buffer: mem.u8(wasm().font_rasterize_buffer(ptr), mem.length()).slice(),
-      metrics: JSON.parse(decode_utf8(mem.u8(wasm().font_rasterize_metrics(ptr), mem.length()))),
+      buffer: mem.u8(wasm.font_rasterize_buffer(ptr), mem.length()).slice(),
+      metrics: JSON.parse(decode_utf8(mem.u8(wasm.font_rasterize_metrics(ptr), mem.length()))),
     }
 
-    return (wasm().font_rasterize_free(ptr), glyph);
+    return (wasm.font_rasterize_free(ptr), glyph);
   }
 }
 
 export class Layout {
   constructor() {
-    this._w = wasm();
+    this._w = wasm;
     if (registry) this.refs = [];
-    this.ptr = wasm().layout_new();
+    this.ptr = wasm.layout_new();
     if (registry) registry.register(this, [1, this.ptr], this);
   }
 
   clear() {
-    wasm().layout_clear(this.ptr);
+    wasm.layout_clear(this.ptr);
     if (registry) this.refs.length = 0;
   }
 
   lines() {
-    return wasm().layout_lines(this.ptr);
+    return wasm.layout_lines(this.ptr);
   }
 
   free() {
     if (registry) this.refs.length = 0;
-    this.ptr = wasm().layout_free(this.ptr);
+    this.ptr = wasm.layout_free(this.ptr);
     if (registry) registry.unregister(this);
   }
 
@@ -104,7 +95,7 @@ export class Layout {
     if (registry) this.refs.length = 0;
     const ptr = mem.alloc(options.length);
     mem.u8(ptr, options.length).set(options);
-    wasm().layout_reset(this.ptr, ptr, options.length);
+    wasm.layout_reset(this.ptr, ptr, options.length);
   }
 
   append(font, text, init) {
@@ -114,18 +105,18 @@ export class Layout {
     const ptr = mem.alloc(text.length);
     mem.u8(ptr, text.length).set(text);
     const has_color = ('r' in options) || ('g' in options) || ('b' in options);
-    wasm().layout_append(this.ptr, font.ptr, ptr, text.length, options.scale ?? font.scale, has_color, options.r, options.g, options.b);
+    wasm.layout_append(this.ptr, font.ptr, ptr, text.length, options.scale ?? font.scale, has_color, options.r, options.g, options.b);
   }
 
   rasterize(r, g, b) {
-    const ptr = wasm().layout_rasterize(this.ptr, r, g, b);
+    const ptr = wasm.layout_rasterize(this.ptr, r, g, b);
 
     const framebuffer = {
-      width: wasm().layout_rasterize_width(ptr),
-      height: wasm().layout_rasterize_height(ptr),
-      buffer: mem.u8(wasm().layout_rasterize_buffer(ptr), mem.length()).slice(),
+      width: wasm.layout_rasterize_width(ptr),
+      height: wasm.layout_rasterize_height(ptr),
+      buffer: mem.u8(wasm.layout_rasterize_buffer(ptr), mem.length()).slice(),
     }
 
-    return (wasm().layout_rasterize_free(ptr), framebuffer);
+    return (wasm.layout_rasterize_free(ptr), framebuffer);
   }
 }