TypeScript virtualdom.h類代碼示例

 it('should update the text of a text node', () => {
   let host = document.createElement('div');
   VirtualDOM.render(h.div('foo'), host);
   let div = host.children[0];
   expect(div.textContent).to.equal('foo');
   VirtualDOM.render(h.div('bar'), host);
   expect(host.children[0]).to.equal(div);
   expect(div.textContent).to.equal('bar');
 });

      it('should connect a node to a command', () => {
        let called = false;
        const command = 'commandlinker:connect-node';
        const commands = new CommandRegistry();
        const linker = new CommandLinker({ commands });
        let node: HTMLElement;
        let vnode: VirtualNode;
        const disposable = commands.addCommand(command, {
          execute: () => {
            called = true;
          }
        });

        vnode = h.div({ dataset: linker.populateVNodeDataset(command, null) });
        node = VirtualDOM.realize(vnode);
        document.body.appendChild(node);

        expect(called).to.equal(false);
        simulate(node, 'click');
        expect(called).to.equal(true);

        document.body.removeChild(node);
        linker.dispose();
        disposable.dispose();
      });

  /**
   * Render the landing plugin to virtual DOM nodes.
   */
  protected render(): VirtualNode {
    let activitiesList: VirtualNode[] = [];
    let activites = this.model.activities;
    for (let activityName of activites) {
      let name = activityName[0];
      let command = activityName[1];
      let args = activityName[2];
      let imgName = name.replace(' ', '');
      let column = h.div({ className: LANDING_COLUMN_CLASS },
        h.span({
          className: LANDING_ICON_CLASS + ` jp-Image${imgName}` ,
          dataset: this._linker.populateVNodeDataset(command, args)
        }),
        h.span({ className: LANDING_TEXT_CLASS }, name)
      );
      activitiesList.push(column);
    }

    let logo = h.span({
      className: `${JUPYTERLAB_ICON_CLASS} ${LANDING_LOGO_CLASS}`
    });
    let subtitle = h.span(
      {className: LANDING_SUBTITLE_CLASS},
      this.model.previewMessage
    );
    let tour = h.span({
      className: TOUR_ICON_CLASS,
      dataset: this._linker.populateVNodeDataset('about-jupyterlab:open', {})
    });
    let header = h.span({
      className: LANDING_HEADER_CLASS
    }, this.model.headerText);
    let body = h.div({ className: LANDING_BODY_CLASS }, activitiesList);

    let dialog = h.div({ className: LANDING_DIALOG_CLASS },
      logo,
      subtitle,
      tour,
      header,
      body
    );
    return h.div({ className: LANDING_WRAPPER_CLASS }, dialog);
  }

 /**
  * Render the virtual element for a command palette item.
  *
  * @param data - The data to use for rendering the item.
  *
  * @returns A virtual element representing the item.
  */
 renderItem(data: CommandPalette.IItemRenderData): VirtualElement {
   let className = this.createItemClass(data);
   let dataset = this.createItemDataset(data);
   return (
     h.li({ className, dataset },
       this.renderItemIcon(data),
       this.renderItemLabel(data),
       this.renderItemShortcut(data),
       this.renderItemCaption(data)
     )
   );
 }

 /**
  * Create a button node for the dialog.
  *
  * @param button - The button data.
  *
  * @returns A node for the button.
  */
 createButtonNode(button: IButton): HTMLElement {
   let className = this.createItemClass(button);
   // We use realize here instead of creating
   // nodes with document.createElement as a
   // shorthand, and only because this is not
   // called often.
   return VirtualDOM.realize(
     h.button({ className },
           this.renderIcon(button),
           this.renderLabel(button))
   );
 }

          execute: () => {
            // Create the header of the about dialog
            let headerLogo = h.img({ src: kernelIconUrl});
            let title = h.span({className: 'jp-About-header'},
              headerLogo,
              h.div({className: 'jp-About-header-info'}, kernelName)
            );
            const banner = h.pre({}, kernelInfo.banner);
            let body = h.div({ className: 'jp-About-body' },
              banner
            );

            showDialog({
              title,
              body,
              buttons: [
                Dialog.createButton({
                  label: 'DISMISS',
                  className: 'jp-About-button jp-mod-reject jp-mod-styled'
                })
              ]
            });
          }

 builder.getStatus().then(response => {
   if (response.status === 'building') {
     return doBuild();
   }
   if (response.status !== 'needed') {
     return;
   }
   let body = h.div(
     h.p(
       'JupyterLab build is suggested:',
       h.br(),
       h.pre(response.message)
     )
   );
   showDialog({
     title: 'Build Recommended',
     body,
     buttons: [Dialog.cancelButton(), Dialog.okButton({ label: 'BUILD' })]
   }).then(result => {
     if (result.button.accept) {
       return doBuild();
     }
   });
 });