From d3dd9858ff768b68ad552bbe0647922f251f0bc7 Mon Sep 17 00:00:00 2001
From: Ivan Grishin <r@exah.me>
Date: Fri, 25 Dec 2020 15:22:26 +0300
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Allow=20symbol=20names=20for=20`Slo?=
 =?UTF-8?q?t`=20and=20`Fill`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Allow symbol names for `Slot` and `Fill`
- Remove `nanoevents` from deps
- Reduce bundle size to 400 B
---
 README.md          |  4 ++--
 package-lock.json  |  5 -----
 package.json       |  4 +---
 src/index.test.tsx | 15 ++++++++++-----
 src/index.tsx      | 36 ++++++++++++++++++++++++++++--------
 5 files changed, 41 insertions(+), 23 deletions(-)

diff --git a/README.md b/README.md
index ea32bfd..9441d49 100644
--- a/README.md
+++ b/README.md
@@ -6,8 +6,8 @@ A super lightweight modern alternative to [`react-slot-fill`](https://github.com
 - [x] Render content of sub-component in multiple places
 - [x] Speedy - `Fill` and `Slot` communicate directly with each other
 - [x] Tested with [`testing-library`](https://testing-library.com)
-- [x] Uses [`nanoevents`](https://github.com/ai/nanoevents) under hood
-- [x] Only 414 B (including deps)
+- [x] Zero dependencies
+- [x] Only ~400 B
 
 ## 📦 Install
 
diff --git a/package-lock.json b/package-lock.json
index e1d5de5..125a0dd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7367,11 +7367,6 @@
       "dev": true,
       "optional": true
     },
-    "nanoevents": {
-      "version": "5.1.10",
-      "resolved": "https://registry.npmjs.org/nanoevents/-/nanoevents-5.1.10.tgz",
-      "integrity": "sha512-QOE78g63vQ7V1JzhOLP8UNlaLOF/llDtfUhCj9GlbhQQc0YdPi5GNJKZdeWE0fvDtGF39un6uSf7RObeBm0eAg=="
-    },
     "nanoid": {
       "version": "3.1.18",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.18.tgz",
diff --git a/package.json b/package.json
index 34e18af..111147c 100644
--- a/package.json
+++ b/package.json
@@ -40,9 +40,7 @@
   "jest": {
     "preset": "ts-jest"
   },
-  "dependencies": {
-    "nanoevents": "^5.1.10"
-  },
+  "dependencies": {},
   "peerDependencies": {
     "react": "^16.0.0 || ^17.0.0"
   },
diff --git a/src/index.test.tsx b/src/index.test.tsx
index 221cf37..7e8f917 100644
--- a/src/index.test.tsx
+++ b/src/index.test.tsx
@@ -8,22 +8,27 @@ import { Fill, Slot, SlotsProvider } from '.'
 let isServer = false
 jest.mock('./is-server', () => () => isServer)
 
+const SLOT_NAMES = {
+  FIRST: 'first-slot',
+  NESTED: Symbol('nested-slot'),
+} as const
+
 const Parent = ({ children }: { children: React.ReactNode }) => (
   <SlotsProvider>
     <ul>
       <li data-testid="slot-first">
-        <Slot name="first" />
+        <Slot name={SLOT_NAMES.FIRST} />
       </li>
       <li data-testid="children">{children}</li>
       <li>
         <ul>
           <li>1</li>
           <li data-testid="slot-nested">
-            <Slot name="nested" />
+            <Slot name={SLOT_NAMES.NESTED} />
           </li>
           <li>3</li>
           <li data-testid="slot-nested">
-            <Slot name="nested" />
+            <Slot name={SLOT_NAMES.NESTED} />
           </li>
         </ul>
       </li>
@@ -33,13 +38,13 @@ const Parent = ({ children }: { children: React.ReactNode }) => (
 )
 
 Parent.First = function ParentFirst() {
-  return <Fill name="first">First</Fill>
+  return <Fill name={SLOT_NAMES.FIRST}>First</Fill>
 }
 
 Parent.Nested = function ParentNested() {
   const [count, setCount] = useState(0)
   return (
-    <Fill name="nested">
+    <Fill name={SLOT_NAMES.NESTED}>
       <button type="button" onClick={() => setCount((s) => s + 1)}>
         {count}
       </button>
diff --git a/src/index.tsx b/src/index.tsx
index ed39cc7..ddc0fa9 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,4 +1,3 @@
-import { createNanoEvents, Emitter, EventsMap, Unsubscribe } from 'nanoevents'
 import {
   createContext,
   createElement as h,
@@ -12,6 +11,15 @@ import {
 
 import isServer from './is-server'
 
+type Unsubscribe = () => void
+type Callback = (node: React.ReactNode) => void
+type Events = { [K in string | symbol]: Callback }
+
+interface Emitter<E extends Events> {
+  emit<K extends keyof E>(event: K, node: React.ReactNode): void
+  on<K extends keyof E>(event: K, cb: E[K]): Unsubscribe
+}
+
 const useUniversalEffect = (
   effect: React.EffectCallback,
   deps: React.DependencyList
@@ -25,18 +33,30 @@ const useUniversalEffect = (
   return useLayoutEffect(effect, deps)
 }
 
-interface SlotsEventsMap extends EventsMap {
-  [event: string]: (node: React.ReactNode) => void
-}
-
-const SlotsContext = createContext<Emitter<SlotsEventsMap> | null>(null)
+const SlotsContext = createContext<Emitter<Events> | null>(null)
 
 export interface SlotsProviderProps {
   children: React.ReactNode
 }
 
 export function SlotsProvider(props: SlotsProviderProps) {
-  const emitter = useMemo(() => createNanoEvents<SlotsEventsMap>(), [])
+  const emitter = useMemo(function <E extends Events>(): Emitter<E> {
+    const events: { [K in keyof E]?: E[K][] } = {}
+    return {
+      emit(event, node) {
+        const source = events[event]
+        if (source) source.forEach((cb) => cb(node))
+      },
+      on(event, cb) {
+        const source = (events[event] = events[event] || [])!
+        source.push(cb)
+        return () => {
+          events[event] = source.filter((item) => item !== cb)
+        }
+      },
+    }
+  }, [])
+
   return (
     <SlotsContext.Provider value={emitter}>
       {props.children}
@@ -55,7 +75,7 @@ function useSlotsContext() {
 }
 
 export interface SlotProps {
-  name: string
+  name: string | symbol
   children?: React.ReactNode
 }