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 は `use:` 名前空間を通じてカスタムディレクティブをサポートしています。これは単なる `ref` のシンタックスシュガーですが、典型的なバインディングに似ており、同じ要素に複数のバインディングがあっても衝突しないという点で有用です。これにより、再利用可能な DOM 要素の動作のための優れたツールになります。\n\nカスタムディレクティブは、`(element, valueAccesor)` という形式のシンプルな関数で、`valueAccessor` はバインディングの値を取得する関数です。この関数がスコープ内にインポートされる限り、`use:` で使用できます。\n\n> 重要: `use:` は変換されるコンパイラによって検出され、関数はスコープ内にあることが要求されるため、スプレッドの一部にしたり、コンポーネントに適用することはできません。\n\nこの例では、ポップアップやモーダルを閉じるための「外側をクリックした時の動作」のシンプルなラッパーを作成しています。まず、要素に `clickOutside` ディレクティブをインポートして使用する必要があります。\n\n```jsx\n<div class=\"modal\" use:clickOutside={() => setShow(false)}>\n  Some Modal\n</div>\n```\n\n`click-outside.tsx` を開き、ここでカスタムディレクティブを定義します。このディレクティブは、body にバインドして、時間になったらクリーンアップするクリックハンドラーを定義します。\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\nこれでモーダルを交互に開いたり閉じたりできるようになります。\n";
var bindings_directives = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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