experiment: add support for attached components

The goal of this refactoring is to delay the instantiation of the
component node until we are ready to mount the component. This is useful
so we know if a component will be attached or mounted (which means that
it needs to have a template, or not)

doc/reference/app.md

@@ -66,9 +66,6 @@ The `config` object is an object with some of the following keys:
   needs a template. If undefined is returned, owl looks into the app templates.
 - **`warnIfNoStaticProps (boolean, default=false)`**: if true, Owl will log a warning
   whenever it encounters a component that does not provide a [static props description](props.md#props-validation).
-- **`customDirectives (object)`**: if given, the corresponding function on the object will be called
-  on the template custom directives: `t-custom-*` (see [Custom Directives](templates.md#custom-directives)).
-- **`globalValues (object)`**: Global object of elements available at compilations.
 
 ## `mount` helper
 

doc/reference/templates.md

@@ -18,7 +18,6 @@
   - [Sub Templates](#sub-templates)
   - [Dynamic Sub Templates](#dynamic-sub-templates)
   - [Debugging](#debugging)
-  - [Custom Directives](#custom-directives)
 - [Fragments](#fragments)
 - [Inline templates](#inline-templates)
 - [Rendering svg](#rendering-svg)
@@ -81,7 +80,6 @@ needs. Here is a list of all Owl specific directives:
 | `t-slot`, `t-set-slot`, `t-slot-scope` | [Rendering a slot](slots.md)                                    |
 | `t-model`                              | [Form input bindings](input_bindings.md)                        |
 | `t-tag`                                | [Rendering nodes with dynamic tag name](#dynamic-tag-names)     |
-| `t-custom-*`                           | [Rendering nodes with custom directives](#custom-directives)    |
 
 ## QWeb Template Reference
 
@@ -590,35 +588,6 @@ will stop execution if the browser dev tools are open.
 
 will print 42 to the console.
 
-### Custom Directives
-
-Owl 2 supports the declaration of custom directives. To use them, an Object of functions needs to be configured on the owl APP:
-
-```js
- new App(..., {
-    customDirectives: {
-     test_directive: function (el, value) {
-            el.setAttribute("t-on-click", value);
-       }
-   }
-  });
-```
-
-The functions will be called when a custom directive with the name of the
-function is found. The original element will be replaced with the one
-modified by the function.
-This :
-
-```xml
-<div t-custom-test_directive="click" />
-```
-
-will be replaced by :
-
-```xml
-<div t-on-click="value"/>
-```
-
 ## Fragments
 
 Owl 2 supports templates with an arbitrary number of root elements, or even just

docs/owl.js

@@ -2270,12 +2270,6 @@ function collectionsProxyHandler(target, callback, targetRawType) {
 }
 
 let currentNode = null;
-function saveCurrent() {
-    let n = currentNode;
-    return () => {
-        currentNode = n;
-    };
-}
 function getCurrent() {
     if (!currentNode) {
         throw new OwlError("No active component (a hook function should only be called in 'setup')");
@@ -3227,9 +3221,6 @@ class TemplateSet {
             }
         }
         this.getRawTemplate = config.getTemplate;
-        this.customDirectives = config.customDirectives || {};
-        this.runtimeUtils = { ...helpers, __globals__: config.globalValues || {} };
-        this.hasGlobalValues = Boolean(config.globalValues && Object.keys(config.globalValues).length);
     }
     static registerTemplate(name, fn) {
         globalTemplates[name] = fn;
@@ -3286,7 +3277,7 @@ class TemplateSet {
             this.templates[name] = function (context, parent) {
                 return templates[name].call(this, context, parent);
             };
-            const template = templateFn(this, bdom, this.runtimeUtils);
+            const template = templateFn(this, bdom, helpers);
             this.templates[name] = template;
         }
         return this.templates[name];
@@ -3337,7 +3328,7 @@ TemplateSet.registerTemplate("__portal__", portalTemplate);
 //------------------------------------------------------------------------------
 // Misc types, constants and helpers
 //------------------------------------------------------------------------------
-const RESERVED_WORDS = "true,false,NaN,null,undefined,debugger,console,window,in,instanceof,new,function,return,eval,void,Math,RegExp,Array,Object,Date,__globals__".split(",");
+const RESERVED_WORDS = "true,false,NaN,null,undefined,debugger,console,window,in,instanceof,new,function,return,eval,void,Math,RegExp,Array,Object,Date".split(",");
 const WORD_REPLACEMENT = Object.assign(Object.create(null), {
     and: "&&",
     or: "||",
@@ -3809,9 +3800,6 @@ class CodeGenerator {
         this.dev = options.dev || false;
         this.ast = ast;
         this.templateName = options.name;
-        if (options.hasGlobalValues) {
-            this.helpers.add("__globals__");
-        }
     }
     generateCode() {
         const ast = this.ast;
@@ -4850,33 +4838,29 @@ class CodeGenerator {
 // Parser
 // -----------------------------------------------------------------------------
 const cache = new WeakMap();
-function parse(xml, customDir) {
-    const ctx = {
-        inPreTag: false,
-        customDirectives: customDir,
-    };
+function parse(xml) {
     if (typeof xml === "string") {
         const elem = parseXML(`<t>${xml}</t>`).firstChild;
-        return _parse(elem, ctx);
+        return _parse(elem);
     }
     let ast = cache.get(xml);
     if (!ast) {
         // we clone here the xml to prevent modifying it in place
-        ast = _parse(xml.cloneNode(true), ctx);
+        ast = _parse(xml.cloneNode(true));
         cache.set(xml, ast);
     }
     return ast;
 }
-function _parse(xml, ctx) {
+function _parse(xml) {
     normalizeXML(xml);
+    const ctx = { inPreTag: false };
     return parseNode(xml, ctx) || { type: 0 /* Text */, value: "" };
 }
 function parseNode(node, ctx) {
     if (!(node instanceof Element)) {
         return parseTextCommentNode(node, ctx);
     }
-    return (parseTCustom(node, ctx) ||
-        parseTDebugLog(node, ctx) ||
+    return (parseTDebugLog(node, ctx) ||
         parseTForEach(node, ctx) ||
         parseTIf(node, ctx) ||
         parseTPortal(node, ctx) ||
@@ -4918,35 +4902,6 @@ function parseTextCommentNode(node, ctx) {
     }
     return null;
 }
-function parseTCustom(node, ctx) {
-    if (!ctx.customDirectives) {
-        return null;
-    }
-    const nodeAttrsNames = node.getAttributeNames();
-    for (let attr of nodeAttrsNames) {
-        if (attr === "t-custom" || attr === "t-custom-") {
-            throw new OwlError("Missing custom directive name with t-custom directive");
-        }
-        if (attr.startsWith("t-custom-")) {
-            const directiveName = attr.split(".")[0].slice(9);
-            const customDirective = ctx.customDirectives[directiveName];
-            if (!customDirective) {
-                throw new OwlError(`Custom directive "${directiveName}" is not defined`);
-            }
-            const value = node.getAttribute(attr);
-            const modifier = attr.split(".").length > 1 ? attr.split(".")[1] : undefined;
-            node.removeAttribute(attr);
-            try {
-                customDirective(node, value, modifier);
-            }
-            catch (error) {
-                throw new OwlError(`Custom directive "${directiveName}" throw the following error: ${error}`);
-            }
-            return parseNode(node, ctx);
-        }
-    }
-    return null;
-}
 // -----------------------------------------------------------------------------
 // debugging
 // -----------------------------------------------------------------------------
@@ -5578,11 +5533,9 @@ function normalizeXML(el) {
     normalizeTEscTOut(el);
 }
 
-function compile(template, options = {
-    hasGlobalValues: false,
-}) {
+function compile(template, options = {}) {
     // parsing
-    const ast = parse(template, options.customDirectives);
+    const ast = parse(template);
     // some work
     const hasSafeContext = template instanceof Node
         ? !(template instanceof Element) || template.querySelector("[t-set], [t-call]") === null
@@ -5604,7 +5557,7 @@ function compile(template, options = {
 }
 
 // do not modify manually. This file is generated by the release script.
-const version = "2.5.0";
+const version = "2.4.0";
 
 // -----------------------------------------------------------------------------
 //  Scheduler
@@ -5615,7 +5568,6 @@ class Scheduler {
         this.frame = 0;
         this.delayedRenders = [];
         this.cancelledNodes = new Set();
-        this.processing = false;
         this.requestAnimationFrame = Scheduler.requestAnimationFrame;
     }
     addFiber(fiber) {
@@ -5646,10 +5598,6 @@ class Scheduler {
         }
     }
     processTasks() {
-        if (this.processing) {
-            return;
-        }
-        this.processing = true;
         this.frame = 0;
         for (let node of this.cancelledNodes) {
             node._destroy();
@@ -5663,7 +5611,6 @@ class Scheduler {
                 this.tasks.delete(task);
             }
         }
-        this.processing = false;
     }
     processFiber(fiber) {
         if (fiber.root !== fiber) {
@@ -5683,14 +5630,7 @@ class Scheduler {
             if (!hasError) {
                 fiber.complete();
             }
-            // at this point, the fiber should have been applied to the DOM, so we can
-            // remove it from the task list. If it is not the case, it means that there
-            // was an error and an error handler triggered a new rendering that recycled
-            // the fiber, so in that case, we actually want to keep the fiber around,
-            // otherwise it will just be ignored.
-            if (fiber.appliedToDom) {
-                this.tasks.delete(fiber);
-            }
+            this.tasks.delete(fiber);
         }
     }
 }
@@ -5746,9 +5686,7 @@ class App extends TemplateSet {
         if (config.env) {
             this.env = config.env;
         }
-        const restore = saveCurrent();
         const node = this.makeNode(Root, props);
-        restore();
         if (config.env) {
             this.env = env;
         }
@@ -6074,14 +6012,12 @@ TemplateSet.prototype._compileTemplate = function _compileTemplate(name, templat
         dev: this.dev,
         translateFn: this.translateFn,
         translatableAttributes: this.translatableAttributes,
-        customDirectives: this.customDirectives,
-        hasGlobalValues: this.hasGlobalValues,
     });
 };
 
 export { App, Component, EventBus, OwlError, __info__, batched, blockDom, loadFile, markRaw, markup, mount, onError, onMounted, onPatched, onRendered, onWillDestroy, onWillPatch, onWillRender, onWillStart, onWillUnmount, onWillUpdateProps, reactive, status, toRaw, useChildSubEnv, useComponent, useEffect, useEnv, useExternalListener, useRef, useState, useSubEnv, validate, validateType, whenReady, xml };
 
 
-__info__.date = '2024-11-25T09:30:45.930Z';
-__info__.hash = '6b24864';
+__info__.date = '2024-09-30T08:49:29.420Z';
+__info__.hash = 'eb2b32a';
 __info__.url = 'https://github.com/odoo/owl';

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@odoo/owl",
-  "version": "2.5.0",
+  "version": "2.4.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odoo/owl",
-  "version": "2.5.0",
+  "version": "2.4.0",
   "description": "Odoo Web Library (OWL)",
   "main": "dist/owl.cjs.js",
   "module": "dist/owl.es.js",

src/common/inline_expressions.ts

@@ -1,4 +1,4 @@
-import { OwlError } from "../common/owl_error";
+import { OwlError } from "./owl_error";
 
 /**
  * Owl QWeb Expression Parser
@@ -28,7 +28,7 @@ import { OwlError } from "../common/owl_error";
 //------------------------------------------------------------------------------
 
 const RESERVED_WORDS =
-  "true,false,NaN,null,undefined,debugger,console,window,in,instanceof,new,function,return,eval,void,Math,RegExp,Array,Object,Date,__globals__".split(
+  "true,false,NaN,null,undefined,debugger,console,window,in,instanceof,new,function,return,eval,void,Math,RegExp,Array,Object,Date".split(
     ","
   );
 

src/common/types.ts

@@ -1,4 +0,0 @@
-export type customDirectives = Record<
-  string,
-  (node: Element, value: string, modifier?: string) => void
->;

src/compiler/code_generator.ts

@@ -4,7 +4,7 @@ import {
   interpolate,
   INTERP_REGEXP,
   replaceDynamicParts,
-} from "./inline_expressions";
+} from "../common/inline_expressions";
 import {
   AST,
   ASTComment,
@@ -43,7 +43,6 @@ export interface Config {
 export interface CodeGenOptions extends Config {
   hasSafeContext?: boolean;
   name?: string;
-  hasGlobalValues: boolean;
 }
 
 // using a non-html document so that <inner/outer>HTML serializes as XML instead
@@ -287,9 +286,6 @@ export class CodeGenerator {
     this.dev = options.dev || false;
     this.ast = ast;
     this.templateName = options.name;
-    if (options.hasGlobalValues) {
-      this.helpers.add("__globals__");
-    }
   }
 
   generateCode(): string {

src/compiler/index.ts

@@ -1,4 +1,3 @@
-import type { customDirectives } from "../common/types";
 import type { TemplateSet } from "../runtime/template_set";
 import type { BDom } from "../runtime/blockdom";
 import { CodeGenerator, Config } from "./code_generator";
@@ -11,17 +10,13 @@ export type TemplateFunction = (app: TemplateSet, bdom: any, helpers: any) => Te
 
 interface CompileOptions extends Config {
   name?: string;
-  customDirectives?: customDirectives;
-  hasGlobalValues: boolean;
 }
 export function compile(
   template: string | Element,
-  options: CompileOptions = {
-    hasGlobalValues: false,
-  }
+  options: CompileOptions = {}
 ): TemplateFunction {
   // parsing
-  const ast = parse(template, options.customDirectives);
+  const ast = parse(template);
 
   // some work
   const hasSafeContext =

src/compiler/parser.ts

@@ -1,5 +1,4 @@
 import { OwlError } from "../common/owl_error";
-import type { customDirectives } from "../common/types";
 import { parseXML } from "../common/utils";
 
 // -----------------------------------------------------------------------------
@@ -199,26 +198,23 @@ export type AST =
 // -----------------------------------------------------------------------------
 const cache: WeakMap<Element, AST> = new WeakMap();
 
-export function parse(xml: string | Element, customDir?: customDirectives): AST {
-  const ctx = {
-    inPreTag: false,
-    customDirectives: customDir,
-  };
+export function parse(xml: string | Element): AST {
   if (typeof xml === "string") {
     const elem = parseXML(`<t>${xml}</t>`).firstChild as Element;
-    return _parse(elem, ctx);
+    return _parse(elem);
   }
   let ast = cache.get(xml);
   if (!ast) {
     // we clone here the xml to prevent modifying it in place
-    ast = _parse(xml.cloneNode(true) as Element, ctx);
+    ast = _parse(xml.cloneNode(true) as Element);
     cache.set(xml, ast);
   }
   return ast;
 }
 
-function _parse(xml: Element, ctx: ParsingContext): AST {
+function _parse(xml: Element): AST {
   normalizeXML(xml);
+  const ctx = { inPreTag: false };
   return parseNode(xml, ctx) || { type: ASTType.Text, value: "" };
 }
 
@@ -226,7 +222,6 @@ interface ParsingContext {
   tModelInfo?: TModelInfo | null;
   nameSpace?: string;
   inPreTag: boolean;
-  customDirectives?: customDirectives;
 }
 
 function parseNode(node: Node, ctx: ParsingContext): AST | null {
@@ -234,7 +229,6 @@ function parseNode(node: Node, ctx: ParsingContext): AST | null {
     return parseTextCommentNode(node, ctx);
   }
   return (
-    parseTCustom(node, ctx) ||
     parseTDebugLog(node, ctx) ||
     parseTForEach(node, ctx) ||
     parseTIf(node, ctx) ||
@@ -283,37 +277,6 @@ function parseTextCommentNode(node: Node, ctx: ParsingContext): AST | null {
   return null;
 }
 
-function parseTCustom(node: Element, ctx: ParsingContext): AST | null {
-  if (!ctx.customDirectives) {
-    return null;
-  }
-  const nodeAttrsNames = node.getAttributeNames();
-  for (let attr of nodeAttrsNames) {
-    if (attr === "t-custom" || attr === "t-custom-") {
-      throw new OwlError("Missing custom directive name with t-custom directive");
-    }
-    if (attr.startsWith("t-custom-")) {
-      const directiveName = attr.split(".")[0].slice(9);
-      const customDirective = ctx.customDirectives[directiveName];
-      if (!customDirective) {
-        throw new OwlError(`Custom directive "${directiveName}" is not defined`);
-      }
-      const value = node.getAttribute(attr)!;
-      const modifier = attr.split(".").length > 1 ? attr.split(".")[1] : undefined;
-      node.removeAttribute(attr);
-      try {
-        customDirective(node, value, modifier);
-      } catch (error) {
-        throw new OwlError(
-          `Custom directive "${directiveName}" throw the following error: ${error}`
-        );
-      }
-      return parseNode(node, ctx);
-    }
-  }
-  return null;
-}
-
 // -----------------------------------------------------------------------------
 // debugging
 // -----------------------------------------------------------------------------

src/index.ts

@@ -12,7 +12,5 @@ TemplateSet.prototype._compileTemplate = function _compileTemplate(
     dev: this.dev,
     translateFn: this.translateFn,
     translatableAttributes: this.translatableAttributes,
-    customDirectives: this.customDirectives,
-    hasGlobalValues: this.hasGlobalValues,
   });
 };

src/runtime/app.ts

@@ -1,14 +1,14 @@
+import { OwlError } from "../common/owl_error";
 import { version } from "../version";
 import { Component, ComponentConstructor, Props } from "./component";
 import { ComponentNode, saveCurrent } from "./component_node";
-import { nodeErrorHandlers, handleError } from "./error_handling";
-import { OwlError } from "../common/owl_error";
-import { Fiber, RootFiber, MountOptions } from "./fibers";
+import { handleError, nodeErrorHandlers } from "./error_handling";
+import { Fiber, MountOptions, RootFiber } from "./fibers";
+import { reactive, toRaw } from "./reactivity";
 import { Scheduler } from "./scheduler";
 import { validateProps } from "./template_helpers";
 import { TemplateSet, TemplateSetConfig } from "./template_set";
 import { validateTarget } from "./utils";
-import { toRaw, reactive } from "./reactivity";
 
 // reimplement dev mode stuff see last change in 0f7a8289a6fb8387c3c1af41c6664b2a8448758f
 
@@ -53,7 +53,7 @@ declare global {
 }
 
 interface Root<P extends Props, E> {
-  node: ComponentNode<P, E>;
+  node: ComponentNode<P, E> | null;
   mount(target: HTMLElement | ShadowRoot, options?: MountOptions): Promise<Component<P, E>>;
   destroy(): void;
 }
@@ -74,9 +74,10 @@ export class App<
   props: P;
   env: E;
   scheduler = new Scheduler();
-  subRoots: Set<ComponentNode> = new Set();
-  root: ComponentNode<P, E> | null = null;
+  subRoots: Set<Root<any, any>> = new Set();
+  root: Root<P, E> | null = null;
   warnIfNoStaticProps: boolean;
+  _lastRootEl: HTMLElement | ShadowRoot | null = null; // temporary ref to propagate to roots
 
   constructor(Root: ComponentConstructor<P, E>, config: AppConfig<P, E> = {}) {
     super(config);
@@ -101,10 +102,8 @@ export class App<
     target: HTMLElement | ShadowRoot,
     options?: MountOptions
   ): Promise<Component<P, E> & InstanceType<T>> {
-    const root = this.createRoot(this.Root, { props: this.props });
-    this.root = root.node;
-    this.subRoots.delete(root.node);
-    return root.mount(target, options) as any;
+    this.root = this.createRoot(this.Root, { props: this.props });
+    return this.root.mount(target, options) as any;
   }
 
   createRoot<Props extends object, SubEnv = any>(
@@ -112,26 +111,38 @@ export class App<
     config: RootConfig<Props, SubEnv> = {}
   ): Root<Props, SubEnv> {
     const props = config.props || ({} as Props);
-    // hack to make sure the sub root get the sub env if necessary. for owl 3,
-    // would be nice to rethink the initialization process to make sure that
-    // we can create a ComponentNode and give it explicitely the env, instead
-    // of looking it up in the app
     const env = this.env;
-    if (config.env) {
-      this.env = config.env as any;
-    }
-
-    const restore = saveCurrent();
-    const node = this.makeNode(Root, props);
-    restore();
-    if (config.env) {
-      this.env = env;
-    }
-    this.subRoots.add(node);
-    return {
-      node,
+    const root: Root<Props, SubEnv> = {
+      node: null,
       mount: (target: HTMLElement | ShadowRoot, options?: MountOptions) => {
         App.validateTarget(target);
+
+        // hack to make sure the sub root get the sub env if necessary. for owl 3,
+        // would be nice to rethink the initialization process to make sure that
+        // we can create a ComponentNode and give it explicitely the env, instead
+        // of looking it up in the app
+        if (config.env) {
+          this.env = config.env as any;
+        }
+        const restore = saveCurrent();
+        if (options?.position === "attach") {
+          if (Root.template) {
+            throw new Error("Cannot attach a component with a template");
+          }
+          this._lastRootEl = target;
+        } else {
+          if (!Root.template) {
+            // no template => trigger an error
+            this.getTemplate("");
+          }
+        }
+        const node = this.makeNode(Root, props);
+        root.node = node;
+        this._lastRootEl = null;
+        restore();
+        if (config.env) {
+          this.env = env;
+        }
         if (this.dev) {
           validateProps(Root, props, { __owl__: { app: this } });
         }
@@ -139,11 +150,16 @@ export class App<
         return prom;
       },
       destroy: () => {
-        this.subRoots.delete(node);
-        node.destroy();
-        this.scheduler.processTasks();
+        this.subRoots.delete(root);
+        if (root.node) {
+          root.node?.destroy();
+          this.scheduler.processTasks();
+        }
       },
     };
+
+    this.subRoots.add(root);
+    return root;
   }
 
   makeNode(Component: ComponentConstructor, props: any): ComponentNode {
@@ -178,13 +194,17 @@ export class App<
   }
 
   destroy() {
-    if (this.root) {
-      for (let subroot of this.subRoots) {
-        subroot.destroy();
-      }
-      this.root.destroy();
-      this.scheduler.processTasks();
+    const roots = [...this.subRoots].reverse();
+    for (let root of roots) {
+      root.destroy();
     }
+    // if (this.root) {
+    //   for (let subroot of this.subRoots) {
+    //     subroot.destroy();
+    //   }
+    //   this.root.destroy();
+    this.scheduler.processTasks();
+    // }
     apps.delete(this);
   }
 

src/runtime/component.ts

@@ -9,6 +9,7 @@ export type Props = { [key: string]: any };
 
 interface StaticComponentProperties {
   template: string;
+  dynamicContent?: { [spec: string]: string };
   defaultProps?: any;
   props?: Schema;
   components?: { [componentName: string]: ComponentConstructor };

src/runtime/component_node.ts

@@ -6,7 +6,9 @@ import { OwlError } from "../common/owl_error";
 import { Fiber, makeChildFiber, makeRootFiber, MountFiber, MountOptions } from "./fibers";
 import { clearReactivesForCallback, getSubscriptions, reactive, targets } from "./reactivity";
 import { STATUS } from "./status";
-import { batched, Callback } from "./utils";
+import { batched, Callback, Markup } from "./utils";
+import { xml } from "./template_set";
+import { compileExpr } from "../common/inline_expressions";
 
 let currentNode: ComponentNode | null = null;
 
@@ -124,11 +126,102 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
     }
     this.component = new C(props, env, this);
     const ctx = Object.assign(Object.create(this.component), { this: this.component });
-    this.renderFn = app.getTemplate(C.template).bind(this.component, ctx, this);
+    if (C.template) {
+      this.renderFn = app.getTemplate(C.template).bind(this.component, ctx, this);
+    } else {
+      // component will be attached
+      this.renderFn = app.getTemplate(xml``).bind(this.component, ctx, this);
+      if (C.dynamicContent) {
+        this.prepareAttach(app._lastRootEl!, C.dynamicContent, ctx);
+      }
+    }
     this.component.setup();
     currentNode = null;
   }
 
+  prepareAttach(
+    el: HTMLElement | ShadowRoot,
+    dynamicContent: { [spec: string]: string },
+    ctx: any
+  ) {
+    const attrs: { selector: string; attr: string; fn: Function }[] = [];
+    const handlers: { selector: string; event: string; fn: any }[] = [];
+    const tOuts: { selector: string; fn: Function }[] = [];
+    for (let key in dynamicContent) {
+      const value = dynamicContent[key];
+      const parts = key.split(":");
+      if (parts[1].startsWith("t-att-")) {
+        const attr = parts[1].slice(6);
+        const fn = new Function("ctx", `return ${compileExpr(value)};`);
+        attrs.push({
+          selector: parts[0],
+          attr,
+          fn,
+        });
+      }
+      if (parts[1].startsWith("t-on-")) {
+        const event = parts[1].slice(5);
+        // const fn = new Function("ctx", "ev", `${compileExpr(value)}(ev);`);
+        const fn = (ev: any) => (this as any).component[value](ev);
+        handlers.push({
+          selector: parts[0],
+          event,
+          fn,
+        });
+      }
+      if (parts[1] === "t-out") {
+        const fn = new Function("ctx", `return ${compileExpr(value)};`);
+        tOuts.push({ selector: parts[0], fn });
+      }
+    }
+    const handleAttrs = () => {
+      for (let attr of attrs) {
+        const val = attr.fn.call(this.component, ctx);
+        // todo: cache the queryselector result?
+        const target = attr.selector === "root" ? el : (el.querySelector(attr.selector) as any);
+        if (target) {
+          target.setAttribute(attr.attr, val);
+        }
+      }
+    };
+    const handleEvents = () => {
+      for (let handler of handlers) {
+        // const val = attr.fn.call(this.component, ctx);
+        // todo: cache the queryselector result?
+        const target =
+          handler.selector === "root" ? el : (el.querySelector(handler.selector) as any);
+        if (target) {
+          target.addEventListener(handler.event, handler.fn);
+        }
+      }
+    };
+    const handleTOuts = () => {
+      for (let tOut of tOuts) {
+        const val = tOut.fn.call(this.component, ctx);
+        // todo: cache the queryselector result?
+        const target = tOut.selector === "root" ? el : (el.querySelector(tOut.selector) as any);
+        if (target) {
+          if (val instanceof Markup) {
+            target.innerHTML = val as any;
+          } else {
+            target.textContent = val;
+          }
+        }
+      }
+    };
+    if (attrs.length) {
+      this.mounted.push(handleAttrs);
+      this.patched.push(handleAttrs);
+    }
+    if (handlers.length) {
+      this.mounted.push(handleEvents);
+    }
+    if (tOuts.length) {
+      this.mounted.push(handleTOuts);
+      this.patched.push(handleTOuts);
+    }
+  }
+
   mountComponent(target: any, options?: MountOptions) {
     const fiber = new MountFiber(this, target, options);
     this.app.scheduler.addFiber(fiber);

src/runtime/fibers.ts

@@ -207,7 +207,7 @@ export class RootFiber extends Fiber {
   }
 }
 
-type Position = "first-child" | "last-child";
+type Position = "first-child" | "last-child" | "attach";
 
 export interface MountOptions {
   position?: Position;

src/runtime/hooks.ts

@@ -136,3 +136,20 @@ export function useExternalListener(
   onMounted(() => target.addEventListener(eventName, boundHandler, eventParams));
   onWillUnmount(() => target.removeEventListener(eventName, boundHandler, eventParams));
 }
+
+// -----------------------------------------------------------------------------
+// useAttachedEl
+// -----------------------------------------------------------------------------
+
+/**
+ * The purpose of this hook is to allow attached components to get a reference to
+ * the element they have been attached on.
+ */
+export function useAttachedEl(): HTMLElement {
+  const node = getCurrent();
+  const el = node.app._lastRootEl as HTMLElement;
+  if (!el) {
+    throw new Error("useAttachedEl can only be called with component that are attached");
+  }
+  return el;
+}

src/runtime/scheduler.ts

@@ -93,14 +93,7 @@ export class Scheduler {
       if (!hasError) {
         fiber.complete();
       }
-      // at this point, the fiber should have been applied to the DOM, so we can
-      // remove it from the task list. If it is not the case, it means that there
-      // was an error and an error handler triggered a new rendering that recycled
-      // the fiber, so in that case, we actually want to keep the fiber around,
-      // otherwise it will just be ignored.
-      if (fiber.appliedToDom) {
-        this.tasks.delete(fiber);
-      }
+      this.tasks.delete(fiber);
     }
   }
 }

src/runtime/template_set.ts

@@ -5,7 +5,6 @@ import { Portal, portalTemplate } from "./portal";
 import { helpers } from "./template_helpers";
 import { OwlError } from "../common/owl_error";
 import { parseXML } from "../common/utils";
-import type { customDirectives } from "../common/types";
 
 const bdom = { text, createBlock, list, multi, html, toggler, comment };
 
@@ -15,8 +14,6 @@ export interface TemplateSetConfig {
   translateFn?: (s: string) => string;
   templates?: string | Document | Record<string, string>;
   getTemplate?: (s: string) => Element | Function | string | void;
-  customDirectives?: customDirectives;
-  globalValues?: object;
 }
 
 export class TemplateSet {
@@ -30,9 +27,6 @@ export class TemplateSet {
   translateFn?: (s: string) => string;
   translatableAttributes?: string[];
   Portal = Portal;
-  customDirectives: customDirectives;
-  runtimeUtils: object;
-  hasGlobalValues: boolean;
 
   constructor(config: TemplateSetConfig = {}) {
     this.dev = config.dev || false;
@@ -48,9 +42,6 @@ export class TemplateSet {
       }
     }
     this.getRawTemplate = config.getTemplate;
-    this.customDirectives = config.customDirectives || {};
-    this.runtimeUtils = { ...helpers, __globals__: config.globalValues || {} };
-    this.hasGlobalValues = Boolean(config.globalValues && Object.keys(config.globalValues).length);
   }
 
   addTemplate(name: string, template: string | Element) {
@@ -106,7 +97,7 @@ export class TemplateSet {
       this.templates[name] = function (context, parent) {
         return templates[name].call(this, context, parent);
       };
-      const template = templateFn(this, bdom, this.runtimeUtils);
+      const template = templateFn(this, bdom, helpers);
       this.templates[name] = template;
     }
     return this.templates[name];

src/version.ts

@@ -1,2 +1,2 @@
 // do not modify manually. This file is generated by the release script.
-export const version = "2.5.0";
+export const version = "2.4.0";

tests/app/__snapshots__/app.test.ts.snap

@@ -43,21 +43,6 @@ exports[`app app: clear scheduler tasks and destroy cancelled nodes immediately
 }"
 `;
 
-exports[`app can add functions to the bdom 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { __globals__ } = helpers;
-  
-  let block1 = createBlock(\`<div class=\\"my-div\\" block-handler-0=\\"click\\"/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let hdlr1 = [()=>__globals__.plop('click'), ctx];
-    return block1([hdlr1]);
-  }
-}"
-`;
-
 exports[`app can call processTask twice in a row without crashing 1`] = `
 "function anonymous(app, bdom, helpers
 ) {

tests/app/__snapshots__/sub_root.test.ts.snap

@@ -94,17 +94,6 @@ exports[`subroot can create a root in a setup function, then use a hook 1`] = `
 }"
 `;
 
-exports[`subroot can create a root in a setup function, then use a hook 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return text(\`c\`);
-  }
-}"
-`;
-
 exports[`subroot can mount subroot 1`] = `
 "function anonymous(app, bdom, helpers
 ) {

tests/app/app.test.ts

@@ -201,22 +201,4 @@ describe("app", () => {
     await app.mount(fixture);
     expect(fixture.innerHTML).toBe("parent<div></div>");
   });
-
-  test("can add functions to the bdom", async () => {
-    const steps: string[] = [];
-    class SomeComponent extends Component {
-      static template = xml`<div t-on-click="() => __globals__.plop('click')" class="my-div"/>`;
-    }
-    const app = new App(SomeComponent, {
-      globalValues: {
-        plop: (string: any) => {
-          steps.push(string);
-        },
-      },
-    });
-    await app.mount(fixture);
-    expect(fixture.innerHTML).toBe(`<div class="my-div"></div>`);
-    fixture.querySelector("div")!.click();
-    expect(steps).toEqual(["click"]);
-  });
 });

tests/compiler/__snapshots__/t_custom.test.ts.snap

@@ -1,29 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`t-custom can use t-custom directive on a node 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<div class=\\"my-div\\" block-handler-0=\\"click\\"/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let hdlr1 = [ctx['click'], ctx];
-    return block1([hdlr1]);
-  }
-}"
-`;
-
-exports[`t-custom can use t-custom directive with modifier on a node 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<div class=\\"my-div\\" block-handler-0=\\"click\\"/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let hdlr1 = [ctx['click'], ctx];
-    return block1([hdlr1]);
-  }
-}"
-`;

tests/compiler/inline_expressions.test.ts

@@ -1,4 +1,4 @@
-import { compileExpr, tokenize } from "../../src/compiler/inline_expressions";
+import { compileExpr, tokenize } from "../../src/common/inline_expressions";
 
 describe("tokenizer", () => {
   test("simple tokens", () => {

tests/compiler/t_custom.test.ts

@@ -1,55 +0,0 @@
-import { App, Component, xml } from "../../src";
-import { makeTestFixture, snapshotEverything } from "../helpers";
-
-let fixture: HTMLElement;
-
-snapshotEverything();
-
-beforeEach(() => {
-  fixture = makeTestFixture();
-});
-
-describe("t-custom", () => {
-  test("can use t-custom directive on a node", async () => {
-    const steps: string[] = [];
-    class SomeComponent extends Component {
-      static template = xml`<div t-custom-plop="click" class="my-div"/>`;
-      click() {
-        steps.push("clicked");
-      }
-    }
-    const app = new App(SomeComponent, {
-      customDirectives: {
-        plop: (node, value) => {
-          node.setAttribute("t-on-click", value);
-        },
-      },
-    });
-    await app.mount(fixture);
-    expect(fixture.innerHTML).toBe(`<div class="my-div"></div>`);
-    fixture.querySelector("div")!.click();
-    expect(steps).toEqual(["clicked"]);
-  });
-
-  test("can use t-custom directive with modifier on a node", async () => {
-    const steps: string[] = [];
-    class SomeComponent extends Component {
-      static template = xml`<div t-custom-plop.mouse="click" class="my-div"/>`;
-      click() {
-        steps.push("clicked");
-      }
-    }
-    const app = new App(SomeComponent, {
-      customDirectives: {
-        plop: (node, value, modifier) => {
-          node.setAttribute("t-on-click", value);
-          steps.push(modifier || "");
-        },
-      },
-    });
-    await app.mount(fixture);
-    expect(fixture.innerHTML).toBe(`<div class="my-div"></div>`);
-    fixture.querySelector("div")!.click();
-    expect(steps).toEqual(["mouse", "clicked"]);
-  });
-});

tests/components/__snapshots__/error_handling.test.ts.snap

@@ -320,50 +320,6 @@ exports[`can catch errors can catch an error in a component render function 3`]
 }"
 `;
 
-exports[`can catch errors can catch an error in onmounted 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(null, false, false, false, []);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2, b3;
-    b2 = text(\`Main\`);
-    if (ctx['state'].ok) {
-      const Comp1 = ctx['component'];
-      b3 = toggler(Comp1, comp1({}, (Comp1).name + key + \`__1\`, node, this, Comp1));
-    }
-    return multi([b2, b3]);
-  }
-}"
-`;
-
-exports[`can catch errors can catch an error in onmounted 3`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<div>Error!!!</div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
-exports[`can catch errors can catch an error in onmounted 4`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<div>perfect</div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
 exports[`can catch errors can catch an error in the constructor call of a component render function 1`] = `
 "function anonymous(app, bdom, helpers
 ) {

tests/components/__snapshots__/lifecycle.test.ts.snap

@@ -332,6 +332,31 @@ exports[`lifecycle hooks lifecycle semantics, part 3 1`] = `
 }"
 `;
 
+exports[`lifecycle hooks lifecycle semantics, part 3 3`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`GrandChild\`, true, false, false, []);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return comp1({}, key + \`__1\`, node, this, null);
+  }
+}"
+`;
+
+exports[`lifecycle hooks lifecycle semantics, part 3 4`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
 exports[`lifecycle hooks lifecycle semantics, part 4 1`] = `
 "function anonymous(app, bdom, helpers
 ) {

tests/components/attached_components.test.ts

@@ -0,0 +1,258 @@
+import { Component, markup, mount, useState, xml } from "../../src";
+import { useAttachedEl } from "../../src/runtime/hooks";
+import { makeTestFixture, nextTick, steps, useLogLifecycle } from "../helpers";
+
+let fixture: HTMLElement;
+
+beforeEach(() => {
+  fixture = makeTestFixture();
+});
+
+describe("basics", () => {
+  test("can attach an empty component", async () => {
+    fixture.innerHTML = "<div>hello</div>";
+
+    class Test extends Component {
+      setup() {
+        useLogLifecycle();
+      }
+    }
+
+    await mount(Test, fixture, { position: "attach" });
+    expect(steps.splice(0)).toMatchInlineSnapshot(`
+      Array [
+        "Test:setup",
+        "Test:willStart",
+        "Test:willRender",
+        "Test:rendered",
+        "Test:mounted",
+      ]
+    `);
+    expect(fixture.innerHTML).toBe("<div>hello</div>");
+  });
+
+  test("attaching a component with a template throws", async () => {
+    fixture.innerHTML = "<div>hello</div>";
+
+    class Test extends Component {
+      static template = xml`hello`;
+    }
+
+    let error: Error | null = null;
+    try {
+      await mount(Test, fixture, { position: "attach" });
+    } catch (e: any) {
+      error = e;
+    }
+    expect(error!.message).toBe("Cannot attach a component with a template");
+
+    expect(fixture.innerHTML).toBe("<div>hello</div>");
+  });
+
+  test("can attach a component with simple dynamic content", async () => {
+    fixture.innerHTML = "<div><p>hello</p></div>";
+
+    class Test extends Component {
+      static dynamicContent = {
+        "p:t-att-a": "value",
+      };
+      value: string = "";
+      setup() {
+        this.value = "b";
+      }
+    }
+
+    await mount(Test, fixture, { position: "attach" });
+    expect(fixture.innerHTML).toBe('<div><p a="b">hello</p></div>');
+  });
+
+  test("useAttachedEl returns the attached element", async () => {
+    fixture.innerHTML = "<div><p>hello</p></div>";
+    let el: any = null;
+
+    class Test extends Component {
+      setup() {
+        el = useAttachedEl();
+      }
+    }
+
+    await mount(Test, fixture, { position: "attach" });
+    expect(el).toBe(fixture);
+  });
+
+  test("useAttachedEl throws if component is not attached", async () => {
+    class Test extends Component {
+      static template = xml`hello`;
+      setup() {
+        useAttachedEl();
+      }
+    }
+
+    let error: any = null;
+    try {
+      await mount(Test, fixture);
+    } catch (_e: any) {
+      error = _e;
+    }
+
+    expect(error.message).toBe("useAttachedEl can only be called with component that are attached");
+  });
+
+  test("multiple dynamic attribute", async () => {
+    fixture.innerHTML = "<div><p>hello</p></div>";
+
+    class Test extends Component {
+      static dynamicContent = {
+        "p:t-att-a": "value",
+        "p:t-att-b": "value + 'coucou'",
+      };
+      value: string = "";
+      setup() {
+        this.value = "b";
+      }
+    }
+
+    await mount(Test, fixture, { position: "attach" });
+    expect(fixture.innerHTML).toBe('<div><p a="b" b="bcoucou">hello</p></div>');
+  });
+
+  test("attrs can target root", async () => {
+    fixture.innerHTML = "<p>hello</p>";
+
+    class Test extends Component {
+      static dynamicContent = {
+        "root:t-att-a": "value",
+      };
+      value: string = "";
+      setup() {
+        this.value = "b";
+      }
+    }
+
+    await mount(Test, fixture, { position: "attach" });
+    expect(fixture.outerHTML).toBe('<div a="b"><p>hello</p></div>');
+  });
+
+  test("dynamic attribute is updated on rerender", async () => {
+    fixture.innerHTML = "<div><p>hello</p></div>";
+
+    class Test extends Component {
+      static dynamicContent = {
+        "p:t-att-a": "state.value",
+      };
+      state: any;
+      setup() {
+        this.state = useState({ value: 1 });
+      }
+    }
+
+    const test = await mount(Test, fixture, { position: "attach" });
+    expect(fixture.innerHTML).toBe('<div><p a="1">hello</p></div>');
+    test.state.value = 2;
+    await nextTick();
+    expect(fixture.innerHTML).toBe('<div><p a="2">hello</p></div>');
+  });
+
+  test("t-on-click, basic", async () => {
+    fixture.innerHTML = "<div><p>hello</p></div>";
+
+    let ev: Event | null = null;
+
+    class Test extends Component {
+      static dynamicContent = {
+        "p:t-att-a": "state.value",
+        "p:t-on-click": "onClick",
+      };
+      state: any;
+      setup() {
+        this.state = useState({ value: 1 });
+      }
+      onClick(_ev: any) {
+        ev = _ev;
+        this.state.value = 2;
+      }
+    }
+
+    await mount(Test, fixture, { position: "attach" });
+    expect(fixture.innerHTML).toBe('<div><p a="1">hello</p></div>');
+    fixture.querySelector("p")!.click();
+    expect(ev).toBeInstanceOf(Event);
+    await nextTick();
+    expect(fixture.innerHTML).toBe('<div><p a="2">hello</p></div>');
+  });
+
+  test("t-on-click, target root element", async () => {
+    fixture.innerHTML = "hello";
+    let click = false;
+    class Test extends Component {
+      static dynamicContent = {
+        "root:t-on-click": "onClick",
+      };
+      onClick() {
+        click = true;
+      }
+    }
+
+    await mount(Test, fixture, { position: "attach" });
+    fixture.click();
+    expect(click).toBe(true);
+  });
+
+  test("t-out, basic", async () => {
+    fixture.innerHTML = "<div><p>hello</p></div>";
+
+    class Test extends Component {
+      static dynamicContent = {
+        "p:t-out": "state.value",
+      };
+      state: any;
+      setup() {
+        this.state = useState({ value: 1 });
+      }
+    }
+
+    await mount(Test, fixture, { position: "attach" });
+    expect(fixture.innerHTML).toBe("<div><p>1</p></div>");
+  });
+
+  test("t-out, on root", async () => {
+    fixture.innerHTML = "hello";
+
+    class Test extends Component {
+      static dynamicContent = {
+        "root:t-out": "state.value",
+      };
+      state: any;
+      setup() {
+        this.state = useState({ value: 1 });
+      }
+    }
+
+    expect(fixture.outerHTML).toBe("<div>hello</div>");
+    await mount(Test, fixture, { position: "attach" });
+    expect(fixture.outerHTML).toBe("<div>1</div>");
+  });
+
+  test("t-out, with markup", async () => {
+    fixture.innerHTML = `<p class="p1">hello</p><p class="p2">hello</p>`;
+
+    class Test extends Component {
+      static dynamicContent = {
+        "p.p1:t-out": "value1",
+        "p.p2:t-out": "value2",
+      };
+
+      value1: any;
+      value2: any;
+      setup() {
+        this.value1 = "<div>value1</div>";
+        this.value2 = markup("<div>value2</div>");
+      }
+    }
+
+    await mount(Test, fixture, { position: "attach" });
+    expect(fixture.innerHTML).toBe(
+      `<p class="p1">&lt;div&gt;value1&lt;/div&gt;</p><p class="p2"><div>value2</div></p>`
+    );
+  });
+});

tests/components/error_handling.test.ts

@@ -564,82 +564,6 @@ describe("can catch errors", () => {
     expect(mockConsoleWarn).toBeCalledTimes(0);
   });
 
-  test("can catch an error in onmounted", async () => {
-    class ErrorComponent extends Component {
-      static template = xml`<div>Error!!!</div>`;
-      setup() {
-        useLogLifecycle();
-        onMounted(() => {
-          throw new Error("error");
-        });
-      }
-    }
-    class PerfectComponent extends Component {
-      static template = xml`<div>perfect</div>`;
-      setup() {
-        useLogLifecycle();
-      }
-    }
-    class Main extends Component {
-      static template = xml`Main<t t-if="state.ok" t-component="component"/>`;
-      component: any;
-      state: any;
-      setup() {
-        this.state = useState({ ok: false });
-        useLogLifecycle();
-        this.component = ErrorComponent;
-        onError(() => {
-          this.component = PerfectComponent;
-          this.render();
-        });
-      }
-    }
-
-    const app = await mount(Main, fixture);
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Main:setup",
-        "Main:willStart",
-        "Main:willRender",
-        "Main:rendered",
-        "Main:mounted",
-      ]
-    `);
-    expect(fixture.innerHTML).toBe("Main");
-    (app as any).state.ok = true;
-    await nextTick();
-    expect(fixture.innerHTML).toBe("Main<div>Error!!!</div>");
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "Main:willRender",
-        "ErrorComponent:setup",
-        "ErrorComponent:willStart",
-        "Main:rendered",
-        "ErrorComponent:willRender",
-        "ErrorComponent:rendered",
-        "Main:willPatch",
-        "ErrorComponent:mounted",
-        "Main:willRender",
-        "PerfectComponent:setup",
-        "PerfectComponent:willStart",
-        "Main:rendered",
-      ]
-    `);
-    await nextTick();
-    expect(steps.splice(0)).toMatchInlineSnapshot(`
-      Array [
-        "PerfectComponent:willRender",
-        "PerfectComponent:rendered",
-        "Main:willPatch",
-        "ErrorComponent:willUnmount",
-        "ErrorComponent:willDestroy",
-        "PerfectComponent:mounted",
-        "Main:patched",
-      ]
-    `);
-    expect(fixture.innerHTML).toBe("Main<div>perfect</div>");
-  });
-
   test("calling a hook outside setup should crash", async () => {
     class Root extends Component {
       static template = xml`<t t-esc="state.value"/>`;

tests/components/props_validation.test.ts

@@ -702,7 +702,7 @@ describe("props validation", () => {
     const app = new App(Parent, { test: true });
     await app.mount(fixture);
     expect(fixture.innerHTML).toBe("12");
-    expect(app.root!.subscriptions).toEqual([{ keys: ["otherValue"], target: obj }]);
+    expect(app.root!.node!.subscriptions).toEqual([{ keys: ["otherValue"], target: obj }]);
   });
 
   test("props are validated whenever component is updated", async () => {

tools/release.js

@@ -140,6 +140,7 @@ async function startRelease() {
   }
 
   // ---------------------------------------------------------------------------
+
   log(`Step ${step++}/${STEPS}: Creating the release...`);
   const relaseResult = await execCommand(`gh release create v${next} dist/*.js dist/*.zip ${draft} -F ${file}`);
   if (relaseResult !== 0) {