feat: Refresh design, use latest ManyJs#4
Conversation
| @@ -0,0 +1 @@ | |||
| 18.12.1 | |||
There was a problem hiding this comment.
Use current Node LTS.
| buffer: require.resolve("buffer"), | ||
| stream: require.resolve("stream-browserify"), |
There was a problem hiding this comment.
The latest Webpack (5+) no longer includes Node polyfills by default, so we have to add them here. We'll need to do this in Alberto and Gwen eventually.
| config.plugins.push( | ||
| new webpack.ProvidePlugin({ | ||
| process: "process/browser", | ||
| Buffer: ["buffer", "Buffer"], |
There was a problem hiding this comment.
Tell the browser that we mean Node's Buffer if it's not defined.
| "@liftedinit/many-js": "^0.1.0-alpha.5", | ||
| "@liftedinit/ui": "github:liftedinit/lifted-ui", |
There was a problem hiding this comment.
Use the latest libraries from Lifted.
| "@liftedinit/ui": "github:liftedinit/lifted-ui", | ||
| "buffer": "^6.0.3", | ||
| "react": "^18.2.0", | ||
| "react-app-rewired": "^2.2.1", |
There was a problem hiding this comment.
React App Rewired allows us to modify Webpack (see config-overrides.js above) without ejecting from Create React App.
| </form> | ||
| </Section> | ||
| <Box bg="white" p={6}> | ||
| <Heading>Network</Heading> |
There was a problem hiding this comment.
Same thing for networks. We can eventually use the dropdown here.
| React.useEffect(() => { | ||
| async function convertMsg(msg: Msg) { | ||
| const cose = await msg?.toCoseMessage(id); | ||
| setHex(cose.toCborData().toString("hex")); | ||
| } | ||
| msg && convertMsg(msg); | ||
| }, [id, msg]); | ||
|
|
||
| React.useEffect(() => { | ||
| function hexToJson(hex: string) { | ||
| const cose = Msg.fromCborData(Buffer.from(hex, "hex")); | ||
| setJson(cose.toString()); | ||
| } | ||
| hex && hexToJson(hex); | ||
| }, [hex]); |
There was a problem hiding this comment.
You can generate a message from the form or paste hex in directly. Either way will be parsed into the JSON view and set the pending request.
| </TabPanel> | ||
| <TabPanel> | ||
| <pre style={{ whiteSpace: "pre-wrap" }}> | ||
| {res && Msg.fromCborData(Buffer.from(res, "hex")).toString()} |
There was a problem hiding this comment.
Honestly, I don't like how we're parsing the response into JSON here. I want to do something that's fully recursive so anything that looks like CBOR gets processed and replaced. But this works for now.
| @@ -1,10 +1,14 @@ | |||
| import React from "react"; | |||
| import ReactDOM from "react-dom"; | |||
| import { createRoot } from "react-dom/client"; | |||
There was a problem hiding this comment.
Now React 18 compliant.
| "resolveJsonModule": true, | ||
| "skipLibCheck": true, | ||
| "strict": true, | ||
| "target": "es2015" |
There was a problem hiding this comment.
The only change in this file is targeting es2015 instead of es5. The rest is sorting.
2 participants
Description
Kaylee is starting to be useful again, so this PR resurrects it so we can use it to diagnose network requests.
Poll network for attribute information, show status(future)Related Issue
Nothing yet, but relates to the "Allow frontends to connect to arbitrary backends by URL" story that @tysloan is still getting ready.
Screenshots (if applicable)
OLD KAYLEE
NEW KAYLEE