var lesson = {
	files: [
		{
			name: "main",
			content: "import { render } from 'solid-js/web';\nimport { createSignal, Show } from 'solid-js';\n\nfunction App() {\n  const [loggedIn, setLoggedIn] = createSignal(false);\n  const toggle = () => setLoggedIn(!loggedIn())\n  \n  return (\n    <>\n      <button onClick={toggle}>Log out</button>\n      <button onClick={toggle}>Log in</button>\n    </>\n  );\n}\n\nrender(() => <App />, document.getElementById('app'))\n"
		}
	]
};
var solved = {
	files: [
		{
			name: "main",
			content: "import { render } from 'solid-js/web';\nimport { createSignal, Show } from 'solid-js';\n\nfunction App() {\n  const [loggedIn, setLoggedIn] = createSignal(false);\n  const toggle = () => setLoggedIn(!loggedIn())\n  \n  return (\n    <Show\n      when={loggedIn()}\n      fallback={<button onClick={toggle}>Log in</button>}\n    >\n      <button onClick={toggle}>Log out</button>\n    </Show>\n  );\n}\n\nrender(() => <App />, document.getElementById('app'))\n"
		}
	]
};
var markdown = "JSX では、JavaScript を使ってテンプレート内のロジックフローを制御できます。しかし仮想 DOM がない場合、`Array.prototype.map` のようなものを単純に使用すると、更新のたびにすべての DOM ノードを無駄に再作成してしまいます。その代わりに、リアクティブライブラリではテンプレートヘルパーを使用するのが一般的です。Solid では、それらをコンポーネントでラップしています。\n\n最も基本的な制御フローは、条件分岐です。Solid のコンパイラは賢く、三項演算子（`a ? b : c`）やブーリアンの式（`a && b`）を最適に処理します。しかし、多くの場合は `<Show>` コンポーネントを使用する方がコンパクトになります。\n\n現在の状態を反映する適切なボタンだけを表示するには、JSX を次のように更新します:\n```jsx\n<Show\n  when={loggedIn()}\n  fallback={() => <button onClick={toggle}>Log in</button>}\n>\n  <button onClick={toggle}>Log out</button>\n</Show>\n```\nこの `fallback` プロパティは `else` の役割を果たし、`when` に渡された条件が `true` でない場合に表示されます。\n\nこれで、ボタンをクリックすると、期待通り交互に変化します。\n";
var flow_show = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

export { flow_show as default, lesson, markdown, solved };
