improve: reorganize build system with better project structure

* Move build.js to scripts/build.js for better organization
* Create scripts/dev-build.js for development setup workflow
* Update package.json scripts to reference new file locations
* Move micromodal from js/ to vendor/micromodal/ directory
* Update assets.php to load micromodal from vendor location
* Switch from zip-a-folder to archiver for more stable ZIP creation
* Move micromodal from dependencies to devDependencies in package.json
* Update build process to include vendor directory in distribution
* Improve error handling and logging in build scripts

Follows WordPress best practices and improves developer experience
without changing end-user functionality.

Author: TBarregren

README.md

@@ -71,25 +71,29 @@ Kntnt Popup offers multiple ways to control when and how popups appear and disap
 ### Time-based trigger
 
 **Delayed display:** Show a popup after a specified number of seconds:
+
 ```
 [popup show-after-time="10"]This popup appears after 10 seconds.[/popup]
 ```
 
 **Immediate display:** Show a popup as soon as the page loads:
+
 ```
 [popup show-after-time="0"]This popup appears immediately when the page loads.[/popup]
 ```
 
 ### Scroll-based trigger
 
 Show a popup when the user has scrolled a certain percentage of the page:
+
 ```
 [popup show-after-scroll="75"]This popup appears when you've scrolled 75% of the page.[/popup]
 ```
 
 ### Exit intent trigger
 
 Trigger a popup when the user moves their mouse cursor toward the browser's address bar or tab area, indicating they might be about to leave:
+
 ```
 [popup show-on-exit-intent]Wait! Don't leave yet. Check out this special offer![/popup]
 ```
@@ -140,25 +144,29 @@ Kntnt Popup provides several ways for users to close popups, giving you complete
 ### Built-in close button
 
 Add a close button (×) in the top-right corner of the popup:
+
 ```
 [popup close-button]This popup has a close button.[/popup]
 ```
 
 You can customize the close button character:
+
 ```
 [popup close-button="✕"]This popup uses a different close icon.[/popup]
 ```
 
 ### Click outside to close
 
 Allow users to close the popup by clicking anywhere outside the popup area:
+
 ```
 [popup close-outside-click]Click outside this popup to close it.[/popup]
 ```
 
 ### ESC key to close
 
 Enable closing the popup by pressing the ESC key:
+
 ```
 [popup close-esc-key]Press ESC to close this popup.[/popup]
 ```
@@ -168,6 +176,7 @@ Enable closing the popup by pressing the ESC key:
 Make any element inside or outside the popup close it by adding the `data-popup-close` attribute:
 
 **Close link inside popup content:**
+
 ```
 [popup modal show-after-time="5"]
 <h2>Welcome!</h2>
@@ -177,6 +186,7 @@ Make any element inside or outside the popup close it by adding the `data-popup-
 ```
 
 **Close button inside popup:**
+
 ```
 [popup show-after-scroll="50"]
 <h2>Newsletter Signup</h2>
@@ -189,6 +199,7 @@ Make any element inside or outside the popup close it by adding the `data-popup-
 ```
 
 **External close trigger (anywhere on the page):**
+
 ```html
 <!-- This button can be anywhere on your page -->
 <button data-popup-close>Close any open popup</button>
@@ -788,11 +799,11 @@ document.addEventListener('kntnt_popup:after_close', function (event) {
 
 ## Building from Source (for Developers)
 
-If you have downloaded the plugin source code directly from GitHub, the necessary JavaScript file (`js/micromodal.min.js`) might not be included or might be outdated. This file is managed using Node.js and npm. Follow these steps to install dependencies and build the required JavaScript file:
+If you have downloaded the plugin source code directly from GitHub, you'll need to install dependencies and build the plugin for distribution.
 
-### 1. Install Node.js and npm
+### Development Setup
 
-You need Node.js installed on your system, which includes npm (Node Package Manager). If you don't have it installed, download and install the LTS (Long Term Support) version from the official website:
+For development work, you need Node.js installed on your system, which includes npm (Node Package Manager). If you don't have it installed, download and install the LTS (Long Term Support) version from the official website:
 
 * [https://nodejs.org/](https://nodejs.org/)
 
@@ -803,53 +814,69 @@ node -v
 npm -v
 ```
 
