react-dom/server#renderToStaticMarkup TypeScript Examples

The following examples show how to use react-dom/server#renderToStaticMarkup. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: index.tsx    From ask-sdk-jsx-for-apl with Apache License 2.0 6 votes vote down vote up 
private generateStaticMarkup() {
    if (!this.directiveExists()) {
      renderToStaticMarkup(
        <ResponseBuilderCtx.Provider value={this.responseBuilder}>
          {this.doc}
        </ResponseBuilderCtx.Provider>
      );
    }
  }
Example #2
Source File: test-utils.tsx    From backstage with Apache License 2.0 6 votes vote down vote up 
/**
   * Return a fully configured and mocked TechDocs reader page within a test
   * App instance, using the given Addon(s).
   */
  build() {
    const apis: TechdocsAddonTesterApis<any[]> = [
      [techdocsApiRef, techdocsApi],
      [techdocsStorageApiRef, techdocsStorageApi],
      [searchApiRef, searchApi],
      [scmIntegrationsApiRef, scmIntegrationsApi],
      ...this.options.apis,
    ];

    const entityName = {
      namespace:
        this.options.entity?.metadata?.namespace ||
        defaultEntity.metadata.namespace,
      kind: this.options.entity?.kind || defaultEntity.kind,
      name: this.options.entity?.metadata?.name || defaultEntity.metadata.name,
    };

    techdocsApi.getTechDocsMetadata.mockReturnValue(
      this.options.metadata || { ...defaultMetadata },
    );
    techdocsApi.getEntityMetadata.mockResolvedValue(
      this.options.entity || { ...defaultEntity },
    );

    techdocsStorageApi.syncEntityDocs.mockResolvedValue('cached');
    techdocsStorageApi.getApiOrigin.mockResolvedValue(
      'https://backstage.example.com/api/techdocs',
    );
    techdocsStorageApi.getBaseUrl.mockResolvedValue(
      `https://backstage.example.com/api/techdocs/${entityName.namespace}/${entityName.kind}/${entityName.name}/${this.options.path}`,
    );
    techdocsStorageApi.getEntityDocs.mockResolvedValue(
      renderToStaticMarkup(this.options.dom || defaultDom),
    );

    const TechDocsAddonsPage = () => {
      return (
        <TestApiProvider apis={apis}>
          <FlatRoutes>
            <Route
              path="/docs/:namespace/:kind/:name/*"
              element={<TechDocsReaderPage />}
            >
              <TechDocsAddons>
                {this.addons.map((addon, index) => (
                  <Fragment key={index}>{addon}</Fragment>
                ))}
              </TechDocsAddons>
            </Route>
          </FlatRoutes>
        </TestApiProvider>
      );
    };

    return wrapInTestApp(<TechDocsAddonsPage />, {
      routeEntries: [
        `/docs/${entityName.namespace}/${entityName.kind}/${entityName.name}/${this.options.path}`,
      ],
      mountedRoutes: {
        '/docs': techdocsPlugin.routes.root,
        '/docs/:namespace/:kind/:name/*': techdocsPlugin.routes.docRoot,
        '/catalog/:namespace/:kind/:name': catalogPlugin.routes.catalogEntity,
      },
    });
  }
Example #3
Source File: parseReactBlockToBlockData.ts    From easy-email with MIT License 5 votes vote down vote up 
export function parseReactBlockToBlockData<T extends IBlockData = IBlockData>(
  node: React.ReactElement
) {
  return JSON.parse(unescape(renderToStaticMarkup(node))) as T;
}
Example #4
Source File: renderHeading.tsx    From l2beat with MIT License 5 votes vote down vote up 
export function renderHeading(level: number, title: string, id: string) {
  return renderToStaticMarkup(<Heading level={level} title={title} id={id} />)
}
Example #5
Source File: output.ts    From l2beat with MIT License 5 votes vote down vote up 
export function outputPages(pages: Page[]) {
  for (const { slug, page } of pages) {
    fsx.mkdirpSync(path.join('build', slug))
    const html = `<!DOCTYPE html>${renderToStaticMarkup(page)}`
    fsx.writeFileSync(path.join('build', slug, 'index.html'), html)
  }
}
Example #6
Source File: svgToMarkupString.ts    From rabet-extension with GNU General Public License v3.0 5 votes vote down vote up 
svgToMarkupString = (Component: FC, props: ComponentProps) =>
  `data:image/svg+xml,${encodeURIComponent(
    renderToStaticMarkup(createElement(Component, props)),
  )}`
