update context example

mochi-sann · May 20, 2022 · cb50545 · cb50545
1 parent 1f55706
commit cb50545
Showing 1 changed file with 2 additions and 2 deletions.
diff --git a/public/examples/context.json b/public/examples/context.json
@@ -3,12 +3,12 @@
         {
             "name": "main",
             "type": "tsx",
-            "content": "import { render } from \"solid-js/web\";\nimport { ThemeProvider, useTheme } from \"./theme\";\n\nfunction App() {\n  const [theme, { changeColor }] = useTheme();\n\n  return (\n    <>\n      <h1\n        style={{\n          color: theme.color,\n        }}\n      >\n        {theme.title}\n      </h1>\n      <input\n        type=\"color\"\n        name=\"color\"\n        value={theme.color}\n        onInput={(e) => changeColor(e.currentTarget.value)}\n      />\n      <label for=\"color\">Change color theme</label>\n    </>\n  );\n}\n\nrender(\n  () => (\n    <ThemeProvider color=\"#335d92\" title=\"Context Example\">\n      <App />\n    </ThemeProvider>\n  ),\n  document.getElementById(\"app\")\n);\n"
+            "content": "import { render } from \"solid-js/web\";\nimport { ThemeProvider, useTheme } from \"./theme\";\n\nfunction App() {\n  const [theme, { changeColor }] = useTheme();\n\n  return (\n    <>\n      <h1\n        style={{\n          color: theme.color,\n        }}\n      >\n        {theme.title}\n      </h1>\n      <input\n        type=\"color\"\n        name=\"color\"\n        value={theme.color}\n        onInput={(e) => changeColor(e.currentTarget.value)}\n      />\n      <label for=\"color\">Change color theme</label>\n    </>\n  );\n}\n\nrender(\n  () => (\n    <ThemeProvider color=\"#335d92\" title=\"Context Example\">\n      <App />\n    </ThemeProvider>\n  ),\n  document.getElementById(\"app\")!\n);\n"
         },
         {
             "name": "theme",
             "type": "tsx",
-            "content": "import { createContext, useContext, ParentComponent } from \"solid-js\";\nimport { createStore, Store } from \"solid-js/store\";\n\nexport type ThemeContextState = Store<{\n  color: string;\n  title: string;\n}>;\nexport type ThemeContextValue = [\n  state: ThemeContextState,\n  actions: {\n    changeColor: (color: string) => void;\n  }\n];\n\nconst defaultState = {\n  color: \"#66e6ac\",\n  title: \"Fallback Title\",\n};\n\nconst ThemeContext = createContext<ThemeContextValue>([\n  defaultState,\n  {\n    changeColor: () => undefined,\n  },\n]);\n\nexport const ThemeProvider: ParentComponent<{\n  color?: string;\n  title?: string;\n}> = (props) => {\n  const [state, setState] = createStore({\n    ...defaultState,\n    ...props,\n  });\n\n  const changeColor = (color: string) => setState(\"color\", color);\n\n  return (\n    <ThemeContext.Provider value={[state, { changeColor }]}>\n      {props.children}\n    </ThemeContext.Provider>\n  );\n};\n\nexport const useTheme = () => useContext(ThemeContext);\n"
+            "content": "import { createContext, useContext, ParentComponent } from \"solid-js\";\r\nimport { createStore } from \"solid-js/store\";\r\n\r\nexport type ThemeContextState = {\r\n  readonly color: string;\r\n  readonly title: string;\r\n};\r\nexport type ThemeContextValue = [\r\n  state: ThemeContextState,\r\n  actions: {\r\n    changeColor: (color: string) => void;\r\n    changeTitle: (title: string) => void;\r\n  }\r\n];\r\n\r\nconst defaultState = {\r\n  color: \"#66e6ac\",\r\n  title: \"Fallback Title\",\r\n};\r\n\r\nconst ThemeContext = createContext<ThemeContextValue>([\r\n  defaultState,\r\n  {\r\n    changeColor: () => undefined,\r\n    changeTitle: () => undefined,\r\n  },\r\n]);\r\n\r\nexport const ThemeProvider: ParentComponent<{\r\n  color?: string;\r\n  title?: string;\r\n}> = (props) => {\r\n  const [state, setState] = createStore({\r\n    color: props.color ?? defaultState.color,\r\n    title: props.title ?? defaultState.title,\r\n  });\r\n\r\n  const changeColor = (color: string) => setState(\"color\", color);\r\n  const changeTitle = (title: string) => setState(\"title\", title);\r\n\r\n  return (\r\n    <ThemeContext.Provider value={[state, { changeColor, changeTitle }]}>\r\n      {props.children}\r\n    </ThemeContext.Provider>\r\n  );\r\n};\r\n\r\nexport const useTheme = () => useContext(ThemeContext);\r\n"
         }
     ]
 }