Merge pull request #22 from konsumer/uipolish

Ui polish

Author: konsumer

src/index.js

@@ -384,12 +384,12 @@ export class ReaderMessage {
     return query(this, this.path, ...queries)
   }
 
-  toJS (queryMap = {}, prefix = 'f') {
-    return toJS(this, queryMap, prefix)
+  toJS (queryMap = {}, prefix = 'f', nameMap, typeMap) {
+    return toJS(this, queryMap, prefix, nameMap, typeMap)
   }
 
-  toProto (queryMap = {}, prefix = 'f') {
-    return toProto(this, queryMap, prefix, queryMap)
+  toProto (queryMap = {}, prefix = 'f', nameMap, typeMap, messageName = 'MessageRoot') {
+    return toProto(this, queryMap, prefix, nameMap, typeMap, messageName)
   }
 }
 

test/hearthstone.test.js

@@ -1,4 +1,4 @@
-// tests that show how to actually parse some real protobuf, in a practical sense
+// Show how to actually parse some real protobuf, in a practical sense
 
 /* global describe test expect */
 

test/json.test.js

@@ -1,3 +1,5 @@
+// JSON-safe values & correct output for toJS
+
 /* global test, expect, describe */
 
 import { fileURLToPath } from 'url'
@@ -46,24 +48,26 @@ const simplemap = {
 
 describe('Simple', () => {
   test('Get JSON from binary proto', () => {
-    // TODO: commented need work
-    const j = new RawProto(bytes).toJS(simplemap)
+    const j = JSON.parse(JSON.stringify(new RawProto(bytes).toJS(simplemap)))
     expect(j.double).toEqual([150])
     expect(j.float).toEqual([150])
     expect(j.int32).toEqual([150])
     expect(j.int64).toEqual([150])
     expect(j.uint32).toEqual([150])
     expect(j.uint64).toEqual([150])
-    // expect(j.sint32).toEqual([150]) // 300
-    // expect(j.sint64).toEqual([150]) // 300
     expect(j.fixed32).toEqual([150])
     expect(j.fixed64).toEqual([150])
     expect(j.sfixed32).toEqual([150])
     expect(j.sfixed64).toEqual([150])
     expect(j.bool).toEqual([true])
     expect(j.string).toEqual(['testing'])
-    expect(j.bytes).toEqual([new Uint8Array([116, 101, 115, 116, 105, 110, 103])])
+    expect(j.bytes).toEqual([{ 0: 116, 1: 101, 2: 115, 3: 116, 4: 105, 5: 110, 6: 103 }])
     expect(j.sub.enum).toEqual([2])
+
+    // TODO: these are broke
+
+    // expect(j.sint32).toEqual([150]) // 300
+    // expect(j.sint64).toEqual([150]) // 300
     // expect(j.sub.packedvarint).toEqual([[0, 1, 2, 3]])
     // expect(j.sub.packedint32).toEqual([[0, 1, 2, 3]])
     // expect(j.sub.packedint64).toEqual([[0, 1, 2, 3]])
@@ -75,12 +79,12 @@ describe('Simple', () => {
 
 describe('Hearthstone', () => {
   test('Get JSON from binary proto', () => {
-    const j = appTree.toJS({
+    const j = JSON.parse(JSON.stringify(appTree.toJS({
       id: '1.2.4.1:string',
       title: '1.2.4.5:string',
       company: '1.2.4.6:string',
       description: '1.2.4.7:string'
-    })
+    })))
     expect(j.id).toEqual(['com.blizzard.wtcg.hearthstone'])
     expect(j.title).toEqual(['Hearthstone'])
     expect(j.company).toEqual(['Blizzard Entertainment, Inc.'])

test/parsing.test.js

@@ -1,3 +1,5 @@
+// Low-level parsing, and starting with different buffer-like objects
+
 /* global test, expect, describe */
 
 import RawProto, { wireTypes, hex } from 'rawproto'

test/proto.test.js

@@ -1,3 +1,5 @@
+// Protobuf SDL generation from toProto
+
 /* global test, expect, describe */
 
 import { fileURLToPath } from 'url'

ui/src/App.jsx

@@ -5,13 +5,14 @@ import ProtoDisplay from './ProtoDisplay.jsx'
 import ErrorBoundary from './ErrorBoundary.jsx'
 import ButtonHex from './ButtonHex.jsx'
 import ButtonFieldType from './ButtonFieldType.jsx'
+import ButtonDownloadJSON from './ButtonDownloadJSON.jsx'
+import ButtonDownloadProto from './ButtonDownloadProto.jsx'
 
 function App () {
   const [fields, setFields] = useState()
   const [nameMap, setNameMap] = useState({})
   const [typeMap, setTypeMap] = useState({})
 
-
   const handleFileChange = async (e) => {
     const file = e.target.files[0]
     if (file) {
@@ -43,16 +44,20 @@ function App () {
           <div>
             <input type='file' className='mb-2 w-full file-input' onChange={handleFileChange} />
           </div>
+          {!!fields && (<ButtonDownloadJSON tree={fields} typeMap={typeMap} nameMap={nameMap} />)}
+          {!!fields && (<ButtonDownloadProto tree={fields} typeMap={typeMap} nameMap={nameMap} />)}
         </div>
 
-        <ErrorBoundary>
-          <ul className='w-full menu bg-base-200 rounded-box'>
-            <li>
-              <ProtoDisplay tree={fields} open typeMap={typeMap} nameMap={nameMap} />
-            </li>
-          </ul>
+        {!!fields && (
+          <ErrorBoundary>
+            <ul className='w-full menu bg-base-200 rounded-box'>
+              <li>
+                <ProtoDisplay tree={fields} open typeMap={typeMap} nameMap={nameMap} />
+              </li>
+            </ul>
 
-        </ErrorBoundary>
+          </ErrorBoundary>
+        )}
       </main>
       <footer className='p-5 text-center bg-neutral text-neutral-content'>
         <p>

ui/src/ButtonDownloadJSON.jsx

@@ -0,0 +1,11 @@
+export default function ButtonDownloadJSON ({ tree, prefix = 'f', typeMap, nameMap, children = 'Download JSON', className = 'btn btn-primary', filename = 'download.json' }) {
+  const handleClick = e => {
+    const d = tree.toJS(undefined, prefix, nameMap, typeMap)
+    console.log({ tree, typeMap, nameMap, json: d })
+    const u = URL.createObjectURL(new Blob([JSON.stringify(d, null, 2)], { type: 'application/json' }))
+    e.target.setAttribute('href', u)
+    setTimeout(() => URL.revokeObjectURL(u), 0)
+  }
+
+  return <a className={className} onClick={handleClick} href='#proto' download={filename}>{children}</a>
+}

ui/src/ButtonDownloadProto.jsx

@@ -0,0 +1,10 @@
+export default function ButtonDownloadProto ({ tree, prefix = 'f', typeMap, nameMap, messageName = 'MessageRoot', children = 'Download Proto', className = 'btn btn-secondary', filename = 'download.proto' }) {
+  const handleClick = e => {
+    const d = tree.toProto(undefined, prefix, nameMap, typeMap, messageName)
+    const u = URL.createObjectURL(new Blob([d], { type: 'text/plain' }))
+    e.target.setAttribute('href', u)
+    setTimeout(() => URL.revokeObjectURL(u), 0)
+  }
+
+  return <a className={className} onClick={handleClick} href='#proto' download={filename}>{children}</a>
+}

ui/src/ProtoDisplay.jsx

@@ -23,17 +23,15 @@ badgeColors[wireTypes.I64] = 'accent'
 badgeColors[wireTypes.I32] = 'secondary'
 badgeColors[wireTypes.SGROUP] = 'primary'
 
-
 const hex = (b) => [...b].map((c) => c.toString(16).padStart(2, '0')).join(' ')
 
 export default function ProtoDisplay ({ open = false, tree, typeMap = {}, nameMap = {}, className }) {
-  const [o, setO] = useState(open)
   if (tree) {
     tree.renderType = 'sub'
   }
   return tree
     ? (
-      <details open={o} className={className}>
+      <details className={className} open={open}>
         <summary>
           <div className={`badge badge-${badgeColors[tree.type]} gap-2`}>{tree.name || 'root (0)'}</div>
           <p className='text-gray-500 italic'>{parseLabels[tree.renderType]}</p>