[release] 0.1.4 - Bump version, update README to reflect component behavior changes, and refactor BreakPointer for client-only rendering with customizable breakpoints

Author: ccbbccbb

README.md

@@ -15,7 +15,8 @@ A development utility React component that displays the current Tailwind CSS bre
 - **Viewport Dimensions** - Displays real-time width and height
 - **Color-Coded Indicators** - Each breakpoint has a unique color for quick identification
 - **Keyboard Toggle** - Visible by default; press 't' to turn on and 'Shift+T' to turn off (configurable)
-- **Production Safe** - Automatically hidden in production builds
+- **Client-only** - Import from a Client Component in App Router; resolves to a no-op on the server
+- **No Tailwind Dependency** - Ships its own lightweight CSS; no safelist or node_modules scan needed
 - **Zero Dependencies** - Only requires React as a peer dependency
 - **Highly Configurable** - Customize position, visibility, font, and more
 - **TypeScript Support** - Full type definitions included
@@ -151,8 +152,9 @@ export default function RootLayout({ children }: { children: ReactNode }) {
 ```
 
 Behavior:
-- In development, the component renders on the client.
-- In production and on the server, it resolves to a no-op.
+- The component renders on the client whenever used from a Client Component.
+- On the server, it resolves to a no-op (to avoid RSC hook errors).
+- Uses an injected, namespaced stylesheet (`rtwbp-*`), independent of your Tailwind config.
 
 ### Next.js Pages Router
 
@@ -199,7 +201,8 @@ function App() {
 | `toggleOffKey`     | `string`              | `'T'`                | Keyboard key to turn the overlay off      |
 | `position`         | `Position`            | `'bottom-center'`    | Position of the overlay on screen         |
 | `zIndex`           | `number`              | `9999`               | z-index of the overlay                    |
-| `hideInProduction` | `boolean`             | `true`               | Automatically hide in production builds   |
+| `hideInProduction` | `boolean`             | `removed`            | Removed; component no longer auto-hides in prod |
+| `screens`          | `{ sm?, md?, lg?, xl?, '2xl'? }` | Tailwind defaults | Override breakpoint thresholds (px) |
 | `showDimensions`   | `boolean`             | `true`               | Show viewport width and height            |
 | `className`        | `string`              | `undefined`          | Additional CSS classes                    |
 | `style`            | `React.CSSProperties` | `undefined`          | Additional inline styles                  |
@@ -269,9 +272,9 @@ const config: BreakPointerProps = {
 ### Why isn't the component showing?
 
 1. Ensure it's rendered from a Client Component (App Router server files resolve to a no-op)
-2. Verify you're in development mode (`next dev`); production resolves to a no-op by default
-3. Try pressing the default keys: 't' turns on, 'Shift+T' turns off
-4. Ensure Tailwind CSS is properly configured and no z-index conflicts
+2. Try pressing the default keys: 't' turns on, 'Shift+T' turns off
+3. Check for overlapping overlays or z-index conflicts
+4. If you customized `screens`, verify the values match your expected breakpoints
 
 ### Can I use this without Tailwind CSS?
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-tw-breakpointer",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "A React component that displays the current Tailwind CSS breakpoint and viewport dimensions",
   "type": "module",
   "main": "dist/client.cjs",
@@ -10,8 +10,6 @@
     ".": {
       "types": "./dist/client.d.ts",
       "react-server": "./dist/noop.js",
-      "development": "./dist/client.js",
-      "production": "./dist/noop.js",
       "import": "./dist/client.js",
       "require": "./dist/client.cjs",
       "default": "./dist/client.js"

src/BreakPointer.test.tsx

@@ -1,4 +1,7 @@
+/// <reference path="./global.d.ts" />
 import { render } from '@testing-library/react';
+import React from 'react';
+import '@testing-library/jest-dom/vitest';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { BreakPointer } from './BreakPointer';
 
@@ -13,17 +16,7 @@ describe('BreakPointer - Core functionality', () => {
     expect(container).toBeInTheDocument();
   });
 
-  it('should not render in production by default', () => {
-    mockEnvironment('production');
-    const { container } = render(<BreakPointer />);
-    expect(container.firstChild).toBeNull();
-  });
-
-  it('should render in production when hideInProduction=false', () => {
-    mockEnvironment('production');
-    const { container } = render(<BreakPointer hideInProduction={false} />);
-    expect(container.firstChild).not.toBeNull();
-  });
+  // Production gating removed; component renders regardless of NODE_ENV
 
   it('should apply custom className', () => {
     const { container } = render(<BreakPointer className="custom-test-class" />);
@@ -70,12 +63,10 @@ describe('BreakPointer - Core functionality', () => {
   it('should apply different position classes', () => {
     const { container: container1 } = render(<BreakPointer position="top-left" />);
     const element1 = container1.firstChild as HTMLElement;
-    expect(element1?.className).toContain('top-2');
-    expect(element1?.className).toContain('left-2');
+    expect(element1?.className).toContain('rtwbp-top-left');
 
     const { container: container2 } = render(<BreakPointer position="bottom-right" />);
     const element2 = container2.firstChild as HTMLElement;
-    expect(element2?.className).toContain('bottom-2');
-    expect(element2?.className).toContain('right-2');
+    expect(element2?.className).toContain('rtwbp-bottom-right');
   });
 });

src/client.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import type React from 'react';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 export type Position =
   | 'bottom-center'
@@ -21,24 +21,73 @@ export interface BreakPointerProps {
   toggleOffKey?: string;
   position?: Position;
   zIndex?: number;
-  hideInProduction?: boolean;
   showDimensions?: boolean;
   className?: string;
   style?: React.CSSProperties;
   fontFamily?: string;
+  /** Optional override for Tailwind-like breakpoints (in px). */
+  screens?: {
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+    '2xl'?: number;
+  };
 }
 
 const DEFAULT_FONT_FAMILY =
   'JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace';
 
-const positionClasses: Record<Position, string> = {
-  'bottom-center': 'fixed bottom-2 left-1/2 -translate-x-1/2',
-  'top-center': 'fixed top-2 left-1/2 -translate-x-1/2',
-  'top-left': 'fixed top-2 left-2',
-  'top-right': 'fixed top-2 right-2',
-  'bottom-left': 'fixed bottom-2 left-2',
-  'bottom-right': 'fixed bottom-2 right-2',
-};
+function ensureStylesInjected(cssText: string) {
+  if (typeof document === 'undefined') {
+    return;
+  }
+  const id = 'rtwbp-styles';
+  const existing = document.getElementById(id) as HTMLStyleElement | null;
+  if (existing) {
+    if (existing.textContent !== cssText) {
+      existing.textContent = cssText;
+    }
+    return;
+  }
+  const style = document.createElement('style');
+  style.id = id;
+  style.textContent = cssText;
+  document.head.appendChild(style);
+}
+
+function generateCss(params: {
+  sm: number;
+  md: number;
+  lg: number;
+  xl: number;
+  x2l: number;
+}) {
+  const { sm, md, lg, xl, x2l } = params;
+  const toMax = (n: number) => `${Math.max(0, n - 0.02)}px`;
+  return `
+.rtwbp-container{position:fixed;border:2px solid #000;border-radius:4px;font-size:12px;line-height:1.1;background:transparent}
+.rtwbp-bottom-center{bottom:8px;left:50%;transform:translateX(-50%)}
+.rtwbp-top-center{top:8px;left:50%;transform:translateX(-50%)}
+.rtwbp-top-left{top:8px;left:8px}
+.rtwbp-top-right{top:8px;right:8px}
+.rtwbp-bottom-left{bottom:8px;left:8px}
+.rtwbp-bottom-right{bottom:8px;right:8px}
+.rtwbp-badge{display:none;padding:4px 8px;font-family:inherit;font-weight:600;letter-spacing:-0.01em}
+.rtwbp-xs{background:#ec2427;color:#fff}
+.rtwbp-sm{background:#f36525;color:#fff}
+.rtwbp-md{background:#edb41f;color:#fff}
+.rtwbp-lg{background:#f7ee49;color:#000}
+.rtwbp-xl{background:#4686c5;color:#fff}
+.rtwbp-2xl{background:#45b64a;color:#fff}
+@media (max-width:${toMax(sm)}){.rtwbp-xs{display:block}}
+@media (min-width:${sm}px) and (max-width:${toMax(md)}){.rtwbp-sm{display:block}}
+@media (min-width:${md}px) and (max-width:${toMax(lg)}){.rtwbp-md{display:block}}
+@media (min-width:${lg}px) and (max-width:${toMax(xl)}){.rtwbp-lg{display:block}}
+@media (min-width:${xl}px) and (max-width:${toMax(x2l)}){.rtwbp-xl{display:block}}
+@media (min-width:${x2l}px){.rtwbp-2xl{display:block}}
+`;
+}
 
 export const BreakPointer: React.FC<BreakPointerProps> = ({
   initiallyVisible = true,
@@ -47,11 +96,11 @@ export const BreakPointer: React.FC<BreakPointerProps> = ({
   toggleOffKey,
   position = 'bottom-center',
   zIndex = 9999,
-  hideInProduction = true,
   showDimensions = true,
   className = '',
   style = {},
   fontFamily = DEFAULT_FONT_FAMILY,
+  screens,
 }) => {
   const [isVisible, setIsVisible] = useState(initiallyVisible);
   const [viewport, setViewport] = useState({
@@ -110,14 +159,20 @@ export const BreakPointer: React.FC<BreakPointerProps> = ({
     };
   }, [resolvedToggleOnKey, resolvedToggleOffKey]);
 
-  // Production auto-hide
-  if (
-    hideInProduction &&
-    typeof process !== 'undefined' &&
-    process.env?.NODE_ENV === 'production'
-  ) {
-    return null;
-  }
+  const resolvedScreens = useMemo(() => {
+    return {
+      sm: screens?.sm ?? 640,
+      md: screens?.md ?? 768,
+      lg: screens?.lg ?? 1024,
+      xl: screens?.xl ?? 1280,
+      x2l: screens?.['2xl'] ?? 1536,
+    } as const;
+  }, [screens?.sm, screens?.md, screens?.lg, screens?.xl, screens?.['2xl']]);
+
+  useEffect(() => {
+    const css = generateCss(resolvedScreens);
+    ensureStylesInjected(css);
+  }, [resolvedScreens]);
 
   if (!isMounted) {
     return null;
@@ -126,7 +181,18 @@ export const BreakPointer: React.FC<BreakPointerProps> = ({
     return null;
   }
 
-  const positionClass = positionClasses[position] || positionClasses['bottom-center'];
+  const positionClass =
+    position === 'top-center'
+      ? 'rtwbp-top-center'
+      : position === 'top-left'
+        ? 'rtwbp-top-left'
+        : position === 'top-right'
+          ? 'rtwbp-top-right'
+          : position === 'bottom-left'
+            ? 'rtwbp-bottom-left'
+            : position === 'bottom-right'
+              ? 'rtwbp-bottom-right'
+              : 'rtwbp-bottom-center';
 
   const containerStyles: React.CSSProperties = {
     zIndex,
@@ -136,60 +202,60 @@ export const BreakPointer: React.FC<BreakPointerProps> = ({
 
   return (
     <div
-      className={`${positionClass} rounded border-2 border-black text-xs ${className}`}
+      className={`rtwbp-container ${positionClass} ${className}`}
       style={containerStyles}
       aria-hidden="true"
     >
-      <span className="block items-center bg-[#ec2427] px-2 py-1 font-mono font-semibold tracking-tighter text-white sm:hidden md:hidden lg:hidden xl:hidden 2xl:hidden">
-        1/6 <span className="text-black">•</span> xs <span className="text-black">•</span>{' '}
+      <span className="rtwbp-badge rtwbp-xs">
+        1/6 <span>•</span> xs <span>•</span>{' '}
         {showDimensions && (
-          <span className="text-gray-100">
-            {viewport.width}px <span className="text-black">&lt;</span> 640px
+          <span>
+            {viewport.width}px <span>&lt;</span> {resolvedScreens.sm}px
           </span>
         )}
       </span>
 
-      <span className="hidden items-center bg-[#f36525] px-2 py-1 font-mono font-semibold tracking-tighter text-white sm:block md:hidden lg:hidden xl:hidden 2xl:hidden">
-        2/6 <span className="text-black">•</span> sm <span className="text-black">•</span>{' '}
+      <span className="rtwbp-badge rtwbp-sm">
+        2/6 <span>•</span> sm <span>•</span>{' '}
         {showDimensions && (
-          <span className="text-gray-100">
-            {viewport.width}px <span className="text-black">&lt;</span> 768px
+          <span>
+            {viewport.width}px <span>&lt;</span> {resolvedScreens.md}px
           </span>
         )}
       </span>
 
-      <span className="hidden items-center bg-[#edb41f] px-2 py-1 font-mono font-semibold tracking-tighter text-white md:block lg:hidden xl:hidden 2xl:hidden">
-        3/6 <span className="text-black">•</span> md <span className="text-black">•</span>{' '}
+      <span className="rtwbp-badge rtwbp-md">
+        3/6 <span>•</span> md <span>•</span>{' '}
         {showDimensions && (
-          <span className="text-gray-100">
-            {viewport.width}px <span className="text-black">&lt;</span> 1024px
+          <span>
+            {viewport.width}px <span>&lt;</span> {resolvedScreens.lg}px
           </span>
         )}
       </span>
 
-      <span className="hidden items-center bg-[#f7ee49] px-2 py-1 font-mono font-semibold tracking-tighter text-black lg:block xl:hidden 2xl:hidden">
-        4/6 <span className="text-black">•</span> lg <span className="text-black">•</span>{' '}
+      <span className="rtwbp-badge rtwbp-lg">
+        4/6 <span>•</span> lg <span>•</span>{' '}
         {showDimensions && (
-          <span className="text-black">
-            {viewport.width}px <span className="text-black">&lt;</span> 1280px
+          <span>
+            {viewport.width}px <span>&lt;</span> {resolvedScreens.xl}px
           </span>
         )}
       </span>
 
-      <span className="hidden items-center bg-[#4686c5] px-2 py-1 font-mono font-semibold tracking-tighter text-white xl:block 2xl:hidden">
-        5/6 <span className="text-black">•</span> xl <span className="text-black">•</span>{' '}
+      <span className="rtwbp-badge rtwbp-xl">
+        5/6 <span>•</span> xl <span>•</span>{' '}
         {showDimensions && (
-          <span className="text-gray-100">
-            {viewport.width}px <span className="text-black">&lt;</span> 1536px
+          <span>
+            {viewport.width}px <span>&lt;</span> {resolvedScreens.x2l}px
           </span>
         )}
       </span>
 
-      <span className="hidden items-center bg-[#45b64a] px-2 py-1 font-mono font-semibold tracking-tighter text-white 2xl:block">
-        6/6 <span className="text-black">•</span> 2xl <span className="text-black">•</span>{' '}
+      <span className="rtwbp-badge rtwbp-2xl">
+        6/6 <span>•</span> 2xl <span>•</span>{' '}
         {showDimensions && (
-          <span className="text-gray-100">
-            {viewport.width}px <span className="text-black">≥</span> 1536px
+          <span>
+            {viewport.width}px <span>≥</span> {resolvedScreens.x2l}px
           </span>
         )}
       </span>

src/global.d.ts

@@ -4,6 +4,10 @@ declare global {
       NODE_ENV?: 'development' | 'production' | 'test';
     }
   }
+  // Provided in test-setup.ts and configured via vitest.setupFiles
+  // Declared here so editors/tsc know it's available in tests
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  const mockEnvironment: (env: 'development' | 'production' | 'test') => void;
 }
 
 export {};

src/noop.ts

@@ -15,7 +15,6 @@ export interface BreakPointerProps {
   toggleOffKey?: string;
   position?: Position;
   zIndex?: number;
-  hideInProduction?: boolean;
   showDimensions?: boolean;
   className?: string;
   style?: React.CSSProperties;

src/test-setup.ts

@@ -1,4 +1,4 @@
-import '@testing-library/jest-dom';
+import '@testing-library/jest-dom/vitest';
 import { afterEach, beforeEach } from 'vitest';
 
 // Mock process.env for tests
@@ -11,12 +11,8 @@ beforeEach(() => {
 afterEach(() => {
   process.env = originalEnv;
 });
-
 // Global test utilities
-declare global {
-  const mockEnvironment: (env: 'development' | 'production' | 'test') => void;
-}
-
+// Define on globalThis without redeclaring types here (types live in global.d.ts)
 (globalThis as any).mockEnvironment = (env: 'development' | 'production' | 'test') => {
   process.env.NODE_ENV = env;
 };