The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning. Learn more →
Top 19 TypeScript Tree Projects
-
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
skott
All-in-one devtool to automatically analyze, search and visualize dependencies from JavaScript, TypeScript (JSX/TSX) and Node.js (ES6, CommonJS)
-
default-composer
A tiny (~500B) JavaScript library that allows you to set default values for nested objects
-
WorkOS
The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
-
-
flexible-tree-printer
The most flexible console tree printer like the unix "tree" command that you can customize to suit your specific needs.
-
declarative-tree
Converts string to trees and vice versa. Useful for creating declarative tree tests.
-
InfluxDB
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.
Project mention: 💉 Test-Driven Development and Dependency Injection are the way | dev.to | 2023-07-26Welcome back into these series everyone, past few days have been incredible as skott just reached 130 stars on GitHub, 100k of total downloads and lately around +12k weekly downloads since I started open-sourcing it. It's very far for being mainstream but it's a good start, isn't it? Anyway, let me put my personal satisfaction aside, and let's talk about what you came for!
Original article: https://aralroca.com/blog/default-composer When working with objects in JavaScript, it is common to need to set default values for empty strings/objects/arrays, null, or undefined properties. When dealing with nested objects, this can become even more complicated and require complex programming logic. However, with the "default-composer" library, this task becomes simple and easy. What is "default-composer"? "default-composer" is a lightweight (~300B) JavaScript library that allows you to set default values for nested objects. The library replaces empty strings/arrays/objects, null, or undefined values in an existing object with the defined default values, which helps simplify programming logic and reduce the amount of code needed to set default values. Default Composer logo Benefits over Spread Operator and Object.assign While ...spread operator and Object.assign() can also be used to set default values for objects, "default-composer" provides several benefits over these methods. Works with nested objects, whereas the spread operator and Object.assign() only work with shallow objects. More concise and easier to read than spread operator or Object.assign(). The code required to set default values with these methods can become very verbose and difficult to read, especially when dealing with nested objects. More granular control over which properties should be set to default values. With spread operator and Object.assign(). Imagine we have this original object: const original = { name: "", score: null, address: { street: "", city: "", state: "", zip: "", }, emails: [], hobbies: [], another: "anotherValue" }; Enter fullscreen mode Exit fullscreen mode And these are the defaults: const defaults = { name: "John Doe", score: 5, address: { street: "123 Main St", city: "Anytown", state: "CA", zip: "12345", }, emails: ["[email protected]"], hobbies: ["reading", "traveling"], }; Enter fullscreen mode Exit fullscreen mode We want to merge these objects replacing the original values that are "", null, [], undefined and {} to the default value. So the idea is to get: console.log(results) /** * { * "name": "John Doe", * "score": 5, * "address": { * "street": "123 Main St", * "city": "Anytown", * "state": "CA", * "zip": "12345" * }, * "emails": [ * "[email protected]" * ], * "hobbies": [ * "reading", * "traveling" * ], * "another": "anotherValue" **/ Enter fullscreen mode Exit fullscreen mode Probably with spread operator we will have to do something like that: const results = { ...defaults, ...original, name: original.name || defaults.name, score: original.score ?? defaults.score, // "??" beacause 0 is valid address: { ...defaults.address, ...original.address, street: original.address.street || defaults.address.street, city: original.address.city || defaults.address.city, state: original.address.state || defaults.address.state, zip: original.address.zip || defaults.address.zip, }, emails: original.emails.length ? original.emails : defaults.emails, hobbies: original.hobbies.length ? original.hobbies : defaults.hobbies, }; Enter fullscreen mode Exit fullscreen mode and with Object.assign something like this: const results = Object.assign({}, defaults, original, { name: original.name || defaults.name, score: original.score ?? defaults.score, // "??" beacause 0 is valid address: Object.assign({}, defaults.address, original.address, { street: original.address.street || defaults.address.street, city: original.address.city || defaults.address.city, state: original.address.state || defaults.address.state, zip: original.address.zip || defaults.address.zip, }), emails: original.emails.length ? original.emails : defaults.emails, hobbies: original.hobbies.length ? original.hobbies : defaults.hobbies, }); Enter fullscreen mode Exit fullscreen mode Maintaining this can be very tidious, especially with huge, heavily nested objects. Headache... With defaultComposer we could only use this: import defaultComposer from 'default-composer'; // 300B // ... const results = defaultComposer(defaults, original); Enter fullscreen mode Exit fullscreen mode Easier to maintain, right? 😉 Happier an easier What happens if in our project there is a special property that works differently from the others and we want another replacement logic? Well, although defaultComposer has by default a configuration to detect the defautable values, you can configure it as you like. import { defaultComposer, setConfig } from 'default-composer'; setConfig({ // This function is executed for each value of each key that exists in // both the original object and the defaults object. isDefaultableValue: ( // - key: key of original or default object // - value: value in the original object // - defaultableValue: pre-calculed boolean, you can use or not, // depending if all the rules of the default-composer library are correct // for your project or you need a totally different ones. { key, value, defaultableValue } ) => { if (key === 'rare-key') { return defaultableValue || value === 'EMPTY' } return defaultableValue; }, }); Enter fullscreen mode Exit fullscreen mode Conclusions I've introduced the "default-composer" library as a solution for setting default values for nested objects in JavaScript. The library is lightweight and provides more concise and easier-to-read code than the spread operator and Object.assign methods. It also offers more granular control over which properties should be set to default values. In this article I provide examples of how to use the library and how it simplifies the code for maintaining nested objects. Finally, I explain how the library can be configured to handle special cases where a different replacement logic is required. Overall, "default-composer" is a useful library for simplifying the task of setting default values for nested objects in JavaScript.
I am using this library https://github.com/daniel-hauser/react-organizational-chart
NOTE:
The open source projects on this list are ordered by number of github stars.
The number of mentions indicates repo mentiontions in the last 12 Months or
since we started tracking (Dec 2020).
TypeScript Tree related posts
- 💉 Test-Driven Development and Dependency Injection are the way
- MUI Grid with Infinite (10000) Grid Items
- Hey there! I created a web app to help spread the word on best practices for design and software architecture. I'm excited to share it with you!
- Exploring the latest features of Skott: road to V1
- I'm building react-complex-tree, an unopinionated tree component for react, and recently released a new version!
- Creating a tree hierarchy similar to vscode sidebar
- Make vi . not open netrw
-
A note from our sponsor - WorkOS
workos.com | 26 Apr 2024
Index
What are some of the best open-source Tree projects in TypeScript? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | G6 | 10,703 |
| 2 | react-arborist | 2,762 |
| 3 | coc-explorer | 1,135 |
| 4 | react-complex-tree | 754 |
| 5 | ngx-ui | 699 |
| 6 | skott | 540 |
| 7 | default-composer | 459 |
| 8 | react-vtree | 365 |
| 9 | react-ast | 311 |
| 10 | react-tree | 200 |
| 11 | react-organizational-chart | 163 |
| 12 | react-beautiful-tree | 33 |
| 13 | stroo-app | 15 |
| 14 | ngx-tree | 13 |
| 15 | knex-tree | 10 |
| 16 | flexible-tree-printer | 9 |
| 17 | editable-antd-tree | 9 |
| 18 | vscode-awesome-tree | 9 |
| 19 | declarative-tree | 2 |
Sponsored
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.
www.influxdata.com