npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

one-json

v2.2.0

Published

Parse and stringify JSON just one (and support comments).

Downloads

7

Readme

Build Status Coverage

comment-json

Parse and stringify JSON with comments. It will retain comments even after saved!

  • Parse JSON strings with comments into JavaScript objects and MAINTAIN comments
    • supports comments everywhere, yes, EVERYWHERE in a JSON file, eventually 😆
    • fixes the known issue about comments inside arrays.
  • Stringify the objects into JSON strings with comments if there are

The usage of comment-json is exactly the same as the vanilla JSON object.

Why?

There are many other libraries that can deal with JSON with comments, such as json5, or strip-json-comments, but none of them can stringify the parsed object and return back a JSON string the same as the original content.

Imagine that if the user settings are saved in ${library}.json, and the user has written a lot of comments to improve readability. If the library library need to modify the user setting, such as modifying some property values and adding new fields, and if the library uses json5 to read the settings, all comments will disappear after modified which will drive people insane.

So, if you want to parse a JSON string with comments, modify it, then save it back, comment-json is your must choice!

How?

comment-json parse JSON strings with comments and save comment tokens into symbol properties.

For JSON array with comments, comment-json extends the vanilla Array object into CommentArray whose instances could handle comments changes even after a comment array is modified.

Install

$ npm i comment-json

For TypeScript developers, @types/comment-json could be used.

Usage

package.json:

{
  // package name
  "name": "comment-json"
}
const {
  parse,
  stringify,
  assign
} = require('comment-json')
const fs = require('fs')

const obj = parse(fs.readFileSync('package.json').toString())

console.log(obj.name) // comment-json

stringify(obj, null, 2)
// Will be the same as package.json, Oh yeah! 😆
// which will be very useful if we use a json file to store configurations.

parse()

parse(text, reviver? = null, remove_comments? = false)
  : object | string | number | boolean | null
  • text string The string to parse as JSON. See the JSON object for a description of JSON syntax.
  • reviver? Function() | null Default to null. It acts the same as the second parameter of JSON.parse. If a function, prescribes how the value originally produced by parsing is transformed, before being returned.
  • remove_comments? boolean = false If true, the comments won't be maintained, which is often used when we want to get a clean object.

Returns object | string | number | boolean | null corresponding to the given JSON text.

If the content is:

/**
 before-all
 */
// before-all
{ // before:foo
  // before:foo
  /* before:foo */
  "foo" /* after-prop:foo */: // after-comma:foo
  1 // after-value:foo
  // after-value:foo
  , // before:bar
  // before:bar
  "bar": [ // before:0
    // before:0
    "baz" // after-value:0
    // after-value:0
    , // before:1
    "quux"
    // after-value:1
  ] // after-value:bar
  // after-value:bar
}
// after-all
const parsed = parse(content)
console.log(parsed)

console.log(stringify(parsed, null, 2))
// 🚀 Exact as the content above! 🚀

And the result will be:

{
  // Comments before the JSON object
  [Symbol.for('before-all')]: [{
    type: 'BlockComment',
    value: '\n before-all\n ',
    inline: false
  }, {
    type: 'LineComment',
    value: ' before-all',
    inline: false
  }],
  ...

  [Symbol.for('after-prop:foo')]: [{
    type: 'BlockComment',
    value: ' after-prop:foo ',
    inline: true
  }],

  // The real value
  foo: 1,
  bar: [
    "baz",
    "quux",

    // The property of the array
    [Symbol.for('after-value:0')]: [{
      type: 'LineComment',
      value: ' after-value:0',
      inline: true
    }, ...],
    ...
  ]
}

There are EIGHT kinds of symbol properties:

// Comments before everything
Symbol.for('before-all')

// If all things inside an object or an array are comments
Symbol.for('before')

// comment tokens before
// - a property of an object
// - an item of an array
// and before the previous comma(`,`) or the opening bracket(`{` or `[`)
Symbol.for(`before:${prop}`)

// comment tokens after property key `prop` and before colon(`:`)
Symbol.for(`after-prop:${prop}`)

