How to use @shopify/react-html - 10 common examples

logger.log(rendering);
          logger.log(resolving);
        },
        ...options,
      });
      applyToContext(ctx, networkManager);

      const immediateAsyncAssets = asyncAssetManager.used(
        AssetTiming.Immediate,
      );
      const [styles, scripts] = await Promise.all([
        assets.styles({name: 'main', asyncAssets: immediateAsyncAssets}),
        assets.scripts({name: 'main', asyncAssets: immediateAsyncAssets}),
      ]);

      const response = stream(
        
          {app}
        ,
      );

      ctx.set(Header.ContentType, 'text/html');
      ctx.body = response;
    } catch (error) {
      const errorMessage = `React server-side rendering error:\n${error.stack ||
        error.message}`;

      logger.log(errorMessage);
      ctx.status = StatusCode.InternalServerError;

      // eslint-disable-next-line no-process-env
      if (process.env.NODE_ENV === 'development') {

({value: explicitValue, children}: UniversalProviderProps) => {
      const [value = explicitValue, Serialize] = useSerialized(id);

      if (value == null) {
        throw new Error(
          `You must provide a ${id} value, or have one previously serialized.`,
        );
      }

      return (
        <>
          {children}
           value} />
        
      );
    },
  );

export function I18n({children, ...givenI18nDetails}: Props) {
  const [serialized, Serialize] = useSerialized('i18n');

  const i18nDetails: I18nDetails = {
    locale: givenI18nDetails.fallbackLocale || 'en',
    ...givenI18nDetails,
    ...(serialized ? serialized.i18nDetails : {}),
  };

  const manager = useRef(
    new I18nManager(
      i18nDetails,
      serialized ? serialized.translations : undefined,
    ),
  );

  useHtmlAttributes({lang: i18nDetails.locale});

export function GraphQLUniversalProvider({
  children,
  createClientOptions,
}: Props) {
  const [initialData, Serialize] = useSerialized('apollo');

  const [client, link] = useLazyRef<
    [
      import('apollo-client').ApolloClient,
      ReturnType
    ]
  >(() => {
    const clientOptions = createClientOptions();
    const link = createSsrExtractableLink();

    const apolloClient = new ApolloClient({
      ...clientOptions,
      link: clientOptions.link ? link.concat(clientOptions.link) : link,
      cache: initialData
        ? clientOptions.cache.restore(initialData)
        : clientOptions.cache,

export function I18nUniversalProvider({
  children,
  ...explicitI18nDetails
}: Props) {
  const [serialized, Serialize] = useSerialized('i18n');

  const i18nDetails: I18nDetails = {
    locale: explicitI18nDetails.fallbackLocale || 'en',
    ...(serialized ? serialized : {}),
    ...explicitI18nDetails,
  };

  const manager = useLazyRef(
    () =>
      new I18nManager(
        i18nDetails,
        serialized ? serialized.translations : undefined,
      ),
  ).current;

  useHtmlAttributes({lang: i18nDetails.locale});

export function GraphQL({children, createClient}: Props) {
  const [initialData, Serialize] = useSerialized('apollo');

  const [client, link] = useLazyRef<
    [
      import('apollo-client').ApolloClient,
      ReturnType
    ]
  >(() => {
    const link = createSsrExtractableLink();
    const client = createClient();
    client.link = link.concat(client.link);

    if (initialData) {
      client.cache = client.cache.restore(initialData);
    }

    return [client, link];

const [serialized, Serialize] = useSerialized('i18n');

  const i18nDetails: I18nDetails = {
    locale: givenI18nDetails.fallbackLocale || 'en',
    ...givenI18nDetails,
    ...(serialized ? serialized.i18nDetails : {}),
  };

  const manager = useRef(
    new I18nManager(
      i18nDetails,
      serialized ? serialized.translations : undefined,
    ),
  );

  useHtmlAttributes({lang: i18nDetails.locale});

  return (
    <>
      
        {children}
      
       {
          const getData = () => ({
            translations: manager.current.extract(),
            i18nDetails,
          });

          if (manager.current.loading) {
            return manager.current.resolve().then(getData);
          }

const i18nDetails: I18nDetails = {
    locale: explicitI18nDetails.fallbackLocale || 'en',
    ...(serialized ? serialized : {}),
    ...explicitI18nDetails,
  };

  const manager = useLazyRef(
    () =>
      new I18nManager(
        i18nDetails,
        serialized ? serialized.translations : undefined,
      ),
  ).current;

  useHtmlAttributes({lang: i18nDetails.locale});

  const {onError, ...primitiveI18nDetails} = i18nDetails;

  return (
    <>
      {children}
       {
          const getData = () => ({
            translations: manager.extract(),
            ...primitiveI18nDetails,
          });

          if (manager.loading) {
            return manager.resolve().then(getData);
          }

async function renderFunction(ctx: Context) {
    const logger = getLogger(ctx) || console;
    const assets = getAssets(ctx);

    const networkManager = new NetworkManager({
      headers: ctx.headers,
      cookies: ctx.request.headers.cookie || '',
    });
    const htmlManager = new HtmlManager();
    const asyncAssetManager = new AsyncAssetManager();
    const hydrationManager = new HydrationManager();

    function Providers({children}: {children: React.ReactElement}) {
      return (
        
          
            
              {children}
            
          
        
      );
    }

    try {

return async function render(ctx: RenderContext) {
    const app = renderFunction(ctx);
    const networkManager = new NetworkManager();
    const htmlManager = new HtmlManager();

    try {
      await extract(app, {
        decorate(app) {
          return (
            
              
                {app}
              
            
          );
        },
      });
    } catch (error) {
      logger.error(error);
      throw error;