From 387b7b1a808d87cb9e038e79b266b31caae2aabb Mon Sep 17 00:00:00 2001 From: Igor Ribeiro Date: Fri, 11 Feb 2022 23:35:31 -0300 Subject: [PATCH 1/7] fix(ci): Run build command --- .github/workflows/worflow.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/worflow.yml b/.github/workflows/worflow.yml index f4cf137..38c26c3 100644 --- a/.github/workflows/worflow.yml +++ b/.github/workflows/worflow.yml @@ -10,6 +10,7 @@ jobs: node-version: '16' - run: npm install - run: npm run test:ci + - run: npm run build - name: Release env: GH_TOKEN: ${{ secrets.GH_TOKEN }} From e2a0194ec0e92b6d23cd3c27f7c6e4eb9968ecf2 Mon Sep 17 00:00:00 2001 From: Igor Ribeiro Date: Sat, 12 Feb 2022 04:20:17 -0300 Subject: [PATCH 2/7] feat: Create `react` module to export `useEvent` This allows the main module to be used without React. BREAKING CHANGE: `useEvent` is no longer exported from the root. --- build.js | 41 ++++++++++++++++++++++++++++++++++++++++ package.json | 14 ++++++-------- src/index.test.tsx | 30 +---------------------------- src/index.ts | 15 ++------------- src/react/index.test.tsx | 38 +++++++++++++++++++++++++++++++++++++ src/react/index.ts | 11 +++++++++++ 6 files changed, 99 insertions(+), 50 deletions(-) create mode 100644 build.js create mode 100644 src/react/index.test.tsx create mode 100644 src/react/index.ts diff --git a/build.js b/build.js new file mode 100644 index 0000000..f7f0121 --- /dev/null +++ b/build.js @@ -0,0 +1,41 @@ +const { build } = require("esbuild"); + +function exit() { + process.exit(1); +} + +build({ + entryPoints: ["./src/index.ts"], + outfile: "./dist/index.js", + logLevel: "info", + format: "cjs", + bundle: true, +}).catch(exit); + +// build({ +// entryPoints: ["./src/index.ts"], +// outfile: "./dist/index.browser.js", +// logLevel: "info", +// format: "iife", +// globalName: "events", +// platform: "browser", +// minify: true, +// }).catch(exit); + +// build({ +// entryPoints: ["./src/index.ts"], +// outfile: "./dist/index.mjs", +// logLevel: "info", +// format: "esm", +// platform: "browser", +// minify: true, +// }).catch(exit); + +build({ + entryPoints: ["./src/react/index.ts"], + outfile: "./dist/react/index.js", + logLevel: "info", + format: "cjs", + bundle: true, + external: ["react", "."], +}).catch(exit); diff --git a/package.json b/package.json index ff486c9..df0a621 100644 --- a/package.json +++ b/package.json @@ -2,25 +2,23 @@ "name": "@ribeirolabs/events", "version": "0.0.0-development", "description": "Type safe listener for custom/native events and dispatcher for custom events", - "main": "dist/index.js", - "types": "dist/index.d.ts", + "main": "./dist/index.js", + "types": "./dist/index.d.ts", "files": [ - "dist", - "README.md" + "dist" ], "scripts": { "prebuild": "rimraf dist", + "postbuild": "cp package.json dist", "build": "run-p build:*", - "build:lib": "esbuild src/index.ts --format=cjs --outfile=dist/index.js", + "build:lib": "node build.js", "build:types": "tsc", "test": "jest --watch", "test:ci": "jest", "semantic-release": "semantic-release" }, "release": { - "branches": [ - "main" - ] + "pkgRoot": "dist" }, "publishConfig": { "access": "public" diff --git a/src/index.test.tsx b/src/index.test.tsx index c4efba3..1d9d2fd 100644 --- a/src/index.test.tsx +++ b/src/index.test.tsx @@ -1,6 +1,4 @@ -import { render } from "@testing-library/react"; -import React from "react"; -import { dispatchCustomEvent, listenEvent, useEvent } from "."; +import { dispatchCustomEvent, listenEvent } from "."; declare global { interface Events { @@ -57,29 +55,3 @@ it("should remove listener", () => { expect(listener).toBeCalledTimes(1); }); - -it("should add/remove listener using the hook", () => { - const listener = jest.fn(); - - function Component() { - useEvent("test", listener); - - return null; - } - - const { unmount } = render(); - - dispatchCustomEvent("test", { - message: "it works", - }); - - expect(listener).toBeCalledTimes(1); - - unmount(); - - dispatchCustomEvent("test", { - message: "it works", - }); - - expect(listener).toBeCalledTimes(1); -}); diff --git a/src/index.ts b/src/index.ts index b65a41a..19f4f8a 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,12 +1,10 @@ -import { useEffect } from "react"; - declare global { interface Events {} } -type EventName = keyof Events | keyof WindowEventMap; +export type EventName = keyof Events | keyof WindowEventMap; -type EventHandler = ( +export type EventHandler = ( event: E extends keyof Events ? CustomEvent : E extends keyof WindowEventMap @@ -36,12 +34,3 @@ export function dispatchCustomEvent( ) { window.dispatchEvent(new CustomEvent(event, { detail })); } - -export function useEvent( - event: EventName | E, - handler: EventHandler -): void { - useEffect(() => { - return listenEvent(event, handler); - }, [event, handler]); -} diff --git a/src/react/index.test.tsx b/src/react/index.test.tsx new file mode 100644 index 0000000..da1545e --- /dev/null +++ b/src/react/index.test.tsx @@ -0,0 +1,38 @@ +import { render } from "@testing-library/react"; +import React from "react"; +import { useEvent } from "."; +import { dispatchCustomEvent } from ".."; + +declare global { + interface Events { + test: { + message: string; + }; + } +} + +it("should add/remove listener using the hook", () => { + const listener = jest.fn(); + + function Component() { + useEvent("test", listener); + + return null; + } + + const { unmount } = render(); + + dispatchCustomEvent("test", { + message: "it works", + }); + + expect(listener).toBeCalledTimes(1); + + unmount(); + + dispatchCustomEvent("test", { + message: "it works", + }); + + expect(listener).toBeCalledTimes(1); +}); diff --git a/src/react/index.ts b/src/react/index.ts new file mode 100644 index 0000000..2411531 --- /dev/null +++ b/src/react/index.ts @@ -0,0 +1,11 @@ +import { useEffect } from "react"; +import { EventHandler, EventName, listenEvent } from "./../"; + +export function useEvent( + event: EventName | E, + handler: EventHandler +): void { + useEffect(() => { + return listenEvent(event, handler); + }, [event, handler]); +} From 2ed7b7255c34a60fa47f96d938d0269f062103c2 Mon Sep 17 00:00:00 2001 From: Igor Ribeiro Date: Sat, 12 Feb 2022 04:39:55 -0300 Subject: [PATCH 3/7] chore(build): Copy package.json to dist/ and add beta to publish branches --- package.json | 6 +++++- postbuild.js | 9 +++++++++ 2 files changed, 14 insertions(+), 1 deletion(-) create mode 100644 postbuild.js diff --git a/package.json b/package.json index df0a621..2034e9d 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ ], "scripts": { "prebuild": "rimraf dist", - "postbuild": "cp package.json dist", + "postbuild": "node postbuild.js", "build": "run-p build:*", "build:lib": "node build.js", "build:types": "tsc", @@ -18,6 +18,10 @@ "semantic-release": "semantic-release" }, "release": { + "branches": [ + "main", + "beta" + ], "pkgRoot": "dist" }, "publishConfig": { diff --git a/postbuild.js b/postbuild.js new file mode 100644 index 0000000..0011b07 --- /dev/null +++ b/postbuild.js @@ -0,0 +1,9 @@ +const fs = require("fs"); + +const packageJson = fs.readFileSync("./package.json", "utf-8"); + +fs.writeFileSync( + "./dist/package.json", + packageJson.replace(/dist\//g, ""), + "utf-8" +); From 2cdc8edc1d0cdae92e291ed1cf594b14c1ba0d7f Mon Sep 17 00:00:00 2001 From: Igor Ribeiro Date: Sat, 12 Feb 2022 04:47:00 -0300 Subject: [PATCH 4/7] chore(build): Make beta prerelease --- package.json | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 2034e9d..3c0ed12 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,11 @@ "release": { "branches": [ "main", - "beta" + { + "name": "beta", + "channel": "beta", + "prerelease": true + } ], "pkgRoot": "dist" }, From 5fdbb72c5cdea85c24bdaa2e9087d16dc66d54cd Mon Sep 17 00:00:00 2001 From: Igor Ribeiro Date: Sat, 12 Feb 2022 04:59:52 -0300 Subject: [PATCH 5/7] fix(build): Transform dist/package.json to fix npm publish --- postbuild.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/postbuild.js b/postbuild.js index 0011b07..bcfcb4e 100644 --- a/postbuild.js +++ b/postbuild.js @@ -1,9 +1,16 @@ const fs = require("fs"); -const packageJson = fs.readFileSync("./package.json", "utf-8"); +const packageJson = JSON.parse(fs.readFileSync("./package.json", "utf-8")); + +delete packageJson.scripts; +delete packageJson.files; +delete packageJson.devDependencies; fs.writeFileSync( "./dist/package.json", - packageJson.replace(/dist\//g, ""), + JSON.stringify(packageJson).replace(/dist\//g, ""), "utf-8" ); + +fs.copyFileSync("./README.md", "./dist/README.md"); +fs.copyFileSync("./LICENSE", "./dist/LICENSE"); From 69bfc44424a2e0f054107dee122f401f0f1cb215 Mon Sep 17 00:00:00 2001 From: Igor Ribeiro Date: Sat, 12 Feb 2022 06:18:59 -0300 Subject: [PATCH 6/7] docs: Add imports to show that `useEvent` now comes from `@ribeirolabs/events/react` --- README.md | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 39a591e..cb75482 100644 --- a/README.md +++ b/README.md @@ -7,6 +7,8 @@ Type safe listener for custom/native events and dispatcher for custom events ### Listen/Unlisten ```js +import { listenEvent } from '@ribeirolabs/events'; + // adds event listener const unlisten = listenEvent('hashchange', (e) => console.log(e.name)); @@ -17,14 +19,19 @@ unlisten(); You can also use `unlistenEvent`. ```js +import { unlistenEvent } from '@ribeirolabs/events'; + // removes event listener unlistenEvent('hashchange'); ``` -#### React + +### React You can use the hook `useEvent`. It automatically adds the listener on mount and remove it on unmount. ```js +import { useEvent } from '@ribeirolabs/events/react'; + function Component() { const listener = useCallback((event) => { console.log(event.name); @@ -34,10 +41,11 @@ function Component() { } ``` - ### Dispath (custom events) ```js +import { listenEvent, dispatchCustomEvent } from '@ribeirolabs/events'; + listenEvent('my-event', (event) => { console.log(event.detail.message); }); From 853e92b8df81145b33da9598e376b2cca27ca961 Mon Sep 17 00:00:00 2001 From: Igor Ribeiro Date: Sat, 12 Feb 2022 06:21:51 -0300 Subject: [PATCH 7/7] feat(build): Add browser and module versions --- build.js | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/build.js b/build.js index f7f0121..bab0582 100644 --- a/build.js +++ b/build.js @@ -12,24 +12,24 @@ build({ bundle: true, }).catch(exit); -// build({ -// entryPoints: ["./src/index.ts"], -// outfile: "./dist/index.browser.js", -// logLevel: "info", -// format: "iife", -// globalName: "events", -// platform: "browser", -// minify: true, -// }).catch(exit); +build({ + entryPoints: ["./src/index.ts"], + outfile: "./dist/index.browser.js", + logLevel: "info", + format: "iife", + globalName: "events", + platform: "browser", + minify: true, +}).catch(exit); -// build({ -// entryPoints: ["./src/index.ts"], -// outfile: "./dist/index.mjs", -// logLevel: "info", -// format: "esm", -// platform: "browser", -// minify: true, -// }).catch(exit); +build({ + entryPoints: ["./src/index.ts"], + outfile: "./dist/index.mjs", + logLevel: "info", + format: "esm", + platform: "browser", + minify: true, +}).catch(exit); build({ entryPoints: ["./src/react/index.ts"],