var lesson = {
	files: [
		{
			name: "main",
			content: "import { render } from \"solid-js/web\";\nimport { createSignal } from \"solid-js\";\n\nfunction Counter() {\n  const [count, setCount] = createSignal(0);\n\n  setInterval(() => setCount(count() + 1), 1000);\n\n  return <div>Count: {count()}</div>;\n}\n\nrender(() => <Counter />, document.getElementById('app'));"
		}
	]
};
var solved = {
	files: [
		{
			name: "main",
			content: "import { render } from \"solid-js/web\";\nimport { createSignal } from \"solid-js\";\n\nfunction Counter() {\n  const [count, setCount] = createSignal(0);\n  const doubleCount = () => count() * 2;\n\n  setInterval(() => setCount(count() + 1), 1000);\n\n  return <div>Count: {doubleCount()}</div>;\n}\n\nrender(() => <Counter />, document.getElementById('app'));"
		}
	]
};
var markdown = "We've seen that whenever we access a signal in JSX, it will automatically update the view when that signal changes. But the component function itself only executes once. \n\nWe can create new expressions that depend on signals by wrapping a signal in a function. A function that accesses a signal is effectively also a signal: when its wrapped signal changes it will in turn update its readers.\n\nLet's update our Counter to count by 2 by introducing a `doubleCount` function:\n\n```jsx\nconst doubleCount = () => count() * 2;\n```\n\nWe can then call `doubleCount` just like a signal in our JSX: \n```jsx\nreturn <div>Count: {doubleCount()}</div>;\n```\n\nWe call functions like these _derived signals_ because they gain their reactivity from the signal they access. They don't themselves store a value (if you create a derived signal but never call it, it will be stripped from Solid's output like any unused function) but they'll update any effects that depend on them, and they'll trigger a rerender if included in a view.";
var introduction_derived = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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