[imp] simplify plugin and resources system

- remove hardcoded resource in plugin
- add useResource

Author: ged-odoo

src/runtime/index.ts

@@ -13,6 +13,7 @@ import {
   comment,
 } from "./blockdom";
 import { mainEventHandler } from "./event_handling";
+export { Resource, useResource } from "./resource";
 export { Registry } from "./registry";
 
 config.shouldNormalizeDom = false;

src/runtime/lifecycle_hooks.ts

@@ -50,7 +50,7 @@ export function onWillUnmount(fn: () => void | any) {
 export function onWillDestroy(fn: () => void | any) {
   const pm = _getCurrentPluginManager();
   if (pm) {
-    pm.onDestroyCb.push(fn);
+    (pm as any).onDestroyCb.push(fn);
   } else {
     const node = getCurrent();
     node.willDestroy.push(decorate(node, fn, "onWillDestroy"));

src/runtime/plugins.ts

@@ -1,7 +1,5 @@
 import { OwlError } from "../common/owl_error";
 import { getCurrent } from "./component_node";
-import { derived } from "./reactivity/derived";
-import { proxy } from "./reactivity/proxy";
 
 let currentPluginManager: PluginManager | null = null;
 
@@ -10,67 +8,43 @@ export const _getCurrentPluginManager = () => currentPluginManager;
 export interface PluginConstructor {
   new (): Plugin;
   id: string;
-  resources: Record<string, any>;
 }
 
 export class Plugin {
   static id: string = "";
 
-  // can define the type of resources, and some information, such as, is the
-  // resource global or not
-  static resources = {};
-
-  resources: Record<string, any> = {};
-
   setup() {}
 }
 
 export class PluginManager {
   private children: PluginManager[] = [];
   private parent: PluginManager | null;
   private plugins: Record<string, Plugin>;
-  private resources: Record<string, any>;
-
-  onDestroyCb: Function[] = [];
+  private onDestroyCb: Function[] = [];
 
   constructor(parent: PluginManager | null) {
     this.parent = parent;
     this.parent?.children.push(this);
     this.plugins = this.parent ? Object.create(this.parent.plugins) : {};
-    this.resources = this.parent ? Object.create(this.parent.resources) : {};
   }
 
   destroy() {
     for (let children of this.children) {
       children.destroy();
     }
 
-    const plugins: Plugin[] = [];
-    for (let id in this.plugins) {
-      if (this.plugins.hasOwnProperty(id)) {
-        const plugin = this.plugins[id];
-        // resources
-        for (let r in plugin.resources) {
-          delete this.resources[r].sources[id];
-        }
-
-        plugins.push(this.plugins[id]);
-        delete this.plugins[id];
-      }
-    }
-
     const cbs = this.onDestroyCb;
     while (cbs.length) {
       cbs.pop()!();
     }
   }
 
-  getPlugin<T extends Plugin>(name: string): T | null {
-    return (this.plugins[name] as T) || null;
+  getPluginById<T extends Plugin>(id: string): T | null {
+    return (this.plugins[id] as T) || null;
   }
 
-  getResource(name: string): any[] {
-    return this.resources[name].fn();
+  getPlugin<T extends PluginConstructor>(pluginType: T): InstanceType<T> | null {
+    return this.getPluginById<InstanceType<T>>(pluginType.id);
   }
 
   startPlugins(pluginTypes: PluginConstructor[]): Plugin[] {
@@ -88,43 +62,11 @@ export class PluginManager {
         continue;
       }
 
-      for (let r in pluginType.resources) {
-        const sources: { [key: string]: Plugin } = proxy({});
-        const fn = derived(() => {
-          const result = [];
-          for (let name in sources) {
-            const plugin = sources[name];
-            const value = plugin.resources[r];
-            if (Array.isArray(value)) {
-              result.push(...value);
-            } else {
-              result.push(value);
-            }
-          }
-          return result;
-        });
-        this.resources[r] = { sources, fn };
-      }
-
       const plugin = new pluginType();
       this.plugins[pluginType.id] = plugin;
       plugins.push(plugin);
     }
 
-    // aggregate resources
-    for (let name in this.plugins) {
-      const p = this.plugins[name];
-      for (let r in p.resources) {
-        this.resources[r].sources[name] = p;
-        //     const value = p.resources[r];
-        //     if (Array.isArray(value)) {
-        //       this.resources[r].push(...value);
-        //     } else {
-        //       this.resources[r].push(value);
-        // }
-      }
-    }
-
     // setup phase
     for (let p of plugins) {
       p.setup();
@@ -139,11 +81,11 @@ export function plugin<T extends PluginConstructor>(pluginType: T): InstanceType
   // getCurrent will throw if we're not in a component
   const manager = currentPluginManager || getCurrent().pluginManager;
 
-  let plugin = manager.getPlugin<InstanceType<T>>(pluginType.id);
+  let plugin = manager.getPluginById<InstanceType<T>>(pluginType.id);
   if (!plugin) {
     if (manager === currentPluginManager) {
       manager.startPlugins([pluginType]);
-      plugin = manager.getPlugin<InstanceType<T>>(pluginType.id)!;
+      plugin = manager.getPluginById<InstanceType<T>>(pluginType.id)!;
     } else {
       throw new OwlError(`Unknown plugin "${pluginType.id}"`);
     }

src/runtime/resource.ts

@@ -1,14 +1,15 @@
+import { onWillDestroy } from "./lifecycle_hooks";
 import { derived } from "./reactivity/derived";
 import { signal, Signal } from "./reactivity/signal";
 import { TypeDescription, validateType } from "./validation";
 
 export class Resource<T> {
-  _items: Signal<[number, T][]> = signal([]);
-  _name: string;
-  _type?: TypeDescription;
+  private _items: Signal<[number, T][]> = signal([]);
+  private _name: string;
+  private _type?: TypeDescription;
 
   constructor(name?: string, type?: TypeDescription) {
-    this._name = name || "registry";
+    this._name = name || "resource";
     this._type = type;
   }
 
@@ -22,7 +23,7 @@ export class Resource<T> {
     if (this._type) {
       const error = validateType("item", item as any, this._type as any);
       if (error) {
-        throw new Error("Invalid type: " + error);
+        throw new Error(`Invalid type: ${error} (resource '${this._name}')`);
       }
     }
     this._items().push([sequence, item]);
@@ -36,3 +37,14 @@ export class Resource<T> {
     return this;
   }
 }
+
+export function useResource<T>(r: Resource<T>, elements: T[]) {
+  for (let elem of elements) {
+    r.add(elem);
+  }
+  onWillDestroy(() => {
+    for (let elem of elements) {
+      r.remove(elem);
+    }
+  });
+}

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

@@ -24,6 +24,35 @@ exports[`basic use 1`] = `
 }"
 `;
 
+exports[`components can register resources 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Level2\`, true, false, false, []);
+  
+  return function template(ctx, node, key = "") {
+    const b2 = text(\`1 | \`);
+    const b3 = comp1({}, key + \`__1\`, node, this, null);
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`components can register resources 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { safeOutput } = helpers;
+  
+  return function template(ctx, node, key = "") {
+    const b2 = text(\`2: \`);
+    const b3 = safeOutput(ctx['this'].a.value());
+    const b4 = text(\` \`);
+    return multi([b2, b3, b4]);
+  }
+}"
+`;
+
 exports[`components can start plugins 1`] = `
 "function anonymous(app, bdom, helpers
 ) {

tests/components/plugins.test.ts

@@ -1,4 +1,14 @@
-import { Component, mount, plugin, Plugin, PluginManager, usePlugins, xml } from "../../src";
+import {
+  Component,
+  derived,
+  mount,
+  plugin,
+  Plugin,
+  PluginManager,
+  usePlugins,
+  xml,
+} from "../../src";
+import { Resource, useResource } from "../../src/runtime/resource";
 import { makeTestFixture, snapshotEverything } from "../helpers";
 
 let fixture: HTMLElement;
@@ -148,8 +158,8 @@ test("components start plugins at their level", async () => {
   const pluginManager = new PluginManager(null);
 
   await mount(Level1, fixture, { pluginManager });
-  expect(pluginManager.getPlugin("a")).toBe(null);
-  expect(pluginManager.getPlugin("b")).toBe(null);
+  expect(pluginManager.getPluginById("a")).toBe(null);
+  expect(pluginManager.getPluginById("b")).toBe(null);
   expect(fixture.innerHTML).toBe("1 | 2: pA | 3: pA - pB");
 });
 
@@ -191,3 +201,44 @@ test("shadow plugin", async () => {
   await mount(Level1, fixture, { pluginManager });
   expect(fixture.innerHTML).toBe("a | shadow");
 });
+
+test("components can register resources", async () => {
+  class PluginA extends Plugin {
+    static id = "a";
+    colors = new Resource<string>("colors", String);
+
+    value = derived(() => {
+      return this.colors.items().join("|");
+    });
+  }
+
+  class Level2 extends Component {
+    static template = xml`2: <t t-out="this.a.value()"/> `;
+
+    a = plugin(PluginA);
+    setup() {
+      useResource(this.a.colors, ["from lvl 2"]);
+      expect(this.a.colors.items()).toEqual(["from lvl 1", "from lvl 2"]);
+    }
+  }
+
+  class Level1 extends Component {
+    static template = xml`1 | <Level2/>`;
+    static components = { Level2 };
+
+    setup() {
+      const a = plugin(PluginA);
+      useResource(a.colors, ["from lvl 1"]);
+      expect(a.colors.items()).toEqual(["from lvl 1"]);
+    }
+  }
+
+  const pluginManager = new PluginManager(null);
+  pluginManager.startPlugins([PluginA]);
+  const a = pluginManager.getPlugin(PluginA)!;
+  expect(a.colors.items()).toEqual([]);
+
+  await mount(Level1, fixture, { pluginManager });
+  expect(a.colors.items()).toEqual(["from lvl 1", "from lvl 2"]);
+  expect(fixture.innerHTML).toBe("1 | 2: from lvl 1|from lvl 2 ");
+});