Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
foliage - npm Package Compare versions
Comparing version 0.25.0 to 0.100.0
| { | ||
| "name": "foliage", | ||
| "version": "0.25.0", | ||
| "description": "A cursor like tree data structure.", | ||
| "main": "src/Foliage.js", | ||
| "contributors": [ | ||
| { | ||
| "name": "Nate Hunzaker", | ||
| "email": "nate.hunzaker@viget.com", | ||
| "url": "http://viget.com" | ||
| "version": "0.100.0", | ||
| "description": "Styled Components for forest", | ||
| "main": "dist/index.js", | ||
| "types": "dist/index.d.ts", | ||
| "sideEffects": false, | ||
| "scripts": { | ||
| "test": "echo \"Error: no test specified\" && exit 1", | ||
| "commit": "git-cz", | ||
| "lint": "eslint ./", | ||
| "build": "tsc --build tsconfig.json", | ||
| "format": "prettier --write \"./src/**/**.{ts,tsx,js,jsx,json}\"", | ||
| "start": "parcel example/index.html --no-cache", | ||
| "prepublishOnly": "rm -rf dist && yarn build" | ||
| }, | ||
| "publishConfig": { | ||
| "access": "public" | ||
| }, | ||
| "files": [ | ||
| "dist" | ||
| ], | ||
| "keywords": [ | ||
| "styled", | ||
| "effector", | ||
| "components", | ||
| "dom" | ||
| ], | ||
| "author": "Sergey Sova <mail@sergeysova.com> (https://sergeysova.com/)", | ||
| "license": "MIT", | ||
| "config": { | ||
| "commitizen": { | ||
| "path": "cz-conventional-changelog" | ||
| } | ||
| ], | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git://github.com/vigetlabs/foliage.git" | ||
| }, | ||
| "license": "MIT", | ||
| "devDependencies": { | ||
| "@atomix/eslint-config": "^8.0.0", | ||
| "@commitlint/cli": "^8.3.5", | ||
| "@commitlint/config-conventional": "^8.3.4", | ||
| "@types/jest": "^25.2.1", | ||
| "@types/node": "^13.13.5", | ||
| "@typescript-eslint/eslint-plugin": "^2.31.0", | ||
| "@typescript-eslint/parser": "^2.31.0", | ||
| "babel-eslint": "^10.1.0", | ||
| "commitizen": "^4.1.2", | ||
| "cz-conventional-changelog": "^3.2.0", | ||
| "effector": "^20.15.6", | ||
| "eslint": "^6.8.0", | ||
| "eslint-config-prettier": "^6.11.0", | ||
| "eslint-plugin-import": "^2.20.2", | ||
| "eslint-plugin-jest": "^23.10.0", | ||
| "eslint-plugin-jsx-a11y": "^6.2.3", | ||
| "eslint-plugin-prettier": "^3.1.3", | ||
| "eslint-plugin-unicorn": "^19.0.1", | ||
| "forest": "^0.16.1", | ||
| "husky": "^4.2.5", | ||
| "jest": "^26.0.1", | ||
| "lint-staged": "^10.2.2", | ||
| "parcel-bundler": "^1.12.4", | ||
| "prettier": "^2.0.5", | ||
| "sharec-sova-config": "^0.1.0", | ||
| "typescript": "^3.8.3", | ||
| "typescript-styled-plugin": "^0.15.0" | ||
| }, | ||
| "sharec": { | ||
| "config": "sharec-sova-config", | ||
| "version": "0.1.0" | ||
| }, | ||
| "dependencies": { | ||
| "diode": "~4.4" | ||
| "stylis": "^4.0.0" | ||
| }, | ||
| "peerDependencies": { | ||
| "effector": "^20.15.6", | ||
| "forest": "^0.16.0" | ||
| } | ||
| } |
133
README.md
@@ -1,93 +0,58 @@ | ||
|  | ||
| # foliage | ||
| Foliage is lightweight tree that operates on a tree of JavaScript | ||
| primitives. It is inspired by many Cursors libraries/frameworks (see | ||
| [prior art](#prior-art)), | ||
| however it is not nearly as ambitious. It sacrifices robustness and | ||
| purity for the sake of embeddability. | ||
| ## Usage | ||
| [](https://circleci.com/gh/vigetlabs/foliage) | ||
| ```ts | ||
| import { using } from 'forest'; | ||
| import { styled, StyledRoot } from 'foliage'; | ||
| --- | ||
| const Block = styled.div` | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| align-items: center; | ||
| text-align: center; | ||
| color: white; | ||
| box-shadow: rgba(0, 0, 0, 0.17) 0px 2px 20px; | ||
| box-sizing: border-box; | ||
| min-height: 100vh; | ||
| margin-bottom: 160px; | ||
| background: linear-gradient(20deg, rgb(219, 112, 147), rgb(218, 163, 87)); | ||
| `; | ||
| ## Goals | ||
| const Button = styled.a` | ||
| display: inline-block; | ||
| border-radius: 3px; | ||
| padding: 0.5rem 0; | ||
| margin: 0.5rem 1rem; | ||
| width: 11rem; | ||
| background: transparent; | ||
| color: white; | ||
| border: 2px solid white; | ||
| text-decoration: none; | ||
| 1. Easier testing. Decouple React components from rest of app. Foliage | ||
| makes it easier to "branch" off a subset of data while still having | ||
| the ability to reference the root. | ||
| 2. Easy data traversal. It is simple to traverse object keys, however | ||
| JavaScript objects aren't good at enumeration. Foliage provides | ||
| some helpers out of the box for this. | ||
| 3. Keep it less than 1kb gzipped. Foliage isn't trying to do too much | ||
| or be too smart. | ||
| ## Opinions | ||
| 1. Keep a naming convention similar to ES6 maps | ||
| 2. Don't do too much, but provide a platform for extension | ||
| ## Working with Foliage | ||
| Foliage can retrieve and set data similarly to an ES6 map | ||
| ```javascript | ||
| let plant = new Foliage({ berries: true }) | ||
| // retrieve state | ||
| plant.get('berries') // true | ||
| // set state | ||
| plant.set('berries', false) | ||
| // remove state | ||
| plant.remove('berries') | ||
| ``` | ||
| ### Working with subsets of data | ||
| `refine` will clone an instance of Foliage and place a cursor to a | ||
| point within its tree: | ||
| ```javascript | ||
| let plant = new Foliage({ berries: true }) | ||
| plant.refine('berries').valueOf() // => true | ||
| ``` | ||
| ```javascript | ||
| let oak = new Foliage({ | ||
| squirrels: { | ||
| squeakem: { weight: 2, height: 12 } | ||
| chatters: { weight: 5, height: 8 } | ||
| &[data-fill='true'] { | ||
| background: white; | ||
| color: palevioletred; | ||
| } | ||
| }) | ||
| `; | ||
| let squirrels = oak.refine('squirrels') | ||
| ``` | ||
| function App() { | ||
| Block({ | ||
| fn() { | ||
| Button({ | ||
| text: 'Google', | ||
| attr: { href: 'https://google.com' }, | ||
| data: { fill: true }, | ||
| }); | ||
| Button({ | ||
| text: 'Yandex', | ||
| attr: { href: 'https://yandex.ru' }, | ||
| }); | ||
| }, | ||
| }); | ||
| } | ||
| In this example, `squirrels` is a subset of `oak` focused on the | ||
| `squirrels` key. Under the hood, they point to the same underlying | ||
| data. This means if you `set` in `squirrel`, `oak` will be modified as | ||
| well: | ||
| ```javascript | ||
| squirrels.set(['squeakem', 'weight'], 5) | ||
| oak.get(['squirrels', 'squeakem', 'weight']) // => 5 | ||
| using(document.querySelector('#root'), App); | ||
| using(document.querySelector('head'), StyledRoot)); | ||
| ``` | ||
| A couple of things are going on here. First, `set` is used to modify | ||
| data. Second, both `get` and `set` accept an array of keys. When given | ||
| an array, they will traverse the tree for the leaf value instead of | ||
| just returning the key from the most immediate level. | ||
| ## Prior art | ||
| There is nothing novel about Foliage, it shamelessly mimics: | ||
| - [Sprout](https://github.com/herrstucki/sprout) | ||
| - [OmnicientJS](http://omniscientjs.github.io/) | ||
| - [OmnicientJS Immstruct](https://github.com/omniscientjs/immstruct) | ||
| - [Om](https://github.com/omcljs/om) | ||
| - [Functional Zippers](http://yquem.inria.fr/~huet/PUBLIC/zip.pdf) | ||
| - [React Cursor](https://github.com/dustingetz/react-cursor) | ||
| - [Baobab](https://github.com/Yomguithereal/baobab) |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
No tests
QualityPackage does not have any tests. This is a strong signal of a poorly maintained or low quality package.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-86.4%
13726
- Dependency count
- increased by200%
3
- Dev dependency count
- increased byInfinity%
27
- Number of package files
- decreased by-52.94%
8
- Lines of code
- decreased by-2.78%
245
- Number of low quality alerts
- increased by50%
3
- Number of lines in readme file
- decreased by-37.23%
59
- Number of low supply chain risk alerts
- increased byInfinity%
1
- Number of medium supply chain risk alerts
- increased byInfinity%
2
Dependency changes
+ Addedstylis@^4.0.0
+ Addedeffector@20.17.2(transitive)
+ Addedforest@0.16.9(transitive)
+ Addedstylis@4.3.5(transitive)
+ Addedsymbol-observable@1.2.0(transitive)
- Removeddiode@~4.4
- Removeddiode@4.4.0(transitive)