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 supports custom directives through the `use:` namespace. This is just a syntactic sugar over `ref`, but is useful in that it resembles typical bindings and there can be multiple bindings on the same element without conflict. This makes it a better tool for reusable DOM element behavior.\n\nCustom directives are simply functions taking arguments `(element, valueAccesor)` where `element` is the DOM element with the `use:` attribute and `valueAccessor` is a getter function for the value assigned to the attribute. As long as the function is imported in scope, you can use it with `use:`.\n\n> Important: `use:` is detected by the compiler to be transformed, and the function is required to be in scope, so it cannot be part of spreads or applied to a component.\n\nIn the example, we are going to make a simple wrapper for click-outside behavior to close a popup or modal. First we need to import and use our `clickOutside` directive on our element:\n\n```jsx\n<div class=\"modal\" use:clickOutside={() => setShow(false)}>\n  Some Modal\n</div>\n```\n\nOpen `click-outside.tsx`, where we will be defining our custom directive. This directive defines a click handler that we bind to the body and cleanup when it is time:\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\nNow you should be able to go back and forth between opening and closing the modal.\n";
var bindings_directives = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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