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

2025-04-07 21:37:24 +01:00
parent be4ec15f29
commit f643f43481
9 changed files with 379 additions and 47 deletions
--- a/.distignore
+++ b/.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 
--- a/.eslintrc.js
+++ b/.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,
+  },
+}; 
--- a/.github/workflows/release.yml
+++ b/.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
-          npm ci
+          WP_VERSION=$(grep -m 1 "Version: " wp-multisite-waas.php | awk -F' ' '{print $2}')
+          README_VERSION=$(grep -m 1 "Stable tag: " readme.txt | awk -F' ' '{print $3}')
+          PKG_VERSION=$(node -p "require('./package.json').version")
          
-      - name: Build assets
-        run: npm run build
+          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
          
-      - name: Create build directory
+          echo "All version numbers match: ${{ env.VERSION }}"
+
+      - name: Generate translation files
+        run: npm run translations
+
+      - name: Process CSS and JS
        run: |
-          mkdir -p build/wp-multisite-waas
-          cp -r $(ls -A | grep -v "^build$" | grep -v "^\.git$" | grep -v "^node_modules$" | xargs) build/wp-multisite-waas/
-
-      - 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
+          npm run css
+          npm run js

      - name: Create ZIP file
-        run: |
-          cd build
-          zip -r wp-multisite-waas-${{ env.VERSION }}.zip wp-multisite-waas
+        run: npm run zip

      - 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:" 
--- a/.stylelintrc.js
+++ b/.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/**/*',
+  ],
+}; 
--- a/README.md
+++ b/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:
-   - Generate translation POT files
-   - Minify CSS and JS assets
-   - Process and optimize other assets
-6. **Important:** Update both README.md and readme.txt files when making changes that affect:
+5. Use the available npm scripts for development:
+   ```bash
+   # Watch for CSS/JS changes during development
+   npm start
+   
+   # 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`)
-9. Open a Pull Request
+   
+8. Commit your changes (`git commit -m 'Add some amazing feature'`)
+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`)
-2. Create a properly packaged ZIP file
-3. Create a GitHub release with the ZIP attached
+1. Verify all version numbers match across files
+2. Build the plugin (translations, CSS, JS)
+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
--- a/bin/create-zip.sh
+++ b/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 
--- a/package.json
+++ b/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"
+  }
+} 
--- a/readme.txt
+++ b/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
-   * Process and optimize other assets
-6. **Important:** Update both README.md and readme.txt files when making changes that affect:
+   * Compile and minify CSS from SCSS
+   * Compile and minify JS from TypeScript
+   * 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:**
-
-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.
+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.

 **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:
-`git tag v2.3.5` (for version 2.3.5) and then `git push origin v2.3.5`
-
-The tag must begin with "v" followed by the version number (v*.*.*).
+To trigger a new release build, push a tag following the semantic versioning format (v*.*.*):
+`git tag v2.3.5 && git push origin v2.3.5`

 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
--- a/tsconfig.json
+++ b/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"
+  ]
+}