Skip to content

Commit 53a74a3

Browse files
BigBlueHatBigBlueHat
committed
Add CBOR-LD tab. Very basic info to start.
1 parent 9dea046 commit 53a74a3

File tree

4 files changed

+98
-41
lines changed

4 files changed

+98
-41
lines changed

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@
2222
"@codemirror/lint": "^6.8.5",
2323
"@codemirror/state": "^6.5.2",
2424
"@codemirror/view": "^6.36.7",
25+
"@digitalbazaar/cborld": "^8.0.0",
26+
"@rollup/plugin-commonjs": "^28.0.3",
2527
"@rollup/plugin-node-resolve": "^16.0.1",
2628
"codemirror": "^6.0.1",
2729
"petite-vue": "^0.4.1",

‎playground/next/editor.mjs‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {keymap} from '@codemirror/view';
1212
import {linter} from '@codemirror/lint';
1313
import YAML from 'yaml';
1414
import {yaml} from '@codemirror/lang-yaml';
15+
import * as cborld from '@digitalbazaar/cborld';
1516

1617
// Setup JSON-LD documentLoader
1718
const xhrDocumentLoader = jsonld.documentLoaders.xhr();
@@ -146,6 +147,13 @@ window.app = createApp({
146147
frameDoc: {},
147148
tableQuads: {},
148149
yamlLD: '',
150+
cborLD: {
151+
bytes: {},
152+
hex: '',
153+
jsonldSize: 0,
154+
size: 0,
155+
percentage: 0
156+
},
149157
remoteDocURL: '',
150158
remoteSideDocURL: '',
151159
parseError: '',
@@ -313,6 +321,28 @@ window.app = createApp({
313321
this.yamlLD = YAML.stringify(this.doc);
314322
setEditorValue(readOnlyEditor, this.yamlLD, 'yaml');
315323
break;
324+
case 'cborld':
325+
try {
326+
this.cborLD.jsonldSize = JSON.stringify(this.doc).length;
327+
this.cborLD.bytes = await cborld.encode({
328+
jsonldDocument: this.doc,
329+
documentLoader: jsonld.documentLoader,
330+
// use standard compression (set to `0` to use no compression)
331+
registryEntryId: 1
332+
});
333+
this.cborLD.size = this.cborLD.bytes.length;
334+
this.cborLD.hex = Array.from(this.cborLD.bytes, byte =>
335+
byte.toString(16).padStart(2, '0')).join('');
336+
this.cborLD.percentage =
337+
Math.floor(((this.cborLD.jsonldSize - this.cborLD.size) / this.cborLD.jsonldSize) * 100);
338+
setEditorValue(readOnlyEditor, this.cborLD.bytes, 'cbor');
339+
this.parseError = '';
340+
} catch (err) {
341+
// TODO: currently, the editor keeps it's old value...unupdated...
342+
this.parseError = err.message;
343+
console.error(err);
344+
}
345+
break;
316346
default:
317347
setEditorValue(readOnlyEditor, {});
318348
}

‎playground/next/index.html‎

Lines changed: 61 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -275,48 +275,69 @@ <h2 class="ui massive header">JSON-LD Playground</h2>
275275
<div :class="{ active: outputTab == 'canonized' }" class="item" @click="setOutputTab('canonized')"><i class="archive icon"></i> Canonized</div>
276276
<div :class="{ active: outputTab == 'table' }" class="item" @click="setOutputTab('table')"><i class="th icon"></i> Table</div>
277277
<div :class="{ active: outputTab == 'yamlld' }" class="item" @click="setOutputTab('yamlld')"><i class="th icon"></i> YAML-LD</div>
278+
<div :class="{ active: outputTab == 'cborld' }" class="item" @click="setOutputTab('cborld')"><i class="th icon"></i> CBOR-LD</div>
278279
</div>
279280
<div class="ui fitted resizable scrolling active bottom attached tab segment">
280-
<div v-show="outputTab != 'table'" id="read-only-editor"><!-- replaced by CodeMirror --></div>
281-
<table class="ui very padded table" v-show="outputTab == 'table'">
282-
<thead>
283-
<tr>
284-
<th>Subject</th>
285-
<th>Predicate</th>
286-
<th>Object</th>
287-
<th>Language</th>
288-
<th>Datatype</th>
289-
<th>Graph</th>
290-
</tr>
291-
</thead>
292-
<tr v-for="quad in tableQuads">
293-
<td>
294-
<a v-if="quad.subject.termType == 'NamedNode'"
295-
:href="quad.subject.value"
296-
v-text="quad.subject.value"></a>
297-
<span v-else v-text="quad.subject.value"></span>
298-
</td>
299-
<td>
300-
<a v-if="quad.predicate.termType == 'NamedNode'"
301-
:href="quad.predicate.value"
302-
v-text="quad.predicate.value"></a>
303-
<span v-else v-text="quad.predicate.value"></span>
304-
</td>
305-
<td>
306-
<a v-if="quad.object.termType == 'NamedNode'"
307-
:href="quad.object.value"
308-
v-text="quad.object.value"></a>
309-
<span v-else v-text="quad.object.value"></span>
310-
</td>
311-
<td v-text="quad.object.language"></td>
312-
<td>
313-
<a v-if="quad.object.datatype"
314-
:href="quad.object.datatype.value"
315-
v-text="quad.object.datatype.value"></a>
316-
</td>
317-
<td v-text="quad.graph.value"></td>
318-
</tr>
319-
</table>
281+
<div class="ui grid">
282+
<div class="column" :class="{'six wide': outputTab == 'cborld'}">
283+
<div v-show="outputTab != 'table'" id="read-only-editor"><!-- replaced by CodeMirror --></div>
284+
<table class="ui very padded table" v-show="outputTab == 'table'">
285+
<thead>
286+
<tr>
287+
<th>Subject</th>
288+
<th>Predicate</th>
289+
<th>Object</th>
290+
<th>Language</th>
291+
<th>Datatype</th>
292+
<th>Graph</th>
293+
</tr>
294+
</thead>
295+
<tr v-for="quad in tableQuads">
296+
<td>
297+
<a v-if="quad.subject.termType == 'NamedNode'"
298+
:href="quad.subject.value"
299+
v-text="quad.subject.value"></a>
300+
<span v-else v-text="quad.subject.value"></span>
301+
</td>
302+
<td>
303+
<a v-if="quad.predicate.termType == 'NamedNode'"
304+
:href="quad.predicate.value"
305+
v-text="quad.predicate.value"></a>
306+
<span v-else v-text="quad.predicate.value"></span>
307+
</td>
308+
<td>
309+
<a v-if="quad.object.termType == 'NamedNode'"
310+
:href="quad.object.value"
311+
v-text="quad.object.value"></a>
312+
<span v-else v-text="quad.object.value"></span>
313+
</td>
314+
<td v-text="quad.object.language"></td>
315+
<td>
316+
<a v-if="quad.object.datatype"
317+
:href="quad.object.datatype.value"
318+
v-text="quad.object.datatype.value"></a>
319+
</td>
320+
<td v-text="quad.graph.value"></td>
321+
</tr>
322+
</table>
323+
</div>
324+
<div class="ten wide column" v-if="outputTab == 'cborld'">
325+
<table class="ui fixed definition table">
326+
<tr>
327+
<td class="three wide">JSON-LD Size</td><td><span v-text="cborLD.jsonldSize"></span> bytes</td>
328+
</tr>
329+
<tr>
330+
<td>CBOR-LD Size</td><td><span v-text="cborLD.size"></span> bytes</td>
331+
</tr>
332+
<tr>
333+
<td>Compression</td><td><span v-text="cborLD.percentage"></span>%</td>
334+
</tr>
335+
<tr class="top aligned">
336+
<td>Hex</td><td v-text="cborLD.hex" style="word-wrap: break-word;"></td>
337+
</tr>
338+
</table>
339+
</div>
340+
</div>
320341
</div>
321342
</div>
322343

‎rollup.config.mjs‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
1+
import commonjs from "@rollup/plugin-commonjs"
12
import {nodeResolve} from "@rollup/plugin-node-resolve"
23
export default {
34
input: "./playground/next/editor.mjs",
45
output: {
56
file: "./playground/next/editor.bundle.js",
67
format: "iife"
78
},
8-
plugins: [nodeResolve()]
9+
plugins: [
10+
nodeResolve({browser: true}),
11+
commonjs()
12+
]
913
}

0 commit comments

Comments
 (0)