fix: react core build and move knockfeedcontainer (#10)

* feat: add build process to react-core and move KnockFeedContainer to react

* rename component to NotificationFeedContainer

* update peer dependency version minimums

* add build:packages command

.changeset/thin-cups-boil.md

@@ -0,0 +1,8 @@
+---
+"@knocklabs/react-core": patch
+"@knocklabs/react": patch
+---
+
+fix: react-core build process
+fix: remove headless prop from KnockFeedProvider
+fix: move KnockFeedContainer from react-core to react and rename to NotificationFeedContainer

package.json

@@ -6,6 +6,7 @@
   "private": true,
   "scripts": {
     "build": "turbo build",
+    "build:packages": "turbo build --filter=\"./packages/*\"",
     "dev": "turbo dev",
     "lint": "turbo lint",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",

packages/react-core/.eslintrc.js

@@ -1,9 +1,12 @@
 /** @type {import("eslint").Linter.Config} */
 module.exports = {
   root: true,
-  extends: ["@knocklabs/eslint-config/react-internal.js"],
+  extends: [
+    "@knocklabs/eslint-config/library.js",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",],
   parser: "@typescript-eslint/parser",
   parserOptions: {
-    project: true,
+    projects: ["tsconfig.json", "tsconfig.node.json"],
   },
 };

packages/react-core/package.json

@@ -4,7 +4,56 @@
   "author": "@knocklabs",
   "version": "0.1.0",
   "license": "MIT",
-  "main": "src/index.ts",
-  "types": "src/index.ts",
-  "dependencies": {}
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.mjs",
+  "types": "dist/types/index.d.ts",
+  "typings": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/cjs/index.js",
+      "types": "./dist/types/index.d.ts",
+      "default": "./dist/esm/index.mjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "clean": "rimraf dist",
+    "dev": "tsc && vite build --watch",
+    "build": "yarn clean && yarn build:esm && yarn build:cjs",
+    "build:esm": "export BUILD_TARGET=esm; tsc && vite build",
+    "build:cjs": "export BUILD_TARGET=cjs; tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/knocklabs/javascript.git"
+  },
+  "bugs": {
+    "url": "https://github.com/knocklabs/javascript/issues"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0"
+  },
+  "dependencies": {
+    "@knocklabs/client": "*"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.37",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
+    "@typescript-eslint/parser": "^6.10.0",
+    "@vitejs/plugin-react": "^4.2.0",
+    "eslint": "^8.53.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.4",
+    "rimraf": "^5.0.5",
+    "rollup-plugin-execute": "^1.1.1",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^3.6.3",
+    "vite-plugin-no-bundle": "^3.0.0"
+  }
 }

packages/react-core/src/modules/feed/context/KnockFeedProvider.tsx

@@ -9,7 +9,6 @@ import create, { StoreApi, UseStore } from "zustand";
 import { ColorMode } from "../../core/constants";
 import useNotifications from "../hooks/useNotifications";
 import { feedProviderKey } from "../../core/utils";
-import { KnockFeedContainer } from "./KnockFeedContainer";
 import { useKnockClient } from "../../core";
 
 export interface KnockFeedProviderState {
@@ -29,7 +28,6 @@ export interface KnockFeedProviderProps {
 
   // Extra options
   children?: React.ReactElement;
-  rootless?: boolean;
   colorMode?: ColorMode;
 
   // Feed client options
@@ -40,20 +38,13 @@ export const KnockFeedProvider: React.FC<KnockFeedProviderProps> = ({
   feedId,
   children,
   defaultFeedOptions = {},
-  rootless = false,
   colorMode = "light",
 }) => {
   const knock = useKnockClient();
 
   const feedClient = useNotifications(knock, feedId, defaultFeedOptions);
   const useFeedStore = create(feedClient.store as StoreApi<FeedStoreState>);
 
-  const content = rootless ? (
-    children
-  ) : (
-    <KnockFeedContainer>{children}</KnockFeedContainer>
-  );
-
   return (
     <FeedStateContext.Provider
       key={feedProviderKey(feedId, defaultFeedOptions)}
@@ -64,7 +55,7 @@ export const KnockFeedProvider: React.FC<KnockFeedProviderProps> = ({
         colorMode,
       }}
     >
-      {content}
+      {children}
     </FeedStateContext.Provider>
   );
 };

packages/react-core/src/modules/feed/context/index.ts

@@ -1,2 +1 @@
 export * from "./KnockFeedProvider";
-export * from "./KnockFeedContainer";

packages/react-core/tsconfig.node.json

@@ -0,0 +1,4 @@
+{
+  "extends": "@knocklabs/typescript-config/node.json",
+  "include": ["vite.config.ts"]
+}

packages/react-core/vite.config.ts

@@ -0,0 +1,39 @@
+import { defineConfig, LibraryFormats, loadEnv } from "vite";
+import { resolve } from "path";
+import react from "@vitejs/plugin-react";
+import noBundlePlugin from "vite-plugin-no-bundle";
+import dts from "vite-plugin-dts";
+
+// https://vitejs.dev/config/
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), "");
+  const CJS = env.BUILD_TARGET?.toLocaleLowerCase()?.match("cjs");
+  const formats: LibraryFormats[] = CJS ? ["cjs"] : ["es"];
+
+  return {
+    plugins: [
+      dts({
+        outDir: "dist/types",
+      }),
+      react(),
+      noBundlePlugin({ root: "./src" }),
+    ],
+    build: {
+      outDir: CJS ? "dist/cjs" : "dist/esm",
+      sourcemap: true,
+      lib: {
+        entry: resolve(__dirname, "src/index.ts"),
+        name: "react-core",
+        formats,
+      },
+      rollupOptions: {
+        output: {
+          interop: "compat",
+          format: formats[0],
+        },
+        // External packages that should not be bundled
+        external: ["react"],
+      },
+    },
+  };
+});

