var lesson = {
	files: [
		{
			name: "main",
			content: "import { render } from \"solid-js/web\";\nimport { createSignal } from \"solid-js\";\n\nimport \"./style.css\";\n\nfunction App() {\n  const [pos, setPos] = createSignal({x: 0, y: 0});\n\n  function handleMouseMove(event) {\n    setPos({\n      x: event.clientX,\n      y: event.clientY\n    });\n  }\n\n  return (\n    <div>\n      The mouse position is {pos().x} x {pos().y}\n    </div>\n  );\n}\n\nrender(() => <App />, document.getElementById('app'));"
		},
		{
			name: "style",
			type: "css",
			content: "div { width: 100%; height: 100%; }"
		}
	]
};
var solved = {
	files: [
		{
			name: "main",
			content: "import { render } from \"solid-js/web\";\nimport { createSignal } from \"solid-js\";\n\nimport \"./style.css\";\n\nfunction App() {\n  const [pos, setPos] = createSignal({x: 0, y: 0});\n\n  function handleMouseMove(event) {\n    setPos({\n      x: event.clientX,\n      y: event.clientY\n    });\n  }\n\n  return (\n    <div onMouseMove={handleMouseMove}>\n      The mouse position is {pos().x} x {pos().y}\n    </div>\n  );\n}\n\nrender(() => <App />, document.getElementById('app'));"
		},
		{
			name: "style",
			type: "css",
			content: "div { width: 100%; height: 100%; }"
		}
	]
};
var markdown = "Events sind in Solid attribute mit einem `on`-Präfix. Sie werden in ein paar Dingen besonders gehandhabt. Zunächst folgen sie nicht der normalen Heuristik für Kapselung. In vielen Fällen ist es schwierig, den Unterschied zwischen einem Signal und einem Event Handler zu erkennen. Und da Events aufgerufen werden und keine Reaktivität zum AKtualisieren bruachen, werden sie ausschließlich initial gebunden. Man kann immer noch den Handler unterschiedlichen Code je nach dem gegenwärtigen Zustand der Anwendung ausführen lassen.\n\nNormale UI Events (die bubbeln und zusammengestellt sind) werden automatisch zum document delegiert. Um die Performanz des Delegierens zu verbessern, unterstützt Solid einen Array-Syntax, der den Handler mit Daten als erstes Argument aufruft, ohne zusätzliche Closures zu generieren:\n\n```jsx\nconst handler = (data, event) => /*...*/\n\n<button onClick={[handler, data]}>Click Me</button>\n```\n\nIn unserem Beispiel fügen wir einen Handler für das `mousemove` Event hinzu:\n```jsx\n<div onMouseMove={handleMouseMove}>\n  The mouse position is {pos().x} x {pos().y}\n</div>\n```\n\nAlle `on`-Bindungen sind unabhängig von Groß-/Kleinschreibung, so dass die Namen der tatsächlichen Events immer klein geschrieben werden. Beispielsweise überwacht `onMouseMove` das `mousemove`-Event. Falls etwa für ein benutzerdefiniertes Event Groß-Kleinschreibung benötigt wird oder die Event-Delegation umgangen werden soll, kann der `on:`-Namespace dazu verwendet werden um Event-Handler zu übergeben, deren Name dann nach dem Doppelpunkt kommt:\n\n```jsx\n<button on:DOMContentLoaded={() => /* Mache etwas */} >Click Me</button>\n```\n";
var bindings_events = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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