augmentor - GitLite

KO | EN

gitlite — search

#javascript #react #ai #typescript #go #android #rust #macos #windows #vue #security #pytorch #mcp #openai

augmentor

(★ 136)

Extensible, general purpose, React like hooks for the masses.

파일 탐색기

최종 버전 다운로드 (.zip)

- index.js
- package.json
- .eslintrc
- index.js
- .eslintrc
- context.html
- effect.html
- generic.html
- index.js
- multifx.html
- race.html
- runner.js
- state.html
- state.js
- update.js
- use-raf.html
- use-state.html
- use-update.js
.gitignore
.npmignore
.travis.yml
index.js
LICENSE
min.js
package.json
README.md
rollup.config.js

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/WebReflection/augmentor

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd augmentor

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

cd cjs

이 프로젝트의 관련 파일이 하위 폴더 안에 있어서, 먼저 그 폴더로 이동합니다.

npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm start

개발/실행 서버를 켭니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# augmentor

[![Build Status](https://travis-ci.com/WebReflection/augmentor.svg?branch=master)](https://travis-ci.com/WebReflection/augmentor) [![Coverage Status](https://coveralls.io/repos/github/WebReflection/augmentor/badge.svg?branch=master)](https://coveralls.io/github/WebReflection/augmentor?branch=master) [![Greenkeeper badge](https://badges.greenkeeper.io/WebReflection/augmentor.svg)](https://greenkeeper.io/) ![WebReflection status](https://offline.report/status/webreflection.svg)

<sup>**Social Media Photo by [Lucrezia Carnelos](https://unsplash.com/@ciabattespugnose) on [Unsplash](https://unsplash.com/)**</sup>

React like [hooks](https://reactjs.org/docs/hooks-reference.html) for the masses.

### Announcement

If you're looking for a less configurable but smaller solution, as in ~0.8K once minified and gzipped, check [µhooks](https://github.com/WebReflection/uhooks#readme) out.

#### V2 Breaking change

Both `useState` and `useReducer` are now synchronous by default. If you invoke multiple state changes at once, you can opt into asynchronous execution via the optional argument `{async: true}`.

This change was made to keep _augmentor_ defaults similar to what developers coming from other hooks based libraries expect.

## Available Hooks

* **Basic Hooks**
    * [useState](https://reactjs.org/docs/hooks-reference.html#usestate), with optional `{async: true, always: true}` second parameter to use deferred updates, _sync_ by default, and always call the hook, even if the state is the same, _false_ by default.
    * [useEffect](https://reactjs.org/docs/hooks-reference.html#useeffect)
    * [useContext](https://reactjs.org/docs/hooks-reference.html#usecontext), which can be defined via `createContext(value)`
  * **Additional Hooks**
    * [useReducer](https://reactjs.org/docs/hooks-reference.html#usereducer), with optional `{async: true, always: true}` third parameter to use deferred updates, _sync_ by default, and always call the hook, even if the state is the same, _false_ by default.
    * [useCallback](https://reactjs.org/docs/hooks-reference.html#usecallback)
    * [useMemo](https://reactjs.org/docs/hooks-reference.html#usememo)
    * [useRef](https://reactjs.org/docs/hooks-reference.html#useref)
    * [useLayoutEffect](https://reactjs.org/docs/hooks-reference.html#uselayouteffect)
  * **Third parts exported utilities**
    * `hasEffect(augmentedCallback)` returns true if `augmentedCallback` used some effect
    * `dropEffect(augmentedCallback)` executes any cleanup left from last `useEffect(...)` invocation

## example

You can test this example [directly on Code Pen](https://codepen.io/WebReflection/pen/zymKBb?editors=0011).

```js
import {augmentor, useState} from 'augmentor';

// augment any function once
const a = augmentor(test);
a();

// ... or many times ...
const [b, c] = [test, test].map(augmentor);
b();
c();

function test() {

const [count, setCount] = useState(0);

// log current count value
  console.log(count);

// will invoke this augmented function each second
  setTimeout(() => setCount(count + 1), 1000);
}
```

## F.A.Q.

<details open>
  <summary>
    <strong>Can I pass a context to an augmented function?</strong>
  </summary>
  <div>
While this library provides a way to use a context, it's somehow a footgun to enable multiple contexts for a single augmented stack, so by default you cannot use <code>augmented.call(ctx)</code> or <code>augmented.apply(ctx, [])</code>, 'cause no context whatsoever is passed along.

If by any chance you've read, and understood, the [related blog post](https://medium.com/@WebReflection/demystifying-hooks-f55ad885609f), you'd realize a single augmented function is indeed not good for prototypes or shared methods, as one context could interfere with any other previous context that used that method before.

```js
// WRONG: this is a very bad idea, as any MyComp instance
//        could potentially interfere with other instances
MyComp.prototype.doThings = augmentor(doThings);

// GOOD: this is how you'd do it 👍
class MyComp {
  constructor() {
    const {doThings} = this;
    // augment a bound method/function per each instance
    this.doThings = augmentor(doThings.bind(this));
  }
  doThings() {
    // where actually you do hooky-things
  }
}
```

That being said, if you *really* want to share a context within a single augmented function, meaning that you understand, and know, what you are doing, you can
 use the <code>contextual</code> utility provided by this library.

```js
import {contextual} from 'augmentor';

const textInjector = contextual(function (text) {
  this.textContent = text;
});

textInjector.call(div, 'hello');
textInjector.call(p, 'there!');
```

Please bear in mind that _contextualized_ functions effects will also refer to the previous context, not necessarily the current one, so that you see it's very easy to create troubles sharing, accepting, or passing, multiple contexts to the same augmented stack.

As summary, <code>augmentor(method.bind(context))</code> is the best way to use a context within an augmented function, but <code>contextual</code> can help covering other weird edge cases too.
  </div>
</details>