Merge branch 'main' of github.com:ribeirolabs/events into main

BREAKING CHANGE

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);
 });

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);

package.json

@@ -2,25 +2,31 @@
   "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": "node postbuild.js",
     "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"
-    ]
+      "main",
+      {
+        "name": "beta",
+        "channel": "beta",
+        "prerelease": true
+      }
+    ],
+    "pkgRoot": "dist"
   },
   "publishConfig": {
     "access": "public"

postbuild.js

@@ -0,0 +1,16 @@
+const fs = require("fs");
+
+const packageJson = JSON.parse(fs.readFileSync("./package.json", "utf-8"));
+
+delete packageJson.scripts;
+delete packageJson.files;
+delete packageJson.devDependencies;
+
+fs.writeFileSync(
+  "./dist/package.json",
+  JSON.stringify(packageJson).replace(/dist\//g, ""),
+  "utf-8"
+);
+
+fs.copyFileSync("./README.md", "./dist/README.md");
+fs.copyFileSync("./LICENSE", "./dist/LICENSE");

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(<Component />);
-
-  dispatchCustomEvent("test", {
-    message: "it works",
-  });
-
-  expect(listener).toBeCalledTimes(1);
-
-  unmount();
-
-  dispatchCustomEvent("test", {
-    message: "it works",
-  });
-
-  expect(listener).toBeCalledTimes(1);
-});

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<E extends string> = (
+export type EventHandler<E extends string> = (
   event: E extends keyof Events
     ? CustomEvent<Events[E]>
     : E extends keyof WindowEventMap
@@ -36,12 +34,3 @@ export function dispatchCustomEvent<E extends keyof Events>(
 ) {
   window.dispatchEvent(new CustomEvent(event, { detail }));
 }
-
-export function useEvent<E extends string>(
-  event: EventName | E,
-  handler: EventHandler<E>
-): void {
-  useEffect(() => {
-    return listenEvent(event, handler);
-  }, [event, handler]);
-}

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(<Component />);
+
+  dispatchCustomEvent("test", {
+    message: "it works",
+  });
+
+  expect(listener).toBeCalledTimes(1);
+
+  unmount();
+
+  dispatchCustomEvent("test", {
+    message: "it works",
+  });
+
+  expect(listener).toBeCalledTimes(1);
+});

src/react/index.ts

@@ -0,0 +1,11 @@
+import { useEffect } from "react";
+import { EventHandler, EventName, listenEvent } from "./../";
+
+export function useEvent<E extends string>(
+  event: EventName | E,
+  handler: EventHandler<E>
+): void {
+  useEffect(() => {
+    return listenEvent(event, handler);
+  }, [event, handler]);
+}