pixel-mirror 1.0.3 → 1.0.4

package/README.md

@@ -6,7 +6,7 @@ Pixel Mirror is a lightweight tool for front-end developers that overlays design
 
 ## Installation
 
-### 1. For Vite projects
+### 1. For [Vite](https://vite.dev/) projects
 
 Install the package via npm:
 
@@ -17,20 +17,55 @@ npm install pixel-mirror --save-dev
 Then, add Pixel Mirror's Vite plugin to your `vite.config.js`:
 
 ```js
-import pixelMirrorPlugin from "pixel-mirror/vite";
 import { defineConfig } from "vite";
+import pixelMirror from "pixel-mirror/vite";
 
 export default defineConfig({
-  plugins: [pixelMirrorPlugin()],
+  plugins: [pixelMirror()],
   // ... other configurations
 });
 ```
 
 The plugin is automatically injected into your HTML during development and will be removed in production builds.
 
-### 2. For other projects
+### 2. For [Astro](https://astro.build/) projects
 
-If you're not using Vite, you can integrate Pixel Mirror by injecting its script file into your HTML, served via a CDN:
+Install the package via npm:
+
+```bash
+npm install pixel-mirror --save-dev
+```
+
+Then, add Pixel Mirror's Astro Integration to your `astro.config.mjs`:
+
+```js
+import { defineConfig } from "astro/config";
+import pixelMirror from "pixel-mirror/astro";
+
+export default defineConfig({
+  integrations: [pixelMirror()],
+  // ... other configurations
+});
+```
+
+### 3. For [Next.js](https://nextjs.org/) projects
+
+Inject the following code to the `<Head></Head>` section in `_document.jsx`:
+
+``` jsx
+// import Script from "next/script"
+
+{process.env.NODE_ENV === "development" && (
+  <Script
+    src="https://cdn.jsdelivr.net/npm/pixel-mirror/dist/index.js"
+    strategy="afterInteractive"
+  />
+)}
+```
+
+### 4. For other projects
+
+Integrate Pixel Mirror by injecting its script into your HTML:
 
 ``` html
 <script defer src="https://cdn.jsdelivr.net/npm/pixel-mirror/dist/index.js"></script>

package/package.json

@@ -1,11 +1,18 @@
 {
   "name": "pixel-mirror",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Pixel Mirror helps developers achieve pixel-perfect UIs by easily overlaying design mockups.",
   "type": "module",
   "exports": {
     ".": "./dist/index.js",
-    "./vite": "./plugins/vite.js"
+    "./vite": {
+      "types": "./plugins/vite.d.ts",
+      "default": "./plugins/vite.js"
+    },
+    "./astro": {
+      "types": "./plugins/astro.d.ts",
+      "default": "./plugins/astro.js"
+    }
   },
   "keywords": [
     "solid",
@@ -47,7 +54,7 @@
   },
   "lint-staged": {
     "*.{ts,tsx}": [
-      "eslint --fix --max-warnings 0 --no-warn-ignored"
+      "eslint --fix --max-warnings 0"
     ],
     "*.scss": [
       "stylelint --fix"

package/plugins/astro.d.ts

@@ -0,0 +1,5 @@
+import type { AstroIntegration } from "astro";
+
+declare function pixelMirror(): AstroIntegration;
+
+export default pixelMirror;

package/plugins/astro.js

@@ -0,0 +1,18 @@
+export default function pixelMirror() {
+  return {
+    name: "pixel-mirror",
+    hooks: {
+      "astro:config:setup": ({ command, injectScript }) => {
+        if (command === "dev") {
+          injectScript(
+            "head-inline",
+            `const script = document.createElement("script");
+             script.src = "/node_modules/pixel-mirror/dist/index.js";
+             script.defer = true;
+             document.head.appendChild(script);`
+          );
+        }
+      }
+    }
+  };
+}

package/plugins/vite.d.ts

@@ -0,0 +1,5 @@
+import type { Plugin } from "vite";
+
+declare function pixelMirror(): Plugin;
+
+export default pixelMirror;

package/plugins/vite.js

@@ -1,9 +1,9 @@
-export default function pixelMirrorPlugin() {
+export default function pixelMirror() {
   return {
-    name: "vite-plugin-pixel-mirror",
+    name: "pixel-mirror",
     transformIndexHtml(html) {
       if (process.env.NODE_ENV !== "production") {
-        return html.replace("</body>", `<script defer src="/node_modules/pixel-mirror/dist/index.js"></script></body>`);
+        return html.replace("</head>", `<script defer src="/node_modules/pixel-mirror/dist/index.js"></script></head>`);
       }
       return html;
     }