Skip to content

Commit

Permalink
Module-first steup (#99)
Browse files Browse the repository at this point in the history
* Module-first steup

* update CHANGELOG
  • Loading branch information
dai-shi authored May 2, 2024
1 parent 121e7b9 commit 81d9973
Show file tree
Hide file tree
Showing 28 changed files with 1,678 additions and 5,010 deletions.
7 changes: 6 additions & 1 deletion .codesandbox/ci.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
{
"buildCommand": "compile",
"sandboxes": ["vanilla", "vanilla-typescript-vanilla-ts", "new", "react-typescript-react-ts"],
"sandboxes": [
"vanilla",
"vanilla-typescript-vanilla-ts",
"new",
"react-typescript-react-ts"
],
"node": "18"
}
34 changes: 34 additions & 0 deletions .eslintrc.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
/* eslint-env node */
module.exports = {
root: true,
parser: '@typescript-eslint/parser',
plugins: ['@typescript-eslint'],
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:import/recommended',
'plugin:import/typescript',
'prettier',
],
ignorePatterns: ['dist/'],
settings: {
'import/resolver': {
typescript: true,
},
},
rules: {
'import/no-unresolved': ['error', { ignore: ['proxy-memoize'] }],
'@typescript-eslint/no-unused-vars': [
'error',
{
args: 'all',
argsIgnorePattern: '^_',
caughtErrors: 'all',
caughtErrorsIgnorePattern: '^_',
destructuredArrayIgnorePattern: '^_',
varsIgnorePattern: '^_',
ignoreRestSiblings: true,
},
],
},
};
37 changes: 0 additions & 37 deletions .eslintrc.json

This file was deleted.

4 changes: 4 additions & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
/pnpm-lock.yaml
/dist
/README.md
/website/pnpm-lock.yaml
58 changes: 57 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,38 +2,58 @@

## [Unreleased]

### Changed

- Module-first steup #99

## [2.0.6] - 2024-05-02

### Changed

- fix: unused selectors #97
- refactor: seen WeakSet #98

## [2.0.5] - 2024-01-15

### Changed

- fix: no extra calculation with nested memoized selectors #92

## [2.0.4] - 2023-05-06

### Changed

- fix: use target cache for better performance #72

## [2.0.3] - 2023-04-04

### Changed

- build: disable minification #66

## [2.0.2] - 2023-01-31

### Changed

- fix: nested memoized function usage #64

## [2.0.1] - 2023-01-13

### Changed

- fix: abandon cacheKey and avoid re-running touchAffected on cache #60

## [2.0.0] - 2023-01-05

### Changed

- feat: noWeakMap option #53
- breaking: use named exports #56
- feat(deps): update proxy-compare #57
- feat: memoizeWithArgs util #58

### Migration

```js
// old
import memoize, { getUntrackedObject } from 'proxy-memoize';
Expand All @@ -42,75 +62,111 @@ import { memoize, getUntracked } from 'proxy-memoize';
```

## [1.2.0] - 2022-08-14

### Changed
- update proxy-compare and re-export replaceNewProxy #48

- update proxy-compare and re-export replaceNewProxy #48

## [1.1.0] - 2022-06-14

### Changed

- refactor with array based queue #41
- fix: nested functions with embedded proxies #46
- update proxy-compare #47

## [1.0.0] - 2022-04-13

### Added

- Initial v1 release (code is not changed from v0.3.8)

## [0.3.8] - 2022-03-18

### Changed

- Update proxy-compare

## [0.3.7] - 2021-09-09

### Changed

- CJS build for Node.js (#32)

## [0.3.6] - 2021-08-13

### Changed

- Fix package.json properly for ESM (#27)

## [0.3.5] - 2021-04-29

### Changed

- Fix package.json for React Native (#25)

## [0.3.4] - 2021-05-15

### Changed

- Update proxy-compare v2.0.0 which only changes interanl API names

## [0.3.3] - 2021-03-23

### Changed

- Fix too much caching (#17)

## [0.3.2] - 2021-01-21

### Changed

- Update proxy-compare v1.1.6 which fixes some edge cases

## [0.3.1] - 2020-12-27

### Changed

- Fix a bug with nested memoized functions (#12)

## [0.3.0] - 2020-12-25

### Added

- Re-export getUntrackedObject from proxy-compare

## [0.2.3] - 2020-11-20

### Changed

- Fix incorrect memoization (#7)

## [0.2.2] - 2020-11-02

### Changed

- Refactor and simplify (#6)

## [0.2.1] - 2020-11-01

### Changed

- Support nested memoize (#5)

## [0.2.0] - 2020-10-31

### Changed

- Support nested memoize (#4) incomplete

## [0.1.1] - 2020-10-26

### Changed

- Fix untrack behavior

## [0.1.0] - 2020-10-25

### Added

- Initial release
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,9 @@ Contributions are welcome.

Immutability is pivotal in more than a few frameworks, like React and Redux. It enables simple-yet-efficient change detection in large nested data structures.

JavaScript is a mutable language by default. Libraries like [immer](https://github.com/immerjs/immer) simplify _updating_ immutable data strucutres.
JavaScript is a mutable language by default. Libraries like [immer](https://github.com/immerjs/immer) simplify *updating* immutable data strucutres.

This library helps _deriving data_ from immutable structures (AKA, selectors), efficiantly caching results for faster performance.
This library helps *deriving data* from immutable structures (AKA, selectors), efficiantly caching results for faster performance.

This library utilizes Proxy and WeakMap, and provides memoization.
The memoized function will re-evaluate the original function
Expand Down
28 changes: 17 additions & 11 deletions docs/react-redux/useProxySelector.md
Original file line number Diff line number Diff line change
@@ -1,19 +1,21 @@
# useProxySelector

This creates a `useProxySelector` hook which can be used to create a typed `useSelector` hook powered by `proxy-memoize`. By defining this hook in your application code, you can ensure that the `state` object reflects your redux state object.

## The Hook

```ts
import { memoize } from "proxy-memoize";
import { useCallback } from "react";
import { useSelector } from "react-redux";
import { memoize } from 'proxy-memoize';
import { useCallback } from 'react';
import { useSelector } from 'react-redux';

// import your react-redux RootState type
import type { RootState } from "./path/to/root/state/declaration";
import type { RootState } from './path/to/root/state/declaration';

const createProxySelectorHook = <TState extends object = any>() => {
const useProxySelector = <TReturnType>(
fn: (state: TState) => TReturnType,
deps?: any[]
deps?: any[],
): TReturnType => {
// eslint-disable-next-line react-hooks/exhaustive-deps
return useSelector(useCallback(memoize(fn), deps));
Expand All @@ -26,15 +28,19 @@ export const useProxySelector = createProxySelectorHook<RootState>();
```

## Usage in Code

```tsx
interface Props {
value: string;
}

const MyComponent:React.FC<Props> = ({ value }) => {
const result = useProxySelector((state) => {
return `${value}-modified`
}, [value]);
return (<div>{result}</div>);
}
const MyComponent: React.FC<Props> = ({ value }) => {
const result = useProxySelector(
(state) => {
return `${value}-modified`;
},
[value],
);
return <div>{result}</div>;
};
```
Loading

0 comments on commit 81d9973

Please sign in to comment.