Moving more systems into plugins

making the plugin system a bit more formal

Author: weaverryan

src/LiveComponent/assets/src/Component/index.ts

@@ -7,9 +7,9 @@ import {
 } from '../dom_utils';
 import {executeMorphdom} from '../morphdom';
 import UnsyncedInputsTracker from './UnsyncedInputsTracker';
-import {ElementDriver} from './ElementDriver';
+import { ElementDriver } from './ElementDriver';
 import HookManager from '../HookManager';
-import PollingDirectory from '../PollingDirector';
+import { PluginInterface } from './plugins/PluginInterface';
 
 declare const Turbo: any;
 
@@ -31,7 +31,7 @@ export default class Component {
     readonly valueStore: ValueStore;
     private readonly unsyncedInputsTracker: UnsyncedInputsTracker;
     private hooks: HookManager;
-    private pollingDirector: PollingDirectory;
+
 
     defaultDebounce = 150;
 
@@ -65,28 +65,33 @@ export default class Component {
         this.valueStore = new ValueStore(props, data);
         this.unsyncedInputsTracker = new UnsyncedInputsTracker(this, elementDriver);
         this.hooks = new HookManager();
-        this.pollingDirector = new PollingDirectory(this);
+    }
+
+    addPlugin(plugin: PluginInterface) {
+        plugin.attachToComponent(this);
     }
 
     connect(): void {
-        this.pollingDirector.startAllPolling();
+        this.hooks.triggerHook('connect', this);
         this.unsyncedInputsTracker.activate();
     }
 
     disconnect(): void {
-        this.pollingDirector.stopAllPolling();
+        this.hooks.triggerHook('disconnect', this);
         this.clearRequestDebounceTimeout();
         this.unsyncedInputsTracker.deactivate();
     }
 
     /**
      * Add a named hook to the component. Available hooks are:
      *
+     *     * connect (component: Component) => {}
+     *     * disconnect (component: Component) => {}
      *     * render:started (html: string, response: Response, controls: { shouldRender: boolean }) => {}
      *     * render:finished (component: Component) => {}
      *     * loading.state:started (element: HTMLElement, request: BackendRequest) => {}
      *     * loading.state:finished (element: HTMLElement) => {}
-     *     * model:set (model, value) => {}
+     *     * model:set (model: string, value: any) => {}
      */
     on(hookName: string, callback: (...args: any[]) => void): void {
         this.hooks.register(hookName, callback);
@@ -137,14 +142,6 @@ export default class Component {
         return this.unsyncedInputsTracker.getModifiedModels();
     }
 
-    addPoll(actionName: string, duration: number) {
-        this.pollingDirector.addPoll(actionName, duration);
-    }
-
-    clearPolling(): void {
-        this.pollingDirector.clearPolling();
-    }
-
     addChild(component: Component): void {
         if (!component.id) {
             throw new Error('Children components must have an id.');

src/LiveComponent/assets/src/Component/plugins/LoadingPlugin.ts

@@ -6,13 +6,14 @@ import {
 import { combineSpacedArray}  from '../../string_utils';
 import BackendRequest from '../../BackendRequest';
 import Component from '../../Component';
+import { PluginInterface } from './PluginInterface';
 
 interface ElementLoadingDirectives {
     element: HTMLElement|SVGElement,
     directives: Directive[]
 }
 
-export default class LoadingPlugin {
+export default class implements PluginInterface {
     attachToComponent(component: Component): void {
         component.on('loading.state:started', (element: HTMLElement, request: BackendRequest) => {
             this.startLoading(element, request);

src/LiveComponent/assets/src/Component/plugins/PageUnloadingPlugin.ts

@@ -0,0 +1,22 @@
+import Component from '../index';
+import { PluginInterface } from './PluginInterface';
+
+export default class implements PluginInterface {
+    private isConnected = false;
+
+    attachToComponent(component: Component): void {
+        component.on('render:started', (html: string, response: Response, controls: { shouldRender: boolean }) => {
+            if (!this.isConnected) {
+                controls.shouldRender = false;
+            }
+        });
+
+        component.on('connect', () => {
+            this.isConnected = true;
+        });
+
+        component.on('disconnect', () => {
+            this.isConnected = false;
+        });
+    }
+}

src/LiveComponent/assets/src/Component/plugins/PluginInterface.ts

@@ -0,0 +1,5 @@
+import Component from '../index';
+
+export interface PluginInterface {
+    attachToComponent(component: Component): void;
+}

src/LiveComponent/assets/src/Component/plugins/PollingPlugin.ts

@@ -0,0 +1,65 @@
+import Component from '../index';
+import { parseDirectives } from '../../directives_parser';
+import PollingDirector from '../../PollingDirector';
+import { PluginInterface } from './PluginInterface';
+
+export default class implements PluginInterface {
+    private element: Element;
+    private pollingDirector: PollingDirector;
+
+    attachToComponent(component: Component): void {
+        this.element = component.element;
+        this.pollingDirector = new PollingDirector(component);
+        this.initializePolling();
+
+        component.on('connect', () => {
+            this.pollingDirector.startAllPolling();
+        });
+        component.on('disconnect', () => {
+            this.pollingDirector.stopAllPolling();
+        });
+        component.on('render:finished', () => {
+            // re-start polling, in case polling changed
+            this.initializePolling();
+        });
+    }
+
+    addPoll(actionName: string, duration: number): void {
+        this.pollingDirector.addPoll(actionName, duration);
+    }
+
+    clearPolling(): void {
+        this.pollingDirector.clearPolling();
+    }
+
+    private initializePolling(): void {
+        this.clearPolling();
+
+        if ((this.element as HTMLElement).dataset.poll === undefined) {
+            return;
+        }
+
+        const rawPollConfig = (this.element as HTMLElement).dataset.poll;
+        const directives = parseDirectives(rawPollConfig || '$render');
+
+        directives.forEach((directive) => {
+            let duration = 2000;
+
+            directive.modifiers.forEach((modifier) => {
+                switch (modifier.name) {
+                    case 'delay':
+                        if (modifier.value) {
+                            duration = parseInt(modifier.value);
+                        }
+
+                         break;
+                    default:
+                        console.warn(`Unknown modifier "${modifier.name}" in data-poll "${rawPollConfig}".`);
+                }
+            });
+
+            this.addPoll(directive.action, duration);
+        });
+    }
+}
+

src/LiveComponent/assets/src/Component/plugins/SetValueOntoModelFieldsPlugin.ts

@@ -0,0 +1,64 @@
+import Component from '../index';
+import {
+    getModelDirectiveFromElement,
+    getValueFromElement,
+    setValueOnElement
+} from '../../dom_utils';
+import { PluginInterface } from './PluginInterface';
+
+/**
+ * Handles setting the "value" onto data-model fields automatically from the data store.
+ */
+export default class implements PluginInterface {
+    attachToComponent(component: Component): void {
+        this.synchronizeValueOfModelFields(component);
+        component.on('render:finished', () => {
+            this.synchronizeValueOfModelFields(component);
+        });
+    }
+
+    /**
+     * Sets the "value" of all model fields to the component data.
+     *
+     * This is called when the component initializes and after re-render.
+     * Take the following element:
+     *
+     *      <input data-model="firstName">
+     *
+     * This method will set the "value" of that element to the value of
+     * the "firstName" model.
+     */
+    private synchronizeValueOfModelFields(component: Component): void {
+        component.element.querySelectorAll('[data-model]').forEach((element: Element) => {
+            if (!(element instanceof HTMLElement)) {
+                throw new Error('Invalid element using data-model.');
+            }
+
+            if (element instanceof HTMLFormElement) {
+                return;
+            }
+
+            const modelDirective = getModelDirectiveFromElement(element);
+            if (!modelDirective) {
+                return;
+            }
+
+            const modelName = modelDirective.action;
+
+            // skip any elements whose model name is currently in an unsynced state
+            if (component.getUnsyncedModels().includes(modelName)) {
+                return;
+            }
+
+            if (component.valueStore.has(modelName)) {
+                setValueOnElement(element, component.valueStore.get(modelName))
+            }
+
+            // for select elements without a blank value, one might be selected automatically
+            // https://github.com/symfony/ux/issues/469
+            if (element instanceof HTMLSelectElement && !element.multiple) {
+                component.valueStore.set(modelName, getValueFromElement(element, component.valueStore));
+            }
+        })
+    }
+}

src/LiveComponent/assets/src/Component/plugins/ValidatedFieldsPlugin.ts

@@ -1,7 +1,8 @@
 import Component from '../index';
 import ValueStore from '../ValueStore';
+import { PluginInterface } from './PluginInterface';
 
-export default class ValidatedFieldsPlugin {
+export default class implements PluginInterface {
     attachToComponent(component: Component): void {
         component.on('model:set', (modelName: string) => {
             this.handleModelSet(modelName, component.valueStore);

src/LiveComponent/assets/src/PollingDirector.ts

@@ -1,4 +1,4 @@
-import Component from "./Component";
+import Component from './Component';
 
 export default class {
     component: Component;