@thi.ng/wasm-api-dom - npm Package Compare versions

Comparing version 0.8.1 to 0.9.0

CHANGELOG.md

 # Change Log
 
-- **Last updated**: 2022-10-31T23:01:45Z
+- **Last updated**: 2022-11-01T12:32:51Z
 - **Generator**: [thi.ng/monopub](https://thi.ng/monopub)
@@ -12,2 +12,15 @@
 
+## [0.9.0](https://github.com/thi-ng/umbrella/tree/@thi.ng/wasm-api-dom@0.9.0) (2022-11-01)
+
+#### 🚀 Features
+
+- update ScrollEvent ([17a6205](https://github.com/thi-ng/umbrella/commit/17a6205))
+  - update ScrollEvent.fromEvent() to use target element's scroll offset
+  - if attached to window, use global offset
+- add attrib creation opts ([0e69c47](https://github.com/thi-ng/umbrella/commit/0e69c47))
+  - add Attrib, AttribValue, AttribType types
+  - update CreateElementOpts
+  - update initElement() to batch create given attribs
+  - update doc strings
+
 ### [0.8.1](https://github.com/thi-ng/umbrella/tree/@thi.ng/wasm-api-dom@0.8.1) (2022-10-31)
@@ -14,0 +27,0 @@

dom.d.ts

 import type { IWasmAPI, ReadonlyWasmString, WasmBridge, WasmType } from "@thi.ng/wasm-api";
 import { ObjectIndex } from "@thi.ng/wasm-api/object-index";
-import { CreateElementOpts, DOMExports, DOMImports, Event as WasmEvent } from "./api.js";
+import { Attrib, CreateElementOpts, DOMExports, DOMImports, Event as WasmEvent } from "./api.js";
 /** @internal */
@@ -13,3 +13,2 @@ interface WasmListener {
     readonly id = "dom";
-    readonly dependencies: string[];
     parent: WasmBridge<DOMExports>;
@@ -25,2 +24,3 @@ $Event: WasmType<WasmEvent>;
     protected initElement(el: Element, opts: Pick<Readonly<CreateElementOpts>, "class" | "id" | "index" | "parent"> & Partial<{
+        attribs: Attrib[];
         html: ReadonlyWasmString;
@@ -27,0 +27,0 @@ text: ReadonlyWasmString;

dom.js

 import { adaptDPI } from "@thi.ng/adapt-dpi";
 import { assert } from "@thi.ng/errors/assert";
 import { ObjectIndex } from "@thi.ng/wasm-api/object-index";
-import { $CreateCanvasOpts, $CreateElementOpts, $Event, $WindowInfo, EventType, NS_PREFIXES, } from "./api.js";
+import { $CreateCanvasOpts, $CreateElementOpts, $Event, $WindowInfo, AttribType, EventType, NS_PREFIXES, } from "./api.js";
 const EVENT_MAP = [
@@ -27,3 +27,2 @@ [/^drag(end|enter|leave|over|start)|drop$/, "drag", EventType.DRAG],
         this.id = "dom";
-        this.dependencies = [];
         this.elements = new ObjectIndex({ name: "elements" });
@@ -234,3 +233,3 @@ this.listeners = {};
     initElement(el, opts, nestedParent) {
-        const { id, class: $class, index } = opts;
+        const { id, attribs, class: $class, index } = opts;
         if (id.length)
@@ -246,2 +245,15 @@ el.setAttribute("id", id.deref());
         }
+        if (attribs && attribs.length) {
+            for (let attr of attribs) {
+                const name = attr.name.deref();
+                if (attr.kind === AttribType.FLAG) {
+                    attr.value.flag && el.setAttribute(name, "");
+                }
+                else {
+                    el.setAttribute(name, attr.kind === AttribType.STR
+                        ? attr.value.str.deref()
+                        : String(attr.value.num));
+                }
+            }
+        }
         const parent = nestedParent != undefined ? nestedParent : opts.parent;
@@ -248,0 +260,0 @@ if (parent >= 0) {

generated/api.d.ts

 /**
- * Generated by @thi.ng/wasm-api at 2022-10-30T07:52:41.295Z - DO NOT EDIT!
+ * Generated by @thi.ng/wasm-api at 2022-11-01T11:56:07.332Z - DO NOT EDIT!
  */
@@ -272,2 +272,4 @@ import { MemorySlice, WasmStringSlice, WasmTypeBase, WasmTypeConstructor } from "@thi.ng/wasm-api";
     /**
+     * Horizontal scroll offset in fractional CSS pixels.
+     *
      * WASM type: f32
@@ -277,2 +279,4 @@ */
     /**
+     * Vertical scroll offset in fractional CSS pixels.
+     *
      * WASM type: f32
@@ -358,7 +362,8 @@ */
     /**
-     * Target element ID, positive if a known element, otherwise:
+     * Target element ID, > 1 if a known (WASM created) element, otherwise:
      *
-     * - 0: document.body
+     * - -2: = unknown
      * - -1: window
-     * - -2: = unknown
+     * - 0: document.head
+     * - 1: document.body
      *
@@ -372,2 +377,3 @@ * WASM type: i32
      *
+     * - drag
      * - input
@@ -422,5 +428,37 @@ * - key
     index: number;
+    /**
+     * Optional slice of child element specs, which will be automatically attached
+     * as children to this element (their `parent` ID will be ignored)
+     */
     children: CreateElementOpts[];
+    /**
+     * Optional slice of attribute definitions for this element. Also see provided
+     * `Attrib` factory fns for convenience.
+     */
+    attribs: Attrib[];
 }
 export declare const $CreateElementOpts: WasmTypeConstructor<CreateElementOpts>;
+export interface Attrib extends WasmTypeBase {
+    name: WasmStringSlice;
+    value: AttribValue;
+    kind: AttribType;
+}
+export declare const $Attrib: WasmTypeConstructor<Attrib>;
+export interface AttribValue extends WasmTypeBase {
+    str: WasmStringSlice;
+    /**
+     * WASM type: f64
+     */
+    num: number;
+    /**
+     * WASM type: u8
+     */
+    flag: number;
+}
+export declare const $AttribValue: WasmTypeConstructor<AttribValue>;
+export declare enum AttribType {
+    STR = 0,
+    NUM = 1,
+    FLAG = 2
+}
 export interface CreateCanvasOpts extends WasmTypeBase {
@@ -427,0 +465,0 @@ /**

generated/api.js

 /**
- * Generated by @thi.ng/wasm-api at 2022-10-30T07:52:41.295Z - DO NOT EDIT!
+ * Generated by @thi.ng/wasm-api at 2022-11-01T11:56:07.332Z - DO NOT EDIT!
  */
@@ -426,5 +426,6 @@ // @ts-ignore possibly includes unused imports
             },
-            fromEvent() {
-                this.scrollX = window.scrollX;
-                this.scrollY = window.scrollY;
+            fromEvent(e) {
+                const target = (e.target.scrollTop != null ? e.target : document.scrollingElement);
+                this.scrollX = target.scrollLeft || 0;
+                this.scrollY = target.scrollTop || 0;
             }
@@ -643,3 +644,3 @@ };
     get size() {
-        return 64;
+        return 72;
     },
@@ -658,3 +659,3 @@ instance: (base) => {
             get __bytes() {
-                return mem.u8.subarray(base, base + 64);
+                return mem.u8.subarray(base, base + 72);
             },
@@ -697,8 +698,91 @@ get tag() {
                 for (let i = 0; i < len; i++)
-                    slice.push(inst.instance(addr + i * 8));
+                    slice.push(inst.instance(addr + i * 72));
                 return slice;
             },
+            get attribs() {
+                const len = mem.u32[(base + 68) >>> 2];
+                const addr = mem.u32[(base + 64) >>> 2];
+                const inst = $Attrib(mem);
+                const slice = [];
+                for (let i = 0; i < len; i++)
+                    slice.push(inst.instance(addr + i * 24));
+                return slice;
+            },
         };
     }
 });
+export const $Attrib = (mem) => ({
+    get align() {
+        return 8;
+    },
+    get size() {
+        return 24;
+    },
+    instance: (base) => {
+        let $name = null;
+        return {
+            get __base() {
+                return base;
+            },
+            get __bytes() {
+                return mem.u8.subarray(base, base + 24);
+            },
+            get name() {
+                return $name || ($name = new WasmStringSlice(mem, base, true));
+            },
+            get value() {
+                return $AttribValue(mem).instance((base + 8));
+            },
+            set value(x) {
+                mem.u8.set(x.__bytes, (base + 8));
+            },
+            get kind() {
+                return mem.u8[(base + 16)];
+            },
+            set kind(x) {
+                mem.u8[(base + 16)] = x;
+            },
+        };
+    }
+});
+export const $AttribValue = (mem) => ({
+    get align() {
+        return 8;
+    },
+    get size() {
+        return 8;
+    },
+    instance: (base) => {
+        let $str = null;
+        return {
+            get __base() {
+                return base;
+            },
+            get __bytes() {
+                return mem.u8.subarray(base, base + 8);
+            },
+            get str() {
+                return $str || ($str = new WasmStringSlice(mem, base, true));
+            },
+            get num() {
+                return mem.f64[base >>> 3];
+            },
+            set num(x) {
+                mem.f64[base >>> 3] = x;
+            },
+            get flag() {
+                return mem.u8[base];
+            },
+            set flag(x) {
+                mem.u8[base] = x;
+            },
+        };
+    }
+});
+export var AttribType;
+(function (AttribType) {
+    AttribType[AttribType["STR"] = 0] = "STR";
+    AttribType[AttribType["NUM"] = 1] = "NUM";
+    AttribType[AttribType["FLAG"] = 2] = "FLAG";
+})(AttribType || (AttribType = {}));
 export const $CreateCanvasOpts = (mem) => ({
@@ -705,0 +789,0 @@ get align() {

package.json

 {
   "name": "@thi.ng/wasm-api-dom",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "description": "Browser DOM bridge API for hybrid TypeScript & WASM (Zig) applications",
@@ -39,6 +39,6 @@ "type": "module",
     "@thi.ng/adapt-dpi": "^2.2.1",
-    "@thi.ng/api": "^8.4.4",
+    "@thi.ng/api": "^8.4.5",
     "@thi.ng/checks": "^3.3.2",
     "@thi.ng/errors": "^2.2.3",
-    "@thi.ng/wasm-api": "^0.18.0"
+    "@thi.ng/wasm-api": "^0.18.1"
   },
@@ -98,3 +98,3 @@ "devDependencies": {
   },
-  "gitHead": "7eff3051eb395f460421727b8cf5ef79f09faaa9\n"
+  "gitHead": "a4b60163a8caddceed5ec1b6b3584d164f61e7b6\n"
 }

README.md

@@ -16,2 +16,3 @@ <!-- This file is generated - DO NOT EDIT! -->
   - [DOM tree creation](#dom-tree-creation)
+  - [Attribute creation & accessors](#attribute-creation--accessors)
   - [Event listeners](#event-listeners)
@@ -45,5 +46,5 @@ - [Status](#status)
 - Event handlers, event types (see generated types in [api.zig](https://github.com/thi-ng/umbrella/blob/develop/packages/wasm-api-dom/zig/api.zig) for details):
-	- drag 'n drop (WIP)
-	- focus
-	- input
+    - drag 'n drop (WIP)
+    - focus
+    - input
     - key
@@ -85,3 +86,3 @@ - mouse
     try dom.init(WASM_ALLOCATOR);
-	// ...
+    // ...
 }
@@ -151,2 +152,29 @@
 
+### Attribute creation & accessors
+
+Attributes can be provided as part of the `CreateElementOpts` and/or accessed imperatively:
+
+```zig
+// creating & configuring an <input type="range"> element
+_ = dom.createElement(&.{
+    .tag = "input",
+    .parent = toolbar,
+    .attribs = &.{
+        dom.Attrib.string("type", "range"),
+        dom.Attrib.number("min", 0),
+        dom.Attrib.number("max", 100),
+        dom.Attrib.number("step", 10),
+        dom.Attrib.number("value", 20),
+    },
+});
+```
+
+The following accessors are provided (see
+[/zig/lib.zig](https://github.com/thi-ng/umbrella/blob/develop/packages/wasm-api-dom/zig/lib.zig)
+for documentation):
+
+- `getStringAttrib()` / `setStringAttrib()`
+- `getNumericAttrib()` / `setNumericAttrib()`
+- `getBooleanAttrib()` / `setBooleanAttrib()`
+
 ### Event listeners
@@ -158,3 +186,4 @@
 
-This small Zig click counter button component can be seen in action in the
+A more advanced version of the following click counter button component (written
+in Zig) can be seen in action in the
 [zig-counter](https://github.com/thi-ng/umbrella/tree/develop/examples/zig-counter)
@@ -241,3 +270,3 @@ example project.
 
-Package sizes (gzipped, pre-treeshake): ESM: 3.91 KB
+Package sizes (gzipped, pre-treeshake): ESM: 4.19 KB
 
@@ -244,0 +273,0 @@ ## Dependencies

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

111166

increased by6.31%

Lines of code

2069

increased by6.93%

Number of lines in readme file

325

increased by9.8%

Dependency changes

• [e-mail]/api@^8.4.5

• [e-mail]/wasm-api@^0.18.1