piouc

このプロジェクトはReact, styled-componentsで書かれた内容をrenderToStaticMarkupでphpファイルに書き出しています。

静的に出力されるためuseState, useEffectなどReactの状態を管理する関数は使えません。<script>タグを出力するためのコンポーネント<Script>がsrc/js/components/script.tsxにあります。fnに関数を渡すとDOMContentLoaded後に実行されます。scriptタグとしてfn内の内容のみ書き出されるため外側の関数や変数にアクセスすることはできません。argsを使用してReact側から引数を渡すことは可能です。
ループなどを行う際はreact内でphpで記述してください。src/js/components/php-template-parts.tsxに頻繁に利用する記述を出力するためのコンポーネントがまとまっています。
phpとして出力すればwordpressの変数、関数が利用可能です
Reactからphpへの出力はscripts/render-worker.tsで行っています。

この後の指示については上の内容を前提としてください

	(() => {
	let points = []

	const handleClick = (event) => {
	const section = event.target.closest('section')
	if (!section) return

	const rect = section.getBoundingClientRect()
	const sectionWidth = rect.width
	const x = (event.clientX - rect.left) / sectionWidth * 100

	const waitForLoad = fn => {
	if(document.readyState === 'loading'){
	document.addEventListener('DOMContentLoaded', fn)
	} else {
	fn()
	}
	}