TypeScript preact.render函數代碼示例

 const readyPromise = new Promise((resolve) => {
   const el = h(nb.Notebook, {
     nbId: "default",
     onReady: resolve,
   });
   render(el, document.body);
 });

window.addEventListener("load", async() => {
  render(h(Router, null), document.body, document.body.children[0]);
  await drainExecuteQueue();
  // If we're in a testing environment...
  if (window.navigator.webdriver) {
    // rerender to make sure the dom is up to date and then output a special
    // string which is used in tools/test_browser.js.
    rerender();
    console.log("Propel onload");
  }
});

testBrowser(function notebook_NotebookRoot() {
  const mdb = enableMock();
  document.body.innerHTML = "";
  const el = h(nb.NotebookRoot, { });
  render(el, document.body);
  console.log("mdb.counts", mdb.counts);
  assert(objectsEqual(mdb.counts, {
    queryLatest: 1,
  }));
  const c = document.body.children[0];
  assert(c.className === "notebook");
});

export function mountJsx (
    selector : string,
    ComponentToMount : ComponentFactory<any>,
    additionalProps : object = {},
    context : Document|HTMLElement = document
)
{
    const elements = find(selector, context);

    for (let i = 0; i < elements.length; i++)
    {
        try
        {
            const node = elements[i];

            if (node.parentElement === null)
            {
                console.error("Can't mount on container without parent.");
                continue;
            }

            const content = (node.textContent || "").trim();
            let data = (content !== "")
                ? JSON.parse(content)
                : {};
            data = merge(data, additionalProps);

            render(
                h(ComponentToMount, data),
                node.parentElement,
                node
            );
        }
        catch (e)
        {
            console.error("Could not mount component", e);
        }
    }
}

BROWSER.ready(() => {
  loadWebFonts();

  // Create the main store and register the state to the history object
  const ga = createGoogleAnalytics('UA-12048148-1').sendPageView();
  const sendPageView = ga.sendPageView.bind(ga);
  BROWSER.history.onPopState(sendPageView);
  BROWSER.history.onPushState(sendPageView);

  const fetcher = new FetchStreamer(BROWSER);
  const metafileStore = createMetafileStore(fetcher);

  const metaHolder = BROWSER.query(
    'script[type="application/json"]'
  ) as HTMLElement;
  const metadata = inflate(metaHolder.innerHTML) as
    | MetaFileData
    | MetaFileData[];
  const meta = MetaFile.fromData(metadata);
  console.debug('Infalted meta', meta);

  // Render the main react component
  const pageProps: PageProps = {
    meta,
    metafileStore,
    fetcher,
    gistStore: new GistStore(
      fetcher,
      metafileStore,
      isValidMetaFile(meta) ? meta : null
    ),
    pkg: BROWSER.prop('pkg') as PackageJson
  };
  const el = h(Page, pageProps);
  const root = BROWSER.query('#app');
  render(el, root, root.firstElementChild);
});

 disconnectedCallback() {
   if (super.disconnectedCallback) {
     super.disconnectedCallback();
   }
   render(null, this.renderRoot, mapDom.get(this));
 }

 renderer() {
   const dom = mapDom.get(this);
   mapDom.set(this, render(this.render(), this.renderRoot, dom));
 }

export function renderPage(p: Page): void {
  render(h(p.root, null), document.body, document.body.children[0]);
}