Atomic State Canvas

This is a project for visualizing atomic state relationships using JSON Canvas. Currently, it only supports Recoil.js by default.

Installation

1npm install atomic-state-canvas -g

Usage

Prerequisite

• Make sure that you have Node installed.

Examples

1# Help
2atomic-state-canvas -h
3
4# Parse file and traverse based on search variable, then print JSON Canvas
5atomic-state-canvas -f ./src/storeOne/entrySelector.ts -s entrySelector
6
7# Parse file and traverse based on search variable, then output JSON Canvas to file
8atomic-state-canvas -f ./src/storeOne/entrySelector.ts -s entrySelector -o test.canvas

Local Development

Get Started

1npm build:watch

Examples

1# Standard
2node dist/apps/asc-cli/src/index.js -f examples/standard/src/store1/entrySelector.ts -s entrySelector -o test.canvas
3
4# Circular Dependency
5node dist/apps/asc-cli/src/index.js -f examples/standard/src/store2/entrySelector.ts -s entrySelector -o test.canvas
6
7# Self Referencing Circular Dependency
8node dist/apps/asc-cli/src/index.js -f examples/standard/src/store3/entrySelector.ts -s entrySelector -o test.canvas
9
10# With glob exclusion
11node dist/apps/asc-cli/src/index.js -f examples/standard/src/store4/entrySelector.ts -s entrySelector -o test.canvas -e "*.test.*"

Roadmap

• Support more state management libraries such as Jotai
• Add support for more features in JSON Canvas such as grouping
• Better documentation
• More comprehensive unit tests
• Support for alias import file walk