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 = "Solid のイベントは、属性の前に `on` が付いています。いくつかの点で特別に扱われています。まず、通常のラッピングの経験則に従いません。多くの場合、Signal とイベントハンドラーの違いを判断することは困難です。そして、イベントは呼び出され、更新するためのリアクティビティを必要としないので、最初にバインドされるだけです。アプリの現在の状態に応じてハンドラーに異なるコードを実行させることができます。\n\n一般的な UI イベント（バブルが発生して合成されるもの）は、自動的に document に委譲されます。 委譲のパフォーマンスを向上させるために、Solid は追加のクロージャを作成せずにデータ（第一引数）を使用してハンドラーを呼び出すための配列構文をサポートしています:\n\n```jsx\nconst handler = (data, event) => /*...*/\n\n<button onClick={[handler, data]}>Click Me</button>\n```\n\nこの例では、ハンドラーを `mousemove` イベントにアタッチしてみましょう:\n```jsx\n<div onMouseMove={handleMouseMove}>\n  The mouse position is {pos().x} x {pos().y}\n</div>\n```\n\nすべての `on` バインディングは大文字小文字を区別しないので、イベント名は小文字である必要があります。例えば、`onMouseMove` はイベント名 `mousemove` を監視します。大文字が入ったイベント名をサポートする必要がある場合や、イベントの委譲を使用しない場合は、名前空間 `on:` を使用してコロンの後に続くイベントハンドラーをマッチさせることができます:\n\n```jsx\n<button on:DOMContentLoaded={() => /* Do something */} >Click Me</button>\n```\n";
var bindings_events = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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