var lesson = {
	files: [
		{
			name: "main",
			content: "import { createSignal, Suspense, Switch, Match, useTransition } from \"solid-js\";\nimport { render } from \"solid-js/web\";\nimport Child from \"./child\";\n\nimport \"./styles.css\";\n\nconst App = () => {\n  const [tab, setTab] = createSignal(0);\n  const updateTab = (index) => () => setTab(index);\n\n  return (\n    <>\n      <ul class=\"inline\">\n        <li classList={{ selected: tab() === 0 }} onClick={updateTab(0)}>\n          Uno\n        </li>\n        <li classList={{ selected: tab() === 1 }} onClick={updateTab(1)}>\n          Dos\n        </li>\n        <li classList={{ selected: tab() === 2 }} onClick={updateTab(2)}>\n          Tres\n        </li>\n      </ul>\n      <div class=\"tab\">\n        <Suspense fallback={<div class=\"loader\">Loading...</div>}>\n          <Switch>\n            <Match when={tab() === 0}>\n              <Child page=\"Uno\" />\n            </Match>\n            <Match when={tab() === 1}>\n              <Child page=\"Dos\" />\n            </Match>\n            <Match when={tab() === 2}>\n              <Child page=\"Tres\" />\n            </Match>\n          </Switch>\n        </Suspense>\n      </div>\n    </>\n  );\n};\n\nrender(App, document.getElementById(\"app\"));\n"
		},
		{
			name: "child",
			content: "import { createResource } from \"solid-js\";\n\nconst CONTENT = {\n  Uno: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`,\n  Dos: `Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?`,\n  Tres: `On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains.`\n};\n\nfunction createDelay() {\n  return new Promise((resolve) => {\n    const delay = Math.random() * 420 + 160;\n    setTimeout(() => resolve(delay), delay);\n  });\n}\n\nconst Child = (props) => {\n  const [time] = createResource(createDelay);\n\n  return (\n    <div class=\"tab-content\">\n      This content is for page \"{props.page}\" after {time()?.toFixed()}ms.\n      <p>{CONTENT[props.page]}</p>\n    </div>\n  );\n};\n\nexport default Child;\n"
		},
		{
			name: "styles",
			type: "css",
			content: "body{\n  background-color:#eee;\n}\n\n#app{\n  border-radius:3px;\n  border: 1px solid #e5e5e5;\n  margin:15px;\n  background-color:white;\n}\n\n.tab{\n  padding:25px;\n  font-family:sans-serif;\n  color:#444;\n  min-height: 400px;\n}\n\n.pending {\n  transition: color .3s;\n  transition-delay: .1s;\n  transition-timing-function: ease-in;\n  color: #aaa;\n}\n\nul.inline{\n  list-style:none;\n  padding: 0;\n  margin-bottom:0;\n  -webkit-margin-before: 0;\n  -webkit-margin-after: 0;\n  -webkit-margin-start: 0px;\n  -webkit-margin-end: 0px;\n  -webkit-padding-start: 0px;\n}\n\nul.inline li {\n  display:inline-block;\n  margin-left:0;\n  padding:10px;\n  border-bottom:2px solid #eee;\n  transition: all .5s;\n  font-family:sans-serif;\n  font-weight: 300;\n  cursor:pointer;\n  color: #aaa;\n}\n\nul.inline li.selected{\n  border-bottom:2px solid #337ab7;\n  color:#444;\n}\n\n.loader{\n  color:#aaa;\n  font-size: 16px;\n  font-weight: 600;\n  width: 80px;\n}"
		}
	]
};
var solved = {
	files: [
		{
			name: "main",
			content: "import { createSignal, Suspense, Switch, Match, useTransition } from \"solid-js\";\nimport { render } from \"solid-js/web\";\nimport Child from \"./child\";\n\nimport \"./styles.css\";\n\nconst App = () => {\n  const [tab, setTab] = createSignal(0);\n  const [pending, start] = useTransition();\n  const updateTab = (index) => () => start(() => setTab(index));\n\n  return (\n    <>\n      <ul class=\"inline\">\n        <li classList={{ selected: tab() === 0 }} onClick={updateTab(0)}>\n          Uno\n        </li>\n        <li classList={{ selected: tab() === 1 }} onClick={updateTab(1)}>\n          Dos\n        </li>\n        <li classList={{ selected: tab() === 2 }} onClick={updateTab(2)}>\n          Tres\n        </li>\n      </ul>\n      <div class=\"tab\" classList={{ pending: pending() }}>\n        <Suspense fallback={<div class=\"loader\">Loading...</div>}>\n          <Switch>\n            <Match when={tab() === 0}>\n              <Child page=\"Uno\" />\n            </Match>\n            <Match when={tab() === 1}>\n              <Child page=\"Dos\" />\n            </Match>\n            <Match when={tab() === 2}>\n              <Child page=\"Tres\" />\n            </Match>\n          </Switch>\n        </Suspense>\n      </div>\n    </>\n  );\n};\n\nrender(App, document.getElementById(\"app\"));\n"
		},
		{
			name: "child",
			content: "import { createResource } from \"solid-js\";\n\nconst CONTENT = {\n  Uno: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`,\n  Dos: `Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?`,\n  Tres: `On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains.`\n};\n\nfunction createDelay() {\n  return new Promise((resolve) => {\n    const delay = Math.random() * 420 + 160;\n    setTimeout(() => resolve(delay), delay);\n  });\n}\n\nconst Child = (props) => {\n  const [time] = createResource(createDelay);\n\n  return (\n    <div class=\"tab-content\">\n      This content is for page \"{props.page}\" after {time()?.toFixed()}ms.\n      <p>{CONTENT[props.page]}</p>\n    </div>\n  );\n};\n\nexport default Child;\n"
		},
		{
			name: "styles",
			type: "css",
			content: "body{\n  background-color:#eee;\n}\n\n#app{\n  border-radius:3px;\n  border: 1px solid #e5e5e5;\n  margin:15px;\n  background-color:white;\n}\n\n.tab{\n  padding:25px;\n  font-family:sans-serif;\n  color:#444;\n  min-height: 400px;\n}\n\n.pending {\n  transition: color .3s;\n  transition-delay: .1s;\n  transition-timing-function: ease-in;\n  color: #aaa;\n}\n\nul.inline{\n  list-style:none;\n  padding: 0;\n  margin-bottom:0;\n  -webkit-margin-before: 0;\n  -webkit-margin-after: 0;\n  -webkit-margin-start: 0px;\n  -webkit-margin-end: 0px;\n  -webkit-padding-start: 0px;\n}\n\nul.inline li {\n  display:inline-block;\n  margin-left:0;\n  padding:10px;\n  border-bottom:2px solid #eee;\n  transition: all .5s;\n  font-family:sans-serif;\n  font-weight: 300;\n  cursor:pointer;\n  color: #aaa;\n}\n\nul.inline li.selected{\n  border-bottom:2px solid #337ab7;\n  color:#444;\n}\n\n.loader{\n  color:#aaa;\n  font-size: 16px;\n  font-weight: 600;\n  width: 80px;\n}"
		}
	]
};
var markdown = "Suspense 允许我们在加载数据时显示回退内容。在初始化加载时非常有用，但在后续导航中，回退到骨架屏通常是更糟糕的用户体验。\n\n我们可以通过使用 `useTransition` 来避免回到回退状态。`useTransition` 提供了一个包装器和一个加载的指示器。包装器将所有下游更新放在一个事务中，该事务在所有异步事件完成之前不会提交。\n\n这意味着当控制流暂停时，它会在离屏渲染时继续显示当前分支。现有边界下的资源读取会被添加到过渡(transition)中。但是，任何新的嵌套 `Suspense` 组件如果在进入视图之前尚未完成加载，则会显示回退内容。\n\n请注意，当你在示例中进行导航操作时，我们不断看到内容消失回退加载占位。让我们在 App 组件中添加一个过渡。首先，我们需要替换 `updateTab` 函数。\n\n```js\nconst [pending, start] = useTransition();\nconst updateTab = (index) => () => start(() => setTab(index));\n```\n\n`useTransition` 返回一个挂起的信号指示器和一个开始过渡(transition)的方法，这两个返回值囊括了我们的状态更新。\n\n我们应该使用表示挂起状态的 Signal 在 UI 中添加一个状态指示器。可以在选项卡容器 div 上 添加一个表示挂起的 class：\n\n```js\n<div class=\"tab\" classList={{ pending: pending() }}>\n```\n\n有了这些代码，我们的标签切换应该会更加流畅。\n";
var async_transitions = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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