feat(plugins): fix typing and load-order

client/index.ts

@@ -8,9 +8,9 @@ import { Node, XPathResult } from '@ulixee/hero-interfaces/AwaitedDom';
 import { LocationStatus, LocationTrigger } from '@ulixee/hero-interfaces/Location';
 import IHeroCreateOptions from './interfaces/IHeroCreateOptions';
 import IConnectionToCoreOptions from './interfaces/IConnectionToCoreOptions';
-import Hero from './lib/Hero';
-import type Tab from './lib/Tab';
-import type FrameEnvironment from './lib/FrameEnvironment';
+import { Hero } from './lib/Hero';
+import { Tab } from './lib/Tab';
+import { FrameEnvironment } from './lib/FrameEnvironment';
 import ConnectionToRemoteCoreServer from './connections/ConnectionToRemoteCoreServer';
 import ConnectionToCore from './connections/ConnectionToCore';
 

client/lib/ConnectionManager.ts

@@ -1,9 +1,9 @@
 import StateMachine from 'awaited-dom/base/StateMachine';
-import Tab, { createTab } from './Tab';
+import { Tab, createTab } from './Tab';
 import ConnectionToCore from '../connections/ConnectionToCore';
 import CoreSession from './CoreSession';
 import ConnectionFactory from '../connections/ConnectionFactory';
-import Hero, { IState, IStateOptions } from './Hero';
+import { Hero, IState, IStateOptions } from './Hero';
 
 const { getState } = StateMachine<Hero, IState>();
 
@@ -44,6 +44,7 @@ export default class ConnectionManager {
     if (this.#connectionToCore !== connectionToCore) {
       this.#didCreateConnection = true;
     }
+    this.sendToActiveTab = this.sendToActiveTab.bind(this);
 
     this.#coreSession = this.#connectionToCore.createSession(options).catch(err => err);
   }
@@ -85,11 +86,12 @@ export default class ConnectionManager {
     this.#tabs.push(tab);
   }
 
-  public async getConnectedCoreSessionOrReject(): Promise<CoreSession> {
+  public getConnectedCoreSessionOrReject(): Promise<CoreSession> {
     if (this.hasConnected) {
-      const coreSession = await this.#coreSession;
-      if (coreSession instanceof CoreSession) return coreSession;
-      throw coreSession;
+      return this.#coreSession.then(coreSession => {
+        if (coreSession instanceof CoreSession) return coreSession;
+        throw coreSession;
+      });
     }
     this.hasConnected = true;
 
@@ -105,13 +107,13 @@ export default class ConnectionManager {
     this.#tabs = [this.#activeTab];
 
     for (const clientPlugin of clientPlugins) {
-      await clientPlugin.onHero(this.hero, this.sendToActiveTab.bind(this));
+      if (clientPlugin.onHero) clientPlugin.onHero(this.hero, this.sendToActiveTab.bind(this));
     }
 
-    return await coreSession;
+    return coreSession;
   }
 
