var lesson = {
	files: [
		{
			name: "main",
			content: "import { render } from \"solid-js/web\";\nimport { onMount, onCleanup } from \"solid-js\";\n\nimport \"./style.css\";\n\nfunction App() {\n  let canvas;\n  onMount(() => {\n    const ctx = canvas.getContext(\"2d\");\n    let frame = requestAnimationFrame(loop);\n\n    function loop(t) {\n      frame = requestAnimationFrame(loop);\n\n      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);\n\n      for (let p = 0; p < imageData.data.length; p += 4) {\n        const i = p / 4;\n        const x = i % canvas.width;\n        const y = (i / canvas.height) >>> 0;\n\n        const r = 64 + (128 * x) / canvas.width + 64 * Math.sin(t / 1000);\n        const g = 64 + (128 * y) / canvas.height + 64 * Math.cos(t / 1000);\n        const b = 128;\n\n        imageData.data[p + 0] = r;\n        imageData.data[p + 1] = g;\n        imageData.data[p + 2] = b;\n        imageData.data[p + 3] = 255;\n      }\n\n      ctx.putImageData(imageData, 0, 0);\n    }\n\n    onCleanup(() => cancelAnimationFrame(frame));\n  });\n\n  return <canvas width=\"256\" height=\"256\" />;\n}\n\nrender(() => <App />, document.getElementById(\"app\"));\n"
		},
		{
			name: "style",
			type: "css",
			content: "canvas {\n  background-color: #666;\n  -webkit-mask: url(https://dev.solidjs.com/img/logo/dark-without-wordmark/logo.svg) 50% 50% no-repeat;\n  mask: url(https://dev.solidjs.com/img/logo/dark-without-wordmark/logo.svg) 50% 50% no-repeat;\n}"
		}
	]
};
var solved = {
	files: [
		{
			name: "main",
			content: "import { render } from \"solid-js/web\";\nimport { onMount, onCleanup } from \"solid-js\";\n\nimport \"./style.css\";\n\nfunction App() {\n  let canvas;\n  onMount(() => {\n    const ctx = canvas.getContext(\"2d\");\n    let frame = requestAnimationFrame(loop);\n\n    function loop(t) {\n      frame = requestAnimationFrame(loop);\n\n      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);\n\n      for (let p = 0; p < imageData.data.length; p += 4) {\n        const i = p / 4;\n        const x = i % canvas.width;\n        const y = (i / canvas.height) >>> 0;\n\n        const r = 64 + (128 * x) / canvas.width + 64 * Math.sin(t / 1000);\n        const g = 64 + (128 * y) / canvas.height + 64 * Math.cos(t / 1000);\n        const b = 128;\n\n        imageData.data[p + 0] = r;\n        imageData.data[p + 1] = g;\n        imageData.data[p + 2] = b;\n        imageData.data[p + 3] = 255;\n      }\n\n      ctx.putImageData(imageData, 0, 0);\n    }\n\n    onCleanup(() => cancelAnimationFrame(frame));\n  });\n\n  return <canvas ref={canvas} width=\"256\" height=\"256\" />;\n}\n\nrender(() => <App />, document.getElementById(\"app\"));\n"
		},
		{
			name: "style",
			type: "css",
			content: "canvas {\n  background-color: #666;\n  -webkit-mask: url(https://dev.solidjs.com/img/logo/dark-without-wordmark/logo.svg) 50% 50% no-repeat;\n  mask: url(https://dev.solidjs.com/img/logo/dark-without-wordmark/logo.svg) 50% 50% no-repeat;\n}"
		}
	]
};
var markdown = "Man kann immer die Referenz eines DOM-Elements in Solid durch Zuweisung bekommen, da das JSX echte DOM-Elemente erzeugt. Zum Beispiel:\n\n```jsx\nconst myDiv = <div>My Element</div>;\n```\n\nAllerdings ist es nützlich, nicht alle Elemente herauszubrechen und sie stattdessen in ein einzelnes JSX-Template zu packen, da dies es Solid erlaubt, die Erzeugung besser zu optimieren.\n\nStattdessen kann man die Referenz zu einem Element in Solid mit dem `ref`-Attribut bekommen. Refs sind grundsätzlich Zuweisungen wie im obigen Beispiel, die während der Erstellung, aber vor dem Einfügen ins DOM passieren. Man kann einfach eine Variable deklarieren und sie wird zugewiesen:\n\n```jsx\nlet myDiv;\n\n<div ref={myDiv}>My Element</div>\n```\n\nAlso holen wir uns eine Referenz zum Canvas und animieren es:\n\n```jsx\n<canvas ref={canvas} width=\"256\" height=\"256\" />\n```\n\nRefs können auch die Form einer Callback-Funktion annehmen. Das kann nützlich sein, um Logik einzubauen, besonders wenn man nicht erst warten muss, bis das Element eingebunden ist. Zum Beispiel:\n\n```jsx\n<div ref={el => /* mache etwas mit el... */}>My Element</div>\n```\n";
var bindings_refs = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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