Add efficient build workflow with npm scripts for translations, CSS/JS processing, and automated release

.distignore

@@ -0,0 +1,42 @@
+# Directories
+/.git
+/.github
+/.vscode
+/.idea
+/bin
+/node_modules
+/tests
+/build
+
+# Root Files
+.distignore
+.editorconfig
+.eslintignore
+.eslintrc*
+.gitignore
+.stylelintrc*
+phpunit.xml
+tsconfig.json
+webpack.config.js
+*.log
+jest.config.js
+
+# Development Files
+*.map
+*.ts
+!*.d.ts
+.travis.yml
+.phpcs.xml.dist
+composer.json
+composer.lock
+package.json
+package-lock.json
+phpcs.xml
+README.md
+CONTRIBUTING.md
+*.zip
+*.tar.gz
+
+# System Files
+.DS_Store
+Thumbs.db 

.eslintrc.js

@@ -0,0 +1,34 @@
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+  ],
+  rules: {
+    // Customize rules as needed
+    'no-console': ['warn', { allow: ['warn', 'error'] }],
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-explicit-any': 'warn',
+    // Add WordPress-specific rules here if needed
+  },
+  env: {
+    browser: true,
+    node: true,
+    es6: true,
+    jest: true,
+  },
+}; 

.github/workflows/release.yml

@@ -20,7 +20,7 @@ jobs:
         with:
           php-version: '7.4'
           extensions: mbstring, intl, curl
-          tools: composer
+          tools: composer, wp-cli
 
       - name: Get the version
         id: get_version
@@ -30,30 +30,41 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: '18'
+          cache: 'npm'
 
-      - name: Install dependencies
+      - name: Install PHP dependencies
+        run: composer install --no-dev --optimize-autoloader
+        
+      - name: Install Node dependencies
+        run: npm ci
+
+      - name: Verify version matches
         run: |
-          composer install --no-dev --optimize-autoloader
+          WP_VERSION=$(grep -m 1 "Version: " wp-multisite-waas.php | awk -F' ' '{print $2}')
-          npm ci
+          README_VERSION=$(grep -m 1 "Stable tag: " readme.txt | awk -F' ' '{print $3}')
+          PKG_VERSION=$(node -p "require('./package.json').version")
+          
+          if [ "$WP_VERSION" != "${{ env.VERSION }}" ] || [ "$README_VERSION" != "${{ env.VERSION }}" ] || [ "$PKG_VERSION" != "${{ env.VERSION }}" ]; then
+            echo "Error: Version mismatch detected!"
+            echo "Tag version: ${{ env.VERSION }}"
+            echo "Plugin version: $WP_VERSION"
+            echo "readme.txt version: $README_VERSION"
+            echo "package.json version: $PKG_VERSION"
+            exit 1
+          fi
+          
+          echo "All version numbers match: ${{ env.VERSION }}"
 
-      - name: Build assets
+      - name: Generate translation files
-        run: npm run build
+        run: npm run translations
 
-      - name: Create build directory
+      - name: Process CSS and JS
         run: |
-          mkdir -p build/wp-multisite-waas
+          npm run css
-          cp -r $(ls -A | grep -v "^build$" | grep -v "^\.git$" | grep -v "^node_modules$" | xargs) build/wp-multisite-waas/
+          npm run js
-
-      - name: Remove development files
-        run: |
-          cd build/wp-multisite-waas
-          rm -rf .github .gitignore composer.json composer.lock package.json package-lock.json phpunit.xml webpack.config.js node_modules tests .git
-          find . -name "*.map" -type f -delete
 
       - name: Create ZIP file
-        run: |
+        run: npm run zip
-          cd build
-          zip -r wp-multisite-waas-${{ env.VERSION }}.zip wp-multisite-waas
 
       - name: Create Release
         id: create_release
@@ -64,6 +75,32 @@ jobs:
           draft: false
           prerelease: false
           body: |
-            WP Multisite WaaS ${{ env.VERSION }}
+            # WP Multisite WaaS ${{ env.VERSION }}
             
