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 поддерживает кастомные директивы (`custom directives`) через суффикс `use:`. Это упрощенная форма использования `ref`, но запись через `use:` позволяет нам использовать несколько байндингов на одном элементе без конфликтов и внешне напоминает паттерны директив из других популярных библиотек. Директива `use:` отлично подходит для создания переиспользуемых паттернов поведения для элементов DOM.\n\nКастомные директивы это функции, которые принимают два аргумента: `element` и `valueAccessor`. `Element` это DOM элемент на который мы хотим повесить `use:`, а `valueAccessor` это функция-геттер (`getter function`) для значения, которое мы передаем в атрибут. Мы можем использовать  функция-директивы в любом месте в нашем JSX, достаточно просто сделать импорт и добавить её в `use:`. \n\n> Важно! Функция `use:` определяется компилятором для трансформации, поэтому импорт функции должен быть в скоупе (`scope`) и не может быть частью расширений (`spreads`) или использоваться на компонентах.\n\nВ нашем примере мы создадим простую директиву с логикой для клика за пределы компонента. Это распространенный вариант поведения для модальных или всплывающих окон (`popups`). Для начала мы должны импортировать и применить нашу директиву к элементу:\n\n```jsx\nimport clickOutside from './click-outside.tsx'\n\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 };
