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)` 인수를 사용하는 함수입니다. 여기서 `element`는 `use:` 속성이 있는 DOM 엘리먼트이고, `valueAccessor`는 속성에 할당된 값에 대한 getter 함수입니다. 함수가 스코프 내에 임포트 되면 `use:`와 함께 사용할 수 있습니다.\n\n> 중요: 변환할 컴파일러에서 `use:`를 감지하고, 함수가 스코프 내에 있어야 하므로, 스프레드 연산의 일부가 되거나 컴포넌트에 적용될 수 없습니다.\n\n예제에서는 팝업이나 모달을 닫기 위한 click-outside 동작을 하는 간단한 래퍼를 만들어 보겠습니다. 먼저 사용할 엘리먼트에 `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 };
