React-Sophia
React-Sophia is a visualization plugin of javascript object trace which promotes development speed when you are debugging & logging variables. and it will provide other amazing features that is on the way!
Snapshot
Features
- 🧹 Easy to update & maintain & restore Your ReactHookState by TypeScript data type inference
- 📺 Visualization Object Data Type
- 🐛 Debug your Code dynamically
- 🔌 Easy install & uninstall
- 🔮 Reflect metaData what ever you want
- 🖱️ Free drag to move by your 🐭.
Caution!!
- ❓ Don't forget to provide the sceneName as second parameter to useObject to when supervise mode
Installing
npm install react-sophia
Supported Framework
React
Example
- 🏗️ Step 1 : Put react-sophia component inside your top level of Component, it should be installed only once in your entire project that is better.
import React from 'react'import Book from './test/bookList' // page componentsimport Sophia from 'react-sophia' { return <div> /*🥦 import react-sophia in your top level of React components is recommended 🥦 */ <Sophia ="💕" /> /* you can enable supervise in development mode or remove supervise property in production mode */ <Book /> <.../> </div> }
- 🏗️🏗️ step 2 : To provide Data to react-sophia for supervise. you should call useObject from react-sophia
react-sophia API
- import { useObject } from 'react-sophia'
/** * This function is a multifunction which take 2 arguments that used to reserve ObjectState for you in your page, * you can call this function multi times in the same page or other pages. * @template T is object type like ` * @param initO The data object typeof `T` which want to reserve data for you * @param [option] * @returns { object,updateObject,recover} */ // usage 1 regular mode// usage 2 regular & supervise mode
- object is readonly which as same as UseState() of hooks's return arguments of the index 0 at the Array,
- updateObject is overload and super function basically as same as UseState of hooks's return arguments of the index 1 at the Array. but its other features
// usage 1 update a single property for object directly// 💡in TypeScript the first & second arguments keys value range were restricted and infered which can help you check data type is valid. but also in Javascript, unfortunately Javascript didn't throw a error when you are developing.updateObject'name', 'li' //syntax available ✅// usage2 update arbitrary properties for object directly// in TypeScript update object properties count should not be out of range of initO(previous parameter name) when you passed into useObject({...}) because here has a type checkingupdateObject // syntax available ✅updateObject //syntax available ✅
- recover to restore the initial object state
/** Recover all the values of each property which you passed in at the `useObject` at the beginning.*/ /** * Recover all the values of each property which you passed in at the `useObject` at the beginning. * @param omit Omit some of properties of those you wouldn't want to recover. */ //usage 1 updateObject // => object : { name : "li", age : 6000, male : true } recover // => object : { name: 'lee', age: 5 ,male : true} //usage2 updateObject // => object : { name : "li", age : 6000, male : true } recover // => object : { name: 'lee', age: 5 ,male : false}