many small fixes

dist/WPReactBlockRenderer.d.ts

@@ -1,11 +1,11 @@
-import { BlockRendererConfig } from "cloakwp/cms";
-import { RestApiBlockData, WPBlockRenderer } from "cloakwp/blocks";
 import React from "react";
+import { type BlockRendererConfig } from "cloakwp/cms";
+import { type RestApiBlockData, WPBlockRenderer } from "cloakwp/blocks";
 /**
  * A tiny wrapper around the BlockRenderer class from `render-blocks`, simply
  * for the purposes of tailoring the type parameter defaults for React + CloakWP,
  * saving users from having to manually specify these type params.
  */
-export declare class WPReactBlockRenderer<TBlockData = RestApiBlockData> extends WPBlockRenderer<React.ComponentType<any>, React.ReactNode, TBlockData> {
-    constructor(config: BlockRendererConfig<React.ComponentType<any>, React.ReactNode, Partial<TBlockData>>);
+export declare class WPReactBlockRenderer<TBlockData = RestApiBlockData> extends WPBlockRenderer<React.FC<any>, React.ReactNode, TBlockData> {
+    constructor(config: BlockRendererConfig<React.FC<any>, React.ReactNode, Partial<TBlockData>>);
 }

dist/components/AdminBar.js

@@ -12,7 +12,7 @@ import { useGlobals } from "../context/GlobalsContext";
 export const AdminBar = ({ className, enableRestApiLink = true, alwaysVisible = false, ...props }) => {
     const [cmsMeta, setCmsMeta] = useState({ url: null, adminPath: null });
     const { pageData, isPreview } = useGlobals();
-    let { isLoggedIn = false } = useUser();
+    const { isLoggedIn = false } = useUser();
     const { apiRouterBasePath } = getCloakWPConfig();
     useEffect(() => {
         const loadCMSInstance = async () => {
@@ -27,8 +27,6 @@ export const AdminBar = ({ className, enableRestApiLink = true, alwaysVisible =
         pending: "pending",
         future: "scheduled",
         private: "private",
-    }[pageData?.status] ??
-        pageData?.status ??
-        "revision";
-    return (_jsx(_Fragment, { children: (alwaysVisible || isLoggedIn) && (_jsx("div", { id: "cloakwp-admin-bar", className: cx("w-full h-[38px] flex items-center bg-root-invert text-root-invert dark:bg-root-dim dark:text-root-dim border-b border-root-dim px-3 lg:px-4 py-1.5", className), ...props, children: _jsxs("div", { className: "w-full flex gap-x-2 sm:gap-x-6 mb-0 text-sm", children: [_jsxs("a", { href: `${cmsMeta.url}${cmsMeta.adminPath}/edit.php`, target: "_blank", className: "flex items-center", children: [_jsx(HomeIcon, { className: "mr-1.5" }), _jsx("span", { className: "hidden sm:flex", children: "Dashboard" })] }), pageData && (_jsxs("a", { href: `${cmsMeta.url}${cmsMeta.adminPath}/post.php?post=${pageData.id}&action=edit`, target: "_blank", className: "flex items-center", children: [_jsx(EditIcon, { className: "mr-1.5" }), _jsx("span", { className: "hidden sm:flex", children: "Edit Page" })] })), enableRestApiLink && (_jsxs("a", { href: pageData?._links?.self[0]?.href, target: "_blank", className: "flex items-center", children: [_jsx(EyeIcon, { className: "mr-1.5" }), _jsx("span", { className: "hidden sm:flex", children: "REST API" })] })), isPreview && (_jsx(Button, { variants: { size: "sm", variant: "secondary" }, className: "ml-auto", asChild: true, children: _jsx(Link, { href: `${apiRouterBasePath}/exit-preview?pathname=${pageData.pathname}`, openInNewTab: false, children: "Exit Preview" }) })), pageData && (_jsxs("div", { className: cx("flex items-center gap-x-2", !isPreview && "ml-auto"), children: ["Status:", _jsx("span", { className: "rounded-full bg-root text-root dark:bg-root-invert dark:text-root-invert py-0.5 px-2 uppercase tracking-normal text-xs font-medium", children: status })] }))] }) })) }));
+    }[pageData?.status] ?? "unknown";
+    return (_jsx(_Fragment, { children: (alwaysVisible || isLoggedIn) && (_jsx("div", { id: "cloakwp-admin-bar", className: cx("w-full h-[38px] flex items-center dark bg-root text-root-dim border-b border-root px-3 lg:px-4 py-1.5", className), ...props, children: _jsxs("div", { className: "w-full flex gap-x-2 sm:gap-x-6 mb-0 text-sm", children: [_jsxs("a", { href: `${cmsMeta.url}${cmsMeta.adminPath}/edit.php`, target: "_blank", className: "flex items-center", children: [_jsx(HomeIcon, { className: "mr-1.5" }), _jsx("span", { className: "hidden sm:flex", children: "Dashboard" })] }), pageData && (_jsxs("a", { href: `${cmsMeta.url}${cmsMeta.adminPath}/post.php?post=${pageData.id}&action=edit`, target: "_blank", className: "flex items-center", children: [_jsx(EditIcon, { className: "mr-1.5" }), _jsx("span", { className: "hidden sm:flex", children: "Edit Page" })] })), enableRestApiLink && (_jsxs("a", { href: pageData?._links?.self[0]?.href, target: "_blank", className: "flex items-center", children: [_jsx(EyeIcon, { className: "mr-1.5" }), _jsx("span", { className: "hidden sm:flex", children: "REST API" })] })), isPreview && (_jsx(Button, { variants: { size: "sm", variant: "secondary" }, className: "ml-auto", asChild: true, children: _jsx(Link, { href: `${apiRouterBasePath}/exit-preview?pathname=${pageData.pathname}`, openInNewTab: false, children: "Exit Preview" }) })), pageData && (_jsxs("div", { className: cx("flex items-center gap-x-2", !isPreview && "ml-auto"), children: ["Status:", _jsx("span", { className: "rounded-full bg-root text-root dark:bg-root-invert dark:text-root-invert py-0.5 px-2 uppercase tracking-normal text-xs font-medium", children: status })] }))] }) })) }));
 };

dist/context/GlobalsContext.d.ts

@@ -2,4 +2,4 @@ export declare const GlobalsProvider: ({ children, ...props }: {
     [x: string]: any;
     children: any;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const useGlobals: () => any;
+export declare const useGlobals: <T extends Record<string, any>>() => T;

dist/types.d.ts

@@ -5,7 +5,7 @@
 /// <reference types="react" />
 import { EmptyObjectOrRecord } from "cloakwp/cms";
 import { RestApiBlockData, WPBlockContext, WPBlockDataWithExtraContext, WPBlockRendererConfig, WPBlocksConfig, WPDataRouter, WPGlobalDataRouter, WPSingleBlockConfig, WPSingleBlockConfigWithVariants, WPSingleBlockConfigWithoutVariants, WPVariantsRouter } from "cloakwp/blocks";
-type ReactComponent = React.ComponentType<any>;
+type ReactComponent = React.FC<any>;
 export type WPBlockRendererConfigReact<TBlockData = RestApiBlockData> = WPBlockRendererConfig<ReactComponent, React.ReactNode, TBlockData>;
 export type WPDataRouterReact<TProps = EmptyObjectOrRecord, TBlockData = RestApiBlockData> = WPDataRouter<TProps, Partial<TBlockData>, ReactComponent>;
 export type WPGlobalDataRouterReact<TProps = EmptyObjectOrRecord, TBlockData = RestApiBlockData> = WPGlobalDataRouter<TProps, TBlockData>;

package.json

@@ -17,11 +17,11 @@
     }
   },
   "scripts": {
-    "dev": "tsc -p tsconfig.json -w",
+    "dev": "tsc -p tsconfig.json -w --preserveWatchOutput",
     "build": "npm run build-ts",
     "build-ts": "tsc -p tsconfig.json",
-    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
-    "zzz-postpublish": "git push && git push --tags"
+    "clean": "rm -rf .turbo && rm -rf dist && npm run clean:modules",
+    "clean:modules": "rm -rf node_modules"
   },
   "repository": {
     "type": "git",
@@ -44,8 +44,8 @@
   "homepage": "https://github.com/cloak-labs/cloakwp-react#readme",
   "devDependencies": {
     "@types/node": "^18.18.1",
-    "@types/react": "^18.2.37",
-    "@types/react-dom": "^18.2.8",
+    "@types/react": "^18.3.7",
+    "@types/react-dom": "^18.3.0",
     "tsc-watch": "^5.0.3",
     "typescript": "^5.3.2"
   },
@@ -57,7 +57,7 @@
     "react-dom": ">= 17.0.2"
   },
   "dependencies": {
-    "@cloakui/react-primitives": "^0.2.6"
+    "@cloakui/react-primitives": "^0.3.3"
   },
   "publishConfig": {
     "access": "public"

src/WPReactBlockRenderer.tsx

@@ -1,6 +1,6 @@
-import { BlockRendererConfig } from "cloakwp/cms";
-import { RestApiBlockData, WPBlockRenderer } from "cloakwp/blocks";
 import React from "react";
+import { type BlockRendererConfig } from "cloakwp/cms";
+import { type RestApiBlockData, WPBlockRenderer } from "cloakwp/blocks";
 
 /**
  * A tiny wrapper around the BlockRenderer class from `render-blocks`, simply
@@ -9,21 +9,17 @@ import React from "react";
  */
 export class WPReactBlockRenderer<
   TBlockData = RestApiBlockData
-> extends WPBlockRenderer<
-  React.ComponentType<any>,
-  React.ReactNode,
-  TBlockData
-> {
+> extends WPBlockRenderer<React.FC<any>, React.ReactNode, TBlockData> {
   constructor(
     config: BlockRendererConfig<
-      React.ComponentType<any>,
+      React.FC<any>,
       React.ReactNode,
       Partial<TBlockData>
     >
   ) {
     // We specify a default React-based `render` function, which users can override:
     let configWithDefaults: BlockRendererConfig<
-      React.ComponentType<any>,
+      React.FC<any>,
       React.ReactNode,
       Partial<TBlockData>
     > = {
@@ -32,7 +28,7 @@ export class WPReactBlockRenderer<
           const componentProps = {
             key: idx,
             ...(props ?? {}),
-          } as React.ComponentProps<React.ComponentType<any>>;
+          } as React.ComponentProps<typeof Component>;
 
           return <Component {...componentProps} />;
         }),

src/components/AdminBar.tsx

@@ -27,7 +27,7 @@ export const AdminBar: FC<AdminBarProps> = ({
 }) => {
   const [cmsMeta, setCmsMeta] = useState({ url: null, adminPath: null });
   const { pageData, isPreview } = useGlobals();
-  let { isLoggedIn = false } = useUser();
+  const { isLoggedIn = false } = useUser();
   const { apiRouterBasePath } = getCloakWPConfig();
 
   useEffect(() => {
@@ -46,17 +46,15 @@ export const AdminBar: FC<AdminBarProps> = ({
       pending: "pending",
       future: "scheduled",
       private: "private",
-    }[pageData?.status] ??
-    pageData?.status ??
-    "revision";
+    }[pageData?.status] ?? "unknown";
 
   return (
     <>
       {(alwaysVisible || isLoggedIn) && (
         <div
           id="cloakwp-admin-bar"
           className={cx(
-            "w-full h-[38px] flex items-center bg-root-invert text-root-invert dark:bg-root-dim dark:text-root-dim border-b border-root-dim px-3 lg:px-4 py-1.5",
+            "w-full h-[38px] flex items-center dark bg-root text-root-dim border-b border-root px-3 lg:px-4 py-1.5",
             className
           )}
           {...props}

src/components/icons/EditIcon.tsx

@@ -7,7 +7,7 @@ export function EditIcon({ className }) {
       fill="none"
       stroke="currentColor"
       strokeWidth="1.5"
-      className={cx("w-4 h-4", className)}
+      className={cx("size-4", className)}
       viewBox="0 0 24 24"
     >
       <path

src/components/icons/EyeIcon.tsx

@@ -7,7 +7,7 @@ export function EyeIcon({ className }) {
       fill="none"
       stroke="currentColor"
       strokeWidth="1.5"
-      className={cx("w-4 h-4", className)}
+      className={cx("size-4", className)}
       viewBox="0 0 24 24"
     >
       <path

src/components/icons/HomeIcon.tsx

@@ -7,7 +7,7 @@ export function HomeIcon({ className }) {
       fill="none"
       stroke="currentColor"
       strokeWidth="1.5"
-      className={cx("w-4 h-4", className)}
+      className={cx("size-4", className)}
       viewBox="0 0 24 24"
     >
       <path

src/context/GlobalsContext.tsx

@@ -21,4 +21,5 @@ export const GlobalsProvider = ({ children, ...props }) => {
   );
 };
 
-export const useGlobals = () => useContext(GlobalsContext);
+export const useGlobals = <T extends Record<string, any>>() =>
+  useContext(GlobalsContext) as T;

src/types.ts

@@ -18,7 +18,7 @@ import {
   WPVariantsRouter,
 } from "cloakwp/blocks";
 
-type ReactComponent = React.ComponentType<any>;
+type ReactComponent = React.FC<any>;
 
 export type WPBlockRendererConfigReact<TBlockData = RestApiBlockData> =
   WPBlockRendererConfig<ReactComponent, React.ReactNode, TBlockData>;

tsconfig.json

@@ -9,7 +9,11 @@
     "declarationDir": "dist",
     "jsx": "react-jsx",
     "strict": false,
-    "noEmit": false
+    "noEmit": false,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true
   },
   "include": ["src/**/*"]
 }