feat: update template api for class runtime

packages/marko/src/runtime/html/AsyncStream.js

@@ -39,6 +39,16 @@ function escapeEndingComment(text) {
   return text.replace(/(--!?)>/g, "$1>");
 }
 
+function deferred() {
+  let resolve;
+  let reject;
+  const promise = new Promise((res, rej) => {
+    resolve = res;
+    reject = rej;
+  });
+  return { promise, resolve, reject };
+}
+
 function AsyncStream(global, writer, parentOut) {
   if (parentOut === null) {
     throw new Error("illegal state");
@@ -117,6 +127,77 @@ var proto = (AsyncStream.prototype = {
   ___host: typeof document === "object" && document,
   ___isOut: true,
 
+  [Symbol.asyncIterator]() {
+    if (this.___iterator) {
+      return this.___iterator;
+    }
+
+    const originalWriter = this._state.writer;
+    let buffer = "";
+    let iteratorNextFn;
+
+    if (!originalWriter.stream) {
+      // Writing has finished completely so we can use a simple iterator
+      buffer = this.toString();
+      iteratorNextFn = () => {
+        const value = buffer;
+        buffer = "";
+        return { value, done: !value };
+      };
+    } else {
+      let done = false;
+      let pending = deferred();
+      const stream = {
+        write(data) {
+          buffer += data;
+        },
+        end() {
+          done = true;
+          pending.resolve({
+            value: "",
+            done,
+          });
+        },
+        flush() {
+          pending.resolve({
+            value: buffer,
+            done: false,
+          });
+          buffer = "";
+          pending = deferred();
+        },
+      };
+
+      this.on("error", pending.reject);
+
+      const writer = new BufferedWriter(stream);
+      writer.stream = originalWriter.stream;
+      writer.stream.writer = writer;
+      writer.next = originalWriter.next;
+      writer.state = this._state;
+      writer.merge(originalWriter);
+
+      this._state.stream = stream;
+      this._state.writer = writer;
+
+      iteratorNextFn = async () => {
+        if (buffer || done) {
+          const value = buffer;
+          buffer = "";
+          return { value, done };
+        }
+        return pending.promise;
+      };
+    }
+
+    return (this.___iterator = {
+      next: iteratorNextFn,
+      [Symbol.asyncIterator]() {
+        return this;
+      },
+    });
+  },
+
   sync: function () {
     this._sync = true;
   },
@@ -637,20 +718,22 @@ var proto = (AsyncStream.prototype = {
 
   then: function (fn, fnErr) {
     var out = this;
-    var promise = new Promise(function (resolve, reject) {
+    return new Promise(function (resolve, reject) {
       out.on("error", reject);
       out.on("finish", function (result) {
         resolve(result);
       });
-    });
-
-    return Promise.resolve(promise).then(fn, fnErr);
+    }).then(fn, fnErr);
   },
 
   catch: function (fnErr) {
     return this.then(undefined, fnErr);
   },
 
+  finally: function (fn) {
+    return this.then(undefined, undefined).finally(fn);
+  },
+
   c: function (componentDef, key, customEvents) {
     this.___assignedComponentDef = componentDef;
     this.___assignedKey = key;

packages/marko/src/runtime/renderable.js

@@ -76,6 +76,55 @@ module.exports = function (target, renderer) {
       return out.___getResult();
     },
 
+    /**
+     * Renders a template to nodes and inserts them into the DOM relative
+     * to the provided reference based on the optional position parameter.
+     *
+     * Supported signatures:
+     *
+     * mount(data, reference)
+     * mount(data, reference, position)
+     *
+     * @param  {Object} data The view model data for the template
+     * @param  {Node} reference DOM node to insert the rendered node(s) relative to
+     * @param  {string} [position] A string representing the position relative to the `reference`; must match (case-insensitively) one of the following strings:
+     *  'beforebegin': Before the targetElement itself.
+     *  'afterbegin': Just inside the targetElement, before its first child.
+     *  'beforeend': Just inside the targetElement, after its last child.
+     *  'afterend': After the targetElement itself.
+     * @return {TemplateInstance} Object with `update` and `dispose` methods
+     */
+    mount: function (data, reference, position) {
+      const result = this.renderSync(data);
+
+      switch (position) {
+        case "afterbegin":
+          result.prependTo(reference);
+          break;
+        case "afterend":
+          result.insertAfter(reference);
+          break;
+        case "beforebegin":
+          result.insertBefore(reference);
+          break;
+        default:
+          result.appendTo(reference);
+          break;
+      }
+
+      const component = result.getComponent();
+
+      return {
+        update(input) {
+          component.input = input;
+          component.update();
+        },
+        destroy() {
+          component.destroy();
+        },
+      };
+    },
+
     /**
      * Renders a template to either a stream (if the last
      * argument is a Stream instance) or