-            This is an automated release. Please refer to the changelog in readme.txt for details. 
+            ## What's Changed
+            
+            For a complete list of changes, please refer to the [changelog](https://github.com/wpallstars/wp-multisite-waas/blob/main/readme.txt).
+            
+            ## Installation
+            
+            1. Download the ZIP file from this release
+            2. Upload and activate the plugin in your WordPress Network installation
+            3. Follow the setup wizard to configure the plugin
+            
+            ## Notes
+            
+            - Compatible with WordPress 5.3+
+            - Requires PHP 7.4.30+
+            - Always backup your site before upgrading
+
+      - name: Send notification on success
+        if: success()
+        uses: rtCamp/action-slack-notify@v2
+        env:
+          SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}
+          SLACK_CHANNEL: releases
+          SLACK_COLOR: good
+          SLACK_MESSAGE: "🚀 WP Multisite WaaS ${{ env.VERSION }} has been released! https://github.com/wpallstars/wp-multisite-waas/releases"
+          SLACK_TITLE: New Release
+          SLACK_USERNAME: GitHub
+          SLACK_ICON_EMOJI: ":github:" 

.stylelintrc.js

@@ -0,0 +1,45 @@
+module.exports = {
+  extends: [
+    'stylelint-config-standard-scss',
+  ],
+  rules: {
+    // WordPress-specific CSS rules
+    'selector-class-pattern': null, // Allow WordPress class naming convention
+    'no-descending-specificity': null,
+    'at-rule-no-unknown': [
+      true,
+      {
+        ignoreAtRules: [
+          'extend',
+          'at-root',
+          'debug',
+          'warn',
+          'error',
+          'if',
+          'else',
+          'for',
+          'each',
+          'while',
+          'mixin',
+          'include',
+          'content',
+          'return',
+          'function',
+          'tailwind',
+          'apply',
+          'responsive',
+          'variants',
+          'screen',
+        ],
+      },
+    ],
+    // Other customizations
+    'string-quotes': 'single',
+    'declaration-block-trailing-semicolon': 'always',
+  },
+  ignoreFiles: [
+    'dist/**/*.css',
+    'node_modules/**/*',
+    'vendor/**/*',
+  ],
+}; 

README.md

@@ -103,22 +103,56 @@ We welcome contributions to WP Multisite WaaS! Here's how you can contribute eff
 
 1. Fork the repository
 2. Create your feature branch (`git checkout -b feature/amazing-feature`)
-3. Run `npm install` and `composer install` to set up dependencies
+3. Set up the development environment:
+   ```bash
+   # Install PHP dependencies
+   composer install
+   
+   # Install Node.js dependencies
+   npm install
+   ```
 4. Make your changes
-5. Before committing, run `npm run build` to:
+5. Use the available npm scripts for development:
-   - Generate translation POT files
+   ```bash
-   - Minify CSS and JS assets
+   # Watch for CSS/JS changes during development
-   - Process and optimize other assets
+   npm start
-6. **Important:** Update both README.md and readme.txt files when making changes that affect:
+   
+   # Generate translation files
+   npm run translations
+   
+   # Process CSS (compile SCSS to CSS and minify)
+   npm run css
+   
+   # Process JavaScript (compile TypeScript to JS and minify)
+   npm run js
+   
+   # Run all linters (PHP, JS, CSS)
+   npm run lint
+   
+   # Run tests
+   npm run test
+   ```
+6. Before committing, run the build process to ensure all assets are properly processed:
+   ```bash
+   npm run build
+   ```
+   This command:
+   - Generates translation POT files
+   - Compiles and minifies CSS from SCSS
+   - Compiles and minifies JS from TypeScript
+   - Optimizes other assets
+   
+7. **Important:** Update both README.md and readme.txt files when making changes that affect:
    - Version numbers
    - Required WordPress/PHP versions
    - Feature additions or changes
    - Installation instructions
    - Documentation
    - Changelog entries
-7. Commit your changes (`git commit -m 'Add some amazing feature'`)
+   
-8. Push to the branch (`git push origin feature/amazing-feature`)
+8. Commit your changes (`git commit -m 'Add some amazing feature'`)
-9. Open a Pull Request
+9. Push to the branch (`git push origin feature/amazing-feature`)
+10. Open a Pull Request
 
 ### Pull Request Guidelines
 
@@ -146,12 +180,16 @@ git push origin v2.3.5
 The tag must begin with "v" followed by the version number (v*.*.*)
 
 This will automatically:
-1. Build the plugin (run `npm run build`)
+1. Verify all version numbers match across files
-2. Create a properly packaged ZIP file
+2. Build the plugin (translations, CSS, JS)
-3. Create a GitHub release with the ZIP attached
+3. Create a properly packaged ZIP file
+4. Create a GitHub release with the ZIP attached
 
 When preparing for a release:
