var lesson = {
	files: [
		{
			name: "main",
			content: "import { render } from 'solid-js/web';\nimport { createSignal, Index } from 'solid-js';\n\nfunction App() {\n  const [cats, setCats] = createSignal([\n    { id: 'J---aiyznGQ', name: 'Keyboard Cat' },\n    { id: 'z_AbfPXTKms', name: 'Maru' },\n    { id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }\n  ]);\n  \n  return (\n    <ul>\n      <li>\n        <a target=\"_blank\" href=\"\">\n          1: Garfield\n        </a>\n      </li>\n    </ul>\n  );\n}\n\nrender(() => <App />, document.getElementById('app'))\n"
		}
	]
};
var solved = {
	files: [
		{
			name: "main",
			content: "import { render } from 'solid-js/web';\nimport { createSignal, Index } from 'solid-js';\n\nfunction App() {\n  const [cats, setCats] = createSignal([\n    { id: 'J---aiyznGQ', name: 'Keyboard Cat' },\n    { id: 'z_AbfPXTKms', name: 'Maru' },\n    { id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }\n  ]);\n  \n  return (\n    <ul>\n      <Index each={cats()}>{(cat, i) =>\n        <li>\n          <a target=\"_blank\" href={`https://www.youtube.com/watch?v=${cat().id}`}>\n            {i + 1}: {cat().name}\n          </a>\n        </li>\n      }</Index>\n    </ul>\n  );\n}\n\nrender(() => <App />, document.getElementById('app'))\n"
		}
	]
};
var markdown = "Solid でリストをレンダリングするには `<For>` を使用しますが、Solid には `<Index>` コンポーネントもあり、特定の状況下で再レンダリングを少なくできます。\n\n配列が更新されたとき、`<For>` コンポーネントは参照等式を使用して、要素を配列の最後の状態と比較します。しかし、これは必ずしも望ましいとは限りません。\n\nJavaScript では、プリミティブ（文字列や数値など）は常に値で比較されます。プリミティブな値や配列の配列に対して `<For>` を使用すると、不要なレンダリングが多く発生する可能性があります。もし、`<For>` を使って、文字列のリストをそれぞれ編集可能な `<input>` フィールドにマッピングした場合、その値を変更するたび `<input>` が再作成されることになります。\n\nこのような場合のために、`<Index>` コンポーネントが用意されています。経験則では、プリミティブを扱うときには `<Index>` を使用します。\n\n```jsx\n<Index each={cats()}>{(cat, i) =>\n  <li>\n    <a target=\"_blank\" href={`https://www.youtube.com/watch?v=${cat().id}`}>\n      {i + 1}: {cat().name}\n    </a>\n  </li>\n}</Index>\n```\n\nこのシグネチャは `<For>` と似ていますが、今回はアイテムが Signal であり、インデックスが固定されています。レンダリングされた各ノードは、配列のスポットに対応します。そのスポットのデータが変更されるたびに、Signal は更新されます。\n\n`<For>` は配列の各データを扱い、そのデータの位置を変更できます。`<Index>` は配列の各インデックスを扱い、各インデックスにあるコンテンツを変更できます。\n";
var flow_index = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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