Abstracting more markup-related thing to the new "driver" + plugin system

Also removing redundant event (there is a hook)

Author: weaverryan

src/LiveComponent/assets/src/Component/ElementDriver.ts

@@ -0,0 +1,42 @@
+import {getModelDirectiveFromElement} from '../dom_utils';
+
+export interface ElementDriver {
+    getModelName(element: HTMLElement): string|null;
+
+    /**
+     * Given the root element of a component, returns its "data".
+     *
+     * This is used during a re-render to get the fresh data from the server.
+     */
+    getComponentData(rootElement: HTMLElement): any;
+
+    getComponentProps(rootElement: HTMLElement): any;
+}
+
+export class StandardElementDriver implements ElementDriver {
+    getModelName(element: HTMLElement): string|null {
+        const modelDirective = getModelDirectiveFromElement(element, false);
+
+        if (!modelDirective) {
+            return null;
+        }
+
+        return modelDirective.action;
+    }
+
+    getComponentData(rootElement: HTMLElement): any {
+        if (!rootElement.dataset.liveDataValue) {
+            return null;
+        }
+
+        return JSON.parse(rootElement.dataset.liveDataValue as string);
+    }
+
+    getComponentProps(rootElement: HTMLElement): any {
+        if (!rootElement.dataset.livePropsValue) {
+            return null;
+        }
+
+        return JSON.parse(rootElement.dataset.livePropsValue as string);
+    }
+}

src/LiveComponent/assets/src/Component/ModelElementResolver.ts