-  private async sendToActiveTab(toPluginId: string, ...args: any[]): Promise<any> {
+  public async sendToActiveTab(toPluginId: string, ...args: any[]): Promise<any> {
     const coreSession = (await this.#coreSession) as CoreSession;
     const coreTab = coreSession.tabsById.get(await this.#activeTab.tabId);
     return coreTab.commandQueue.run('Tab.runPluginCommand', toPluginId, args);

client/lib/FrameEnvironment.ts

@@ -30,10 +30,10 @@ import { getComputedVisibilityFnName } from '@ulixee/hero-interfaces/jsPathFnNam
 import IAwaitedOptions from '../interfaces/IAwaitedOptions';
 import RequestGenerator, { getRequestIdOrUrl } from './Request';
 import CookieStorage, { createCookieStorage } from './CookieStorage';
-import Hero from './Hero';
+import { Hero } from './Hero';
 import { delegate as AwaitedHandler, getAwaitedPathAsMethodArg } from './SetupAwaitedHandler';
 import CoreFrameEnvironment from './CoreFrameEnvironment';
-import Tab from './Tab';
+import { Tab } from './Tab';
 import { IMousePosition } from '../interfaces/IInteractions';
 
 const { getState, setState } = StateMachine<FrameEnvironment, IState>();
@@ -63,7 +63,7 @@ const propertyKeys: (keyof FrameEnvironment)[] = [
   'Request',
 ];
 
-export default class FrameEnvironment {
+export class FrameEnvironment {
   constructor(hero: Hero, tab: Tab, coreFrame: Promise<CoreFrameEnvironment>) {
     setState(this, {
       hero,

client/lib/FrozenFrameEnvironment.ts

@@ -24,7 +24,7 @@ import IJsPathResult from '@ulixee/hero-interfaces/IJsPathResult';
 import IAwaitedOptions from '../interfaces/IAwaitedOptions';
 import RequestGenerator, { getRequestIdOrUrl } from './Request';
 import CookieStorage, { createCookieStorage } from './CookieStorage';
-import Hero from './Hero';
+import { Hero } from './Hero';
 import CoreFrameEnvironment from './CoreFrameEnvironment';
 import FrozenTab from './FrozenTab';
 import * as AwaitedHandler from './SetupAwaitedHandler';

client/lib/FrozenTab.ts

@@ -13,7 +13,7 @@ import IJsPathResult from '@ulixee/hero-interfaces/IJsPathResult';
 import CoreTab from './CoreTab';
 import Resource, { createResource } from './Resource';
 import CookieStorage from './CookieStorage';
-import Hero from './Hero';
+import { Hero } from './Hero';
 import FrozenFrameEnvironment from './FrozenFrameEnvironment';
 
 const { getState, setState } = StateMachine<FrozenTab, IState>();

client/lib/Hero.ts

@@ -28,7 +28,6 @@ import IHeroMeta from '@ulixee/hero-interfaces/IHeroMeta';
 import IScreenshotOptions from '@ulixee/hero-interfaces/IScreenshotOptions';
 import { INodeVisibility } from '@ulixee/hero-interfaces/INodeVisibility';
 import IClientPlugin, { IClientPluginClass } from '@ulixee/hero-interfaces/IClientPlugin';
-import IHero from '@ulixee/hero-interfaces/IHero';
 import { PluginTypes } from '@ulixee/hero-interfaces/IPluginTypes';
 import requirePlugins from '@ulixee/hero-plugin-utils/lib/utils/requirePlugins';
 import filterPlugins from '@ulixee/hero-plugin-utils/lib/utils/filterPlugins';
@@ -43,14 +42,15 @@ import IInteractions, {
   IMousePosition,
   ITypeInteraction,
 } from '../interfaces/IInteractions';
-import Tab, { createTab, getCoreTab } from './Tab';
+import { Tab, createTab, getCoreTab } from './Tab';
 import IHeroCreateOptions from '../interfaces/IHeroCreateOptions';
 import ScriptInstance from './ScriptInstance';
 import AwaitedEventTarget from './AwaitedEventTarget';
 import IHeroDefaults from '../interfaces/IHeroDefaults';
 import { ICreateConnectionToCoreFn } from '../connections/ConnectionFactory';
 import DisconnectedFromCoreError from '../connections/DisconnectedFromCoreError';
-import FrameEnvironment, {
+import {
+  FrameEnvironment,
   getCoreFrameEnvironment,
   getCoreFrameEnvironmentForPosition,
 } from './FrameEnvironment';
@@ -101,13 +101,10 @@ type IClassEvents = {
   new: (heroInstance: Hero, heroCreateOptions: IHeroCreateOptions) => void;
 };
 
-export default class Hero
-  extends AwaitedEventTarget<{
-    close: () => void;
-    command: (name: string, commandId: number, args: any[]) => void;
-  }>
-  implements IHero
-{
+export class Hero extends AwaitedEventTarget<{
+  close: () => void;
+  command: (name: string, commandId: number, args: any[]) => void;
+}> {
   public static createConnectionToCore: ICreateConnectionToCoreFn;
   protected static options: IHeroDefaults = { ...DefaultOptions };
   private static emitter = new EventEmitter();
@@ -309,7 +306,7 @@ export default class Hero
   // PLUGINS
 
   public use(PluginObject: string | IClientPluginClass | { [name: string]: IPluginClass }): Hero {
-    const { clientPlugins, options } = getState(this);
+    const { clientPlugins, options, connection } = getState(this);
     const ClientPluginsById: { [id: string]: IClientPluginClass } = {};
 
     if (typeof PluginObject === 'string') {
@@ -331,6 +328,10 @@ export default class Hero
     Object.values(ClientPluginsById).forEach(ClientPlugin => {
       const clientPlugin = new ClientPlugin();
       clientPlugins.push(clientPlugin);
+      if (connection.hasConnected && clientPlugin.onHero) {
+        clientPlugin.onHero(this, connection.sendToActiveTab);
+      }
+
       options.dependencyMap[ClientPlugin.id] = ClientPlugin.coreDependencyIds || [];
     });
 

client/lib/PageState.ts

@@ -9,7 +9,7 @@ import IPageStateDefinitions, {
   IPageStateDefinitionFn,
   IStateAndAssertion,
 } from '../interfaces/IPageStateDefinitions';
-import Tab from './Tab';
+import { Tab } from './Tab';
 
 let counter = 0;
 

client/lib/Resource.ts

@@ -11,7 +11,7 @@ import ResourceRequest, { createResourceRequest } from './ResourceRequest';
 import ResourceResponse, { createResourceResponse } from './ResourceResponse';
 import { createWebsocketResource } from './WebsocketResource';
 import IWaitForResourceFilter from '../interfaces/IWaitForResourceFilter';
-import Tab, { getCoreTab } from './Tab';
+import { Tab, getCoreTab } from './Tab';
 
 const { getState, setState } = StateMachine<Resource, IState>();
 

client/lib/Tab.ts

@@ -21,16 +21,15 @@ import {
 import IScreenshotOptions from '@ulixee/hero-interfaces/IScreenshotOptions';
 import AwaitedPath from 'awaited-dom/base/AwaitedPath';
 import { INodeVisibility } from '@ulixee/hero-interfaces/INodeVisibility';
-import ITab from '@ulixee/hero-interfaces/ITab';
 import * as Util from 'util';
 import CoreTab from './CoreTab';
 import Resource, { createResource } from './Resource';
 import IWaitForResourceFilter from '../interfaces/IWaitForResourceFilter';
 import WebsocketResource from './WebsocketResource';
 import AwaitedEventTarget from './AwaitedEventTarget';
 import CookieStorage from './CookieStorage';
-import Hero, { IState as IHeroState } from './Hero';
-import FrameEnvironment from './FrameEnvironment';
+import { Hero, IState as IHeroState } from './Hero';
+import { FrameEnvironment } from './FrameEnvironment';
 import CoreFrameEnvironment from './CoreFrameEnvironment';
 import IAwaitedOptions from '../interfaces/IAwaitedOptions';
 import Dialog from './Dialog';
@@ -73,7 +72,7 @@ const propertyKeys: (keyof Tab)[] = [
   'Request',
 ];
 
-export default class Tab extends AwaitedEventTarget<IEventType> implements ITab {
+export class Tab extends AwaitedEventTarget<IEventType> {
   constructor(hero: Hero, coreTab: Promise<CoreTab>) {
     super(() => {
       return { target: coreTab };
@@ -95,7 +94,7 @@ export default class Tab extends AwaitedEventTarget<IEventType> implements ITab
     }
 
     for (const clientPlugin of heroState.getState(hero).clientPlugins) {
-      clientPlugin.onTab(hero, this, sendToTab);
+      if (clientPlugin.onTab) clientPlugin.onTab(hero, this, sendToTab);
     }
   }
 

docs/main/Plugins/ClientPlugins.md

@@ -70,14 +70,14 @@ Use this property to specify a list of core pluginIds that your ClientPlugin nee
 The following methods are all optional. Use them when you want to hook into a specific Hero flow:
 
 ### onHero<em>(hero, sendToCore)</em> *optional*
-This method is called every time a new Hero in initialized.
+This method is called every time a new Hero is initialized.
 #### **Arguments**:
 - hero `Hero`
 - sendToCore: `(toPluginId: string, ...args: any[]) => Promise<any>`
 #### **Returns** `void`
 
 ### onTab<em>(hero, tab, sendToCore)</em> *optional*
-This method is called every time a new Tab in initialized.
+This method is called every time a new Tab is initialized.
 #### **Arguments**:
 - hero `Hero`
 - tab `Tab`

examples/.gitignore

@@ -11,3 +11,4 @@
 !server.ts
 !api-server.ts
 !sessionReplay.ts
+!plugins*

examples/plugins-ExecuteJs.ts

@@ -0,0 +1,18 @@
+import Hero, { Core } from '@ulixee/hero-fullstack';
+import ExecuteJsPlugin from '@ulixee/execute-js-plugin';
+
+Core.use(ExecuteJsPlugin);
+
+(async function main() {
+  const hero = new Hero();
+  hero.use(ExecuteJsPlugin);
+
+  await hero.goto('https://ulixee.org');
+  await hero.activeTab.waitForPaintingStable();
+  const divs = await hero.executeJs(() => {
+    // @ts-ignore
+    return window.document.querySelectorAll('div').length;
+  });
+  console.log('Divs on https://ulixee.org?', divs);
+  await hero.close();
+})();

examples/plugins-HelloHero.ts

@@ -0,0 +1,19 @@
+import Hero from '@ulixee/hero-fullstack';
+import { ClientPlugin } from '@ulixee/hero-plugin-utils';
+
+export default class ClientHelloPlugin extends ClientPlugin {
+  static readonly id = 'client-hello-plugin';
+
+  async onHero(hero, sendToCore) {
+    console.log('Hello Hero %s', await hero.sessionId);
+  }
+}
+
+(async function main() {
+  const hero = new Hero();
+  hero.use(ClientHelloPlugin);
+
+  await hero.goto('https://ulixee.org');
+  await hero.activeTab.waitForPaintingStable();
+  await hero.close();
+})();

interfaces/IClientPlugin.ts

@@ -1,12 +1,12 @@
+import type { Tab } from '@ulixee/hero';
+import type { Hero } from '@ulixee/hero/lib/Hero';
 import { PluginTypes } from './IPluginTypes';
-import IHero from './IHero';
-import ITab from './ITab';
 
 export default interface IClientPlugin {
   id: string;
 
-  onHero?(hero: IHero, sendToCore: ISendToCoreFn): void;
-  onTab?(hero: IHero, tab: ITab, sendToCore: ISendToCoreFn): void;
+  onHero?(hero: Hero, sendToCore: ISendToCoreFn): void;
+  onTab?(hero: Hero, tab: Tab, sendToCore: ISendToCoreFn): void;
 }
 
 export interface IClientPluginClass {