├── .gitignore
├── src
├── index.ts
├── react-app-env.d.ts
├── common.ts
├── events.ts
└── __tests__
│ └── events.test.tsx
├── .eslintignore
├── .github
├── FUNDING.yml
└── workflows
│ ├── main.yml
│ ├── demo-deploy.yml
│ ├── npm-publish.yml
│ └── codeql-analysis.yml
├── example
├── public
│ ├── favicon.ico
│ ├── logo192.png
│ ├── logo512.png
│ ├── robots.txt
│ ├── manifest.json
│ └── index.html
├── src
│ ├── components
│ │ ├── App
│ │ │ ├── App.test.jsx
│ │ │ ├── App.css
│ │ │ └── App.jsx
│ │ └── Demo
│ │ │ ├── Demo.test.jsx
│ │ │ ├── Demo.css
│ │ │ └── Demo.jsx
│ ├── setupTests.js
│ ├── icons
│ │ ├── npm.svg
│ │ └── github.svg
│ ├── reportWebVitals.js
│ ├── index.jsx
│ └── index.css
├── .gitignore
├── build.js
├── README.md
└── package.json
├── tsconfig.test.json
├── .editorconfig
├── .prettierrc
├── .eslintrc
├── tsconfig.json
├── LICENSE
├── package.json
└── README.md
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | coverage
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | export { default as events } from './events'
2 |
--------------------------------------------------------------------------------
/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | build/
2 | dist/
3 | node_modules/
4 | .snapshots/
5 | *.min.js
--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | # These are supported funding model platforms
2 |
3 | github: [Gareneye]
4 |
--------------------------------------------------------------------------------
/example/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oleystack/event/HEAD/example/public/favicon.ico
--------------------------------------------------------------------------------
/example/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oleystack/event/HEAD/example/public/logo192.png
--------------------------------------------------------------------------------
/example/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oleystack/event/HEAD/example/public/logo512.png
--------------------------------------------------------------------------------
/example/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/tsconfig.test.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "module": "commonjs"
5 | }
6 | }
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | charset = utf-8
5 | indent_style = space
6 | indent_size = 2
7 | end_of_line = lf
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "singleQuote": true,
3 | "jsxSingleQuote": true,
4 | "semi": false,
5 | "tabWidth": 2,
6 | "bracketSpacing": true,
7 | "arrowParens": "always",
8 | "trailingComma": "none"
9 | }
10 |
--------------------------------------------------------------------------------
/example/src/components/App/App.test.jsx:
--------------------------------------------------------------------------------
1 | import ReactDOM from 'react-dom'
2 | import App from './App'
3 |
4 | it('renders without crashing', () => {
5 | const div = document.createElement('div')
6 | ReactDOM.render(, div)
7 | ReactDOM.unmountComponentAtNode(div)
8 | })
9 |
--------------------------------------------------------------------------------
/example/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 |
--------------------------------------------------------------------------------
/example/src/components/Demo/Demo.test.jsx:
--------------------------------------------------------------------------------
1 | import ReactDOM from 'react-dom'
2 | import Demo from './Demo'
3 |
4 | it('renders without crashing', () => {
5 | const div = document.createElement('div')
6 | ReactDOM.render(, div)
7 | ReactDOM.unmountComponentAtNode(div)
8 | })
9 |
--------------------------------------------------------------------------------
/example/src/icons/npm.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/example/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/example/src/reportWebVitals.js:
--------------------------------------------------------------------------------
1 | const reportWebVitals = onPerfEntry => {
2 | if (onPerfEntry && onPerfEntry instanceof Function) {
3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
4 | getCLS(onPerfEntry);
5 | getFID(onPerfEntry);
6 | getFCP(onPerfEntry);
7 | getLCP(onPerfEntry);
8 | getTTFB(onPerfEntry);
9 | });
10 | }
11 | };
12 |
13 | export default reportWebVitals;
14 |
--------------------------------------------------------------------------------
/src/common.ts:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | /* istanbul ignore next */
4 | export const isDev = process.env.NODE_ENV !== 'production'
5 |
6 | const canUseDOM = (): boolean =>
7 | typeof window !== 'undefined' &&
8 | !!(window.document && window.document.createElement)
9 |
10 | /* istanbul ignore next */
11 | export const useIsomorphicLayoutEffect: typeof React.useEffect = canUseDOM()
12 | ? React.useLayoutEffect
13 | : React.useEffect
14 |
--------------------------------------------------------------------------------
/example/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "@bit-about/event",
3 | "name": "@bit-about/event 💫 Tiny and powerful hook-based event system for React.",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#282c34",
24 | "background_color": "#282c34"
25 | }
26 |
--------------------------------------------------------------------------------
/example/src/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom'
3 | import reportWebVitals from './reportWebVitals'
4 |
5 | import App from './components/App/App'
6 | import './index.css'
7 |
8 | const rootElement = document.getElementById('root')
9 | if (rootElement.hasChildNodes()) {
10 | ReactDOM.hydrate(, rootElement)
11 | } else {
12 | ReactDOM.render(, rootElement)
13 | }
14 |
15 | // If you want to start measuring performance in your app, pass a function
16 | // to log results (for example: reportWebVitals(console.log))
17 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
18 | reportWebVitals(console.log)
19 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "parser": "@typescript-eslint/parser",
3 | "extends": [
4 | "standard",
5 | "standard-react",
6 | "plugin:@typescript-eslint/eslint-recommended"
7 | ],
8 | "env": {
9 | "node": true
10 | },
11 | "parserOptions": {
12 | "ecmaVersion": 2020,
13 | "ecmaFeatures": {
14 | "legacyDecorators": true,
15 | "jsx": true
16 | }
17 | },
18 | "settings": {
19 | "react": {
20 | "version": "16"
21 | }
22 | },
23 | "rules": {
24 | "space-before-function-paren": 0,
25 | "react/prop-types": 0,
26 | "react/jsx-handler-names": 0,
27 | "react/jsx-fragments": 0,
28 | "react/no-unused-prop-types": 0,
29 | "import/export": 0,
30 | "no-use-before-define": 0
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/.github/workflows/main.yml:
--------------------------------------------------------------------------------
1 | name: Build
2 |
3 | on:
4 | push:
5 | branches: [ main ]
6 | pull_request:
7 | branches: [ main ]
8 |
9 | jobs:
10 | build:
11 | runs-on: ubuntu-latest
12 |
13 | strategy:
14 | matrix:
15 | node-version: [16.x]
16 |
17 | steps:
18 | - uses: actions/checkout@v3
19 |
20 | - name: Use Node.js ${{ matrix.node-version }}
21 | uses: actions/setup-node@v3
22 | with:
23 | node-version: ${{ matrix.node-version }}
24 |
25 | - name: Prepare
26 | run: |
27 | npm install
28 |
29 | - name: Test
30 | run: |
31 | npm run test
32 |
33 | - name: Codecov
34 | uses: codecov/codecov-action@v2.1.0
35 | with:
36 | directory: coverage
37 |
--------------------------------------------------------------------------------
/example/build.js:
--------------------------------------------------------------------------------
1 | const rewire = require('rewire')
2 | const defaults = rewire('react-scripts/scripts/build.js')
3 | const config = defaults.__get__('config')
4 |
5 | /**
6 | * Do not mangle component names in production
7 | * @link https://kentcdodds.com/blog/profile-a-react-app-for-performance#disable-function-name-mangling
8 | */
9 | config.optimization.minimizer[0].options.extractComments = false
10 | config.optimization.minimizer[0].options.minimizer.options.keep_classnames = true
11 | config.optimization.minimizer[0].options.minimizer.options.keep_fnames = true
12 | config.optimization.minimizer[0].options.minimizer.options.output.comments = true
13 |
14 | // Force development env
15 | config.plugins[4].definitions['process.env'].NODE_ENV = '"development"'
16 | config.mode = 'development'
17 |
--------------------------------------------------------------------------------
/example/src/icons/github.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.github/workflows/demo-deploy.yml:
--------------------------------------------------------------------------------
1 | name: Demo deploy
2 |
3 | on:
4 | push:
5 | branches: [ main ]
6 |
7 | jobs:
8 | build:
9 | runs-on: ubuntu-latest
10 |
11 | strategy:
12 | matrix:
13 | node-version: [16.x]
14 |
15 | steps:
16 | - uses: actions/checkout@v3
17 |
18 | - name: Use Node.js ${{ matrix.node-version }}
19 | uses: actions/setup-node@v3
20 | with:
21 | node-version: ${{ matrix.node-version }}
22 |
23 | - name: Prepare
24 | working-directory: .
25 | run: |
26 | npm install
27 | npm run build
28 | cd example && npm install
29 |
30 | - name: Deploy with gh-pages
31 | working-directory: ./example
32 | run: |
33 | git remote set-url origin https://git:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git
34 | npm run deploy -- -u "bit-about "
35 | env:
36 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
37 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "outDir": "dist",
4 | "module": "esnext",
5 | "lib": [
6 | "dom",
7 | "esnext"
8 | ],
9 | "moduleResolution": "node",
10 | "jsx": "react",
11 | "sourceMap": true,
12 | "declaration": true,
13 | "esModuleInterop": true,
14 | "noImplicitReturns": true,
15 | "noImplicitThis": true,
16 | "noImplicitAny": true,
17 | "strictNullChecks": true,
18 | "suppressImplicitAnyIndexErrors": true,
19 | "noUnusedLocals": true,
20 | "noUnusedParameters": true,
21 | "allowSyntheticDefaultImports": true,
22 | "target": "es5",
23 | "allowJs": true,
24 | "skipLibCheck": true,
25 | "strict": true,
26 | "forceConsistentCasingInFileNames": true,
27 | "resolveJsonModule": true,
28 | "isolatedModules": true,
29 | "noEmit": true
30 | },
31 | "include": [
32 | "src"
33 | ],
34 | "exclude": [
35 | "node_modules",
36 | "dist",
37 | "example"
38 | ]
39 | }
40 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2022 Maciej Olejnik
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/example/README.md:
--------------------------------------------------------------------------------
1 | # Demo @bit-about/event
2 |
3 | Live preview: [https://bit-about.github.io/event](https://bit-about.github.io/event/).
4 |
5 | ---
6 |
7 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
8 |
9 | ## Available Scripts
10 |
11 | In the project directory, you can run:
12 |
13 | ### `npm start`
14 |
15 | Runs the app in the development mode.\
16 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
17 |
18 | The page will reload when you make changes.\
19 | You may also see any lint errors in the console.
20 |
21 | ### `npm test`
22 |
23 | Launches the test runner in the interactive watch mode.\
24 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
25 |
26 | ### `npm run build`
27 |
28 | Builds the app for production to the `build` folder.\
29 | It correctly bundles React in production mode and optimizes the build for the best performance.
30 |
31 | The build is minified and the filenames include the hashes.\
32 | Your app is ready to be deployed!
33 |
34 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
--------------------------------------------------------------------------------
/example/src/components/App/App.css:
--------------------------------------------------------------------------------
1 | .app {
2 | text-align: center;
3 | padding: 1em;
4 | padding-bottom: 3em;
5 | display: flex;
6 | min-height: 100vh;
7 | align-items: center;
8 | justify-content: center;
9 | flex-direction: column;
10 | position: relative;
11 | }
12 |
13 | .app-container {
14 | width: 100%;
15 | max-width: 996px;
16 | }
17 |
18 | .app-header {
19 | background-color: #282c34;
20 | display: flex;
21 | flex-direction: column;
22 | align-items: center;
23 | justify-content: center;
24 | font-size: calc(10px + 2vmin);
25 | color: white;
26 | }
27 |
28 | .title {
29 | font-size: 2em;
30 | margin: 0;
31 | margin-bottom: 10px;
32 | }
33 |
34 | .desc {
35 | font-size: smaller;
36 | margin: 0;
37 | }
38 |
39 | ul.menu {
40 | list-style: none;
41 | margin: 0;
42 | padding: 0;
43 | margin-top: 1.5em;
44 | }
45 |
46 | ul.menu li {
47 | display: inline;
48 | margin: 0 0.5em;
49 | }
50 |
51 | .footer {
52 | position: absolute;
53 | bottom: 0;
54 | left: 0;
55 | right: 0;
56 | margin: 0;
57 | padding: 0;
58 | line-height: 3em;
59 | color: rgb(171, 171, 171);
60 | font-size: 0.8em;
61 | }
62 |
63 | @media only screen and (max-width: 600px) {
64 | .app-container {
65 | margin-top: 4em;
66 | }
67 | }
68 |
--------------------------------------------------------------------------------
/example/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | background-color: #282c34;
9 | color: #fff;
10 | }
11 |
12 | code {
13 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
14 | monospace;
15 | }
16 |
17 | * {
18 | box-sizing: border-box;
19 | }
20 |
21 | .button {
22 | background: #1d8cf8;
23 | background-image: linear-gradient(to bottom left, #1d8cf8, #3358f4, #1d8cf8);
24 | background-size: 210% 210%;
25 | background-position: 100% 0;
26 | color: #fff;
27 | box-shadow: 2px 2px 6px rgb(0 0 0 / 40%);
28 | text-align: center;
29 | padding: 8px 17px;
30 | font-weight: 400;
31 | border-radius: 0.25rem;
32 | border: none;
33 | margin: 1em;
34 | cursor: pointer;
35 | }
36 |
37 | .code-preview {
38 | background-color: #1e2126;
39 | padding: 0.5em 1.5em;
40 | margin: 0.5em;
41 | text-align: left;
42 | color: #80899c;
43 | border: 1px solid #343740;
44 | }
45 |
46 | .code-preview p {
47 | margin: 0.3em 0;
48 | font-size: 0.7em;
49 | }
50 |
51 | .code-preview ul {
52 | margin: 0;
53 | padding: 0;
54 | padding-left: 2em;
55 | }
--------------------------------------------------------------------------------
/.github/workflows/npm-publish.yml:
--------------------------------------------------------------------------------
1 | # This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
2 | # For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
3 |
4 | name: Node.js Package
5 |
6 | on:
7 | push:
8 | tags:
9 | - 'v*'
10 |
11 | jobs:
12 | build:
13 | runs-on: ubuntu-latest
14 | strategy:
15 | matrix:
16 | node-version: [16.x]
17 | steps:
18 | - uses: actions/checkout@v3
19 | - name: Use Node.js ${{ matrix.node-version }}
20 | uses: actions/setup-node@v3
21 | with:
22 | node-version: ${{ matrix.node-version }}
23 | - name: Prepare
24 | run: |
25 | npm install
26 | - name: Test
27 | run: |
28 | npm run test
29 | - name: Codecov
30 | uses: codecov/codecov-action@v2.1.0
31 | with:
32 | directory: coverage
33 |
34 | publish-npm:
35 | needs: build
36 | runs-on: ubuntu-latest
37 | steps:
38 | - uses: actions/checkout@v3
39 | - uses: actions/setup-node@v3
40 | with:
41 | node-version: 16
42 | registry-url: https://registry.npmjs.org/
43 | - run: npm ci
44 | - run: npm publish --access=public
45 | env:
46 | NODE_AUTH_TOKEN: ${{secrets.npm_token}}
47 |
--------------------------------------------------------------------------------
/example/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@bit-about/event-example",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@bit-about/event": "file:..",
7 | "@testing-library/jest-dom": "^4.2.4",
8 | "@testing-library/react": "^9.5.0",
9 | "@testing-library/user-event": "^7.2.1",
10 | "@types/react": "^16.9.27",
11 | "@types/react-dom": "^16.9.7",
12 | "gh-pages": "^3.2.3",
13 | "react": "file:../node_modules/react",
14 | "react-dom": "file:../node_modules/react-dom",
15 | "react-scripts": "^5.0.0",
16 | "react-transition-group": "^4.4.2",
17 | "web-vitals": "^2.1.4"
18 | },
19 | "scripts": {
20 | "predeploy": "npm run build",
21 | "deploy": "gh-pages -d build",
22 | "start": "react-scripts start",
23 | "build": "node ./build.js",
24 | "postbuild": "react-snap",
25 | "test": "react-scripts test"
26 | },
27 | "eslintConfig": {
28 | "extends": [
29 | "react-app",
30 | "react-app/jest"
31 | ]
32 | },
33 | "browserslist": {
34 | "production": [
35 | ">0.2%",
36 | "not dead",
37 | "not op_mini all"
38 | ],
39 | "development": [
40 | "last 1 chrome version",
41 | "last 1 firefox version",
42 | "last 1 safari version"
43 | ]
44 | },
45 | "homepage": "https://bit-about.github.io/event",
46 | "devDependencies": {
47 | "react-snap": "^1.23.0",
48 | "rewire": "^6.0.0"
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/example/src/components/App/App.jsx:
--------------------------------------------------------------------------------
1 | import Demo from '../Demo/Demo'
2 | import { ReactComponent as Github } from '../../icons/github.svg'
3 | import { ReactComponent as Npm } from '../../icons/npm.svg'
4 | import './App.css'
5 |
6 | function App() {
7 | return (
8 |
9 |
10 |
11 | @bit-about/event
12 |
13 | 💫 Tiny and powerful hook-based event system for React.
14 |
15 |
47 |
48 |
49 |
50 |
46 | component_1
47 |
48 |
51 |
52 | )
53 | }
54 |
55 | /**
56 | * COMPONENT_2
57 | */
58 | function ComponentTwo() {
59 | const [isLightOn, setIsLightOn] = useState(false)
60 | useEvent({
61 | lightSwitchPressed: () => setIsLightOn((value) => !value)
62 | })
63 |
64 | return (
65 |
66 |
component_2
67 |
68 |
69 |
70 |
71 | 💡 light is{' '}
72 | {isLightOn ? (
73 | ON
74 | ) : (
75 | OFF
76 | )}
77 |
78 |
79 |
is listening on lightSwitchPressed event
80 |
92 | bedroom
93 |
94 |
95 |
96 |
97 |
98 |
99 | )
100 | }
101 |
102 | export default Demo
103 |
--------------------------------------------------------------------------------
/.github/workflows/codeql-analysis.yml:
--------------------------------------------------------------------------------
1 | # For most projects, this workflow file will not need changing; you simply need
2 | # to commit it to your repository.
3 | #
4 | # You may wish to alter this file to override the set of languages analyzed,
5 | # or to provide custom queries or build logic.
6 | #
7 | # ******** NOTE ********
8 | # We have attempted to detect the languages in your repository. Please check
9 | # the `language` matrix defined below to confirm you have the correct set of
10 | # supported CodeQL languages.
11 | #
12 | name: "CodeQL"
13 |
14 | on:
15 | push:
16 | branches: [ main ]
17 | pull_request:
18 | # The branches below must be a subset of the branches above
19 | branches: [ main ]
20 | schedule:
21 | - cron: '20 20 * * 4'
22 |
23 | jobs:
24 | analyze:
25 | name: Analyze
26 | runs-on: ubuntu-latest
27 | permissions:
28 | actions: read
29 | contents: read
30 | security-events: write
31 |
32 | strategy:
33 | fail-fast: false
34 | matrix:
35 | language: [ 'javascript' ]
36 | # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
37 | # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
38 |
39 | steps:
40 | - name: Checkout repository
41 | uses: actions/checkout@v3
42 |
43 | # Initializes the CodeQL tools for scanning.
44 | - name: Initialize CodeQL
45 | uses: github/codeql-action/init@v2
46 | with:
47 | languages: ${{ matrix.language }}
48 | # If you wish to specify custom queries, you can do so here or in a config file.
49 | # By default, queries listed here will override any specified in a config file.
50 | # Prefix the list here with "+" to use these queries and those in the config file.
51 |
52 | # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
53 | # queries: security-extended,security-and-quality
54 |
55 |
56 | # Autobuild attempts to build any compiled languages (C/C++, C#, or Java).
57 | # If this step fails, then you should remove it and run the build manually (see below)
58 | - name: Autobuild
59 | uses: github/codeql-action/autobuild@v2
60 |
61 | # ℹ️ Command-line programs to run using the OS shell.
62 | # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
63 |
64 | # If the Autobuild fails above, remove it and uncomment the following three lines.
65 | # modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
66 |
67 | # - run: |
68 | # echo "Run, Build Application using script"
69 | # ./location_of_script_within_repo/buildscript.sh
70 |
71 | - name: Perform CodeQL Analysis
72 | uses: github/codeql-action/analyze@v2
73 |
--------------------------------------------------------------------------------
/src/events.ts:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {
3 | unstable_NormalPriority as NormalPriority,
4 | unstable_runWithPriority as runWithPriority
5 | } from 'scheduler'
6 |
7 | import { useIsomorphicLayoutEffect } from './common'
8 |
9 | /**
10 | * Types
11 | */
12 | type EventKey = string | number | symbol
13 |
14 | type EventMiddleware[], Out> = (
15 | ...payload: In
16 | ) => Out
17 |
18 | type EventListener = (payload: Readonly) => void
19 |
20 | type EventRegistry<
21 | Key extends EventKey,
22 | Event extends EventMiddleware
23 | > = Record
24 |
25 | type EventRecord = Readonly<{ key: EventKey; payload: any[] }>
26 |
27 | export default function events<
28 | Key extends EventKey,
29 | Middleware extends EventMiddleware,
30 | Registry extends EventRegistry
31 | >(middlewares: Registry) {
32 | type ListenerRegistry = {
33 | [key in keyof Partial]: EventListener>
34 | }
35 |
36 | const isBinded = { current: false }
37 | const listeners: ListenerRegistry[] = []
38 | const records: EventRecord[] = []
39 |
40 | const informListeners = (
41 | listeners: ListenerRegistry[],
42 | record: EventRecord
43 | ) => {
44 | listeners.forEach((registry) =>
45 | registry[record.key]?.(middlewares[record.key](...record.payload))
46 | )
47 | }
48 |
49 | type Dispatcher = {
50 | [key in keyof Registry]: (...payload: Parameters) => void
51 | }
52 | const dispatcher = new Proxy(listeners, {
53 | get: (thisListeners, eventKey) => {
54 | return (...payload: unknown[]) => {
55 | if (isBinded.current) {
56 | // Dispatch immediately
57 | informListeners(thisListeners, { key: eventKey, payload })
58 | } else {
59 | // Dispatch after the first render
60 | records.push({ key: eventKey, payload })
61 | }
62 | }
63 | }
64 | }) as unknown as Dispatcher
65 |
66 | /**
67 | * Provider
68 | */
69 | const BindProvider: React.FC<{ children?: React.ReactNode | undefined }> = (
70 | props
71 | ) => {
72 | useIsomorphicLayoutEffect(() => {
73 | runWithPriority(NormalPriority, () => {
74 | // Informing listeners
75 | records.forEach((record) => informListeners(listeners, record))
76 | records.splice(0, records.length)
77 |
78 | isBinded.current = true
79 | })
80 | }, [])
81 |
82 | return React.createElement(React.Fragment, props)
83 | }
84 |
85 | /**
86 | * useEvent hook
87 | * @param newListeners List of subscribed events
88 | * @returns Dispatch function
89 | */
90 | const useEvent = (newListeners?: ListenerRegistry) => {
91 | useIsomorphicLayoutEffect(() => {
92 | if (!newListeners) {
93 | return
94 | }
95 |
96 | listeners.push(newListeners)
97 |
98 | return () => {
99 | listeners.splice(listeners.indexOf(newListeners), 1)
100 | }
101 | }, [newListeners])
102 |
103 | return dispatcher
104 | }
105 |
106 | /**
107 | * Subscriber for non-hook aproaches
108 | * @param newListeners List of subscribed events
109 | * @returns Subscriber with unsubscribe method
110 | */
111 | const subscribe = (newListeners: ListenerRegistry) => {
112 | listeners.push(newListeners)
113 |
114 | const unsubscribe = () => {
115 | listeners.splice(listeners.indexOf(newListeners), 1)
116 | }
117 |
118 | return { unsubscribe }
119 | }
120 |
121 | return [BindProvider, useEvent, { subscribe, dispatcher }] as const
122 | }
123 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | 
3 |
4 | 
5 | 
6 | 
7 |
8 |
9 | ## Install
10 |
11 | ```bash
12 | npm i @bit-about/event
13 | ```
14 |
15 | ## Migrations
16 |
17 | v1 -> v2
18 |
19 | > Events dispatch approach has been changed. There are no longer functions executed using their names in string.
20 | >
21 | > ✖️ old one:
22 | > ```jsx
23 | > const dispatch = useEvent()
24 | > dispatch('onBobPress', 'hello')
25 | > ```
26 | > ✅ new one:
27 | > ```jsx
28 | > const { onBobPress } = useEvent()
29 | > onBobPress('hello')
30 | > ```
31 |
32 |
33 |
34 |
35 | ## Features
36 |
37 | - 100% **Idiomatic React**
38 | - 100% Typescript with event types deduction
39 | - Listen or dispatch events from a hook...
40 | - ...or utilise static access
41 | - No centralized event provider
42 | - Tiny - only **0.6kB**
43 | - **Just works** ™
44 |
45 | ### ➡️ [Check demo](https://bit-about.github.io/event/)
46 |
47 | ## Usage
48 |
49 | 1️⃣ Define *your events* by defining their payload middlewares
50 | ```jsx
51 | import { events } from '@bit-about/event'
52 |
53 | const [EventProvider, useEvents] = events({
54 | buttonClicked: (payload: string) => payload,
55 | userLogged: () => {},
56 | modalClosed: () => {},
57 | })
58 | ```
59 |
60 | 2️⃣ Wrap your components in EventProvider
61 | ```jsx
62 | const App = () => (
63 |
64 | ...
65 |
66 | )
67 | ```
68 |
69 | 🗣️ Dispatch your events in one place...
70 |
71 | ```jsx
72 | const Button = () => {
73 | const { buttonClicked } = useEvents()
74 |
75 | return (
76 |
79 | )
80 | }
81 | ```
82 |
83 | 👂 ...and listen for them in another
84 | ```jsx
85 | const Component = () => {
86 | const [message, setMessage] = React.useState('')
87 |
88 | useEvents({
89 | buttonClicked: (payload: string) => setMessage(payload)
90 | })
91 |
92 | return {message}
// "Hello"
93 | }
94 | ```
95 |
96 | ## Static access
97 | The third result element of `events()` is object providing access in static manner (without hook).
98 |
99 | ```jsx
100 | const [AppEventProvider, useAppEvents, { subscribe, dispatcher }] = events(...)
101 | ```
102 |
103 | and then
104 | ```jsx
105 | // 🗣️ Dispatch event
106 | dispatcher.buttonClicked('Hello Allice!')
107 |
108 | // 👂 Subscribe and listen on new events
109 | const subscriber = subscribe({
110 | buttonClicked: (payload: string) => console.log(payload)
111 | })
112 |
113 | // remember to unsubscribe!
114 | subscriber.unsubscribe()
115 | ```
116 |
117 | ## 👉 Re-render
118 | Neither listeners nor events dispatch your components render.
119 | A component will only be rerendered if it's state is explicitly changed (in e.g. `React.useState`).
120 |
121 | ```jsx
122 | const Component = () => {
123 | const [message, setMessage] = React.useState('')
124 |
125 | useEvents({
126 | aliceClicked: () => console.log('I DO NOT rerender this component!'),
127 | bobClicked: () => setMessage('I DO rerender this component!')
128 | })
129 |
130 | return {message}
131 | }
132 | ```
133 |
134 | ## Event Middlewares
135 | Events in `events()` are payload middlewares. They can transform payload into another.
136 |
137 | ```jsx
138 | const [EventProvider, useEvents] = events({
139 | buttonClicked: (payload) => `Hello ${message}!`, // Transforms string payload to another
140 | avatarClicked: () => `Bob!`, // Provides default payload
141 | })
142 |
143 | const { buttonClicked, avatarClicked } = useEvents({
144 | buttonClicked: (payload) => console.log(payload), // prints "Hello Alice!",
145 | avatarClicked: (payload) => console.log(payload), // prints "Bob!"
146 | })
147 |
148 | buttonClicked('Alice')
149 | avatarClicked()
150 | ```
151 |
152 | > NOTE:
153 | > The library is full type-safe, so Typescript will inform you when you use wrong payload anywhere.
154 |
155 | ## BitAboutEvent 💛 [BitAboutState](https://github.com/bit-about/state)
156 | Are you tired of sending logic to a related components?
157 | Move your bussiness logic to hook-based state using `@bit-about/state` + `@bit-about/event`.
158 |
159 | Now you've got **completely type-safe side-effects**. Isn't that cool?
160 |
161 | ```tsx
162 | import { state } from '@bit-about/state'
163 | import { useEvents } from './auth-events' // Hook generated from events()
164 | import User from '../models/user'
165 |
166 | const [UserProvider, useUser] = state(
167 | () => {
168 | const [user, setUser] = React.useState(null)
169 |
170 | useEvents({
171 | userLogged: (user: User) => setUser(user),
172 | userLoggout: () => setUser(null)
173 | })
174 |
175 | return user
176 | }
177 | )
178 | ```
179 |
180 | ## Partners
181 | 
182 |
183 | ## Credits
184 | - [Constate](https://github.com/diegohaz/constate) - approach main inspiration
185 | - [use-context-selector](https://github.com/dai-shi/use-context-selector) & [FluentUI](https://github.com/microsoft/fluentui) - fancy rerender avoiding tricks and code main inspiration
186 |
187 | ## License
188 | MIT © [Maciej Olejnik 🇵🇱](https://github.com/macoley)
189 |
190 | ## Support me
191 |
192 | 
193 |
194 | If you use my library and you like it...
195 | it would be nice if you put the name `BitAboutEvent` in the work experience section of your resume.
196 | Thanks 🙇🏻!
197 |
198 | ---
199 | 🇺🇦 Slava Ukraini
200 |
--------------------------------------------------------------------------------
/src/__tests__/events.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { fireEvent, render } from '@testing-library/react'
3 | import events from '../events'
4 | import { act } from 'react-dom/test-utils'
5 |
6 | // Counter Component
7 | const Counter = ({ role }: { role: string }) => {
8 | const renderCounter = React.useRef(0)
9 | renderCounter.current = renderCounter.current + 1
10 | return {renderCounter.current}
11 | }
12 |
13 | test('Basic usage', () => {
14 | const aliceListener = jest.fn()
15 | const [Provider, useEvents] = events({
16 | onAlicePress: (alice: string, bob: number) => `alice:${alice},bob:${bob}`,
17 | onBobPress: () => {}
18 | })
19 |
20 | const Buttons = () => {
21 | const { onAlicePress, onBobPress } = useEvents()
22 |
23 | return (
24 | <>
25 |