src/core/device/component.ts - master - igor1624/step-js

src/core/device/component.ts
193 строки4 KB
igor1624
commit
24 окт 2025, 10:42
24 окт 2025, 10:42dd993f4
import Utils from "../utils/utils";
import VirtualElement from "./virtual-element";
import {
  Store,
  StoreObserverDescriptor,
  Stores,
} from "../store/store";

// Component

class Component {
  readonly key: string;

  props: any;
  protected attributes?: Object;
  protected dataAttributes?: Object;
  state: any;
  observedKeys: ObservedKey[] = [];

  // need for jsx

  refs: any;
  context: any;

  virtualElement: VirtualElement | null = null;

  constructor(props?: any) {
    this.key = this.getKeyPrefix() + "_" + Utils.getNextKey().toString();
    this.props = props || {};

    this.callComponentWillMount();
  }

  getKeyPrefix() {
    return this.constructor.name.toLowerCase();
  }

  callComponentWillMount() {
    this.componentWillMount();
  }

  componentWillMount() {
  }

  destroy() {
    this.virtualElement = null;
    this.observedKeys = [];
  }

  setAttribute(name: string, value?: string) {
    if (!this.attributes) {
      this.attributes = {};
    }
    (this.attributes as any)[name] = value;
    this.getHTMLElement()?.setAttribute(name, value ? value : "");
  }

  getAttributeValue(name: string) {
    return (this.attributes as any)?.[name];
  }

  setDataAttribute(name: string, value: string) {
    if (!this.dataAttributes) {
      this.dataAttributes = {};
    }
    (this.dataAttributes as any)[name] = value;
    this.getHTMLElement()?.setAttribute(`data-${name}`, value);
  }

  getDataAttributeValue(name: string) {
    return (this.dataAttributes as any)?.[name];
  }

  getState() {
    return this.state;
  }

  cloneState() {
    return Object.assign({}, this.state);
  }

  setState(state: any) {
    this.state = state;
    this.forceUpdate();
  }

  createVirtualElement() {
    const renderResult = this.render();
    if (Array.isArray(renderResult)) {
      // map
      this.virtualElement = new VirtualElement(undefined, "");
      renderResult.forEach((virtualElement: VirtualElement) => {
        this.virtualElement?.append(virtualElement);
      });
    } else {
      this.virtualElement = renderResult;
      if (this.virtualElement) {
        this.virtualElement.constructedBy = this;
        this.virtualElement.key = this.key;
      }
    }
    return this.virtualElement;
  }

  attachToDOM() {
  }

  render(): any {
    return new VirtualElement(this, "div");
  }

  callComponentDidMount() {
    // remodel observers if any
    this.mountObservedShelves();
    this.componentDidMount();
  }

  mountObservedShelves() {
    if (this.observedKeys) {
      this.observedKeys.forEach((observedKey: ObservedKey) => {
        observedKey.store.startObservingKeys(this, [observedKey.key]);
      })
    }
  }

  componentDidMount() {
  }

  getHTMLElement() {
    if (this.virtualElement) {
      return this.virtualElement.getHTMLElement() as HTMLElement;
    }
    return undefined;
  }

  onObservedStorePathChanged(path: string) {
    this.forceUpdate();
  }

  forceUpdate() {
    if (this.virtualElement) {
      Component.smudgeVirtualElement(this.virtualElement);
    }
  }

  static smudgeVirtualElement: Function = (virtualElement: VirtualElement) => {
    console.dir(virtualElement);
  };

  callComponentWillUnmount() {
    this.componentWillUnmount();
    // store observers if any
    this.unmountObservedShelves();
  }

  unmountObservedShelves() {
    let observedKeys: ObservedKey[] = [];
    Stores.registeredStores.forEach((store: Store) => {
      store.storeObserverDescriptors.forEach((storeObserverDescriptor: StoreObserverDescriptor) => {
        if (!storeObserverDescriptor.component) {
          return;
        }
        if ((storeObserverDescriptor.component as any)["key"] !== this.key) {
          return;
        }
        observedKeys.push(new ObservedKey(store, storeObserverDescriptor.key));
        // detach from observed device controls
        storeObserverDescriptor.component = null;
      });
    });
    this.observedKeys = observedKeys;
  }

  componentWillUnmount() {
  }

  detachFromDOM() {
  }
}

// Observed Key

class ObservedKey {
  store: Store;
  key: string;

  constructor(store: Store, key: string) {
    this.store = store;
    this.key = key;
  }
}

export default Component;