preact#render JavaScript Examples

// VSCode max file limits (https://git.io/JfAp3):
// MODEL_SYNC_LIMIT = 50 * 1024 * 1024; // 50 MB
// LARGE_FILE_SIZE_THRESHOLD = 20 * 1024 * 1024; // 20 MB;
// LARGE_FILE_LINE_COUNT_THRESHOLD = 300 * 1000; // 300K lines

/**
 * @param {import('.').AppProps["deoptInfo"]} deoptInfo
 * @param {Element} container
 */
export function renderIntoDom(deoptInfo, container) {
	render(<App deoptInfo={deoptInfo} />, container);
}

renderChallengeClosestSolution = (closestSolution, result) => {
  try {
    const solutionWrapper = document.querySelector(SELECTOR_CHALLENGE_SOLUTION_WRAPPER);

    if (solutionWrapper) {
      render(
        <IntlProvider definition={getTranslations(getUiLocale())}>
          <ClosestSolution solution={Solution.getReaderFriendlySummary(closestSolution)} result={result} />
        </IntlProvider>,
        getComponentWrapper(ClosestSolution, solutionWrapper)
      );
    } else {
      throw new Error('Could not find the solution wrapper element.');
    }
  } catch (error) {
    logError(error, 'Could not render the closest solution: ');
  }
}

renderChallengeCorrectedAnswer = (correctionDiff, result) => {
  try {
    const solutionWrapper = document.querySelector(SELECTOR_CHALLENGE_SOLUTION_WRAPPER);

    if (solutionWrapper) {
      render(
        <IntlProvider definition={getTranslations(getUiLocale())}>
          <CorrectedAnswer diffTokens={correctionDiff} result={result} />
        </IntlProvider>,
        getComponentWrapper(CorrectedAnswer, solutionWrapper)
      );
    } else {
      throw new Error('Could not find the solution wrapper element.');
    }
  } catch (error) {
    logError(error, 'Could not render the corrected answer: ');
  }
}

renderChallengeSolutionLoader = (result) => {
  try {
    const actionLinkList = document.querySelector(SELECTOR_CHALLENGE_ACTION_LINK_LIST);

    if (actionLinkList) {
      render(
        <IntlProvider definition={getTranslations(getUiLocale())}>
          <SolutionLink result={result} isLoading={true} />
        </IntlProvider>,
        getComponentWrapper(SolutionLink, actionLinkList, { display: 'inherit' })
      );
    } else {
      throw new Error('Could not find the action link list element.');
    }
  } catch (error) {
    logError(error, 'Could not render the solution list loader: ');
  }
}

renderChallengeSolutionLink = (challenge, result, userAnswer) => {
  try {
    const actionLinkList = document.querySelector(SELECTOR_CHALLENGE_ACTION_LINK_LIST);

    if (actionLinkList) {
      render(
        <IntlProvider definition={getTranslations(getUiLocale())}>
          <SolutionLink
            result={result}
            solutions={challenge.solutions}
            onClick={() => renderChallengeSolutionListModal(challenge, result, userAnswer, true).catch(noop)}
          />
        </IntlProvider>,
        getComponentWrapper(SolutionLink, actionLinkList, { display: 'inherit' })
      );
    } else {
      throw new Error('Could not find the action link list element.');
    }
  } catch (error) {
    logError(error, 'Could not render the solution list link: ');
  }
}

function createWidget(widgetParams) {
  return createMerkurWidget({
    ...widgetProperties,
    ...widgetParams,
    $dependencies: {
      render,
      hydrate,
      unmountComponentAtNode,
    },
    async mount(widget) {
      return mapViews(widget, viewFactory, ({ View, container, isSlot }) => {
        if (!container) {
          return null;
        }

        return (
          container?.children?.length && !isSlot
            ? widget.$dependencies.hydrate
            : widget.$dependencies.render
        )(View(widget), container);
      });
    },
    async unmount(widget) {
      mapViews(widget, viewFactory, ({ container }) => {
        if (container) {
          widget.$dependencies.unmountComponentAtNode(container);
        }
      });
    },
    async update(widget) {
      return mapViews(
        widget,
        viewFactory,
        ({ View, container }) =>
          container && widget.$dependencies.render(View(widget), container)
      );
    },
  });
}

render(<App />, document.getElementById('app'))

render(html` <${App} /> `, document.getElementById('app'));

// import 'todomvc-common';
// import 'todomvc-common/base.css';
// import 'todomvc-app-css/index.css';

render(<App />, document.querySelector('.todoapp'));

render(<App />, document.getElementById('app'));

describe('preset', () => {
	it('should render a preact app', () => {
		function App() {
			return <h1>foo</h1>;
		}

		const div = document.createElement('div');
		render(<App />, div);
		expect(div.textContent).toEqual('foo');
	});

	it('should have compat aliases set up', () => {
		class App extends React.Component {
			render() {
				return <h1>foo</h1>;
			}
		}

		const div = document.createElement('div');
		ReactDOM.render(<App />, div);
		expect(div.textContent).toEqual('foo');
	});

	it('should polyfill fetch()', () => {
		expect(typeof fetch).toEqual('function');
	});

	it('should work with CSS modules', () => {
		const div = document.createElement('div');
		render(<div class={style.root}>foo</div>, div);
		expect(div.firstChild.className).toEqual('root');
	});

	it('should support Fragments', () => {
		const div = document.createElement('div');
		render(<>foo</>, div);
		expect(div.textContent).toEqual('foo');
	});

	it('should support class properties', () => {
		class App extends React.Component {
			state = {
				foo: 'foo',
			};
			render() {
				return <h1>{this.state.foo}</h1>;
			}
		}

		const div = document.createElement('div');
		ReactDOM.render(<App />, div);
		expect(div.textContent).toEqual('foo');
	});
});

