preact#render TypeScript Examples

/**
     * Mounts an element into the dom
     * @param domNode - Node (or selector) where we will mount the payment element
     * @returns this - the payment element instance we mounted
     */
    public mount(domNode: HTMLElement | string): this {
        const node = typeof domNode === 'string' ? document.querySelector(domNode) : domNode;

        if (!node) {
            throw new Error('Component could not mount. Root node was not found.');
        }

        if (this._node) {
            throw new Error('Component is already mounted.');
        }

        this._node = node;
        this._component = this.render();

        render(this._component, node);

        if (this.props.modules && this.props.modules.analytics && !this.props.isDropin) {
            this.props.modules.analytics.send({
                containerWidth: this._node && this._node.offsetWidth,
                component: this.constructor['analyticsType'] ?? this.constructor['type'],
                flavor: 'components'
            });
        }

        return this;
    }

Countdown: NetlessApp = {
  kind: "Countdown",
  config: {
    minwidth: MIN_WIDTH,
    minheight: MIN_HEIGHT,
  },
  setup(context) {
    const box = context.getBox();

    box.mountStyles(styles);

    const storage = context.createStorage<StorageState>("state", {
      countdownSecs: 0,
      startTime: 0,
      paused: false,
    });

    render(<App context={context} storage={storage} />, box.$content);

    context.emitter.on("destroy", () => {
      render(null, box.$content);
    });
  },
}

/**
   * Mounts the Grid.js instance to the container
   * and renders the instance
   *
   * @param container
   */
  render(container: Element): this {
    if (!container) {
      log.error('Container element cannot be null', true);
    }

    if (container.childNodes.length > 0) {
      log.error(
        `The container element ${container} is not empty. Make sure the container is empty and call render() again`,
      );
      return this;
    }

    this.config.container = container;
    render(this.createElement(), container);

    return this;
  }

/**
   * Uses the existing container and tries to clear the cache
   * and re-render the existing Grid.js instance again. This is
   * useful when a new config is set/updated.
   *
   */
  forceRender(): this {
    if (!this.config || !this.config.container) {
      log.error(
        'Container is empty. Make sure you call render() before forceRender()',
        true,
      );
    }

    // clear the pipeline cache
    this.config.pipeline.clearCache();

    // TODO: not sure if it's a good idea to render a null element but I couldn't find a better way
    render(null, this.config.container);
    render(this.createElement(), this.config.container);

    return this;
  }

/**
   * 渲染图
   * @example
   * lf.render({
   *   nodes: [
   *     {
   *       id: 'node_1',
   *       type: 'rect',
   *       x: 100,
   *       y: 100
   *     },
   *     {
   *       id: 'node_2',
   *       type: 'circel',
   *       x: 300,
   *       y: 200
   *     }
   *   ],
   *   edges: [
   *     {
   *       sourceNodeId: 'node_1',
   *       targetNodeId: 'node_2',
   *       type: 'polyline'
   *     }
   *   ]
   * })
   * @param graphData 图数据
   */
  render(graphData = {}) {
    if (this.adapterIn) {
      graphData = this.adapterIn(graphData);
    }
    this.renderRawData(graphData);
  }

renderRawData(graphRawData) {
    this.graphModel.graphDataToModel(formatData(graphRawData));
    if (!this.options.isSilentMode && this.options.history !== false) {
      this.history.watch(this.graphModel);
    }
    render((
      <Graph
        getView={this.getView}
        tool={this.tool}
        options={this.options}
        dnd={this.dnd}
        snaplineModel={this.snaplineModel}
        graphModel={this.graphModel}
      />
    ), this.container);
    this.emit(EventType.GRAPH_RENDERED, this.graphModel.modelToGraphData());
  }