-### 2. Install Project Dependencies
+### Install Dependencies
 
-Navigate to the plugin's root directory (`kntnt-popup/`) in your terminal and run the following command:
+Navigate to the plugin's root directory (`kntnt-popup/`) in your terminal and run:
 
 ```bash
 npm install
 ```
 
-This command reads the package.json file and downloads the required development dependencies (like Micromodal.js) into a node_modules folder within the plugin directory.
+This command reads the package.json file and downloads the required dependencies into a node_modules folder.
 
-### 3. Build the JavaScript File
+### Development Build
 
-After the dependencies are installed, run the build command defined in `package.json`:
+For development purposes (to get the MicroModal.js dependency), run:
 
 ```bash
-npm run build
+npm run dev-build
 ```
 
-This command executes the build script, which typically copies the necessary JavaScript file (`micromodal.min.js`) from `node_modules` to the correct location within the plugin's `js/` directory.
+This copies the necessary JavaScript file (`micromodal.min.js`) from `node_modules` to the correct location within the plugin's `vendor/micromodal/` directory.
 
-### 4. Updating Dependencies
+### Production Build
 
-To check if there are newer versions of the dependencies (like Micromodal.js):
+To create a production-ready version of the plugin:
 
 ```bash
-npm outdated
+npm run build
 ```
 
-To update a specific dependency (e.g., micromodal) to the latest version allowed by package.json:
+This command:
 
-```bash
-npm update micromodal
-```
+1. Cleans the `dist` directory
+2. Copies all necessary plugin files to `dist/kntnt-popup/`
+3. Minifies and optimizes the CSS file using cssnano
+4. Minifies and optimizes the JavaScript file using terser
+5. Creates a `dist/kntnt-popup.zip` file ready for distribution
+
+The production build creates optimized files that are smaller and faster to load, making them ideal for production environments.
+
+### Build Output
+
+After running `npm run build`, you'll find:
+
+- `dist/kntnt-popup/` - The complete plugin directory with optimized files
+- `dist/kntnt-popup.zip` - A ZIP archive ready for WordPress installation
+
+### Updating Dependencies
 
-Or update all dependencies:
+To check if there are newer versions of the dependencies:
 
 ```bash
-npm update
+npm outdated
 ```
 
-**Important:** After updating dependencies with npm update, you must run the build command again to copy the updated file(s) to the js/ directory:
+To update dependencies:
 
 ```bash
-npm run build
+npm update
 ```
 
-Now you have the necessary JavaScript file in place, and the plugin should function correctly.
+**Important:** After updating dependencies, you must run the appropriate build command again:
+
+- For development: `npm run dev-build`
+- For production: `npm run build`
 
 ## Questions & Answers
 
@@ -869,6 +896,19 @@ If you are not familiar with Git, please create a new ticket on the plugin's iss
 
 ## Changelog
 
+## 1.1.1 (2025-05-24)
+
+- enhance: add modern build system with npm scripts for development and production
+- enhance: implement CSS minification using cssnano for optimized file sizes
+- enhance: implement JavaScript minification using terser for better performance
+- enhance: add automated ZIP file generation for easy distribution
+- enhance: reorganize build scripts into dedicated `scripts/` directory for better project structure
+- enhance: move third-party dependencies to `vendor/` directory following WordPress best practices
+- enhance: improve dependency management with separate dev and production workflows
+- improve: restructure development workflow with separate dev and production builds
+- improve: add comprehensive build documentation for developers
+- improve: switch from zip-a-folder to archiver for more reliable ZIP generation
+
 ## 1.1.0 (2025-05-23)
 
 - feature: add new `close-esc-key` parameter to control whether ESC key closes the popup

classes/assets.php

@@ -34,7 +34,7 @@ public function register_assets(): void {
 
 		// Register Micromodal library script (dependency for main script).
 		wp_register_script( Plugin::get_slug() . '-micromodal', // Handle
-		                    Plugin::get_plugin_url() . 'js/micromodal.min.js', // Source URL
+		                    Plugin::get_plugin_url() . 'vendor/micromodal/micromodal.min.js', // Source URL
 		                    [], // Dependencies
 		                    Plugin::get_version(), // Version
 		                    true // In footer