@@ -1,18 +1,18 @@
-import {ModelElementResolver} from './ModelElementResolver';
+import {ElementDriver} from './ElementDriver';
 import {elementBelongsToThisComponent} from '../dom_utils';
 import Component from './index';
 
 export default class {
     private readonly component: Component;
-    private readonly modelElementResolver: ModelElementResolver;
+    private readonly modelElementResolver: ElementDriver;
     /** Fields that have changed, but whose value is not set back onto the value store */
     private readonly unsyncedInputs: UnsyncedInputContainer;
 
     private elementEventListeners: Array<{ event: string, callback: (event: any) => void }> = [
         { event: 'input', callback: (event) => this.handleInputEvent(event) },
     ];
 
-    constructor(component: Component, modelElementResolver: ModelElementResolver) {
+    constructor(component: Component, modelElementResolver: ElementDriver) {
         this.component = component;
         this.modelElementResolver = modelElementResolver;
         this.unsyncedInputs = new UnsyncedInputContainer();

src/LiveComponent/assets/src/Component/UnsyncedInputsTracker.ts

@@ -63,6 +63,10 @@ export default class {
     }
 
     /**
+     * Set the props to a fresh set from the server.
+     *
+     * Props can only change as a result of a parent component re-rendering.
+     *
      * Returns true if any of the props changed.
      */
     reinitializeProps(props: any): boolean {

src/LiveComponent/assets/src/Component/ValueStore.ts

@@ -7,7 +7,7 @@ import {
 } from '../dom_utils';
 import {executeMorphdom} from '../morphdom';
 import UnsyncedInputsTracker from './UnsyncedInputsTracker';
-import {ModelElementResolver} from './ModelElementResolver';
+import {ElementDriver} from './ElementDriver';
 import HookManager from '../HookManager';
 import PollingDirectory from '../PollingDirector';
 
@@ -16,6 +16,7 @@ declare const Turbo: any;
 export default class Component {
     readonly element: HTMLElement;
     private readonly backend: BackendInterface;
+    private readonly elementDriver: ElementDriver;
     id: string|null;
 
     /**
@@ -52,16 +53,17 @@ export default class Component {
      * @param fingerprint
      * @param id      Some unique id to identify this component. Needed to be a child component
      * @param backend Backend instance for updating
-     * @param modelElementResolver Class to get "model" name from any element.
+     * @param elementDriver Class to get "model" name from any element.
      */
-    constructor(element: HTMLElement, props: any, data: any, fingerprint: string|null, id: string|null, backend: BackendInterface, modelElementResolver: ModelElementResolver) {
+    constructor(element: HTMLElement, props: any, data: any, fingerprint: string|null, id: string|null, backend: BackendInterface, elementDriver: ElementDriver) {
         this.element = element;
         this.backend = backend;
+        this.elementDriver = elementDriver;
         this.id = id;
         this.fingerprint = fingerprint;
 
         this.valueStore = new ValueStore(props, data);
-        this.unsyncedInputsTracker = new UnsyncedInputsTracker(this, modelElementResolver);
+        this.unsyncedInputsTracker = new UnsyncedInputsTracker(this, elementDriver);
         this.hooks = new HookManager();
         this.pollingDirector = new PollingDirectory(this);
     }
@@ -80,10 +82,11 @@ export default class Component {
     /**
      * Add a named hook to the component. Available hooks are:
      *
-     *     * render.started: (html: string, response: Response, controls: { shouldRender: boolean }) => {}
-     *     * render.finished: (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) => {}
      */
     on(hookName: string, callback: (...args: any[]) => void): void {
         this.hooks.register(hookName, callback);
@@ -94,17 +97,7 @@ export default class Component {
         const modelName = normalizeModelName(model);
         this.valueStore.set(modelName, value);
 
-        // if there is a "validatedFields" data, it means this component wants
-        // to track which fields have been / should be validated.
-        // in that case, when the model is updated, mark that it should be validated
-        // TODO: could this be done with a hook?
-        if (this.valueStore.has('validatedFields')) {
-            const validatedFields = [...this.valueStore.get('validatedFields')];
-            if (!validatedFields.includes(modelName)) {
-                validatedFields.push(modelName);
-            }
-            this.valueStore.set('validatedFields', validatedFields);
-        }
+        this.hooks.triggerHook('model:set', model, value);
 
         // the model's data is no longer unsynced
         this.unsyncedInputsTracker.markModelAsSynced(modelName);
@@ -179,17 +172,15 @@ export default class Component {
     }
 
     updateFromNewElement(toEl: HTMLElement): boolean {
-        // TODO: need a driver here to be agnostic of markup
-        const propsString = toEl.dataset.livePropsValue;
+        const props = this.elementDriver.getComponentProps(toEl);
 
         // if no props are on the element, use the existing element completely
         // this means the parent is signaling that the child does not need to be re-rendered
-        if (propsString === undefined) {
+        if (props === null) {
             return false;
         }
 
         // push props directly down onto the value store
-        const props = JSON.parse(propsString);
         const isChanged = this.valueStore.reinitializeProps(props);
 
         const fingerprint = toEl.dataset.liveFingerprintValue;
@@ -255,7 +246,7 @@ export default class Component {
 
     private processRerender(html: string, response: Response) {
         const controls = { shouldRender: true };
-        this.hooks.triggerHook('render.started', html, response, controls);
+        this.hooks.triggerHook('render:started', html, response, controls);
         // used to notify that the component doesn't live on the page anymore
         if (!controls.shouldRender) {
             return;
@@ -277,11 +268,6 @@ export default class Component {
         // elements to appear different unnecessarily
         this.hooks.triggerHook('loading.state:finished', this.element);
 
-        if (!this.dispatchEvent('live:render', html, true, true)) {
-            // preventDefault() was called
-            return;
-        }
-
         /**
          * For any models modified since the last request started, grab
          * their value now: we will re-set them after the new data from
@@ -296,32 +282,21 @@ export default class Component {
         // normalize new element into non-loading state before diff
         this.hooks.triggerHook('loading.state:finished', newElement);
 
-        // TODO: maybe abstract where the new data comes from
-        const newDataFromServer: any = JSON.parse(newElement.dataset.liveDataValue as string);
+        this.valueStore.reinitializeData(this.elementDriver.getComponentData(newElement));
         executeMorphdom(
             this.element,
             newElement,
             this.unsyncedInputsTracker.getUnsyncedInputs(),
             (element: HTMLElement) => getValueFromElement(element, this.valueStore),
             Array.from(this.getChildren().values())
         );
-        // TODO: could possibly do this by listening to the dataValue value change
-        this.valueStore.reinitializeData(newDataFromServer);
 
         // reset the modified values back to their client-side version
         Object.keys(modifiedModelValues).forEach((modelName) => {
             this.valueStore.set(modelName, modifiedModelValues[modelName]);
         });
 
-        this.hooks.triggerHook('render.finished', this);
-    }
-
-    private dispatchEvent(name: string, payload: any = null, canBubble = true, cancelable = false) {
-        return this.element.dispatchEvent(new CustomEvent(name, {
-            bubbles: canBubble,
-            cancelable,
-            detail: payload
-        }));
+        this.hooks.triggerHook('render:finished', this);
     }
 
     private calculateDebounce(debounce: number|boolean): number {

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

@@ -2,17 +2,17 @@ import {
     Directive,
     DirectiveModifier,
     parseDirectives
-} from './directives_parser';
-import { combineSpacedArray}  from './string_utils';
-import BackendRequest from "./BackendRequest";
-import Component from "./Component";
+} from '../../directives_parser';
+import { combineSpacedArray}  from '../../string_utils';
+import BackendRequest from '../../BackendRequest';
+import Component from '../../Component';
 
 interface ElementLoadingDirectives {
     element: HTMLElement|SVGElement,
     directives: Directive[]
 }
 
-export default class LoadingHelper {
+export default class LoadingPlugin {
     attachToComponent(component: Component): void {
         component.on('loading.state:started', (element: HTMLElement, request: BackendRequest) => {
             this.startLoading(element, request);

src/LiveComponent/assets/src/LoadingHelper.ts renamed to src/LiveComponent/assets/src/Component/plugins/LoadingPlugin.ts

@@ -0,0 +1,20 @@
+import Component from '../index';
+import ValueStore from '../ValueStore';
+
+export default class ValidatedFieldsPlugin {
+    attachToComponent(component: Component): void {
+        component.on('model:set', (modelName: string) => {
+            this.handleModelSet(modelName, component.valueStore);
+        });
+    }
+
+    private handleModelSet(modelName: string, valueStore: ValueStore): void {
+        if (valueStore.has('validatedFields')) {
+            const validatedFields = [...valueStore.get('validatedFields')];
+            if (!validatedFields.includes(modelName)) {
+                validatedFields.push(modelName);
+            }
+            valueStore.set('validatedFields', validatedFields);
+        }
+    }
+}

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

@@ -11,9 +11,10 @@ import {
 import Component, {proxifyComponent} from './Component';
 import Backend from './Backend';
 import {
-    DataModelElementResolver,
-} from './Component/ModelElementResolver';
-import LoadingHelper from './LoadingHelper';
+    StandardElementDriver,
+} from './Component/ElementDriver';
+import LoadingPlugin from './Component/plugins/LoadingPlugin';
+import ValidatedFieldsPlugin from './Component/plugins/ValidatedFieldsPlugin';
 
 interface UpdateModelOptions {
     dispatch?: boolean;
@@ -78,7 +79,7 @@ export default class extends Controller<HTMLElement> implements LiveController {
             this.fingerprintValue,
             id,
             new Backend(this.urlValue, this.csrfValue),
-            new DataModelElementResolver(),
+            new StandardElementDriver(),
         );
         this.proxiedComponent = proxifyComponent(this.component);
 
@@ -89,20 +90,24 @@ export default class extends Controller<HTMLElement> implements LiveController {
             this.component.defaultDebounce = this.debounceValue;
         }
         // after we finish rendering, re-set the "value" of model fields
-        this.component.on('render.finished', () => {
+        this.component.on('render:finished', () => {
             this.synchronizeValueOfModelFields();
 
             // re-start polling, in case polling changed
+            // TODO: moving polling to plugin
             this.initializePolling();
         });
-        this.component.on('render.started', (html: string, response: Response, controls: { shouldRender: boolean }) => {
+        this.component.on('render:started', (html: string, response: Response, controls: { shouldRender: boolean }) => {
             if (!this.isConnected) {
                 controls.shouldRender = false;
             }
         });
-        const loadingHelper = new LoadingHelper();
+        const loadingHelper = new LoadingPlugin();
         loadingHelper.attachToComponent(this.component);
 
+        const validatedFieldsPlugin = new ValidatedFieldsPlugin();
+        validatedFieldsPlugin.attachToComponent(this.component);
+
         this.synchronizeValueOfModelFields();
     }
 
@@ -439,7 +444,6 @@ export default class extends Controller<HTMLElement> implements LiveController {
      * This method will set the "value" of that element to the value of
      * the "firstName" model.
      */
-    // TODO: call this when needed
     synchronizeValueOfModelFields(): void {
         this.component.element.querySelectorAll('[data-model]').forEach((element: Element) => {
             if (!(element instanceof HTMLElement)) {

src/LiveComponent/assets/src/live_controller.ts

@@ -1,8 +1,8 @@
 import Component, {proxifyComponent} from '../../src/Component';
 import {BackendAction, BackendInterface} from '../../src/Backend';
 import {
-    DataModelElementResolver
-} from '../../src/Component/ModelElementResolver';
+    StandardElementDriver
+} from '../../src/Component/ElementDriver';
 import BackendRequest from '../../src/BackendRequest';
 import { Response } from 'node-fetch';
 
@@ -34,7 +34,7 @@ describe('Component class', () => {
                 null,
                 null,
                 backend,
-                new DataModelElementResolver()
+                new StandardElementDriver()
             );
             return {
                 proxy: proxifyComponent(component),

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

@@ -10,7 +10,7 @@
 'use strict';
 
 import { shutdownTests, createTest, initComponent } from '../tools';
-import { createEvent, fireEvent, getByText, waitFor } from '@testing-library/dom';
+import { getByText, waitFor } from '@testing-library/dom';
 import userEvent from '@testing-library/user-event';
 import fetchMock from 'fetch-mock-jest';
 import { htmlToElement } from '../../src/dom_utils';