/**
   * 加载插件-内部方法
   */
  private installPlugin(extension) {
    if (typeof extension === 'object') {
      const { install, render: renderComponent } = extension;
      install && install.call(extension, this, LogicFlow);
      renderComponent && this.components.push(renderComponent.bind(extension));
      this.extension[extension.pluginName] = extension;
      return;
    }
    const ExtensionContructor = extension as ExtensionContractor;
    const extensionInstance = new ExtensionContructor({
      lf: this,
      LogicFlow,
    });
    extensionInstance.render && this.components.push(
      extensionInstance.render.bind(extensionInstance),
    );
    this.extension[ExtensionContructor.pluginName] = extensionInstance;
  }

/**
     * Unmounts a payment element from the DOM
     */
    public unmount(): this {
        if (this._node) {
            render(null, this._node);
        }

        return this;
    }

/**
     * Unmounts an element and mounts it again on the same node
     */
    public remount(component?): this {
        if (!this._node) {
            throw new Error('Component is not mounted.');
        }

        const newComponent = component || this.render();

        render(newComponent, this._node, null);

        return this;
    }

render(
  <Vote initialState={self.initialState} />,
  document.querySelector('.vote-container')!,
);

public onload(): void {
        const context = Object.assign({}, { component: this }, this.init);
        render(<DataviewContext.Provider value={context}>{this.element}</DataviewContext.Provider>, this.containerEl);
    }

render(<BigScreen />, document.querySelector('.big-screen-container')!);

render(<AdminTopics />, document.querySelector('.topics-container')!);

render(<Admin />, document.querySelector('.admin-container')!);

/**
   * Tries to automatically adjust the width of columns based on:
   *    - Header cell content
   *    - Cell content of the first row
   *    - Cell content of the last row
   *
   * @param config
   */
  adjustWidth(config: Config): this {
    const container: Element = config.container;
    const tableRef: RefObject<Component> = config.tableRef;
    const tempRef: RefObject<HTMLDivElement> = config.tempRef;
    const autoWidth = config.tempRef || true;

    if (!container) {
      // we can't calculate the width because the container
      // is unknown at this stage
      return this;
    }

    // pixels
    const containerWidth = container.clientWidth;

    // let's create a shadow table with the first 10 rows of the data
    // and let the browser to render the table with table-layout: auto
    // no padding, margin or border to get the minimum space required
    // to render columns. One the table is rendered and widths are known,
    // we unmount the shadow table from the DOM and set the correct width
    const shadowTable = createRef();
    let widths = {};

    if (tableRef.current && autoWidth) {
      // render a ShadowTable with the first 10 rows
      const el = h(ShadowTable, {
        tableRef: tableRef,
      });
      el.ref = shadowTable;

      render(el, tempRef.current);

      widths = shadowTable.current.widths();
    }

    for (const column of flatten(Header.tabularFormat(this.columns))) {
      // because we don't want to set the width of parent THs
      if (column.columns && column.columns.length > 0) {
        continue;
      }

      if (!column.width && autoWidth) {
        // tries to find the corresponding cell
        // from the ShadowTable and set the correct width

        if (column.id in widths) {
          // because a column can be hidden, too
          column.width = px(widths[column.id]['width']);
          column.minWidth = px(widths[column.id]['minWidth']);
        }
      } else {
        // column width is already defined
        // sets the column with based on the width of its container
        column.width = px(width(column.width, containerWidth));
      }
    }

    if (tableRef.current && autoWidth) {
      // unmount the shadow table from temp
      render(null, tempRef.current);
    }

    return this;
  }

// main entry point - calls loader and render Preact app into supplied element
loader(
    window,
    defaultConfig,
    window.document.currentScript,
    (el, config) => render(h(App, { ...config, element: el }), el));

render(
    <StoreProvider value={store}>
        <LocalisationProvider>
            <App />
        </LocalisationProvider>
    </StoreProvider>,
    (document as any).getElementById('root')
);

function createMindmap(el: HTMLElement, options?: Partial<MindmapProps>) {
  const ref = createRef<ContributionAPI>()
  render(<MindmapApp ref={ref} {...options} />, el)
  return ref
}

public render(): ComponentChild | Error {
        // render() not implemented in the element
        throw new Error('Payment method cannot be rendered.');
    }

// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
render(<App />, document.getElementById("app")!);