@greener-games/vite-screen-size 1.0.0

package/README.md

@@ -0,0 +1,103 @@
+# @greener-games/vite-plugin-screen-size
+
+A lightweight Vite plugin that displays the current screen dimensions and active breakpoint in a small, non-intrusive overlay during development.
+
+![License](https://img.shields.io/github/license/greener-games/vite-screen-size)
+![NPM Version](https://img.shields.io/npm/v/@greener-games/vite-plugin-screen-size)
+
+## Features
+
+- 📏 **Live Dimensions**: Shows real-time window width and height.
+- 📱 **Breakpoint Detection**: Automatically identifies the active breakpoint (Tailwind, Bootstrap, or Custom).
+- 🎨 **Modern UI**: Clean, semi-transparent overlay with a glassmorphism effect.
+- 🛠 **Zero Config**: Works out of the box with Tailwind breakpoints.
+- 🚀 **Dev-Only**: Automatically disabled in production builds.
+
+## Installation
+
+```bash
+npm install -D @greener-games/vite-plugin-screen-size
+# or
+yarn add -D @greener-games/vite-plugin-screen-size
+# or
+pnpm add -D @greener-games/vite-plugin-screen-size
+```
+
+## Usage
+
+Add it to your `vite.config.ts` (or `vite.config.js`):
+
+```typescript
+import { defineConfig } from 'vite';
+import screenSize from '@greener-games/vite-plugin-screen-size';
+
+export default defineConfig({
+  plugins: [
+    // Simple setup with default options (Tailwind breakpoints)
+    screenSize()
+  ]
+});
+```
+
+## Configuration
+
+The plugin uses Tailwind CSS breakpoints by default. You can change this behavior by providing an options object to the plugin.
+
+You can customize the breakpoints or use a different preset:
+
+```typescript
+screenSize({
+  /**
+   * Presets: 'tailwind' (default), 'bootstrap', or 'none'
+   */
+  preset: 'tailwind',
+
+  /**
+   * Custom breakpoints mapping name to pixel value.
+   * Custom breakpoints will override preset values if the names overlap.
+   */
+  breakpoints: {
+    xs: 480,
+    tablet: 768,
+    desktop: 1024,
+    '4k': 2560
+  }
+})
+```
+
+**Tailwind (Default)**
+```json
+{
+  "sm": 640,
+  "md": 768,
+  "lg": 1024,
+  "xl": 1280,
+  "2xl": 1536
+}
+```
+
+**Bootstrap**
+```json
+{
+  "sm": 576,
+  "md": 768,
+  "lg": 992,
+  "xl": 1200,
+  "xxl": 1400
+}
+```
+
+**None**
+Pass `preset: 'none'` to start with a blank slate, requiring you to provide your own breakpoints object.
+
+
+### Options
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `preset` | `'tailwind' \| 'bootstrap' \| 'none'` | `'tailwind'` | Predefined breakpoint sets. |
+| `breakpoints` | `Record<string, number>` | `{}` | Custom breakpoint definitions. |
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,60 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e=e=>`
+(function() {
+  const breakpoints = ${JSON.stringify(e)};
+  const id = '__vite-plugin-screen-size';
+  if (document.getElementById(id)) return;
+
+  const container = document.createElement('div');
+  container.id = id;
+  Object.assign(container.style, {
+    position: 'fixed',
+    bottom: '10px',
+    right: '10px',
+    backgroundColor: 'rgba(15, 23, 42, 0.8)',
+    backdropFilter: 'blur(8px)',
+    color: '#f8fafc',
+    padding: '6px 12px',
+    borderRadius: '8px',
+    fontSize: '12px',
+    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+    zIndex: '999999',
+    pointerEvents: 'none',
+    boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+    border: '1px solid rgba(255, 255, 255, 0.1)',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+    transition: 'opacity 0.2s'
+  });
+
+  const sizeEl = document.createElement('span');
+  const breakpointEl = document.createElement('span');
+  breakpointEl.style.fontWeight = 'bold';
+  breakpointEl.style.color = '#38bdf8';
+  breakpointEl.style.paddingLeft = '8px';
+  breakpointEl.style.borderLeft = '1px solid rgba(255, 255, 255, 0.2)';
+
+  container.appendChild(sizeEl);
+  container.appendChild(breakpointEl);
+  document.body.appendChild(container);
+
+  function update() {
+    const w = window.innerWidth;
+    const h = window.innerHeight;
+    sizeEl.textContent = \`\${w} × \${h}\`;
+
+    let active = 'base';
+    const sorted = Object.entries(breakpoints).sort((a, b) => b[1] - a[1]);
+    for (const [name, val] of sorted) {
+      if (w >= val) {
+        active = name;
+        break;
+      }
+    }
+    breakpointEl.textContent = active.toUpperCase();
+  }
+
+  window.addEventListener('resize', update);
+  update();
+})();
+  `,t={tailwind:{sm:640,md:768,lg:1024,xl:1280,"2xl":1536},bootstrap:{sm:576,md:768,lg:992,xl:1200,xxl:1400},none:{}};function n(n={}){let{preset:r=`tailwind`,breakpoints:i={}}=n,a={...t[r]||{},...i};return{name:`vite-screen-size`,apply:`serve`,transformIndexHtml(){return[{tag:`script`,attrs:{type:`module`},children:e(a),injectTo:`body`}]}}}exports.default=n,exports.screenSize=n;

package/dist/index.d.ts

@@ -0,0 +1,20 @@
+import { Plugin as Plugin_2 } from 'vite';
+
+declare function screenSize(options?: ScreenSizeOptions): Plugin_2;
+export default screenSize;
+export { screenSize }
+
+export declare interface ScreenSizeOptions {
+    /**
+     * Custom breakpoints mapping name to pixel value.
+     * e.g. { sm: 640, md: 768 }
+     */
+    breakpoints?: Record<string, number>;
+    /**
+     * Standard presets
+     * @default 'tailwind'
+     */
+    preset?: 'tailwind' | 'bootstrap' | 'none';
+}
+
+export { }

package/dist/index.mjs

@@ -0,0 +1,97 @@
+//#region src/client.ts
+var e = (e) => `
+(function() {
+  const breakpoints = ${JSON.stringify(e)};
+  const id = '__vite-plugin-screen-size';
+  if (document.getElementById(id)) return;
+
+  const container = document.createElement('div');
+  container.id = id;
+  Object.assign(container.style, {
+    position: 'fixed',
+    bottom: '10px',
+    right: '10px',
+    backgroundColor: 'rgba(15, 23, 42, 0.8)',
+    backdropFilter: 'blur(8px)',
+    color: '#f8fafc',
+    padding: '6px 12px',
+    borderRadius: '8px',
+    fontSize: '12px',
+    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+    zIndex: '999999',
+    pointerEvents: 'none',
+    boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+    border: '1px solid rgba(255, 255, 255, 0.1)',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+    transition: 'opacity 0.2s'
+  });
+
+  const sizeEl = document.createElement('span');
+  const breakpointEl = document.createElement('span');
+  breakpointEl.style.fontWeight = 'bold';
+  breakpointEl.style.color = '#38bdf8';
+  breakpointEl.style.paddingLeft = '8px';
+  breakpointEl.style.borderLeft = '1px solid rgba(255, 255, 255, 0.2)';
+
+  container.appendChild(sizeEl);
+  container.appendChild(breakpointEl);
+  document.body.appendChild(container);
+
+  function update() {
+    const w = window.innerWidth;
+    const h = window.innerHeight;
+    sizeEl.textContent = \`\${w} × \${h}\`;
+
+    let active = 'base';
+    const sorted = Object.entries(breakpoints).sort((a, b) => b[1] - a[1]);
+    for (const [name, val] of sorted) {
+      if (w >= val) {
+        active = name;
+        break;
+      }
+    }
+    breakpointEl.textContent = active.toUpperCase();
+  }
+
+  window.addEventListener('resize', update);
+  update();
+})();
+  `, t = {
+	tailwind: {
+		sm: 640,
+		md: 768,
+		lg: 1024,
+		xl: 1280,
+		"2xl": 1536
+	},
+	bootstrap: {
+		sm: 576,
+		md: 768,
+		lg: 992,
+		xl: 1200,
+		xxl: 1400
+	},
+	none: {}
+};
+function n(n = {}) {
+	let { preset: r = "tailwind", breakpoints: i = {} } = n, a = {
+		...t[r] || {},
+		...i
+	};
+	return {
+		name: "vite-screen-size",
+		apply: "serve",
+		transformIndexHtml() {
+			return [{
+				tag: "script",
+				attrs: { type: "module" },
+				children: e(a),
+				injectTo: "body"
+			}];
+		}
+	};
+}
+//#endregion
+export { n as default, n as screenSize };

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@greener-games/vite-screen-size",
+  "version": "1.0.0",
+  "description": "Vite plugin to show screen size and breakpoints in dev mode.",
+  "author": "",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "vite": "^8.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.12.5",
+    "typescript": "^5.4.4",
+    "vite": "^8.0.13",
+    "vite-plugin-dts": "^4.0.0"
+  }
+}