Open Source Adventures: Episode 23: Imba 2 JSON Beautifier

• imba2-json-beautifier

  2 0 2.3 Imba

  Imba 2 JSON Beautifier

import stringify from "json-stringify-pretty-compact" tag app prop maxlen = 80 prop indent = 2 prop text = JSON.stringify({hello: "world"}) prop error def prettify try let json = JSON.parse(text) let spaces = Array.from({length: parseInt(indent)+1}).join(" ") text = stringify(json, {maxLength: parseInt(maxlen), indent: spaces}) catch e error = ""+e imba.commit() def clear_error error = null def upload(event) let file = event.target.files[0] return unless file let reader = new FileReader reader.onload = do |event| text = event.target.result error = nil imba.commit() reader.readAsText(file) "JSON Beautifier" if error error "Indent" "Max row length" "Prettify" css display: flex flex-direction: column align-items: center ff: sans header font-size: 64px text-align: center textarea min-width: 50vw margin-bottom: 10px .controls display: grid grid-row-gap: 5px margin: auto label grid-column: 1 input, button grid-column: 2 .error background-color: #fcc min-width: 50vw padding: 5px border: 1px solid #800 imba.mount

Enter fullscreen mode Exit fullscreen mode

This is a very straightforward translation.

We need to convert Error to String, as Imba 2 doesn't like putting Error objects directly in the output, but that's probably a good idea anyway.

Other than that, it's just minor syntactic changes.

By the way I wonder if any framework will ever offer good solution for the label for problem. Right now they inherently use globally scoped ids.

Source code

Source code is in imba2-json-beautifier repository.

You can also see the live version here.

Coming next

In the next episode we'll try to add Cypress tests to this app.

• InfluxDB

  www.influxdata.com featured

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

Suggest a related project