{"_id":"@beenotung/s-json","_rev":"3-ac4aafb2f030380ff7357e028f84f66c","name":"@beenotung/s-json","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.0":{"name":"@beenotung/s-json","version":"0.1.0","description":"General purpose JSON viewer and editor","keywords":["s.js","surplus","json","dev"],"author":{"name":"Beeno Tung","email":"aabbcc1241@yahoo.com.hk","url":"https://beeno-tung.surge.sh"},"license":"BSD-2-Clause","main":"index.js","types":"index.d.ts","scripts":{"clean":"rimraf dist src/*.{map,js,jsx,d.ts}","format":"prettier --write \"src/**/*.ts\"","postformat":"tslint -p . --fix","prebuild":"npm run clean","build":"run-s build:*","build:tsx":"tsc","build:jsx":"node scripts/compile-jsx","postbuild":"cp -f package.json *.md LICENSE src/","dev":"webpack -w --mode=development","prod":"webpack -p --mode=production","test":"npm run format"},"husky":{"hook":{"pre-commit":"npm run format"}},"dependencies":{"@beenotung/tslib":"^16.15.0","s-array":"^0.4.10","s-js":"^0.4.9","surplus":"^0.5.3","tslib":"^1.11.1"},"devDependencies":{"@stencil/core":"^1.12.1","@types/node":"*","husky":"^4.2.3","npm-run-all":"^4.1.5","prettier":"^2.0.2","rimraf":"^3.0.2","stencil-lib":"^0.9.2","surplus-loader":"^0.5.0","ts-loader":"^6.2.2","ts-node":"^8.8.2","tslint":"^6.1.1","tslint-config-prettier":"^1.18.0","tslint-eslint-rules":"^5.4.0","tslint-etc":"^1.10.1","typescript":"^3.8.3","webpack":"^4.42.1","webpack-cli":"^3.3.10"},"_id":"@beenotung/s-json@0.1.0","_nodeVersion":"12.13.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-ImguhB5NUcFRwjahRhKveK5Wkf2rVOnawWtE4EY7XJcGci97BchcaOhdyuS5VHjLTRQXMsEP/zwXs5ONt0ljpw==","shasum":"e2ac70b0526fd87a77f33621383f99bfa810514e","tarball":"https://registry.npmjs.org/@beenotung/s-json/-/s-json-0.1.0.tgz","fileCount":23,"unpackedSize":127227,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejJuXCRA9TVsSAnZWagAArH8P/iFM4atL9GVPo0loUVW/\nIWWjLJXacgV2QX8sr4K19yGx+EpWhFBqeLst2uIjdp1KNgkIafpTsM95VkUw\ngnpLySEcAgdLL9KUjE6ZlAQG98KcpS9C4KS/AuwJwQ+OndUXR7y8j91nwcNA\n1bNNv4PCJgoWN6x4V28qHLUiz9jzIhU3f52jO5vES7A6DoWxALo2ItZRkV8O\nZ+MehC2B6mdmvVHVQXfrGN8GA96QfpZRkfzqKH6tAoK1xB3/YrkTKneal9oo\nkaPOIsSupVnFzmDDjx8mwaO0Nrmh5CrYKNOIrGglkkv0RZVQ9pfhjSi1Xvbj\n0zBpSJgfM9+FdpFGqvsnYtcWjY2qlSk/2iqdy2ntF7yYnOrQYYB/do6UqCjX\nxVrCjTC7xBrykZj98nKsHo9U5laa2Dr1oFuj6QVKYM+swb10hCdMHQIoR0z4\npn+LZr5cXLDY232Fg/TG02Sb/JNQ6xSt12USkplF4XYF/+qRxnZKnuBB1R49\nJl6Btq1rtQ7eXh6CMj8fiWEUGe2xk7dZVPJ7KVxWsI/dYJMurkD+O5UgvVbc\ntJTrRVgS1S15wnkCYGfvey2DMoqDI+Y/c5mzr+ABnqlEIkAaasHHHiCO1QwA\nfWBD/pdQJMnvbmc7Ujq1BXDr8cNT45QLnkYjgsg4FPqiW8KFEmmfLWge3jOl\nOwPG\r\n=PsYt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEezqnd6W/MMECk256+mIaBKTCgrE+R+XjEb98FaFvUoAiEA9vIz+se/rQjjsx7Br5FYDgmmPuzFmeBrXXJOWaol27Y="}]},"maintainers":[{"name":"beenotung","email":"aabbcc1241@yahoo.com.hk"}],"_npmUser":{"name":"beenotung","email":"aabbcc1241@yahoo.com.hk"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/s-json_0.1.0_1586273174674_0.7110401424135657"},"_hasShrinkwrap":false},"0.1.1":{"name":"@beenotung/s-json","version":"0.1.1","description":"General purpose JSON viewer and editor","keywords":["s.js","surplus","json","data","viewer","editor","dev"],"author":{"name":"Beeno Tung","email":"aabbcc1241@yahoo.com.hk","url":"https://beeno-tung.surge.sh"},"license":"BSD-2-Clause","main":"index.js","types":"index.d.ts","scripts":{"clean":"rimraf dist {src,demo}/*.{map,js,jsx,d.ts} src/{README.md,LICENSE,package.json}","format":"prettier --write \"src/**/*.ts*\" \"demo/**/*.ts*\"","postformat":"tslint -p . --fix","build":"run-s clean tsc jsx","postbuild":"cp -f package.json *.md LICENSE src/","tsc":"tsc","jsx":"node scripts/compile-jsx","build:demo":"run-s clean tsc:demo jsx","tsc:demo":"tsc -p tsconfig.demo.json","dev":"webpack -w --mode=development","prod":"webpack -p --mode=production","test":"npm run format"},"husky":{"hook":{"pre-commit":"npm run format"}},"dependencies":{"s-array":"^0.4.10","s-js":"^0.4.9","surplus":"^0.5.3","tslib":"^1.11.1"},"devDependencies":{"@stencil/core":"^1.12.1","@types/node":"*","husky":"^4.2.3","npm-run-all":"^4.1.5","prettier":"^2.0.2","rimraf":"^3.0.2","stencil-lib":"^0.9.2","surplus-loader":"^0.5.0","ts-loader":"^6.2.2","ts-node":"^8.8.2","tslint":"^6.1.1","tslint-config-prettier":"^1.18.0","tslint-eslint-rules":"^5.4.0","tslint-etc":"^1.10.1","typescript":"^3.8.3","webpack":"^4.42.1","webpack-cli":"^3.3.10"},"_id":"@beenotung/s-json@0.1.1","_nodeVersion":"10.21.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-gi4vQ+f0UHDKS0v+8AepLsU8P3r4dVMSqaUS/7tk7gve4TA3ixZ1K94dkv4O4zWCgpmivc5yrAVm/PILcMRbbQ==","shasum":"ba389c5f283db3029295a14bf198ee7137bd58db","tarball":"https://registry.npmjs.org/@beenotung/s-json/-/s-json-0.1.1.tgz","fileCount":23,"unpackedSize":136495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgA/qwCRA9TVsSAnZWagAAEvoP/13LLXSTQyFMc35bJIop\nQngU68xM7zBuQP9YYy2oh0HxLhjN3LvJ+5PpL73tmhAQfh5n/U/vOBpSp83Z\nBUH0TAuotMiBYREkWYVorGzrUxBVTVGov/Qb9vXSNDrwT+BGIBOcHuHQlkeO\nuJAXJrh2wEFdXLnxPWKa96Rip8gkBzpIuDJNqdQdrQZMjlkWgNsGJR2XYCYd\nfoEsFV+r7vHV8zB/z4PjI17MvPpoEiMrl408LnZrrqjpMy73slaLvO9UvU+L\nAWWcpAVjZi+hXWEsFFuTOYoitdhFq3IU6AumXrnurff+3rpZbmad6Gk/pPxF\n0e/N0XP5ukgBTuiY+EdVf9atqte+807aBtbuIKikTlfLTJKHjvhoadlOq9VE\nXWMRT4a66TpD8Jfihj8sAaxZ8yUjYpOK4DZccfZYpxiB/5THTgqNMs2rOmSF\nq+brXIcdAfBNcrT1Jn+Y6Q8KpdvwgB+jbdTwEywKoe9a2SuEYRoyOQ7yK7tk\nUTXZ29L3g4G1v0Rcq+3a9wPR1a987EIKMMoeiFrT/paPGKzAraNaweHxCSjQ\nG+ji7Zuszvd55OgbZondq32HWSbMdEziypODbbd9FyuIhp0aF6ClkMvpdCni\nqnvDIUQGfLM/JfXnOshpgFe/8uFee2lR6pahUEaW7A4a12id1YaQspnSfg47\nh11u\r\n=x9dG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDtf38J4fKEBLS7EUk1cno61IHM2lFkOYf9yIsRYVSqkgIhAKyGjxPTJjLL4FTUakHBE2mfQWob44Av+O+5JSBT3Rvh"}]},"_npmUser":{"name":"beenotung","email":"aabbcc1241@yahoo.com.hk"},"directories":{},"maintainers":[{"name":"beenotung","email":"aabbcc1241@yahoo.com.hk"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/s-json_0.1.1_1610873519824_0.1124004600391515"},"_hasShrinkwrap":false},"0.1.2":{"name":"@beenotung/s-json","version":"0.1.2","description":"General purpose JSON viewer and editor","keywords":["s.js","surplus","json","data","viewer","editor","dev"],"author":{"name":"Beeno Tung","email":"aabbcc1241@yahoo.com.hk","url":"https://beeno-tung.surge.sh"},"license":"BSD-2-Clause","main":"index.js","types":"index.d.ts","scripts":{"clean":"rimraf dist {src,demo}/*.{map,js,jsx,d.ts} src/{README.md,LICENSE,package.json}","format":"prettier --write \"src/**/*.ts*\" \"demo/**/*.ts*\"","postformat":"tslint -p . --fix","build":"run-s clean tsc jsx","postbuild":"cp -f package.json *.md LICENSE src/","tsc":"tsc","jsx":"node scripts/compile-jsx","build:demo":"run-s clean tsc:demo jsx","tsc:demo":"tsc -p tsconfig.demo.json","upload":"surge www https://s-json-demo.surge.sh","test":"npm run format"},"husky":{"hook":{"pre-commit":"npm run format"}},"dependencies":{"s-array":"^0.4.10","s-js":"^0.4.9","surplus":"^0.5.3","tslib":"^1.11.1"},"devDependencies":{"@stencil/core":"^1.12.1","@types/node":"*","husky":"^4.2.3","npm-run-all":"^4.1.5","prettier":"^2.0.2","rimraf":"^3.0.2","stencil-lib":"^0.9.2","surge":"^0.21.7","surplus-loader":"^0.5.0","ts-loader":"^6.2.2","ts-node":"^8.8.2","tslint":"^6.1.1","tslint-config-prettier":"^1.18.0","tslint-eslint-rules":"^5.4.0","tslint-etc":"^1.10.1","typescript":"^3.8.3","webpack":"^4.42.1","webpack-cli":"^3.3.10"},"_id":"@beenotung/s-json@0.1.2","_nodeVersion":"10.21.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-Bl2MWbz8ZD5o77oimyaEoJxV68Il+BVoxn3Ua5t8oq9mxdvLJ8NLCB1u0BYNpkXYgB8CcIYZRFcUSkZq6FvVvg==","shasum":"6f9d84deb15145ec55789197e486d6977b3020e3","tarball":"https://registry.npmjs.org/@beenotung/s-json/-/s-json-0.1.2.tgz","fileCount":23,"unpackedSize":136568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBH7ZCRA9TVsSAnZWagAAkXkP/iP4oCrmjoFtAnD/J854\nOou9CTYYJYHH+Wrjd1ZbM+O6uS1M30FWiR1/5ZtSsu5GZSV3hWbSivyhSOS0\nb8+OC1MrOYgdLxmt15X0rs6vlhYVG//r3nShCpYqrf+CDX+7E9FWkxXTl2rx\nugOUqtNdnlXxx78wEByPzBDnKlgFIifN3DSftUVm6fr0pApKRyPihUimdxEI\nWrOa0hc/+1l9IUj28vqGvpBVbsIaxONtdnH1AXDJ8K66nWOe6VdMXuwUAY5k\nc8bHcGjy9wFRCBIskaKAEVuILO+/FcULoHuI9d9Ex+ZeIngror7gL1lw/jJa\ni0KM5GbvDmSjH3pTNMfSuSPaScUo1yCEpeLqLCa+9m6eTn11nija6Seb3stk\njAbDqQSjsKNliFUytj4ZxIaCANOl4YUbJyKpB/7FT6sAmbGf+W0UgX/C9i+G\nJPm4FxK/aD1LVBvmyws78rmKT9YCrJ/MNIK4EjKGLh2gLXq/AOE279OpRi8J\nKNPtX5KevV+43w1g3cMrrxfbOOuT+fY1ocB64OMReWgmHno/Ztm+uP1t+1Fe\n9mV5wpjo58o4bIUQex2LihkPC99D4249w5CFKVKPZmLp8HksFSWaD++j4/yA\nMB5GYsWUbzFyHAmfsd0BheifUBWeAwzMr96Zdo5RhFezRnSrPyl9pB2By1QR\nfh/g\r\n=XjFn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCKzxXSoIF1TfCV9Mhkws9IwSHdAosl7/GwPEAVlYwyaQIgOMa0HNm00gch6CjYnB/BKf1LSqrIo9H8Irv8lDUCc9Y="}]},"_npmUser":{"name":"beenotung","email":"aabbcc1241@yahoo.com.hk"},"directories":{},"maintainers":[{"name":"beenotung","email":"aabbcc1241@yahoo.com.hk"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/s-json_0.1.2_1610907353416_0.24748155091506363"},"_hasShrinkwrap":false}},"time":{"created":"2020-04-07T15:26:14.397Z","0.1.0":"2020-04-07T15:26:14.783Z","modified":"2022-04-04T18:10:26.734Z","0.1.1":"2021-01-17T08:51:59.983Z","0.1.2":"2021-01-17T18:15:53.541Z"},"maintainers":[{"name":"beenotung","email":"aabbcc1241@yahoo.com.hk"}],"description":"General purpose JSON viewer and editor","keywords":["s.js","surplus","json","data","viewer","editor","dev"],"author":{"name":"Beeno Tung","email":"aabbcc1241@yahoo.com.hk","url":"https://beeno-tung.surge.sh"},"license":"BSD-2-Clause","readme":"# s-json\nGeneral purpose data viewer and editor\n\n[![npm Package Version](https://img.shields.io/npm/v/@beenotung/s-json.svg?maxAge=2592000)](https://www.npmjs.com/package/@beenotung/s-json)\n\n**This package is renamed into [s-data](https://www.npmjs.com/package/s-data)**\n\nPowered by\n[S.js](https://github.com/adamhaile/S)\nand\n[surplus](https://github.com/adamhaile/surplus)\n\nDemo: https://s-json-demo.surge.sh/\n\n## Installation\n```bash\nnpm install @beenotung/s-json\n```\n\n## Typescript Signature\n```typescript\ndeclare function JsonView(props: JsonViewProps<any>): HTMLElement\n\ndeclare function JsonEdit(props: JsonEditProps<any>): HTMLElement | HTMLElement[]\n\ntype JsonViewProps<T> = {\n  data: T,\n  name?: string\n  expandElement?: boolean,\n}\n\ntype JsonEditProps<T> = {\n  data: T,\n  name?: string\n  parent?: object\n  updateValue?: (value: T) => void\n  onChange?: (ev: Event, detail: UpdateDetail) => void\n  editElement?: boolean,\n}\n\ntype UpdateDetail = {\n  parent?: object\n  name?: string\n  oldValue: any\n  newValue: any,\n}\n```\n\n## Supported Data Type\n  + HTMLElement\n  + Text (DOM node)\n  + string\n  + number\n  + timestamp (in number)\n  + Date\n  + bigint\n  + boolean\n  + function (show the source code)\n  + symbol\n  + undefined\n  + null\n  + Set\n  + Map\n  + Array\n  + object\n\n## Usage Examples\n\nThis section demo using s-json with surplus, however it is not required.\n\n`JsonEdit`, `JsonView` are javascript functions, that upon calling, return HTMLElement(s).\nHence, it can be used with plain js as well.\n\n**Sample Data**:\n```typescript jsx\nimport * as Surplus from 'surplus';\nSurplus;\n\nexport let sampleData = {\n  username: 'Alice',\n  age: 20,                  // render as input[type=number]\n  todayTime: Date.now(),    // render as input[type=date] and input[type=time]\n  todayDate: new Date(),\n  salary: BigInt('12345'),  // render as input[type=text]\n  isActive: true,\n  sym: Symbol.for('alice'),\n  partner: undefined,\n  task: null,\n  tagSet: new Set(['app', 'developer', 'web']),\n  contactMap: new Map([\n    [Symbol.for('bob'), {name: 'Bob', tel: '+85298765432'}],\n    [Symbol.for('cherry'), {name: 'Cherry', tel: '+85223456789'}],\n  ]),\n  foodArr: ['seafood', 'potato'],\n  profileObj: {\n    name: 'Alice',\n    age: 20,\n  },\n  // DOM elements\n  friendNodes: [\n    <span style={{fontSize: 'larger'}}>Bob</span>,\n    <b>Cherry</b>,\n    <a href='javascript:alert(\"clicked\")'>Dave</a>,\n    document.createTextNode('Eve'),\n  ],\n  // function\n  onMessage: (msg: string) => alert('message: ' + msg),\n}\n```\nDetails refer to [demo-data.tsx](./demo/demo-data.tsx)\n\n### Usage Example of `JsonView`\n```typescript jsx\nimport * as Surplus from 'surplus';\nimport S from 's-js';\nimport { JsonView } from '../src/json-view';\nimport { sampleData } from './demo-data';\nSurplus;\n\nS.root(() => {\n  // let main = JsonView({data: sampleData}) // without jsx\n  let main = <JsonView data={sampleData} />; // with jsx\n  document.body.appendChild(main);\n});\n```\n\n### Usage Example of `JsonEdit`:\n```typescript\nimport * as Surplus from 'surplus';\nimport S from 's-js';\nimport { JsonEdit, UpdateDetail } from '../src/json-edit';\nimport { sampleData } from './demo-data';\nSurplus;\n\nS.root(() => {\n  let lastUpdate = S.data(Date.now());\n\n  let main = (\n    <div>\n      Last update: {new Date(lastUpdate()).toLocaleString()}\n      <h2>JsonEdit</h2>\n      {JsonEdit({\n        data: sampleData,\n        editElement: true,\n        onChange: (ev, { parent, name, newValue, oldValue }: UpdateDetail) => {\n          console.log('change', { parent, name, newValue, oldValue });\n          lastUpdate(Date.now());\n        },\n      })}\n    </div>\n  );\n  document.body.appendChild(main);\n});\n```\n\n### Remark\n`JsonEdit` updates the data in-place. Therefore, if you need to use `JsonView` (or other elements) to display the data editing by `JsonEdit` on the same page, you'll need to use a change signal in the container of `JsonView`. For example:\n```typescript jsx\nimport * as Surplus from 'surplus';\nimport S from 's-js';\nimport { JsonEdit } from '../src/json-edit';\nimport { JsonView } from '../src/json-view';\nimport { sampleData } from './demo-data';\n\nSurplus;\n\nS.root(() => {\n  let lastUpdate = S.data(Date.now());\n\n  function ChangeDetect(props: { signal: any; children: any }) {\n    return props.children;\n  }\n\n  let main = (\n    <div>\n      Last update: {new Date(lastUpdate()).toLocaleString()}\n      <div style={{ display: 'flex' }}>\n        <div>\n          <h2>JsonView</h2>\n          <ChangeDetect signal={lastUpdate()}>\n            <JsonView data={sampleData} />\n          </ChangeDetect>\n        </div>\n        <div>\n          <h2>JsonEdit</h2>\n          {JsonEdit({\n            data: sampleData,\n            editElement: true,\n            onChange: (ev, detail) => {\n              console.log('change', detail);\n              lastUpdate(Date.now());\n            },\n          })}\n        </div>\n      </div>\n    </div>\n  );\n  document.body.appendChild(main);\n});\n```\n\nDetails see [demo.tsx](./demo/demo.tsx)\n","readmeFilename":"README.md"}