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 erlaubt es uns, JavaScript zu verwenden, um den logischen Ablauf in einem Template zu kontrollieren. Allerdings führt die naive Nutzung von Methoden wie `Array.prototype.map` ohne ein virtuelles DOM dazu, dass verschwenderischerweise bei jeder Aktualisierung alle DOM-Nodes neu erstellt werden. Stattdessen ist es in reaktiven Libraries gängig, Template-Helfer zu verwenden. In Solid sind diese in Komponenten verpackt.\n\nDer einfachste Kontrollfluss ist die Bedingung. Solids Compiler ist intelligent genug, um ternäre Ausdrücke (`a ? b : c`) und bool'sche Ausdrücke (`a && b`) optimal zu handhaben. Allerdings ist es häufig lesbarer, Solids `<Show>`-Komponente zu nutzen.\n\nIn dem Beispiel soll nur der Knopf gezeigt werden, der dem gegenwärtigen Zustand (ob der Nutzer eingeloggt ist) entspricht. Ändere das JSX zu:\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```\nDas `fallback`-Prop fungiert als `else` und wird angezeigt, wenn die Bedingung, die an `when` übergeben wird, keinen `true` entsprechenden Wert enthält.\n\nJetzt wird das Drücken auf den Knopf dessen Zustand wie erwartet ändern.\n";
var flow_show = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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