// comment tokens after the colon(`:`) of property `prop` and before property value
Symbol.for(`after-colon:${prop}`)

// comment tokens after
// - the value of property `prop` inside an object
// - the item of index `prop` inside an array
// and before the next key-value/item delimiter(`,`)
// or the closing bracket(`}` or `]`)
Symbol.for(`after-value:${prop}`)

// if comments after
// - the last key-value:pair of an object
// - the last item of an array
Symbol.for('after')

// Comments after everything
Symbol.for('after-all')

And the value of each symbol property is an array of CommentToken

interface CommentToken {
  type: 'BlockComment' | 'LineComment'
  // The content of the comment, including whitespaces and line breaks
  value: string
  // If the start location is the same line as the previous token,
  // then `inline` is `true`
  inline: boolean
}

Parse into an object without comments

console.log(parse(content, null, true))

And the result will be:

{
  foo: 1,
  bar: [
    "baz",
    "quux"
  ]
}

Special cases

const parsed = parse(`
// comment
1
`)

console.log(parsed === 1)
// false

If we parse a JSON of primative type with remove_comments:false, then the return value of parse() will be of object type.

The value of parsed is equivalent to:

const parsed = new Number(1)

parsed[Symbol.for('before-all')] = [{
  type: 'LineComment',
  value: ' comment',
  inline: false
}]

Which is similar for:

  • Boolean type
  • String type

For example

const parsed = parse(`
"foo" /* comment */
`)

Which is equivalent to

const parsed = new String('foo')

parsed[Symbol.for('after-all')] = [{
  type: 'BlockComment',
  value: ' comment ',
  inline: true
}]

But there is one exception:

const parsed = parse(`
// comment
null
`)

console.log(parsed === null) // true

stringify()

stringify(object: any, replacer?, space?): string

The arguments are the same as the vanilla JSON.stringify.

And it does the similar thing as the vanilla one, but also deal with extra properties and convert them into comments.

console.log(stringify(parsed, null, 2))
// Exactly the same as `content`

space

If space is not specified, or the space is an empty string, the result of stringify() will have no comments.

For the case above:

console.log(stringify(result)) // {"a":1}
console.log(stringify(result, null, 2)) // is the same as `code`

assign(target: object, source?: object, keys?: Array)

  • target object the target object
  • source? object the source object. This parameter is optional but it is silly to not pass this argument.
  • keys? Array<string> If not specified, all enumerable own properties of source will be used.

This method is used to copy the enumerable own properties and their corresponding comment symbol properties to the target object.

const parsed = parse(`{
  // This is a comment
  "foo": "bar"
}`)

const obj = assign({
  bar: 'baz'
}, parsed)

stringify(obj, null, 2)
// {
//   "bar": "baz",
//   // This is a comment
//   "foo": "bar"
// }

CommentArray

Advanced Section

All arrays of the parsed object are CommentArrays.

The constructor of CommentArray could be accessed by:

const {CommentArray} = require('comment-json')

If we modify a comment array, its comment symbol properties could be handled automatically.

const parsed = parse(`{
  "foo": [
    // bar
    "bar",
    // baz,
    "baz"
  ]
}`)

parsed.foo.unshift('qux')

stringify(parsed, null, 2)
// {
//   "foo": [
//     "qux",
//     // bar
//     "bar",
//     // baz
//     "baz"
//   ]
// }

Oh yeah! 😆

But pay attention, if you reassign the property of a comment array with a normal array, all comments will be gone:

parsed.foo = ['quux'].concat(parsed.foo)
stringify(parsed, null, 2)
// {
//   "foo": [
//     "quux",
//     "qux",
//     "bar",
//     "baz"
//   ]
// }

// Whoooops!! 😩 Comments are gone

Instead, we should:

parsed.foo = new CommentArray('quux').concat(parsed.foo)
stringify(parsed, null, 2)
// {
//   "foo": [
//     "quux",
//     "qux",
//     // bar
//     "bar",
//     // baz
//     "baz"
//   ]
// }

License

MIT