var lesson = {
	files: [
		{
			name: "main",
			content: "// @ts-nocheck\nimport { render } from \"solid-js/web\";\nimport { createSignal, Show } from \"solid-js\";\nimport clickOutside from \"./click-outside\";\nimport \"./style.css\";\n\nfunction App() {\n  const [show, setShow] = createSignal(false);\n\n  return (\n    <Show\n      when={show()}\n      fallback={<button onClick={(e) => setShow(true)}>Open Modal</button>}\n    >\n      <div class=\"modal\">\n        Some Modal\n      </div>\n    </Show>\n  );\n}\n\nrender(() => <App />, document.getElementById(\"app\"));\n"
		},
		{
			name: "click-outside",
			content: "import { onCleanup } from \"solid-js\";\n\nexport default function clickOutside(el, accessor) {\n  // implement here\n}\n"
		},
		{
			name: "style",
			type: "css",
			content: ".modal {\n  padding: 16px;\n  border: 1px solid #444;\n  box-shadow: 4px 4px #88888866;\n}"
		}
	]
};
var solved = {
	files: [
		{
			name: "main",
			content: "// @ts-nocheck\nimport { render } from \"solid-js/web\";\nimport { createSignal, Show } from \"solid-js\";\nimport clickOutside from \"./click-outside\";\nimport \"./style.css\";\n\nfunction App() {\n  const [show, setShow] = createSignal(false);\n\n  return (\n    <Show\n      when={show()}\n      fallback={<button onClick={(e) => setShow(true)}>Open Modal</button>}\n    >\n      <div class=\"modal\" use:clickOutside={() => setShow(false)}>\n        Some Modal\n      </div>\n    </Show>\n  );\n}\n\nrender(() => <App />, document.getElementById(\"app\"));\n"
		},
		{
			name: "click-outside",
			content: "import { onCleanup } from \"solid-js\";\n\nexport default function clickOutside(el, accessor) {\n  const onClick = (e) => !el.contains(e.target) && accessor()?.();\n  document.body.addEventListener(\"click\", onClick);\n\n  onCleanup(() => document.body.removeEventListener(\"click\", onClick));\n}\n"
		},
		{
			name: "style",
			type: "css",
			content: ".modal {\n  padding: 16px;\n  border: 1px solid #444;\n  box-shadow: 4px 4px #88888866;\n}"
		}
	]
};
var markdown = "Solid unterstützt benutzerdefinierte Direktiven im `use:`-namespace. Das ist nur syntaktischer Zucker über `ref`, aber durchaus nützlich insofern, dass es typischen Bindings gleicht und es mehrere solcher Bindings auf dem gleichen Element geben kann, ohne dass dies zu Konflikten führt. Das macht es zu einem besseren Werkzeug für wiederverwendbare DOM-Verhalten.\n\nBenutzerdefinierte Direktiven sind einfache Funktionen, die mit den Parametern `(element, valueAccessor)` aufgerufen werden, wobei `element` das jeweilige DOM-Element mit dem `use:`-Attribut ist und `valueAccessor` eine Getter-Funktion für den Wert, der an das `use:`-Attribut übergeben wird. So lange die Funktion importiert ist, kann man sie mit `use:` verwenden.\n\n> Wichtig: `use:` wird vom Compiler als Transformations-Ziel erkannt und die Funktion muss dafür im Scope sein, also kann sie nicht Teil von spread-Props oder auf eine Komponente angewendet sein.\n\nIn diesem Beispiel machen wir einen einfachen Wrapper für ein Klick-außerhalb-Verhalten, um etwa einen Dialog zu schliessen. Zuerst müssen wir die `clickOutside`-Direktive zu unserem Element importieren:\n\n```jsx\n<div class=\"modal\" use:clickOutside={() => setShow(false)}>\n  Some Modal\n</div>\n```\n\nIn `click-outside.tsx` definieren wir nun unsere benutzerdefinierte Direktive. Diese Direktive erzeugt einen Klick-Handler, der an den body gebunden und am Schluss wieder aufgeräumt wird:\n\n```jsx\nexport default function clickOutside(el, accessor) {\n  const onClick = (e) => !el.contains(e.target) && accessor()?.();\n  document.body.addEventListener(\"click\", onClick);\n\n  onCleanup(() => document.body.removeEventListener(\"click\", onClick));\n}\n```\n\nJetzt sollte man in der Lage sein, zwischen Öffnen und Schliessen des Dialogs hin und her zu springen.\n";
var bindings_directives = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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