mroe react

docs/gatsby-config.js

@@ -33,7 +33,7 @@ module.exports = {
       resolve: `gatsby-plugin-mdx`,
       options: {
         defaultLayouts: {
-          default: require.resolve("./src/components/layout.js"),
+          default: require.resolve("./src/components/layout.tsx"),
         },
       },
     },

docs/src/components/layout.tsx

@@ -5,11 +5,13 @@
  * See: https://www.gatsbyjs.org/docs/use-static-query/
  */
 
-import React from "react"
+import React, { useState } from "react"
 import PropTypes from "prop-types"
 import { useStaticQuery, graphql } from "gatsby"
+import JacdacProvider from "../jacdac/Provider"
 
 import Header from "./header"
+// tslint:disable-next-line: no-import-side-effect
 import "./layout.css"
 
 const Layout = ({ children }) => {
@@ -22,9 +24,8 @@ const Layout = ({ children }) => {
       }
     }
   `)
-
   return (
-    <>
+    <JacdacProvider>
       <Header siteTitle={data.site.siteMetadata.title} />
       <div
         style={{
@@ -35,12 +36,10 @@ const Layout = ({ children }) => {
       >
         <main>{children}</main>
         <footer>
-          © {new Date().getFullYear()}, Built with
-          {` `}
-          <a href="https://www.gatsbyjs.org">Gatsby</a>
+          © {new Date().getFullYear()} Microsoft Corporation
         </footer>
       </div>
-    </>
+    </JacdacProvider>
   )
 }
 

docs/src/jacdac/Component.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import JacdacContext from "./Context";
+import ConnectButton from "./ConnectButton"
+
+const JacdacComponent = ({ children }) => {
+    return <JacdacContext.Consumer>
+        {({ bus }) => bus ? children : <ConnectButton />}
+    </JacdacContext.Consumer>
+}
+
+export default JacdacComponent;

docs/src/jacdac/ConnectButton.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { Button } from "gatsby-theme-material-ui";
+import JacdacContext from "./Context";
+
+function ConnectButton() {
+    return <JacdacContext.Consumer>
+        {({ bus, connectAsync, disconnectAsync }) => <Button onClick={bus ? connectAsync : disconnectAsync}>{!!bus ? "disconnect" : "connect"}</Button>}
+    </JacdacContext.Consumer>
+}
+
+export default ConnectButton;

docs/src/jacdac/Provider.tsx

@@ -0,0 +1,22 @@
+import React, { useState } from "react";
+import { Bus } from "../../../src/bus";
+import { requestUSBBus } from "../../../src/hf2";
+import JacdacContext from "./Context";
+import { Helmet } from "react-helmet";
+
+const JacdacProvider = ({ children }) => {
+    const [bus, setBus] = useState<Bus>(undefined);
+    const connectAsync = () => !bus ? requestUSBBus().then(b => setBus(b)) : Promise.resolve();
+    const disconnectAsync = () => bus ? bus.disconnectAsync() : Promise.resolve();
+    return (
+        <JacdacContext.Provider value={{ bus, connectAsync, disconnectAsync }}>
+            <React.Fragment>
+                <Helmet>
+                    <script src="https://cdn.jsdelivr.net/npm/jacdac-ts" />
+                </Helmet>
+                {children}
+            </React.Fragment>
+        </JacdacContext.Provider>
+    )
+}
+export default JacdacProvider;

docs/src/jacdac/context.tsx

@@ -1,18 +1,11 @@
-import React, { useContext } from "react";
-import { Button } from "gatsby-theme-material-ui";
-import { requestUSBBus } from "../../../src/hf2";
+import React from "react";
 import { Bus } from "../../../src/bus";
 
-const JacdacContext = React.createContext({
-    bus: undefined,
-    connectAsync: () => requestUSBBus()
-});
+const JacdacContext = React.createContext<{
+    bus: Bus,
+    connectAsync: () => Promise<void>,
+    disconnectAsync: () => Promise<void>
+}>({ bus: undefined, connectAsync: undefined, disconnectAsync: undefined });
 JacdacContext.displayName = "jacdac";
 
-export function ConnectButton() {
-    return <JacdacContext.Consumer>
-        {({ bus, connectAsync }) => <Button onClick={connectAsync}>{bus ? "disconnect" : "connect"}</Button>}
-    </JacdacContext.Consumer>
-}
-
 export default JacdacContext;