Gathering detailed insights and metrics for mobx-utils
Installations
npm install mobx-utilsDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Score
99.2
Supply Chain
99.6
Quality
81.9
Maintenance
100
Vulnerability
100
License
Releases
Unable to fetch releases
Contributors
93
Unable to fetch Contributors
Languages
2
TypeScript
JavaScript
TypeScript (83.62%)
JavaScript (16.38%)
validate.email 🚀
Verify real, reachable, and deliverable emails with instant MX records, SMTP checks, and disposable email detection.
Developer
mobxjs
Download Statistics
Total Downloads
44,125,847
Last Day
52,558
Last Week
255,867
Last Month
1,274,410
Last Year
11,401,005
GitHub Statistics
MIT License
1,196 Stars
507 Commits
128 Forks
22 Watchers
26 Branches
93 Contributors
Updated on Mar 08, 2025
Bundle Size
21.53 kB
Minified
5.87 kB
Minified + Gzipped
Maintainers
4
Package Meta Information
Latest Version
6.1.0
Package Id
mobx-utils@6.1.0
Unpacked Size
285.32 kB
Size
66.82 kB
File Count
46
Published on
Oct 04, 2024
Total Downloads
Cumulative downloads
Total Downloads
44,125,847
Last Day
-0.7%
52,558
Compared to previous day
Last Week
-0.7%
255,867
Compared to previous week
Last Month
7.4%
1,274,410
Compared to previous month
Last Year
50.5%
11,401,005
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
MobX-utils
Utility functions and common patterns for MobX
This package provides utility functions and common MobX patterns build on top of MobX. It is encouraged to take a peek under the hood and read the sources of these utilities. Feel free to open a PR with your own utilities. For large new features, please open an issue first.
Installation & Usage
NPM: npm install mobx-utils --save
CDN: https://unpkg.com/mobx-utils/mobx-utils.umd.js
import {function_name} from 'mobx-utils'
API
Table of Contents
- fromPromise
- isPromiseBasedObservable
- moveItem
- lazyObservable
- fromResource
- toStream
- StreamListener
- ViewModel
- createViewModel
- keepAlive
- keepAlive
- queueProcessor
- chunkProcessor
- resetNowInternalState
- now
- expr
- createTransformer
- deepObserve
- ObservableGroupMap
- ObservableMap
- defineProperty
- defineProperty
- defineProperty
- defineProperty
- defineProperty
- computedFn
- DeepMapEntry
- DeepMap
fromPromise
fromPromise takes a Promise, extends it with 2 observable properties that track
the status of the promise and returns it. The returned object has the following observable properties:
value: either the initial value, the value the Promise resolved to, or the value the Promise was rejected with. use.stateif you need to be able to tell the difference.state: one of"pending","fulfilled"or"rejected"
And the following methods:
case({fulfilled, rejected, pending}): maps over the result using the provided handlers, or returnsundefinedif a handler isn't available for the current promise state.
The returned object implements PromiseLike<TValue>, so you can chain additional Promise handlers using then. You may also use it with await in async functions.
Note that the status strings are available as constants:
mobxUtils.PENDING, mobxUtils.REJECTED, mobxUtil.FULFILLED
fromPromise takes an optional second argument, a previously created fromPromise based observable.
This is useful to replace one promise based observable with another, without going back to an intermediate
"pending" promise state while fetching data. For example:
Parameters
origPromiseThe promise which will be observedoldPromiseThe previously observed promise
Examples
1@observer 2class SearchResults extends React.Component { 3 @observable.ref searchResults 4 5 componentDidUpdate(nextProps) { 6 if (nextProps.query !== this.props.query) 7 this.searchResults = fromPromise( 8 window.fetch("/search?q=" + nextProps.query), 9 // by passing, we won't render a pending state if we had a successful search query before 10 // rather, we will keep showing the previous search results, until the new promise resolves (or rejects) 11 this.searchResults 12 ) 13 } 14 15 render() { 16 return this.searchResults.case({ 17 pending: (staleValue) => { 18 return staleValue || "searching" // <- value might set to previous results while the promise is still pending 19 }, 20 fulfilled: (value) => { 21 return value // the fresh results 22 }, 23 rejected: (error) => { 24 return "Oops: " + error 25 } 26 }) 27 } 28} 29 30Observable promises can be created immediately in a certain state using 31`fromPromise.reject(reason)` or `fromPromise.resolve(value?)`. 32The main advantage of `fromPromise.resolve(value)` over `fromPromise(Promise.resolve(value))` is that the first _synchronously_ starts in the desired state. 33 34It is possible to directly create a promise using a resolve, reject function: 35`fromPromise((resolve, reject) => setTimeout(() => resolve(true), 1000))`
1const fetchResult = fromPromise(fetch("http://someurl")) 2 3// combine with when.. 4when( 5 () => fetchResult.state !== "pending", 6 () => { 7 console.log("Got ", fetchResult.value) 8 } 9) 10 11// or a mobx-react component.. 12const myComponent = observer(({ fetchResult }) => { 13 switch(fetchResult.state) { 14 case "pending": return <div>Loading...</div> 15 case "rejected": return <div>Ooops... {fetchResult.value}</div> 16 case "fulfilled": return <div>Gotcha: {fetchResult.value}</div> 17 } 18}) 19 20// or using the case method instead of switch: 21 22const myComponent = observer(({ fetchResult }) => 23 fetchResult.case({ 24 pending: () => <div>Loading...</div>, 25 rejected: error => <div>Ooops.. {error}</div>, 26 fulfilled: value => <div>Gotcha: {value}</div>, 27 })) 28 29// chain additional handler(s) to the resolve/reject: 30 31fetchResult.then( 32 (result) => doSomeTransformation(result), 33 (rejectReason) => console.error('fetchResult was rejected, reason: ' + rejectReason) 34).then( 35 (transformedResult) => console.log('transformed fetchResult: ' + transformedResult) 36)
Returns any origPromise with added properties and methods described above.
isPromiseBasedObservable
Returns true if the provided value is a promise-based observable.
Parameters
valueany
Returns boolean
moveItem
Moves an item from one position to another, checking that the indexes given are within bounds.
Parameters
Examples
1const source = observable([1, 2, 3]) 2moveItem(source, 0, 1) 3console.log(source.map(x => x)) // [2, 1, 3]
Returns ObservableArray<T>
lazyObservable
lazyObservable creates an observable around a fetch method that will not be invoked
until the observable is needed the first time.
The fetch method receives a sink callback which can be used to replace the
current value of the lazyObservable. It is allowed to call sink multiple times
to keep the lazyObservable up to date with some external resource.
Note that it is the current() call itself which is being tracked by MobX,
so make sure that you don't dereference to early.
Parameters
fetchinitialValueT optional initialValue that will be returned fromcurrentas long as thesinkhas not been called at least once (optional, defaultundefined)
Examples
1const userProfile = lazyObservable( 2 sink => fetch("/myprofile").then(profile => sink(profile)) 3) 4 5// use the userProfile in a React component: 6const Profile = observer(({ userProfile }) => 7 userProfile.current() === undefined 8 ? <div>Loading user profile...</div> 9 : <div>{userProfile.current().displayName}</div> 10) 11 12// triggers refresh the userProfile 13userProfile.refresh()
fromResource
fromResource creates an observable whose current state can be inspected using .current(),
and which can be kept in sync with some external datasource that can be subscribed to.
The created observable will only subscribe to the datasource if it is in use somewhere,
(un)subscribing when needed. To enable fromResource to do that two callbacks need to be provided,
one to subscribe, and one to unsubscribe. The subscribe callback itself will receive a sink callback, which can be used
to update the current state of the observable, allowing observes to react.
Whatever is passed to sink will be returned by current(). The values passed to the sink will not be converted to
observables automatically, but feel free to do so.
It is the current() call itself which is being tracked,
so make sure that you don't dereference to early.
For inspiration, an example integration with the apollo-client on github,
or the implementation of mobxUtils.now
The following example code creates an observable that connects to a dbUserRecord,
which comes from an imaginary database and notifies when it has changed.
Parameters
subscriberunsubscriberIDisposer (optional, defaultNOOP)initialValueT the data that will be returned byget()until thesinkhas emitted its first data (optional, defaultundefined)
Examples
1function createObservableUser(dbUserRecord) { 2 let currentSubscription; 3 return fromResource( 4 (sink) => { 5 // sink the current state 6 sink(dbUserRecord.fields) 7 // subscribe to the record, invoke the sink callback whenever new data arrives 8 currentSubscription = dbUserRecord.onUpdated(() => { 9 sink(dbUserRecord.fields) 10 }) 11 }, 12 () => { 13 // the user observable is not in use at the moment, unsubscribe (for now) 14 dbUserRecord.unsubscribe(currentSubscription) 15 } 16 ) 17} 18 19// usage: 20const myUserObservable = createObservableUser(myDatabaseConnector.query("name = 'Michel'")) 21 22// use the observable in autorun 23autorun(() => { 24 // printed everytime the database updates its records 25 console.log(myUserObservable.current().displayName) 26}) 27 28// ... or a component 29const userComponent = observer(({ user }) => 30 <div>{user.current().displayName}</div> 31)
toStream
Converts an expression to an observable stream (a.k.a. TC 39 Observable / RxJS observable). The provided expression is tracked by mobx as long as there are subscribers, automatically emitting when new values become available. The expressions respect (trans)actions.
Parameters
expressionfireImmediatelyboolean (by default false)
Examples
1const user = observable({ 2 firstName: "C.S", 3 lastName: "Lewis" 4}) 5 6Rx.Observable 7 .from(mobxUtils.toStream(() => user.firstname + user.lastName)) 8 .scan(nameChanges => nameChanges + 1, 0) 9 .subscribe(nameChanges => console.log("Changed name ", nameChanges, "times"))
Returns IObservableStream<T>
StreamListener
ViewModel
createViewModel
createViewModel takes an object with observable properties (model)
and wraps a viewmodel around it. The viewmodel proxies all enumerable properties of the original model with the following behavior:
- as long as no new value has been assigned to the viewmodel property, the original property will be returned.
- any future change in the model will be visible in the viewmodel as well unless the viewmodel property was dirty at the time of the attempted change.
- once a new value has been assigned to a property of the viewmodel, that value will be returned during a read of that property in the future. However, the original model remain untouched until
submit()is called.
The viewmodel exposes the following additional methods, besides all the enumerable properties of the model:
submit(): copies all the values of the viewmodel to the model and resets the statereset(): resets the state of the viewmodel, abandoning all local modificationsresetProperty(propName): resets the specified property of the viewmodelisDirty: observable property indicating if the viewModel contains any modificationsisPropertyDirty(propName): returns true if the specified property is dirtychangedValues: returns a key / value map with the properties that have been changed in the model so farmodel: The original model object for which this viewModel was created
You may use observable arrays, maps and objects with createViewModel but keep in mind to assign fresh instances of those to the viewmodel's properties, otherwise you would end up modifying the properties of the original model.
Note that if you read a non-dirty property, viewmodel only proxies the read to the model. You therefore need to assign a fresh instance not only the first time you make the assignment but also after calling reset() or submit().
Parameters
modelT
Examples
1class Todo { 2 @observable title = "Test" 3} 4 5const model = new Todo() 6const viewModel = createViewModel(model); 7 8autorun(() => console.log(viewModel.model.title, ",", viewModel.title)) 9// prints "Test, Test" 10model.title = "Get coffee" 11// prints "Get coffee, Get coffee", viewModel just proxies to model 12viewModel.title = "Get tea" 13// prints "Get coffee, Get tea", viewModel's title is now dirty, and the local value will be printed 14viewModel.submit() 15// prints "Get tea, Get tea", changes submitted from the viewModel to the model, viewModel is proxying again 16viewModel.title = "Get cookie" 17// prints "Get tea, Get cookie" // viewModel has diverged again 18viewModel.reset() 19// prints "Get tea, Get tea", changes of the viewModel have been abandoned
keepAlive
MobX normally suspends any computed value that is not in use by any reaction,
and lazily re-evaluates the expression if needed outside a reaction while not in use.
keepAlive marks a computed value as always in use, meaning that it will always fresh, but never disposed automatically.
Parameters
_1_2targetObject an object that has a computed property, created by@computedorextendObservablepropertystring the name of the property to keep alive
Examples
1const obj = observable({ 2 number: 3, 3 doubler: function() { return this.number * 2 } 4}) 5const stop = keepAlive(obj, "doubler")
Returns IDisposer stops this keep alive so that the computed value goes back to normal behavior
keepAlive
Parameters
_1_2computedValueIComputedValue<any> created using thecomputedfunction
Examples
1const number = observable(3) 2const doubler = computed(() => number.get() * 2) 3const stop = keepAlive(doubler) 4// doubler will now stay in sync reactively even when there are no further observers 5stop() 6// normal behavior, doubler results will be recomputed if not observed but needed, but lazily
Returns IDisposer stops this keep alive so that the computed value goes back to normal behavior
queueProcessor
queueProcessor takes an observable array, observes it and calls processor
once for each item added to the observable array, optionally debouncing the action
Parameters
observableArrayArray<T> observable array instance to trackprocessordebouncenumber optional debounce time in ms. With debounce 0 the processor will run synchronously (optional, default0)
Examples
1const pendingNotifications = observable([]) 2const stop = queueProcessor(pendingNotifications, msg => { 3 // show Desktop notification 4 new Notification(msg); 5}) 6 7// usage: 8pendingNotifications.push("test!")
Returns IDisposer stops the processor
chunkProcessor
chunkProcessor takes an observable array, observes it and calls processor
once for a chunk of items added to the observable array, optionally deboucing the action.
The maximum chunk size can be limited by number.
This allows both, splitting larger into smaller chunks or (when debounced) combining smaller
chunks and/or single items into reasonable chunks of work.
Parameters
observableArrayArray<T> observable array instance to trackprocessordebouncenumber optional debounce time in ms. With debounce 0 the processor will run synchronously (optional, default0)maxChunkSizenumber optionally do not call on full array but smaller chunks. With 0 it will process the full array. (optional, default0)
Examples
1const trackedActions = observable([]) 2const stop = chunkProcessor(trackedActions, chunkOfMax10Items => { 3 sendTrackedActionsToServer(chunkOfMax10Items); 4}, 100, 10) 5 6// usage: 7trackedActions.push("scrolled") 8trackedActions.push("hoveredButton") 9// when both pushes happen within 100ms, there will be only one call to server
Returns IDisposer stops the processor
resetNowInternalState
Disposes of all the internal Observables created by invocations of now().
The use case for this is to ensure that unit tests can run independent of each other. You should not call this in regular application code.
Examples
1afterEach(() => { 2 utils.resetNowInternalState() 3})
now
Returns the current date time as epoch number. The date time is read from an observable which is updated automatically after the given interval. So basically it treats time as an observable.
The function takes an interval as parameter, which indicates how often now() will return a new value.
If no interval is given, it will update each second. If "frame" is specified, it will update each time a
requestAnimationFrame is available.
Multiple clocks with the same interval will automatically be synchronized.
Countdown example: https://jsfiddle.net/mweststrate/na0qdmkw/
Parameters
interval(number |"frame") interval in milliseconds about how often the interval should update (optional, default1000)
Examples
1const start = Date.now() 2 3autorun(() => { 4 console.log("Seconds elapsed: ", (mobxUtils.now() - start) / 1000) 5})
expr
expr can be used to create temporary computed values inside computed values.
Nesting computed values is useful to create cheap computations in order to prevent expensive computations from needing to run.
In the following example the expression prevents that a component is rerender each time the selection changes;
instead it will only rerenders when the current todo is (de)selected.
expr(func) is an alias for computed(func).get().
Please note that the function given to expr is evaluated twice in the scenario that the overall expression value changes.
It is evaluated the first time when any observables it depends on change.
It is evaluated a second time when a change in its value triggers the outer computed or reaction to evaluate, which recreates and reevaluates the expression.
In the following example, the expression prevents the TodoView component from being re-rendered if the selection changes elsewhere.
Instead, the component will only re-render when the relevant todo is (de)selected, which happens much less frequently.
Parameters
expr
Examples
1const Todo = observer((props) => { 2 const todo = props.todo 3 const isSelected = mobxUtils.expr(() => props.viewState.selection === todo) 4const TodoView = observer(({ todo, editorState }) => { 5 const isSelected = mobxUtils.expr(() => editorState.selection === todo) 6 return <div className={isSelected ? "todo todo-selected" : "todo"}>{todo.title}</div> 7})
createTransformer
Creates a function that maps an object to a view. The mapping is memoized.
See the transformer section for more details.
Parameters
transformerarg2onCleanup
deepObserve
Given an object, deeply observes the given object.
It is like observe from mobx, but applied recursively, including all future children.
Note that the given object cannot ever contain cycles and should be a tree.
As benefit: path and root will be provided in the callback, so the signature of the listener is (change, path, root) => void
The returned disposer can be invoked to clean up the listener
deepObserve cannot be used on computed values.
Parameters
targetlistener
Examples
1const disposer = deepObserve(target, (change, path) => { 2 console.dir(change) 3})
ObservableGroupMap
Reactively sorts a base observable array into multiple observable arrays based on the value of a
groupBy: (item: T) => G function.
This observes the individual computed groupBy values and only updates the source and dest arrays
when there is an actual change, so this is far more efficient than, for example
base.filter(i => groupBy(i) === 'we'). Call #dispose() to stop tracking.
No guarantees are made about the order of items in the grouped arrays.
The resulting map of arrays is read-only. clear(), set(), delete() are not supported and modifying the group arrays will lead to undefined behavior.
NB: ObservableGroupMap relies on Symbols. If you are targeting a platform which doesn't
support these natively, you will need to provide a polyfill.
Parameters
basearray The array to sort into groups.groupByfunction The function used for grouping.optionsObject with properties:name: Debug name of this ObservableGroupMap.keyToName: Function to create the debug names of the observable group arrays.
Examples
1const slices = observable([ 2 { day: "mo", hours: 12 }, 3 { day: "tu", hours: 2 }, 4]) 5const slicesByDay = new ObservableGroupMap(slices, (slice) => slice.day) 6autorun(() => console.log( 7 slicesByDay.get("mo")?.length ?? 0, 8 slicesByDay.get("we"))) // outputs 1, undefined 9slices[0].day = "we" // outputs 0, [{ day: "we", hours: 12 }]
ObservableMap
defineProperty
Base observable array which is being sorted into groups.
defineProperty
The ObservableGroupMap needs to track some state per-item. This is the name/symbol of the property used to attach the state.
defineProperty
The function used to group the items.
defineProperty
This function is used to generate the mobx debug names of the observable group arrays.
defineProperty
Disposes all observers created during construction and removes state added to base array items.
computedFn
computedFn takes a function with an arbitrary amount of arguments, and memoizes the output of the function based on the arguments passed in.
computedFn(fn) returns a function with the very same signature. There is no limit on the amount of arguments that is accepted. However, the amount of arguments must be constant and default arguments are not supported.
By default the output of a function call will only be memoized as long as the output is being observed.
The function passes into computedFn should be pure, not be an action and only be relying on
observables.
Setting keepAlive to true will cause the output to be forcefully cached forever.
Note that this might introduce memory leaks!
Parameters
fnkeepAliveOrOptions
Examples
1const store = observable({ 2a: 1, 3b: 2, 4c: 3, 5m: computedFn(function(x) { 6return this.a * this.b * x 7}) 8}) 9 10const d = autorun(() => { 11// store.m(3) will be cached as long as this autorun is running 12console.log(store.m(3) * store.c) 13})
DeepMapEntry
DeepMap
Details
createTransformer in detail
With createTransformer it is very easy to transform a complete data graph into another data graph.
Transformation functions can be composed so that you can build a tree using lots of small transformations.
The resulting data graph will never be stale, it will be kept in sync with the source by applying small patches to the result graph.
This makes it very easy to achieve powerful patterns similar to sideways data loading, map-reduce, tracking state history using immutable data structures etc.
createTransformer turns a function (that should transform value A into another value B) into a reactive and memoizing function.
In other words, if the transformation function computes B given a specific A, the same B will be returned for all other future invocations of the transformation with the same A.
However, if A changes, or any derivation accessed in the transformer function body gets invalidated, the transformation will be re-applied so that B is updated accordingly.
And last but not least, if nobody is using the transformation of a specific A anymore, its entry will be removed from the memoization table.
The optional onCleanup function can be used to get a notification when a transformation of an object is no longer needed.
This can be used to dispose resources attached to the result object if needed.
Always use transformations inside a reaction like observer or autorun.
Transformations will, like any other computed value, fall back to lazy evaluation if not observed by something, which sort of defeats their purpose.
Parameters
- `transformation: (value: A) => B
onCleanup?: (result: B, value?: A) => void)
createTransformer<A, B>(transformation: (value: A) => B, onCleanup?: (result: B, value?: A) => void): (value: A) => B
Examples
This all might still be a bit vague, so here are two examples that explain this whole idea of transforming one data structure into another by using small, reactive functions:
Tracking mutable state using immutable, shared data structures.
This example is taken from the Reactive2015 conference demo:
1/* 2 The store that holds our domain: boxes and arrows 3*/ 4const store = observable({ 5 boxes: [], 6 arrows: [], 7 selection: null, 8}) 9 10/** 11 Serialize store to json upon each change and push it onto the states list 12*/ 13const states = [] 14 15autorun(() => { 16 states.push(serializeState(store)) 17}) 18 19const serializeState = createTransformer((store) => ({ 20 boxes: store.boxes.map(serializeBox), 21 arrows: store.arrows.map(serializeArrow), 22 selection: store.selection ? store.selection.id : null, 23})) 24 25const serializeBox = createTransformer((box) => ({ ...box })) 26 27const serializeArrow = createTransformer((arrow) => ({ 28 id: arrow.id, 29 to: arrow.to.id, 30 from: arrow.from.id, 31}))
In this example the state is serialized by composing three different transformation functions.
The autorunner triggers the serialization of the store object, which in turn serializes all boxes and arrows.
Let's take closer look at the life of an imaginary example box#3.
- The first time box#3 is passed by
maptoserializeBox, the serializeBox transformation is executed and an entry containing box#3 and its serialized representation is added to the internal memoization table ofserializeBox. - Imagine that another box is added to the
store.boxeslist. This would cause theserializeStatefunction to re-compute, resulting in a complete remapping of all the boxes. However, all the invocations ofserializeBoxwill now return their old values from the memoization tables since their transformation functions didn't (need to) run again. - Secondly, if somebody changes a property of box#3 this will cause the application of the
serializeBoxto box#3 to re-compute, just like any other reactive function in MobX. Since the transformation will now produce a new Json object based on box#3, all observers of that specific transformation will be forced to run again as well. That's theserializeStatetransformation in this case.serializeStatewill now produce a new value in turn and map all the boxes again. But except for box#3, all other boxes will be returned from the memoization table. - Finally, if box#3 is removed from
store.boxes,serializeStatewill compute again. But since it will no longer be using the application ofserializeBoxto box#3, that reactive function will go back to non-reactive mode. This signals the memoization table that the entry can be removed so that it is ready for GC.
So effectively we have achieved state tracking using immutable, shared datas structures here.
All boxes and arrows are mapped and reduced into single state tree.
Each change will result in a new entry in the states array, but the different entries will share almost all of their box and arrow representations.
Transforming a datagraph into another reactive data graph
Instead of returning plain values from a transformation function, it is also possible to return observable objects. This can be used to transform an observable data graph into a another observable data graph, which can be used to transform... you get the idea.
Here is a small example that encodes a reactive file explorer that will update its representation upon each change. Data graphs that are built this way will in general react a lot faster and will consist of much more straight-forward code, compared to derived data graph that are updated using your own code. See the performance tests for some examples.
Unlike the previous example, the transformFolder will only run once as long as a folder remains visible;
the DisplayFolder objects track the associated Folder objects themselves.
In the following example all mutations to the state graph will be processed automatically.
Some examples:
- Changing the name of a folder will update its own
pathproperty and thepathproperty of all its descendants. - Collapsing a folder will remove all descendant
DisplayFoldersfrom the tree. - Expanding a folder will restore them again.
- Setting a search filter will remove all nodes that do not match the filter, unless they have a descendant that matches the filter.
- Etc.
1import {extendObservable, observable, createTransformer, autorun} from "mobx" 2 3function Folder(parent, name) { 4 this.parent = parent; 5 extendObservable(this, { 6 name: name, 7 children: observable.shallow([]), 8 }); 9} 10 11function DisplayFolder(folder, state) { 12 this.state = state; 13 this.folder = folder; 14 extendObservable(this, { 15 collapsed: false, 16 get name() { 17 return this.folder.name; 18 }, 19 get isVisible() { 20 return !this.state.filter || this.name.indexOf(this.state.filter) !== -1 || this.children.some(child => child.isVisible); 21 }, 22 get children() { 23 if (this.collapsed) 24 return []; 25 return this.folder.children.map(transformFolder).filter(function(child) { 26 return child.isVisible; 27 }) 28 }, 29 get path() { 30 return this.folder.parent === null ? this.name : transformFolder(this.folder.parent).path + "/" + this.name; 31 }) 32 }); 33} 34 35var state = observable({ 36 root: new Folder(null, "root"), 37 filter: null, 38 displayRoot: null 39}); 40 41var transformFolder = createTransformer(function (folder) { 42 return new DisplayFolder(folder, state); 43}); 44 45 46// returns list of strings per folder 47var stringTransformer = createTransformer(function (displayFolder) { 48 var path = displayFolder.path; 49 return path + "\n" + 50 displayFolder.children.filter(function(child) { 51 return child.isVisible; 52 }).map(stringTransformer).join(''); 53}); 54 55function createFolders(parent, recursion) { 56 if (recursion === 0) 57 return; 58 for (var i = 0; i < 3; i++) { 59 var folder = new Folder(parent, i + ''); 60 parent.children.push(folder); 61 createFolders(folder, recursion - 1); 62 } 63} 64 65createFolders(state.root, 2); // 3^2 66 67autorun(function() { 68 state.displayRoot = transformFolder(state.root); 69 state.text = stringTransformer(state.displayRoot) 70 console.log(state.text) 71}); 72 73state.root.name = 'wow'; // change folder name 74state.displayRoot.children[1].collapsed = true; // collapse folder 75state.filter = "2"; // search 76state.filter = null; // unsearch
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 9/17 approved changesets -- score normalized to 5
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 22 are checked with a SAST tool
Reason
53 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-6chw-6frg-f759
- Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
- Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
- Warn: Project is vulnerable to: GHSA-wg6g-ppvx-927h
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
- Warn: Project is vulnerable to: GHSA-vfrc-7r7c-w9mx
- Warn: Project is vulnerable to: GHSA-7wwv-vh3v-89cq
- Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
- Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
- Warn: Project is vulnerable to: GHSA-3j8f-xvm3-ffx4
- Warn: Project is vulnerable to: GHSA-4p35-cfcx-8653
- Warn: Project is vulnerable to: GHSA-7f3x-x4pr-wqhj
- Warn: Project is vulnerable to: GHSA-jpp7-7chh-cf67
- Warn: Project is vulnerable to: GHSA-q6wq-5p59-983w
- Warn: Project is vulnerable to: GHSA-j9fq-vwqv-2fm2
- Warn: Project is vulnerable to: GHSA-pqw5-jmp5-px4v
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-9q5w-79cv-947m
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-44c6-4v22-4mhx
- Warn: Project is vulnerable to: GHSA-4x5v-gmq8-25ch
- Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6
- Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj
- Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-w5p7-h5w8-2hfq
- Warn: Project is vulnerable to: GHSA-g3ch-rx76-35fx
- Warn: Project is vulnerable to: GHSA-g78m-2chm-r7qv
- Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
- Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
Score
2.4
/10
Last Scanned on 2025-03-03
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More