@shopify/decorators
Advanced tools
@shopify/decorators - npm Package Compare versions
Comparing version 3.0.1 to 4.0.0
| { | ||
| "name": "@shopify/decorators", | ||
| "version": "3.0.1", | ||
| "version": "4.0.0", | ||
| "license": "MIT", | ||
| "description": "A set of decorators to aid your JavaScript journey", | ||
| "main": "index.js", | ||
| "types": "./build/ts/index.d.ts", | ||
| "sideEffects": false, | ||
@@ -26,23 +25,3 @@ "publishConfig": { | ||
| }, | ||
| "files": [ | ||
| "build/", | ||
| "!build/*.tsbuildinfo", | ||
| "!build/ts/**/tests/", | ||
| "index.js", | ||
| "index.mjs", | ||
| "index.esnext" | ||
| ], | ||
| "dependencies": { | ||
| "@shopify/function-enhancers": "^3.0.1" | ||
| }, | ||
| "module": "index.mjs", | ||
| "esnext": "index.esnext", | ||
| "exports": { | ||
| ".": { | ||
| "types": "./build/ts/index.d.ts", | ||
| "esnext": "./index.esnext", | ||
| "import": "./index.mjs", | ||
| "require": "./index.js" | ||
| } | ||
| } | ||
| "files": [] | ||
| } |
107
README.md
| # `@shopify/decorators` | ||
| [](https://github.com/Shopify/quilt/actions?query=workflow%3ANode-CI) | ||
| [](https://github.com/Shopify/quilt/actions?query=workflow%3ARuby-CI) | ||
| [](LICENSE.md) [](https://badge.fury.io/js/%40shopify%2Fdecorators.svg) [](https://img.shields.io/bundlephobia/minzip/@shopify/decorators.svg) | ||
| A set of decorators to aid your JavaScript journey. | ||
| ## Installation | ||
| ```bash | ||
| $ yarn add @shopify/decorators | ||
| ``` | ||
| ## Usage | ||
| ### `memoize` | ||
| The memoize decorator creates a function that memoizes the results of the function it is decorating. | ||
| The cache key for storing the results are based on the first argument provided to the memoized function. | ||
| If the memoization key cannot be inferred from the first argument alone, a `resolver` should be passed in to ensure a unique key. (ex: the unique key is in the second argument, or the unique key is a combination of a few arguments) | ||
| Know that memoization will be skipped on server process and the cached results have a maximum limit of 50 entries on a first in first out basis. | ||
| #### Memoizing a simple function | ||
| ```ts | ||
| import {memoize} from '@shopify/decorators'; | ||
| class MyClass { | ||
| @memoize() | ||
| addOne(number: number) { | ||
| return number + 1; | ||
| } | ||
| } | ||
| const myClass = new MyClass(); | ||
| myClass.addOne(1); // -> 2, addOne is executed | ||
| myClass.addOne(1); // -> 2, result is from cache | ||
| ``` | ||
| #### Memoizing a function with object as argument | ||
| When memoizing a function with object as first argument, make sure the object is immutable. | ||
| ```ts | ||
| import {memoize} from '@shopify/decorators'; | ||
| class MyClass { | ||
| @memoize() | ||
| getValues(someObject: {one: string; two: string}) { | ||
| return; | ||
| } | ||
| } | ||
| const myClass = new MyClass(); | ||
| const testObject1 = {one: 1, two: 2}; | ||
| myClass.getValues(testObject1); // -> [1, 2], getValues is executed | ||
| myClass.getValues(testObject1); // -> [1, 2], result is from cache | ||
| testObject1.two = 3; | ||
| myClass.getValues(testObject1); // -> [1, 2], result is from cache, BAD | ||
| ``` | ||
| #### Memoizing a function while providing a resolver | ||
| The resolver takes in the same arguments as the function it is decorating. | ||
| Be sure that the resolver returns a unique identifer. | ||
| ```ts | ||
| import {memoize} from '@shopify/decorators'; | ||
| class MyClass { | ||
| @memoize((command: string, value: string) => `${command}${value}`) | ||
| getByCommand(command: string, value: string) { | ||
| // implementation for getByCommand | ||
| } | ||
| } | ||
| const myClass = new MyClass(); | ||
| myClass.getByCommand('command name 1', 'command value 1'); // runCommand is executed | ||
| myClass.getByCommand('command name 1', 'command value 2'); // runCommand is executed | ||
| ``` | ||
| Next let's fix the example from [above](#memoizing-a-function-with-object-as-argument) so the results will always be correct. | ||
| ```ts | ||
| import {memoize} from '@shopify/decorators'; | ||
| class MyClass { | ||
| @memoize((someObject: {id: string; value: string}) => `${id}${value}`) | ||
| getValues(someObject: {id: string; value: string}) { | ||
| return Object.values(someObject); | ||
| } | ||
| } | ||
| const myClass = new MyClass(); | ||
| const testObject1 = {id: 1, value: 2}; | ||
| myClass.getValues(testObject1); // -> [1, 2], getValues is executed | ||
| myClass.getValues(testObject1); // -> [1, 2], result is from cache | ||
| testObject1.value = 3; | ||
| myClass.getValues(testObject1); // -> [1, 3], getValues is executed | ||
| ``` | ||
| This package has been deprecated and removed. You should use `@shopify/function-enhancers` directly. |
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
Empty package
Supply chain riskPackage does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.
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
Improved metrics
- Dependency count
- decreased by-100%
0
Worsened metrics
- Total package byte prevSize
- decreased by-89.49%
819
- Number of package files
- decreased by-86.67%
2
- Lines of code
- decreased by-100%
0
- Number of lines in readme file
- decreased by-96.33%
4
- Number of medium supply chain risk alerts
- increased byInfinity%
1
Dependency changes
- Removed@shopify/function-enhancers@^3.0.1
- Removed@shopify/function-enhancers@3.1.0(transitive)