Animation Texture Example

` elements) using their + constructors. For example, don't do `new HTMLDivElement`, instead use + `document.createElement('div')`, or things won't work as expected. +- AS does not yet support referencing constructors, but the Custom Elements API + is one that accepts a constructor as the second argument to + `customElements.define('tag-name', YourClass)`. To work around this + limitation, the `define()` API should be used like so: + ```js + customElements.define('tag-name', () => new YourClass(), YourClass.observedAttributes) + ``` + As with built-in elements, do not manually `new` your custom element class, + except in the factory function that you pass into `customElements.define()` + as the second arg. In other scenarios when you want a ref to your custom + element, you can use any pattern that grabs your element from the DOM instead + of creating it with `new`. + ```js + const temp = document.createElement('

') + temp.innerHTML = '' + const yourElement = temp.firstElementChild + // ...use yourElement... + ``` + This will be improved. + # TODO We will add more DOM APIs as needed while we chisel away. +- [ ] Improve custom element API to allow directly creating custom element + instances from their constructors. - [ ] Use as-pect for testing. -- [ ] Import jsdom or undom so that DOM APIs are mocked (on the JavaScript side) during testing (as-pect runs in Node.js not a browser). -- [ ] Make `document` global. Currently making AS globals is incompatible with TypeScript, so VS Code intellisense doesn't pick up AS globals (https://github.com/AssemblyScript/assemblyscript/issues/1929) +- [ ] Import jsdom or undom so that DOM APIs are mocked (on the JavaScript + side) during testing (as-pect runs in Node.js not a browser). +- [ ] Make `window` and any of its properties global. Currently making AS + globals is incompatible with TypeScript, so VS Code intellisense doesn't pick + up AS globals (https://github.com/AssemblyScript/assemblyscript/issues/1929) diff --git a/assembly/CustomElementRegistry.ts b/assembly/CustomElementRegistry.ts index d197fb8..c30d141 100644 --- a/assembly/CustomElementRegistry.ts +++ b/assembly/CustomElementRegistry.ts @@ -1,10 +1,7 @@ import {HTMLElement} from './elements/HTML/HTMLElement' +import {define} from './imports' import {Object} from './Object' -// @ts-expect-error -@external('asDOM_CustomElementRegistry', 'define') -declare function define(id: usize, tag: string, factoryIndex: i32, attributes: string[]): void - /* * Custom elements are a bit too dynamic to easily map an interface to them * one-to-one like with other DOM APIs, so currently we have to write a bit more @@ -20,7 +17,7 @@ export class CustomElementRegistry extends Object { private __defs: Map HTMLElement> = new Map() define(tag: string, factory: () => HTMLElement, attributes: string[]): void { - define(this.__ptr__, tag, factory.index, attributes) + define(this, tag, factory.index, attributes) this.__defs.set(tag, factory) } diff --git a/assembly/Document.ts b/assembly/Document.ts index 6e63f56..dd1b594 100644 --- a/assembly/Document.ts +++ b/assembly/Document.ts @@ -1,95 +1,116 @@ -// @ts-expect-error -@external('asDOM_Document', 'getUrl') -export declare function getUrl(id: usize): string - -// @ts-expect-error -@external('asDOM_Document', 'setDocument') -export declare function setDocument(id: usize): void - -// @ts-expect-error -@external('asDOM_Document', 'setElement') -export declare function setElement(docId: usize, elId: usize, tag: string): void - -// @ts-expect-error -@external('asDOM_Document', 'documentHasBody') -export declare function documentHasBody(doc: usize): boolean - -// @ts-expect-error -@external('asDOM_Document', 'createTextNode') -export declare function createTextNode(docId: usize, textId: usize, data: string): void - -// TODO Perhaps put these on a new `window` object, to make it more like on the JS side. import { - Element, - Audio, - HTMLBodyElement, - HTMLAnchorElement, - HTMLDivElement, - HTMLParagraphElement, - HTMLScriptElement, - HTMLSpanElement, - HTMLTemplateElement, - HTMLUnknownElement, - Image, - HTMLHeadingElement, -} from './elements/index' + createElement, + createTextNode, + getBody, + getChildren, + getFirstElementChild, + getLastElementChild, + getLocation, + getUrl, + querySelector, + querySelectorAll, + setOnclick, +} from './imports' +// TODO Perhaps put these on a new `window` object, to make it more like on the JS side. +import {Element, HTMLBodyElement, HTMLElement} from './elements/index' +import {idToNullOrObject, valueNotChanged} from './utils' import {Node} from './Node' import {Text} from './Text' +import {NodeList} from './NodeList' +import {HTMLCollection} from './HTMLCollection' +import {Location} from './Location' export class Document extends Node { - get nodeType(): i32 { return 9 } - - constructor() { - super() - setDocument(this.__ptr__) + get nodeType(): i32 { + return 9 } get URL(): string { - return getUrl(this.__ptr__) + return getUrl(this) } - // @ts-expect-error + // Pattern: A value that can change, but if it hasn't changed, we should + // return early rather than create a mirror object. We could prevent the + // crossing to JS entirely, but that would only work assuming our AS code + // is the only code manipulating the DOM. By crossing to JS, we also catch + // the case where some other code on the JS side could change the value. + // + // {{ + + private __body: HTMLBodyElement | null = null + + // @ts-expect-error, TS does not allow a getter type to be a superset of the setter type, only the other way around. get body(): HTMLBodyElement | null { - let el: HTMLBodyElement + const id: i32 = getBody(this) - if (documentHasBody(this.__ptr__)) { - el = new HTMLBodyElement() - setElement(this.__ptr__, el.__ptr__, 'body') - } else { - return null - } + if (id == valueNotChanged) return this.__body + + // TODO NULL File a bug and eventually use this. This incorrectly returns `null` instead of the non-null instance... {{ + + // return (this.__querySelector = idToNullOrObject(id) as Element | null) // The old value can then be GC'd. + + // }} ...but this version works fine only when the value is not actually null. {{ + + // this.__querySelector = idToNullOrObject(id) as Element | null // The old value can then be GC'd. + // return this.__querySelector - return el + // }} And finally, this is what works when the value might be null (issue https://github.com/AssemblyScript/assemblyscript/issues/2035) {{ + + const result = idToNullOrObject(id) + if (result) this.__body = result as HTMLBodyElement + else this.__body = null + return this.__body + + // }} } + set body(el: HTMLBodyElement) { - throw ERROR('TODO: document.body setter is not implemented yet.') + throw new Error('TODO: document.body setter is not implemented yet.') + } + + // }} + + // Pattern: A value that we know can't ever change, so we can cache the + // mirror object after the first call. {{ + + private __location: Location | null = null + + get location(): Location { + let obj = this.__location + + if (!obj) { + this.__location = obj = new Location() + getLocation(this, obj) + } + + return obj + } + + set location(l: Location) { + ERROR('The setter for window.location cannot currently take a string. Use window.location.href instead.') + } + + // }} + + private __onclick: (() => void) | null = null + + set onclick(cb: (() => void) | null) { + this.__onclick = cb + setOnclick(this, cb ? cb.index : -1) // -1 means "null" + } + + get onclick(): (() => void) | null { + // For now there is no glue code here, and we assume manipulation of this + // property happens only on the AS-side. TODO Eventually we'll have to + // figure how to "get" a function that may already exist on the JS side + // to be able to call it, for example, in a monkey patch. + // return getOnclick() + return this.__onclick } - createElement(tag: string /*, TODO options */): Element { - let el: Element - - // Don't forget to add Elements here so they can be created with `document.createElement`. - if (tag == 'body') el = new HTMLBodyElement() - else if (tag == 'div') el = new HTMLDivElement() - else if (tag == 'span') el = new HTMLSpanElement() - else if (tag == 'p') el = new HTMLParagraphElement() - else if (tag == 'a') el = new HTMLAnchorElement() - else if (tag == 'script') el = new HTMLScriptElement() - else if (tag == 'template') el = new HTMLTemplateElement() - else if (tag == 'audio') el = new Audio() - else if (tag == 'img') el = new Image() - else if (tag == 'h1') el = new HTMLHeadingElement() - else if (tag == 'h2') el = new HTMLHeadingElement() - else if (tag == 'h3') el = new HTMLHeadingElement() - else if (tag == 'h4') el = new HTMLHeadingElement() - else if (tag == 'h5') el = new HTMLHeadingElement() - else if (tag == 'h6') el = new HTMLHeadingElement() - else if (tag.indexOf('-') > -1) throw new Error('TODO: Elements with hyphens or custom elements not supported yet.') - else el = new HTMLUnknownElement() - - setElement(this.__ptr__, el.__ptr__, tag) - - return el + createElement(tagName: string /*, TODO options */): HTMLElement { + const id: i32 = createElement(this, tagName) + return idToNullOrObject(id) as HTMLElement } // TODO, for SVG elements. @@ -100,10 +121,67 @@ export class Document extends Node { * @param data String that specifies the nodeValue property of the text node. */ createTextNode(data: string): Text { - const text = new Text - createTextNode(this.__ptr__, text.__ptr__, data) - return text + const id: i32 = createTextNode(this, data) + return idToNullOrObject(id) as Text } -} -export const document = new Document() + private __children: HTMLCollection | null = null + + get children(): HTMLCollection { + let obj = this.__children + + if (!obj) { + this.__children = obj = new HTMLCollection() + getChildren(this, obj) + } + + return obj + } + + private __firstElementChild: Element | null = null + + get firstElementChild(): Element | null { + const id: i32 = getFirstElementChild(this) + + if (id == valueNotChanged) return this.__firstElementChild + + // TODO update this once null issues fixed (see TODO NULL in Document) + const result = idToNullOrObject(id) + if (result) this.__firstElementChild = result as Element + else this.__firstElementChild = null + return this.__firstElementChild + } + + private __lastElementChild: Element | null = null + + get lastElementChild(): Element | null { + const id: i32 = getLastElementChild(this) + + if (id == valueNotChanged) return this.__lastElementChild + + // TODO update this once null issues fixed (see TODO NULL in Document) + const result = idToNullOrObject(id) + if (result) this.__lastElementChild = result as Element + else this.__lastElementChild = null + return this.__lastElementChild + } + + private __querySelector: Element | null = null + + querySelector(selectors: string): Element | null { + const id = querySelector(this, selectors) + + if (id == valueNotChanged) return this.__querySelector + + // TODO update this once null issues fixed (see TODO NULL in Document) + const result = idToNullOrObject(id) + if (result) this.__querySelector = result as Element + else this.__querySelector = null + return this.__querySelector + } + + querySelectorAll(selectors: string): NodeList { + const id = querySelectorAll(this, selectors) + return idToNullOrObject(id) as NodeList + } +} diff --git a/assembly/DocumentFragment.ts b/assembly/DocumentFragment.ts index 1b9390a..91c17f4 100644 --- a/assembly/DocumentFragment.ts +++ b/assembly/DocumentFragment.ts @@ -1,7 +1,70 @@ +import {HTMLCollection, Element, NodeList} from '.' +import {getChildren, getFirstElementChild, getLastElementChild, querySelector, querySelectorAll} from './imports' import {Node} from './Node' +import {idToNullOrObject, valueNotChanged} from './utils' export class DocumentFragment extends Node { get nodeType(): i32 { return 11 } + + private __children: HTMLCollection | null = null + + get children(): HTMLCollection { + let obj = this.__children + + if (!obj) { + this.__children = obj = new HTMLCollection() + getChildren(this, obj) + } + + return obj + } + + private __firstElementChild: Element | null = null + + get firstElementChild(): Element | null { + const id: i32 = getFirstElementChild(this) + + if (id == valueNotChanged) return this.__firstElementChild + + // TODO update this once null issues fixed (see TODO NULL in Document) + const result = idToNullOrObject(id) + if (result) this.__firstElementChild = result as Element + else this.__firstElementChild = null + return this.__firstElementChild + } + + private __lastElementChild: Element | null = null + + get lastElementChild(): Element | null { + const id: i32 = getLastElementChild(this) + + if (id == valueNotChanged) return this.__lastElementChild + + // TODO update this once null issues fixed (see TODO NULL in Document) + const result = idToNullOrObject(id) + if (result) this.__lastElementChild = result as Element + else this.__lastElementChild = null + return this.__lastElementChild + } + + private __querySelector: Element | null = null + + querySelector(selectors: string): Element | null { + const id = querySelector(this, selectors) + + if (id == valueNotChanged) return this.__querySelector + + // TODO update this once null issues fixed (see TODO NULL in Document) + const result = idToNullOrObject(id) + if (result) this.__querySelector = result as Element + else this.__querySelector = null + return this.__querySelector + } + + querySelectorAll(selectors: string): NodeList { + const id = querySelectorAll(this, selectors) + return idToNullOrObject(id) as NodeList + } } diff --git a/assembly/EventListener.ts b/assembly/EventListener.ts new file mode 100644 index 0000000..4b84e05 --- /dev/null +++ b/assembly/EventListener.ts @@ -0,0 +1,6 @@ +import {Object} from './Object' + +export class EventListener extends Object { + /** Subclasses should implement this. */ + handleEvent(): void {} +} diff --git a/assembly/EventTarget.ts b/assembly/EventTarget.ts new file mode 100644 index 0000000..d113e94 --- /dev/null +++ b/assembly/EventTarget.ts @@ -0,0 +1,26 @@ +import {EventListener} from './EventListener' +import { + addEventListenerCallback, + addEventListenerObject, + removeEventListenerCallback, + removeEventListenerObject, +} from './imports' +import {Object} from './Object' + +export type EventCallback = (/*TODO event: Event*/) => void + +export class EventTarget extends Object { + addEventListener(eventName: string, listener: T): void { + // TODO how to check the function matches EventCallback? + if (isFunction(listener)) addEventListenerCallback(this, eventName, listener.index) + else if (listener instanceof EventListener) addEventListenerObject(this, eventName, listener) + else ERROR('addEventListener expects an EventCallback or an EventListener as the second argument.') + } + + removeEventListener(eventName: string, listener: T): void { + // TODO how to check the function matches EventCallback? + if (isFunction(listener)) removeEventListenerCallback(this, eventName, listener.index) + else if (listener instanceof EventListener) removeEventListenerObject(this, eventName, listener) + else ERROR('removeEventListener expects an EventCallback or an EventListener as the second argument.') + } +} diff --git a/assembly/HTMLCollection.ts b/assembly/HTMLCollection.ts new file mode 100644 index 0000000..15b87e9 --- /dev/null +++ b/assembly/HTMLCollection.ts @@ -0,0 +1,38 @@ +import {getLength, item} from './imports' +import {Element} from './elements/Element' +import {Object} from './Object' +import {idToNullOrObject, valueNotChanged} from './utils' + +export class HTMLCollection extends Object { + get length(): i32 { + return getLength(this) + } + + private __item: Element | null = null + + item(index: i32): Element | null { + const id: i32 = item(this, index) + + if (id == valueNotChanged) return this.__item + + // TODO update this once null issues fixed (see TODO NULL in Document) + const result = idToNullOrObject(id) // The old value can then be GC'd. + if (result) this.__item = result as Element + else this.__item = null + return this.__item + } + + @operator('[]') + private arrayRead(index: i32): Element | null { + return this.item(index) + } + + @operator('[]=') + private arrayWrite(index: i32, value: Element): void { + ERROR('NodeList is not writable.') + } + + // This makes TypeScript happy. + // The name must be "key" in AS (can be anything in TS). Open issue: https://github.com/AssemblyScript/assemblyscript/issues/1972 + readonly [key: number]: Element | null +} diff --git a/assembly/History.ts b/assembly/History.ts new file mode 100644 index 0000000..c236506 --- /dev/null +++ b/assembly/History.ts @@ -0,0 +1,19 @@ +import {getLength, pushState, replaceState} from './imports' +import {Object} from './Object' + +// TODO, for now, it is only possible to pass empty state. There are no dynamic objects in AssemblyScript. +export class EmptyHistoryState extends Object {} + +export class History extends Object { + get length(): i32 { + return getLength(this) + } + + pushState(state: EmptyHistoryState, title: string, url: string = ''): void { + pushState(this, state, title, url) + } + + replaceState(state: EmptyHistoryState, title: string, url: string = ''): void { + replaceState(this, state, title, url) + } +} diff --git a/assembly/Location.ts b/assembly/Location.ts new file mode 100644 index 0000000..b786dcb --- /dev/null +++ b/assembly/Location.ts @@ -0,0 +1,98 @@ +import { + getHash, + getHost, + getHostname, + getHref, + getOrigin, + getPathname, + getPort, + getProtocol, + getSearch, + reload, + replace, + setHash, + setHost, + setHostname, + setHref, + setPathname, + setPort, + setProtocol, + setSearch, +} from './imports' +import {Object} from './Object' + +export class Location extends Object { + set href(str: string) { + setHref(this, str) + } + get href(): string { + return getHref(this) + } + + set protocol(str: string) { + setProtocol(this, str) + } + get protocol(): string { + return getProtocol(this) + } + + set host(str: string) { + setHost(this, str) + } + get host(): string { + return getHost(this) + } + + set hostname(str: string) { + setHostname(this, str) + } + get hostname(): string { + return getHostname(this) + } + + set port(str: string) { + setPort(this, str) + } + get port(): string { + return getPort(this) + } + + set pathname(str: string) { + setPathname(this, str) + } + get pathname(): string { + return getPathname(this) + } + + set search(str: string) { + setSearch(this, str) + } + get search(): string { + return getSearch(this) + } + + set hash(str: string) { + setHash(this, str) + } + get hash(): string { + return getHash(this) + } + + get origin(): string { + return getOrigin(this) + } + + assign(url: string): void { + // No need for additional bindings here because this is identical to what happens in the real DOM Location API. + setHref(this, url) + } + + reload(): void { + reload(this) + } + + replace(url: string): void { + // No need for additional bindings here because this is identical to what happens in the real DOM Location API. + replace(this, url) + } +} diff --git a/assembly/Node.ts b/assembly/Node.ts index 7bd5ab2..d1a3f1a 100644 --- a/assembly/Node.ts +++ b/assembly/Node.ts @@ -1,73 +1,19 @@ -import {document} from './Document' +import {idToNullOrObject, valueNotChanged} from './utils' import { - Audio, - HTMLAnchorElement, - HTMLBodyElement, - HTMLDivElement, - HTMLHeadingElement, - HTMLParagraphElement, - HTMLScriptElement, - HTMLSpanElement, - HTMLTemplateElement, - HTMLUnknownElement, - Image, -} from './elements/index' -import {Object} from './Object' -import {refs} from './refs' - -// @ts-expect-error -@external('asDOM_Node', 'nodeAppendChild') -export declare function nodeAppendChild(parentId: usize, childId: usize): void - -// @ts-expect-error -@external('asDOM_Node', 'nodeRemoveChild') -export declare function nodeRemoveChild(parentId: usize, childId: usize): void - -// @ts-expect-error -@external('asDOM_Node', 'getParentNode') -declare function getParentNode(id: usize): i32 - -// @ts-expect-error -@external('asDOM_Node', 'getFirstChild') -export declare function getFirstChild(id: usize): i32 - -// @ts-expect-error -@external('asDOM_Node', 'cloneNode') -export declare function cloneNode(id: usize, deep?: boolean): i32 - -// @ts-expect-error -@external('asDOM_Node', 'log') -declare function log(msg: string): void - -// // @ts-expect-error -// @external('asDOM_Document', 'trackNextElement') -// declare function trackNextElement(docId: usize, elId: usize): void - -// @ts-expect-error -@external('asDOM', 'trackNextRef') -declare function trackNextRef(id: usize): void - -// TODO Put this in a file shared between glue code and AS code. We need to -// convert the glue code to TypeScript first, or compile the shared file to -// plain JS. -enum ElementType { - unknown = 1, - body = 2, - div = 3, - span = 4, - p = 5, - a = 6, - script = 7, - template = 8, - audio = 9, - img = 10, - h1 = 11, - h2 = 12, - h3 = 13, - h4 = 14, - h5 = 15, - h6 = 16, -} + nodeAppendChild, + nodeRemoveChild, + getFirstChild, + cloneNode, + getParentNode, + getChildNodes, + getNextSibling, + getPreviousSibling, + getLastChild, + getParentElement, +} from './imports' +import {NodeList} from './NodeList' +import {EventTarget} from './EventTarget' +import {Element} from '.' /** Node types: https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType */ enum NodeType { @@ -84,7 +30,7 @@ enum NodeType { // 12 is deprecated and skipped. } -export abstract class Node extends Object { +export abstract class Node extends EventTarget { static ELEMENT_NODE: NodeType = NodeType.ELEMENT_NODE static ATTRIBUTE_NODE: NodeType = NodeType.ATTRIBUTE_NODE static TEXT_NODE: NodeType = NodeType.TEXT_NODE @@ -96,134 +42,116 @@ export abstract class Node extends Object { static DOCUMENT_FRAGMENT_NODE: NodeType = NodeType.DOCUMENT_FRAGMENT_NODE appendChild(child: T): T { - nodeAppendChild(this.__ptr__, child.__ptr__) + nodeAppendChild(this, child) return child } removeChild(child: T): T { - nodeRemoveChild(this.__ptr__, child.__ptr__) + nodeRemoveChild(this, child) return child } abstract get nodeType(): NodeType - // This property exists only for a small optimization in the first early - // return of parentNode. Is it even worth it? - private __parent: Node | null + private __parentNode: Node | null = null get parentNode(): Node | null { - const id: i32 = getParentNode(this.__ptr__) + const id: i32 = getParentNode(this) - log('AS: parent node ID:' + id.toString()) + if (id == valueNotChanged) return this.__parentNode - const parent = this.__parent + // TODO update this once null issues fixed (see TODO NULL in Document) + const result = idToNullOrObject(id) + if (result) this.__parentNode = result as Node + else this.__parentNode = null + return this.__parentNode + } - if (parent && parent.__ptr__ == id) return parent - else if (id > 0) { - this.__parent = refs.get(id as usize) as Node // It must be a Node. - return this.__parent - } + private __parentElement: Element | null = null - // if null, it means there is no element on the JS-side. - else if (id == 0) { - this.__parent = null - return null - } - // If negative, there is an element on the JS-side that doesn't have a - // corresponding AS-side instance yet. In this case we need to - // create a new instance based on its type. - else if (id < 0) { - const el = makeNode(-id) - - // Associate the AS-side instance with the JS-side instance. - // TODO use this.ownerDocument.__ptr__ instead of document.__ptr__ - // trackNextElement(document.__ptr__, el.__ptr__) - trackNextRef(el.__ptr__) - - this.__parent = el - return el - } + get parentElement(): Element | null { + const id: i32 = getParentElement(this) + + if (id == valueNotChanged) return this.__parentElement - throw new Error('This should not happen.') + // TODO update this once null issues fixed (see TODO NULL in Document) + const result = idToNullOrObject(id) + if (result) this.__parentElement = result as Element + else this.__parentElement = null + return this.__parentElement } + private __firstChild: Node | null = null + get firstChild(): Node | null { - const id: i32 = getFirstChild(this.__ptr__) + const id: i32 = getFirstChild(this) - log('AS: first child ID:' + id.toString()) + if (id == valueNotChanged) return this.__firstChild - // if null, it means there is no element on the JS-side. - if (id == 0) return null - // If negative, there is an element on the JS-side that doesn't have a - // corresponding AS-side instance yet. In this case we need to - // create a new instance based on its type. - else if (id < 0) { - const el = makeNode(-id) + // TODO update this once null issues fixed (see TODO NULL in Document) + const result = idToNullOrObject(id) + if (result) this.__firstChild = result as Node + else this.__firstChild = null + return this.__firstChild + } - // Associate the AS-side instance with the JS-side instance. - // TODO use this.ownerDocument.__ptr__ instead of document.__ptr__ - // trackNextElement(document.__ptr__, el.__ptr__) - trackNextRef(el.__ptr__) + private __lastChild: Node | null = null - return el - } + get lastChild(): Node | null { + const id: i32 = getLastChild(this) - // If we reach here then there is already an AS-side instance - // associated with a JS-side instance, and the JS side gave us the ID - // (pointer) of our AS-side object to return. We might reach here, for - // example, if we use appendChild to pass an existing child within AS - // instead of using innerHTML. By using innerHTML and sending a string - // to JS, it can create a whole tree but none of those nodes will be - // tracked. Finally, if we do try to access them, we lazily associate - // new AS-side objects in the previous conditional block. - else { - return refs.get(id) as Node // It must be a Node. - } + if (id == valueNotChanged) return this.__lastChild + + // TODO update this once null issues fixed (see TODO NULL in Document) + const result = idToNullOrObject(id) + if (result) this.__lastChild = result as Node + else this.__lastChild = null + return this.__lastChild } - cloneNode(deep: boolean = false): Node { - const id: i32 = cloneNode(this.__ptr__, deep) + private __nextSibling: Node | null = null - log('AS: cloned node ID:' + id.toString()) + get nextSibling(): Node | null { + const id: i32 = getNextSibling(this) - // If negative, there is an element on the JS-side that doesn't have a - // corresponding AS-side instance yet. In this case we need to - // create a new instance based on its type. - if (id < 0) { - const el = makeNode(-id) + if (id == valueNotChanged) return this.__nextSibling - // Associate the AS-side instance with the JS-side instance. - // TODO use this.ownerDocument.__ptr__ instead of document.__ptr__ - // trackNextElement(document.__ptr__, el.__ptr__) - trackNextRef(el.__ptr__) + // TODO update this once null issues fixed (see TODO NULL in Document) + const result = idToNullOrObject(id) + if (result) this.__nextSibling = result as Node + else this.__nextSibling = null + return this.__nextSibling + } - return el - } + private __previousSibling: Node | null = null + + get previousSibling(): Node | null { + const id: i32 = getPreviousSibling(this) + + if (id == valueNotChanged) return this.__previousSibling - throw new Error('This should not happen.') + // TODO update this once null issues fixed (see TODO NULL in Document) + const result = idToNullOrObject(id) + if (result) this.__previousSibling = result as Node + else this.__previousSibling = null + return this.__previousSibling } -} -function makeNode(type: ElementType): Node { - let el: Node - - if (type == ElementType.body) el = new HTMLBodyElement() - else if (type == ElementType.div) el = new HTMLDivElement() - else if (type == ElementType.span) el = new HTMLSpanElement() - else if (type == ElementType.p) el = new HTMLParagraphElement() - else if (type == ElementType.a) el = new HTMLAnchorElement() - else if (type == ElementType.script) el = new HTMLScriptElement() - else if (type == ElementType.template) el = new HTMLTemplateElement() - else if (type == ElementType.audio) el = new Audio() - else if (type == ElementType.img) el = new Image() - else if (type == ElementType.h1) el = new HTMLHeadingElement() - else if (type == ElementType.h2) el = new HTMLHeadingElement() - else if (type == ElementType.h3) el = new HTMLHeadingElement() - else if (type == ElementType.h4) el = new HTMLHeadingElement() - else if (type == ElementType.h5) el = new HTMLHeadingElement() - else if (type == ElementType.h6) el = new HTMLHeadingElement() - else if (type === ElementType.unknown) el = new HTMLUnknownElement() - else throw new Error('Hyphenated or custom elements not yet supported.') - - return el + cloneNode(deep: boolean = false): Node { + const id: i32 = cloneNode(this, deep) + return idToNullOrObject(id) as Node // The result must not be null if we just cloned a Node. + } + + private __childNodes: NodeList | null = null + + get childNodes(): NodeList { + let obj = this.__childNodes + + if (!obj) { + this.__childNodes = obj = new NodeList() + getChildNodes(this, obj) + } + + return obj + } } diff --git a/assembly/NodeList.ts b/assembly/NodeList.ts new file mode 100644 index 0000000..00cabc3 --- /dev/null +++ b/assembly/NodeList.ts @@ -0,0 +1,39 @@ +import {getLength, item} from './imports' +import {Node} from './Node' +import {Object} from './Object' +import {idToNullOrObject, valueNotChanged} from './utils' + +// TODO replace `Node` with a generic `T` type to allow other classes to specify more specific types in certain cases. For example, `querySelectorAll` can return `NodeList`. +export class NodeList extends Object { + get length(): i32 { + return getLength(this) + } + + private __item: T | null = null + + item(index: i32): T | null { + const id: i32 = item(this, index) + + if (id == valueNotChanged) return this.__item + + // TODO update this once null issues fixed (see TODO NULL in Document) + const result = idToNullOrObject(id) // The old value can then be GC'd. + if (result) this.__item = result as T + else this.__item = null + return this.__item + } + + @operator('[]') + private arrayRead(index: i32): T | null { + return this.item(index) + } + + @operator('[]=') + private arrayWrite(index: i32, value: T): void { + ERROR('NodeList is not writable.') + } + + // This makes TypeScript happy. + // The name must be "key" in AS (can be anything in TS). Open issue: https://github.com/AssemblyScript/assemblyscript/issues/1972 + readonly [key: number]: T | null +} diff --git a/assembly/Object.ts b/assembly/Object.ts index cad9414..e58a321 100644 --- a/assembly/Object.ts +++ b/assembly/Object.ts @@ -1,21 +1,10 @@ -import {refs} from './refs' +import {toString} from './imports' /** * The base class that all objects extend from. */ export class Object { - __ptr__: usize = changetype(this) - - constructor() { - refs.set(this.__ptr__, this) + toString(): string { + return toString(this) } } - -/** - * Call this function when you are finished using an object. After calling - * this, it should never be used again, or the DOM bindings may fail to work - * properly. - */ -export function unbind(o: Object): void { - refs.delete(o.__ptr__) -} diff --git a/assembly/ObjectType.ts b/assembly/ObjectType.ts new file mode 100644 index 0000000..ccc4169 --- /dev/null +++ b/assembly/ObjectType.ts @@ -0,0 +1,33 @@ +// TODO Put this in a file shared between glue code and AS code. We need to +// convert the glue code to TypeScript first, or compile the shared file to +// plain JS. +export enum ObjectType { + // 0 is intentionally skipped, do not use 0 + + unknown = 1, + + body = 2, + div = 3, + span = 4, + p = 5, + a = 6, + script = 7, + template = 8, + audio = 9, + img = 10, + h1 = 11, + h2 = 12, + h3 = 13, + h4 = 14, + h5 = 15, + h6 = 16, + canvas = 17, + + // Text nodes + text = 100, + + // Node lists + htmlCollection = 200, + nodeListOfNode = 201, + nodeListOfElement = 202, +} diff --git a/assembly/Window.ts b/assembly/Window.ts index 3d1f187..b39cc88 100644 --- a/assembly/Window.ts +++ b/assembly/Window.ts @@ -1,30 +1,112 @@ import {CustomElementRegistry} from './CustomElementRegistry' -import {Object} from './Object' +import {Document} from './Document' +import { + getCustomElements, + getDocument, + getHistory, + getLocation, + setOnclick, + setOnpopstate, + trackWindow, +} from './imports' +import {History} from './History' +import {EventTarget} from './EventTarget' +import {Location} from './Location' -// @ts-expect-error -@external('asDOM_Window', 'getCustomElements') -declare function getCustomElements(id: usize, ceId: usize): void +export class Window extends EventTarget { + private __document: Document | null = null -// @ts-expect-error -@external('asDOM_Window', 'trackWindow') -declare function trackWindow(id: usize): void + get document(): Document { + let obj = this.__document -export class Window extends Object { - private __ceRegistry: CustomElementRegistry | null = null + if (!obj) { + this.__document = obj = new Document() + getDocument(this, obj) + } + + return obj + } + + private __customElements: CustomElementRegistry | null = null get customElements(): CustomElementRegistry { - let reg = this.__ceRegistry + let obj = this.__customElements + + if (!obj) { + this.__customElements = obj = new CustomElementRegistry() + getCustomElements(this, obj) + } + + return obj + } + + private __history: History | null = null + + get history(): History { + let obj = this.__history + + if (!obj) { + this.__history = obj = new History() + getHistory(this, obj) + } + + return obj + } - if (!reg) { - this.__ceRegistry = reg = new CustomElementRegistry() - getCustomElements(this.__ptr__, reg.__ptr__) + private __location: Location | null = null + + get location(): Location { + let obj = this.__location + + if (!obj) { + this.__location = obj = new Location() + getLocation(this, obj) } - return reg + return obj + } + + set location(l: Location) { + ERROR('The setter for window.location cannot currently take a string. Use window.location.href instead.') + } + + private __onclick: (() => void) | null = null + + set onclick(cb: (() => void) | null) { + this.__onclick = cb + setOnclick(this, cb ? cb.index : -1) // -1 means "null" + } + + get onclick(): (() => void) | null { + // For now there is no glue code here, and we assume manipulation of this + // property happens only on the AS-side. TODO Eventually we'll have to + // figure how to "get" a function that may already exist on the JS side + // to be able to call it, for example, in a monkey patch. + // return getOnclick() + return this.__onclick + } + + private __onpopstate: (() => void) | null = null + + set onpopstate(cb: (() => void) | null) { + this.__onpopstate = cb + setOnpopstate(this, cb ? cb.index : -1) // -1 means "null" + } + + get onpopstate(): (() => void) | null { + // For now there is no glue code here, and we assume manipulation of this + // property happens only on the AS-side. TODO Eventually we'll have to + // figure how to "get" a function that may already exist on the JS side + // to be able to call it, for example, in a monkey patch. + // return getOnpopstate() + return this.__onpopstate } } export const window = new Window() -trackWindow(window.__ptr__) +trackWindow(window) +// export "globals" +export const document = window.document export const customElements = window.customElements +export const history = window.history diff --git a/assembly/__finalize.ts b/assembly/__finalize.ts new file mode 100644 index 0000000..1500268 --- /dev/null +++ b/assembly/__finalize.ts @@ -0,0 +1,16 @@ +import {releaseObject} from './imports' +import {Object} from './Object' + +// @ts-ignore +@global +function __finalize(ptr: usize): void { + if ( + // prettier-ignore + // @ts-ignore, function exists + __instanceof( + ptr, idof