improves plugin function for client

.github/workflows/release.yml

@@ -22,8 +22,8 @@ jobs:
       - name: Get version number
         id: version
         run: |
-          VERSION=$(node -p -e "require('./package.json').version")
-          echo "::set-output name="version"::$VERSION"
+          VERSION=$(node -p -e "require('./lerna.json').version")
+          echo "{version}={$VERSION}" >> $GITHUB_OUTPUT
 
       - name: Create Release
         id: create_release

core/client/src/client.ts

@@ -1,4 +1,8 @@
-import type { default as Plugin, PluginBase } from './plugin';
+import type {
+  // default as Plugin,
+  PluginBase,
+  PluginConstructor,
+} from './plugin';
 import Layer, { Child } from './layer';
 import { IpcBase, IpcIframe } from './ipc';
 
@@ -34,7 +38,7 @@ export default class MagicCircle {
   };
 
   private arguments: {
-    plugins?: (typeof Plugin)[];
+    plugins?: PluginConstructor[];
     ipc?: typeof IpcBase;
   };
   private plugins?: PluginBase[];
@@ -51,7 +55,7 @@ export default class MagicCircle {
   isConnected: boolean;
   setupDone: boolean;
 
-  constructor(plugins: (typeof Plugin)[] = [], ipc?: typeof IpcBase) {
+  constructor(plugins: PluginConstructor[] = [], ipc?: typeof IpcBase) {
     // setup initial hooks
     this.hooks = {
       setup: undefined,
@@ -395,17 +399,32 @@ export default class MagicCircle {
     this.layer.children = [];
   }
 
+  /**
+   * Find a plugin
+   *
+   * @param plugin Constructor of plugin
+   */
+  plugin<T extends PluginConstructor>(plugin: T): InstanceType<T> | null {
+    if (!this.plugins) {
+      throw new Error('Plugins not created yet, first run the setup() call');
+    }
+
+    return (
+      (this.plugins.find((p) => p.id === plugin.id) as InstanceType<T>) || null
+    );
+  }
+
   /**
    * Find a plugin
    *
    * @param name Name of plugin
    */
-  plugin<T extends PluginBase>(name: string): T {
+  pluginById<T extends PluginBase>(name: string): T | null {
     if (!this.plugins) {
       throw new Error('Plugins not created yet, first run the setup() call');
     }
 
-    return this.plugins.find((p) => p.name === name) as T;
+    return (this.plugins.find((p) => p.id === name) as T) || null;
   }
 
   /**

core/client/src/plugin.ts

@@ -1,7 +1,7 @@
 import Client from './client';
 
 export interface PluginBase {
-  name: string;
+  id: string;
   compatible: () => boolean;
   connect?: () => void;
   setup?: (element: Client['element']) => void;
@@ -13,13 +13,20 @@ export interface PluginBase {
   destroy: () => void;
 }
 
+export interface PluginConstructor {
+  new (client: Client): PluginBase;
+  id: string;
+}
+
 export default class Plugin implements PluginBase {
   client: Client;
 
-  name = '';
+  static id = '';
+  id: string;
 
   constructor(client: Client) {
     this.client = client;
+    this.id = (this.constructor as unknown as Plugin).id;
   }
 
   compatible() {

core/client/src/plugins/layers.ts

@@ -4,11 +4,11 @@ import Plugin from '../plugin';
 import Watcher from '../watcher';
 
 export default class PluginLayers extends Plugin {
+  static id = 'layers';
+
   private cache: Record<string, Control<any>> = {};
   watcher?: Watcher;
 
-  name = 'layers';
-
   connect() {
     const { ipc } = this.client;
 

core/client/src/plugins/performance.ts

@@ -11,6 +11,8 @@ const ensurePaint = (fn: () => void) => {
 };
 
 export default class PluginPerformance extends Plugin {
+  static id = 'performance';
+
   cache: Record<string, Control<any>> = {};
 
   frames: number;
@@ -27,8 +29,6 @@ export default class PluginPerformance extends Plugin {
     memory?: number;
   };
 
-  name = 'performance';
-
   constructor(client: Plugin['client']) {
     super(client);
 

core/client/src/plugins/recordings.ts

@@ -8,7 +8,7 @@ type Recording = {
 };
 
 export default class PluginRecordings extends Plugin {
-  name = 'recordings';
+  static id = 'recordings';
 
   options?: Recording;
 
@@ -58,7 +58,7 @@ export default class PluginRecordings extends Plugin {
     const delta = (this.options?.fps || 60) / 1000;
     this.client.step(delta);
 
-    const plugin = this.client.plugin('screenshot') as PluginScreenshot;
+    const plugin = this.client.plugin(PluginScreenshot);
 
     if (!plugin) {
       throw new Error('Plugin screenshot is not loaded');

core/client/src/plugins/screenshots.ts

@@ -7,7 +7,7 @@ type screenshot = {
 };
 
 export default class PluginScreenshot extends Plugin {
-  name = 'screenshot';
+  static id = 'screenshot';
 
   connect() {
     const { ipc } = this.client;

core/client/src/plugins/seed.ts

@@ -1,7 +1,7 @@
 import Plugin from '../plugin';
 
 export default class PluginSeed extends Plugin {
-  name = 'seed';
+  static id = 'seed';
   seed = 0;
 
   constructor(client: Plugin['client']) {

core/client/src/plugins/timeline.ts

@@ -1,5 +1,5 @@
 import Plugin from '../plugin';
-import type PluginLayers from './layers';
+import PluginLayers from './layers';
 
 import bezier from '../utils/bezier';
 import { clamp } from '../utils/math';
@@ -38,6 +38,8 @@ type Hydration = {
 };
 
 export default class PLuginTimeline extends Plugin {
+  static id = 'timeline';
+
   private layers?: PluginLayers;
   private scene?: Scene;
   private start?: {
@@ -48,10 +50,8 @@ export default class PLuginTimeline extends Plugin {
   playhead: number = 0;
   playing: boolean = false;
 
-  name = 'timeline';
-
   setup() {
-    this.layers = this.client.plugin<PluginLayers>('layers');
+    this.layers = this.client.plugin(PluginLayers) || undefined;
 
     if (!this.layers) {
       throw new Error(

core/client/test/client.test.ts

@@ -1,5 +1,5 @@
 import Client from '../src/client';
-import PluginLayers from '../src/plugins/layers';
+import PluginSeed from '../src/plugins/seed';
 
 import IpcMock from './mock-ipc';
 import Plugin from './mock-plugin';
@@ -21,7 +21,7 @@ describe('core/client:client', () => {
     client.setup().loop(loop).start();
 
     setTimeout(() => {
-      expect(loop).toBeCalled();
+      expect(loop).toHaveBeenCalled();
       client.stop();
       done();
     }, 12);
@@ -47,10 +47,10 @@ describe('core/client:client', () => {
     const client = new Client();
     client.setup(setup).loop(loop).start();
 
-    expect(setup).toBeCalled();
+    expect(setup).toHaveBeenCalled();
 
     setTimeout(() => {
-      expect(loop).toBeCalled();
+      expect(loop).toHaveBeenCalled();
       done();
     }, 12);
   });
@@ -63,8 +63,8 @@ describe('core/client:client', () => {
     client.setup(setup).loop(loop);
 
     setTimeout(() => {
-      expect(setup).toBeCalled();
-      expect(loop).not.toBeCalled();
+      expect(setup).toHaveBeenCalled();
+      expect(loop).not.toHaveBeenCalled();
       done();
     }, 12);
   });
@@ -82,12 +82,12 @@ describe('core/client:client', () => {
     const client = new Client();
     client.setup(setup).start();
 
-    expect(setup).toBeCalled();
+    expect(setup).toHaveBeenCalled();
 
     setTimeout(() => {
       expect(client.setupDone).toBe(true);
       expect(() => client.setup(setup2)).toThrow();
-      expect(setup2).not.toBeCalled();
+      expect(setup2).not.toHaveBeenCalled();
       done();
     }, 12);
   });
@@ -114,15 +114,6 @@ describe('core/client:client', () => {
     }, 100);
   });
 
-  test('Should return the correct plugin', () => {
-    const client = new Client();
-
-    // @ts-ignore
-    client.plugins = [new PluginLayers()];
-
-    expect(client.plugin('layers').name).toBe('layers');
-  });
-
   test('Should destroy the client correctly', () => {
     const client = new Client().setup().start();
     client.destroy();
@@ -139,16 +130,25 @@ describe('core/client:client', () => {
     expect(client.plugins.length).toBe(0);
   });
 
-  test('Should be able to find a plugin', () => {
+  test('Should be able to find a plugin by name', () => {
+    const client = new Client().setup();
+    const seed = client.pluginById('seed');
+
+    expect(seed).toBeDefined();
+    expect(seed?.id).toBe('seed');
+  });
+
+  test('Should be able to find a plugin by constructor', () => {
     const client = new Client().setup();
-    const seed = client.plugin('seed');
+    const seed = client.plugin(PluginSeed);
 
     expect(seed).toBeDefined();
+    expect(seed?.id).toBe('seed');
   });
 
   test('Should not be able to find a plugin if setup has not run yet', () => {
     const client = new Client();
-    expect(() => client.plugin('seed')).toThrow(
+    expect(() => client.pluginById('seed')).toThrow(
       'Plugins not created yet, first run the setup() call'
     );
   });
@@ -158,8 +158,8 @@ describe('core/client:client', () => {
     client
       .setup()
       .loop(() => {
-        const plugin = client.plugin('mock');
-        expect(plugin.connect).toBeCalled();
+        const plugin = client.plugin(Plugin);
+        expect(plugin?.connect).toHaveBeenCalled();
 
         client.stop();
         done();
@@ -173,8 +173,8 @@ describe('core/client:client', () => {
     client.setup().start();
 
     window.setTimeout(() => {
-      const plugin = client.plugin<Plugin>('mock');
-      expect(plugin.playState).toHaveBeenLastCalledWith(true);
+      const plugin = client.plugin(Plugin);
+      expect(plugin?.playState).toHaveBeenLastCalledWith(true);
 
       client.stop();
       done();
@@ -187,11 +187,11 @@ describe('core/client:client', () => {
     client.setup().start();
 
     window.setTimeout(() => {
-      const plugin = client.plugin<Plugin>('mock');
-      expect(plugin.playState).toHaveBeenLastCalledWith(true);
+      const plugin = client.plugin(Plugin);
+      expect(plugin?.playState).toHaveBeenLastCalledWith(true);
 
       client.stop();
-      expect(plugin.playState).toHaveBeenLastCalledWith(false);
+      expect(plugin?.playState).toHaveBeenLastCalledWith(false);
 
       done();
     }, 12);