@danielcobo/jstree

jstree

HTML tree for JavaScript values and objects. Useful to emulate dev console, etc.

🧭 Table of contents

• ✨ Benefits
• 🎒 Requierments
• 🚀 Quickstart
• 📘 Documentation
• 🆘 Troubleshooting
• 🤝 Contributing
• 🧪 Testing
• ⚖️ License

✨ Benefits

• [x] Lightweight, no framework needed
• [x] Customisible and configurable
• [x] Can handle deep nested objects and arrays

🎒 Requierments

No requierments.

🚀 Quickstart

Install

NodeJS

Install using the terminal:

npm install @danielcobo/jstree

Require the module:

const jstree = require('@danielcobo/jstree');

_{Note: In case you're wondering, @danielcobo/ is just a namespace scope - an NPM feature. Scopes make it easier to name modules and improve security.}

Browser

Declare it as a global variable named jstree by including this script before any script you want to use it in:

<script src="https://cdn.jsdelivr.net/npm/@danielcobo/jstree@1/dist/iife/jstree.min.js"></script>

Or import it as an ECMAScript module:

import * as jstree from 'https://cdn.jsdelivr.net/npm/@danielcobo/jstree@1/dist/esm/jstree.min.js';

Also, feel free to download the file if you prefer not to use jsdelivr. In that case just replace the url with the relative file path.

Example use

const html = jsTree([
  { type: 'icecream', weight: 250, flavor: 'vanilla' },
  { type: 'cake', weight: 1000, flavor: 'chocolate' },
]);

document.body.innerHTML = html;

For details see documentation below.

📘 Documentation

jstree()

Generate a HTML presentation of any value

Name	Type	Default	Description
val	*		Value to present

Returns

Type	Description
string	HTML presentation of value

_{Source: src/index.js:5}

🆘 Troubleshooting

If you run into trouble or have questions just submit an issue.

🤝 Contributing

Anyone can contribute

Contributions come in many shapes and sizes. All are welcome. You can contribute by:

• asking questions
• suggesting features
• sharing this repo with friends
• improving documentation (even fixing typos counts 😉)
• providing tutorials (if you do, please let me know, I would love to read them)
• improving tests
• contributing code (new features, performance boosts, code readability improvements..)

Rules for contributions

General guidelines:

• there are no dumb questions
• be polite and respectful to others
• do good

When coding remember:

• working > maintainability > performance
• best code is no code
• be descriptive when naming
• keep it DRY
• do test

Contribution licence: All contributions are considered to be under same license as this repository.

🧪 Testing

Testing suite: 🃏 Jest | Test command: npm test

Mutation testing suite: 👽 Stryker Mutator | Mutation test command: npm run mutation

If you intend to develop further or contribute code, then please ensure to write and use testing. Strive for 100% code coverage and high mutation scores. Mutation score 100 is great, but it's not always neccessary (if there are valid reasons).

⚖️ License

MIT License