-1. Update the version number in the main plugin file and readme.txt
+1. Update the version number in:
+   - The main plugin file (wp-multisite-waas.php)
+   - readme.txt (Stable tag)
+   - package.json
 2. Update the changelog in readme.txt
 3. Ensure README.md and readme.txt are synchronized with the latest information
 4. Create and push the appropriate version tag

bin/create-zip.sh

@@ -0,0 +1,43 @@
+#!/bin/bash
+
+# Get the version from the main plugin file
+VERSION=$(grep -m 1 "Version: " wp-multisite-waas.php | awk -F' ' '{print $2}')
+PLUGIN_SLUG="wp-multisite-waas"
+BUILD_DIR="./build"
+DIST_DIR="$BUILD_DIR/$PLUGIN_SLUG"
+
+echo "📦 Building $PLUGIN_SLUG version $VERSION..."
+
+# Ensure a clean build directory
+rm -rf "$BUILD_DIR"
+mkdir -p "$DIST_DIR"
+
+# Copy all necessary files to the distribution directory
+echo "🔍 Copying files..."
+rsync -rc --exclude-from='.distignore' --exclude="$BUILD_DIR" ./ "$DIST_DIR/" --delete --delete-excluded
+
+# Remove development files
+echo "🧹 Removing development files..."
+cd "$DIST_DIR" || exit
+rm -rf .git .github .gitignore .distignore .eslintrc* .stylelintrc* composer.json composer.lock package.json package-lock.json phpunit.xml jest.config.js tsconfig.json webpack.config.js node_modules tests .vscode .idea bin
+
+# Create the zip file
+echo "🗜️ Creating zip file..."
+cd "$BUILD_DIR" || exit
+ZIP_FILE="$PLUGIN_SLUG-$VERSION.zip"
+zip -r "$ZIP_FILE" "$PLUGIN_SLUG" -x "*.DS_Store" -x "*.git*" -x "*node_modules*" -x "*vendor*" -x "*.map"
+
+echo "✅ Build complete: $BUILD_DIR/$ZIP_FILE"
+echo "📏 ZIP size: $(du -h "$ZIP_FILE" | cut -f1)"
+
+# Remind about version numbers
+echo ""
+echo "🔔 Remember to:"
+echo "  - Verify the zip contains all necessary files"
+echo "  - Ensure version numbers match in:"
+echo "    - wp-multisite-waas.php"
+echo "    - package.json"
+echo "    - readme.txt" 
+echo ""
+
+exit 0 

package.json

@@ -0,0 +1,57 @@
+{
+  "name": "wp-multisite-waas",
+  "version": "2.3.4",
+  "description": "The Complete Network Solution for transforming your WordPress Multisite into a Website as a Service (WaaS) platform",
+  "main": "index.js",
+  "scripts": {
+    "start": "wp-scripts start",
+    "build": "npm run clean && npm run translations && npm run css && npm run js",
+    "clean": "rm -rf dist && mkdir -p dist/css dist/js",
+    "css": "npm run css:compile && npm run css:minify",
+    "css:compile": "sass --style=expanded --source-map --embed-sources --no-error-css assets/css/src/:assets/css/",
+    "css:minify": "cleancss -O1 --format breakWith=lf --source-map --source-map-inline-sources --output assets/css/ --batch --batch-suffix '.min' 'assets/css/*.css' '!assets/css/*.min.css'",
+    "js": "npm run js:compile && npm run js:minify",
+    "js:compile": "tsc -p tsconfig.json",
+    "js:minify": "terser assets/js/*.js --compress --mangle --output dist/js/ --source-map \"root='../assets/js',url='[name].min.js.map'\"",
+    "translations": "wp i18n make-pot . lang/wp-multisite-waas.pot --include=\"**/*.php\" --exclude=\"vendor,node_modules,tests\"",
+    "lint:php": "composer run-script phpcs",
+    "lint:js": "eslint assets/js/**/*.js assets/js/**/*.ts",
+    "lint:css": "stylelint assets/css/**/*.scss",
+    "lint": "npm run lint:php && npm run lint:js && npm run lint:css",
+    "test": "jest",
+    "prepare-release": "npm run build && npm run lint && npm run test",
+    "zip": "npm run build && bash ./bin/create-zip.sh"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/wpallstars/wp-multisite-waas.git"
+  },
+  "keywords": [
+    "wordpress",
+    "multisite",
+    "waas"
+  ],
+  "author": "WP Multisite WaaS Contributors",
+  "license": "GPL-2.0-or-later",
+  "bugs": {
+    "url": "https://github.com/wpallstars/wp-multisite-waas/issues"
+  },
+  "homepage": "https://github.com/wpallstars/wp-multisite-waas#readme",
+  "devDependencies": {
+    "@types/jest": "^29.5.3",
+    "@types/node": "^20.4.5",
+    "@typescript-eslint/eslint-plugin": "^6.2.0",
+    "@typescript-eslint/parser": "^6.2.0",
+    "@wordpress/env": "^8.8.0",
+    "@wordpress/scripts": "^26.13.0",
+    "clean-css-cli": "^5.6.2",
+    "eslint": "^8.46.0",
+    "jest": "^29.6.2",
+    "sass": "^1.64.1",
+    "stylelint": "^15.10.2",
+    "stylelint-config-standard-scss": "^10.0.0",
+    "terser": "^5.19.2",
+    "ts-jest": "^29.1.1",
+    "typescript": "^5.1.6"
+  }
+} 