export function setupInstallments({ cspNonce, content } : SetupOptions) {
    render(<Page cspNonce={ cspNonce } content={ content } />, getBody());
}

render(<App />, document.querySelector('body'));

root = render(<App/>, elem, elem.firstElementChild)

function init() {
    const HellowWorld = require('./HelloWorld.jsx').default;
    root = render(<HellowWorld />, document.getElementById('preact-root'), root);
}

RenewalWidget = function(props){
  if(props.userAddress){
    const app = <App {...props} />
    render(app, document.body);  
  }
}

renderForumCommentChallenge = (commentId, challenge, userReference = '') => {
  try {
    if (forumOpWrapper?.isConnected) {
      const actionLinkList = document.querySelector(SELECTOR_FORUM_OP_ACTION_LINK_LIST);

      if (actionLinkList) {
        forumCommentChallengeWrapper = getComponentWrapper(ChallengeSolutions, forumOpWrapper);

        if (0 === forumCommentChallengeWrapper.childNodes.length) {
          // Hide the challenge on the initial rendering.
          toggleElementDisplay(forumCommentChallengeWrapper, false);
        }

        const updateUserReference = async newReference => {
          try {
            await sleep(MINIMUM_LOADING_DELAY);

            const data = await sendActionRequestToContentScript(ACTION_TYPE_UPDATE_COMMENT_CHALLENGE_USER_REFERENCE, {
              commentId,
              userReference: newReference,
            });

            if (isObject(data?.challenge) && (commentId === forumCommentId)) {
              forumCommentData = data;
              return data.challenge.solutions || [];
            }
          } catch (error) {
            error && logError(error, 'Could not update the user reference: ');
          }
        }

        render(
          <IntlProvider definition={getTranslations(getUiLocale() || challenge.fromLanguage)}>
            <ChallengeSolutions
              key={`forum-challenge-${commentId}`}
              context={CONTEXT_FORUM}
              solutions={challenge.solutions}
              matchingData={challenge.matchingData}
              userReference={userReference}
              onUserReferenceUpdate={updateUserReference}
              scrollOffsetGetter={getForumTopScrollOffset}
            />
          </IntlProvider>,
          forumCommentChallengeWrapper
        );

        render(
          <IntlProvider definition={getTranslations(getUiLocale())}>
            <SolutionLink
              context={CONTEXT_FORUM}
              solutions={challenge.solutions}
              onClick={() => toggleElementDisplay(forumCommentChallengeWrapper)}
            />
          </IntlProvider>,
          getComponentWrapper(SolutionLink, actionLinkList)
        );
      } else {
        throw new Error('Could not find the action link list element.');
      }
    }
  } catch (error) {
    logError(error, 'Could not render the solution list: ');
  }
}

renderChallengeSolutionListModal = (challenge, result, userAnswer, opened) => {
  try {
    if (isSolutionListModalToggling) {
      return Promise.reject();
    } else if (
      (isSolutionListModalDisplayed && opened)
      || (!isSolutionListModalDisplayed && !opened)
    ) {
      return Promise.resolve();
    }

    const currentResultWrapper = resultWrapper;

    const updateUserReference = async userReference => {
      try {
        renderChallengeSolutionLoader(result);

        await sleep(MINIMUM_LOADING_DELAY);

        const data = await sendActionRequestToContentScript(ACTION_TYPE_UPDATE_CURRENT_CHALLENGE_USER_REFERENCE, {
          userReference,
          key: Challenge.getUniqueKey(challenge),
        });

        if (isObject(data?.challenge) && (currentResultWrapper === resultWrapper)) {
          renderChallengeSolutionLink(data.challenge, result, data.userReference || userReference);

          if (isObject(completedChallenge)) {
            completedChallenge.userAnswer = data.userReference || userReference;
          }

          return data.challenge.solutions || [];
        }
      } catch (error) {
        renderChallengeSolutionLink(challenge, result, userAnswer);
        error && logError(error, 'Could not update the user answer: ');
      }
    };

    isSolutionListModalToggling = true;

    return new Promise(resolve => {
      const uiModalCloseButton = document.querySelector(SELECTOR_CHALLENGE_MODAL_CLOSE_BUTTON);

      if (uiModalCloseButton) {
        uiModalCloseButton.click();
        sleep(300).then(resolve);
        return;
      }

      resolve();
    }).finally(() => new Promise((resolve, reject) => {
      const onRequestClose = () => {
        if (isSolutionListModalDisplayed) {
          isSolutionListModalToggling = true;
          toggleModal(false);
        }
      }

      const onAfterOpen = () => {
        isSolutionListModalToggling = false;
        isSolutionListModalDisplayed = true;
        opened ? resolve() : reject();
      };

      const onAfterClose = () => {
        releaseHotkeysMutex();
        isSolutionListModalToggling = false;
        isSolutionListModalDisplayed = false;
        opened ? reject() : resolve();
      };

      const toggleModal = opened => render(
        <IntlProvider definition={getTranslations(getUiLocale())}>
          <Modal
            opened={opened}
            onRequestClose={onRequestClose}
            onAfterOpen={onAfterOpen}
            onAfterClose={onAfterClose}
          >
            <ChallengeSolutions
              context={CONTEXT_CHALLENGE}
              {...challenge}
              userReference={userAnswer}
              onUserReferenceUpdate={updateUserReference}
            />
          </Modal>
        </IntlProvider>,
        getComponentWrapper(Modal, document.body)
      );

      toggleModal(opened);
    }));
  } catch (error) {
    logError(error, 'Could not render the solution list modal: ');
  }
}