Example #7
Source File: index.tsx    From design-system with MIT License 4 votes vote down vote up 
StoryComp = (props: {
  noHtml: boolean;
  customCode: string;
  noSandbox: boolean;
  isEmbed: boolean;
  imports: string[];
}) => {
  const { customCode, noHtml, noSandbox, isEmbed } = props;
  const { story } = getStory();
  // const comp = sp.storySource.source;
  const comp = story.originalStoryFn();
  const html = !noHtml ? beautifyHTML(renderToStaticMarkup(comp), beautifyHTMLOptions) : '';

  const [activeTab, setActiveTab] = React.useState<number>(0);
  const [jsxCode, setJsxCode] = React.useState<string>(getRawPreviewCode(customCode, comp));
  const [htmlCode, setHtmlCode] = React.useState<string>(`${html}`);
  const [isExpanded, setIsExpanded] = React.useState(isEmbed);
  const [showMore, setShowMore] = React.useState<boolean>(false);
  const [shouldShowMore, setShouldShowMore] = React.useState<boolean>(false);
  const codePanel = React.useRef<HTMLDivElement>(null);

  const importScope = props.imports;

  const renderHTMLTab = () => {
    if (!noHtml) {
      return <Tab label={'HTML'}>{renderCodeBlock(htmlCode)}</Tab>;
    }
    return <></>;
  };

  const TabsWrap = withLive<{ live?: any; activeTab: number }>(({ live, activeTab }) => {
    const { error, element: Element } = live;

    React.useEffect(() => {
      if (!error && activeTab === 1) {
        try {
          const htmlValue = beautifyHTML(renderToStaticMarkup(<Element />), beautifyHTMLOptions);
          setHtmlCode(htmlValue);
        } catch (e) {
          return;
        }
      }
    }, [activeTab]);

    React.useEffect(() => {
      if (codePanel.current?.clientHeight && codePanel.current?.clientHeight > 250) {
        setShouldShowMore(true);
      }
    }, [codePanel]);

    return null;
  });

  const onChangeCode = React.useCallback((updatedCode) => {
    setJsxCode(updatedCode);
  }, []);

  const actions = [
    {
      title: 'Edit in sandbox',
      onClick: (ev: React.MouseEvent) => {
        ev.preventDefault();
        openSandbox(jsxCode);
      },
      disabled: noSandbox,
    },
  ];

  if (!isEmbed) {
    actions.push({
      title: `${!isExpanded ? 'Show' : 'Hide'} code`,
      onClick: () => {
        setIsExpanded(!isExpanded);
      },
      disabled: false,
    });
  }

  const imports = React.useMemo(() => ({ ...DS, ...importScope }), []);

  const tabChangeHandler = (tab: number) => {
    setActiveTab(tab);
    setShouldShowMore(false);
  };

  return (
    <Card shadow={isEmbed ? 'none' : 'light'} className="overflow-hidden">
      <LiveProvider code={jsxCode} scope={imports}>
        <Canvas
          className="my-0"
          withToolbar={true}
          isExpanded={isExpanded}
          withSource={'none' as any}
          additionalActions={actions}
        >
          <LivePreview />
        </Canvas>

        <LiveError className="px-7" />

        {isExpanded && (
          <>
            <TabsWrap activeTab={activeTab} />
            <div
              ref={codePanel}
              style={{
                position: 'relative',
                marginBottom: shouldShowMore ? '24px' : '',
                height: getHeight(shouldShowMore, showMore),
              }}
              className="DocPage-editorTabs"
            >
              <TabsWrapper active={activeTab} onTabChange={tabChangeHandler}>
                <Tab label={'React'}>
                  <CopyComp
                    onClick={() => {
                      const editor = document.querySelector(
                        '.npm__react-simple-code-editor__textarea'
                      ) as HTMLTextAreaElement;
                      if (editor) copyCode(editor.value);
                    }}
                  />
                  <LiveEditor theme={vsDark} onChange={onChangeCode} />
                </Tab>
                {renderHTMLTab()}
              </TabsWrapper>
            </div>
            {shouldShowMore && (
              <ShowMoreLessButton onClick={() => setShowMore(!showMore)} text={showMore ? 'Less' : 'More'} />
            )}
          </>
        )}
      </LiveProvider>
    </Card>
  );
}