import { jsx, jsxs, Fragment } from 'solid-jsx/jsx-runtime';

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    code: "code",
    blockquote: "blockquote",
    pre: "pre",
    span: "span"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.p, {
      children: ["Solid unterstützt benutzerdefinierte Direktiven im ", jsx(_components.code, {
        children: "use:"
      }), "-namespace. Das ist nur syntaktischer Zucker über ", jsx(_components.code, {
        children: "ref"
      }), ", aber durchaus nützlich insofern, dass es typischen Bindings gleicht und es mehrere solcher Bindings auf dem gleichen Element geben kann, ohne dass dies zu Konflikten führt. Das macht es zu einem besseren Werkzeug für wiederverwendbare DOM-Verhalten."]
    }), "\n", jsxs(_components.p, {
      children: ["Benutzerdefinierte Direktiven sind einfache Funktionen, die mit den Parametern ", jsx(_components.code, {
        children: "(element, valueAccessor)"
      }), " aufgerufen werden, wobei ", jsx(_components.code, {
        children: "element"
      }), " das jeweilige DOM-Element mit dem ", jsx(_components.code, {
        children: "use:"
      }), "-Attribut ist und ", jsx(_components.code, {
        children: "valueAccessor"
      }), " eine Getter-Funktion für den Wert, der an das ", jsx(_components.code, {
        children: "use:"
      }), "-Attribut übergeben wird. So lange die Funktion importiert ist, kann man sie mit ", jsx(_components.code, {
        children: "use:"
      }), " verwenden."]
    }), "\n", jsxs(_components.blockquote, {
      children: ["\n", jsxs(_components.p, {
        children: ["Wichtig: ", jsx(_components.code, {
          children: "use:"
        }), " wird vom Compiler als Transformations-Ziel erkannt und die Funktion muss dafür im Scope sein, also kann sie nicht Teil von spread-Props oder auf eine Komponente angewendet sein."]
      }), "\n"]
    }), "\n", jsxs(_components.p, {
      children: ["In diesem Beispiel machen wir einen einfachen Wrapper für ein Klick-außerhalb-Verhalten, um etwa einen Dialog zu schliessen. Zuerst müssen wir die ", jsx(_components.code, {
        children: "clickOutside"
      }), "-Direktive zu unserem Element importieren:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: ["<div ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "class"
        }), "=", jsx(_components.span, {
          className: "hljs-string",
          children: "\"modal\""
        }), " ", jsx(_components.span, {
          className: "hljs-attr",
          children: "use"
        }), ":clickOutside={", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "setShow"
        }), "(", jsx(_components.span, {
          className: "hljs-literal",
          children: "false"
        }), ")}>\n  ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Some"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Modal"
        }), "\n</div>\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["In ", jsx(_components.code, {
        children: "click-outside.tsx"
      }), " definieren wir nun unsere benutzerdefinierte Direktive. Diese Direktive erzeugt einen Klick-Handler, der an den body gebunden und am Schluss wieder aufgeräumt wird:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "export"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "default"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "function"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "clickOutside"
        }), "(", jsx(_components.span, {
          className: "hljs-params",
          children: "el, accessor"
        }), ") {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "onClick"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "e"
        }), ") => !el.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "contains"
        }), "(e.", jsx(_components.span, {
          className: "hljs-property",
          children: "target"
        }), ") && ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "accessor"
        }), "()?.();\n  ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "document"
        }), ".", jsx(_components.span, {
          className: "hljs-property",
          children: "body"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "addEventListener"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"click\""
        }), ", onClick);\n\n  ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "onCleanup"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "document"
        }), ".", jsx(_components.span, {
          className: "hljs-property",
          children: "body"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "removeEventListener"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"click\""
        }), ", onClick));\n}\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Jetzt sollte man in der Lage sein, zwischen Öffnen und Schliessen des Dialogs hin und her zu springen."
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? jsx(MDXLayout, Object.assign({}, props, {
    children: jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}

export { MDXContent as default, toc };
//# sourceMappingURL=lesson-3a74ad33.js.map