readme.txt

@@ -41,36 +41,46 @@ We welcome contributions to WP Multisite WaaS! To contribute effectively:
 
 1. Fork the repository on GitHub
 2. Create a feature branch from main
-3. Run `npm install` and `composer install` to set up dependencies
+3. Set up the development environment:
+   * Install PHP dependencies with `composer install`
+   * Install Node.js dependencies with `npm install`
 4. Make your changes
-5. Before committing, run `npm run build` to:
+5. Use the available npm scripts for development:
+   * `npm start` - Watch for CSS/JS changes during development
+   * `npm run translations` - Generate translation files
+   * `npm run css` - Process CSS (compile SCSS to CSS and minify)
+   * `npm run js` - Process JavaScript (compile TypeScript to JS and minify)
+   * `npm run lint` - Run all linters (PHP, JS, CSS)
+   * `npm run test` - Run tests
+6. Before committing, run `npm run build` to:
    * Generate translation POT files
-   * Minify CSS and JS assets
+   * Compile and minify CSS from SCSS
-   * Process and optimize other assets
+   * Compile and minify JS from TypeScript
-6. **Important:** Update both README.md and readme.txt files when making changes that affect:
+   * Optimize other assets
+7. **Important:** Update both README.md and readme.txt files when making changes that affect:
    * Version numbers
    * Required WordPress/PHP versions
    * Feature additions or changes
    * Installation instructions
    * Documentation
    * Changelog entries
-7. Open a Pull Request with your changes
+8. Commit your changes and push to your fork
+9. Open a Pull Request against the main repository
 
-**Pull Request Guidelines:**
+When submitting a Pull Request, please include a clear description of the changes and their purpose, reference any related issues, and ensure your code follows existing style conventions. Always verify that both README.md and readme.txt are updated and synchronized before submitting your PR.
-
-Please include a clear description of your changes and their purpose, reference any related issues, and ensure your code follows existing style conventions. Always verify that both README.md and readme.txt are updated and synchronized before submitting your PR.
 
 **Release Process:**
 
 Releases are automated using GitHub Actions workflows that trigger when a version tag is pushed. 
 
-To trigger a new release build, push a tag following the semantic versioning format:
+To trigger a new release build, push a tag following the semantic versioning format (v*.*.*):
-`git tag v2.3.5` (for version 2.3.5) and then `git push origin v2.3.5`
+`git tag v2.3.5 && git push origin v2.3.5`
-
-The tag must begin with "v" followed by the version number (v*.*.*).
 
 When preparing for a release:
-1. Update the version number in the main plugin file and readme.txt
+1. Update the version number in:
+   * The main plugin file (wp-multisite-waas.php)
+   * readme.txt (Stable tag)
+   * package.json
 2. Update the changelog in readme.txt
 3. Ensure README.md and readme.txt are synchronized with the latest information
 4. Create and push the appropriate version tag

tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es2020",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "jsx": "preserve",
+    "outDir": "./dist/js",
+    "sourceMap": true,
+    "declaration": false,
+    "allowJs": true,
+    "checkJs": false
+  },
+  "include": [
+    "assets/js/**/*.ts",
+    "assets/js/**/*.js"
+  ],
+  "exclude": [
+    "node_modules",
+    "vendor",
+    "dist"
+  ]
+}