packages/react/README.md

@@ -6,7 +6,7 @@ A set of components for integrating [Knock](https://knock.app) into a React appl
 
 [See a live demo](https://knock-in-app-notifications-react.vercel.app/)
 
-![In-app feed component example](NotificationFeed.png)
+![In-app feed component example](/NotificationFeed.png)
 
 **Note: these components are designed to be used via React for web only.**
 

packages/react/package.json

@@ -39,13 +39,15 @@
   "bugs": {
     "url": "https://github.com/knocklabs/javascript/issues"
   },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
   "dependencies": {
     "@knocklabs/client": "*",
-    "@knocklabs/react-core": "0.1.0",
+    "@knocklabs/react-core": "*",
     "date-fns": "^2.30.0",
     "lodash.debounce": "^4.0.8",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "react-popper": "^2.3.0",
     "react-popper-tooltip": "^4.4.2",
     "zustand": "^3.5.10"

packages/react-core/src/modules/feed/context/KnockFeedContainer.tsx → packages/react/src/modules/feed/components/NotificationFeedContainer/NotificationFeedContainer.tsx

@@ -1,7 +1,7 @@
 import { PropsWithChildren } from "react";
 import "./styles.css";
 
-export const KnockFeedContainer: React.FC<PropsWithChildren> = ({
+export const NotificationFeedContainer: React.FC<PropsWithChildren> = ({
   children,
 }) => {
   return <div className="rnf-feed-provider">{children}</div>;

packages/react/src/modules/feed/components/NotificationFeedContainer/index.ts

@@ -0,0 +1 @@
+export * from "./NotificationFeedContainer";

packages/react/src/modules/feed/index.ts

@@ -1,6 +1,7 @@
 export * from "./components/EmptyFeed";
 export * from "./components/NotificationCell";
 export * from "./components/NotificationFeed";
+export * from "./components/NotificationFeedContainer";
 export * from "./components/NotificationFeedPopover";
 export * from "./components/NotificationIconButton";
 export * from "./components/UnseenBadge";