From f643f43481eae0b8aba7857dddcadbea9edb4a3a Mon Sep 17 00:00:00 2001 From: marcusquinn <6428977+marcusquinn@users.noreply.github.com> Date: Mon, 7 Apr 2025 21:37:24 +0100 Subject: [PATCH] Add efficient build workflow with npm scripts for translations, CSS/JS processing, and automated release --- .distignore | 42 +++++++++++++++++++ .eslintrc.js | 34 ++++++++++++++++ .github/workflows/release.yml | 77 ++++++++++++++++++++++++++--------- .stylelintrc.js | 45 ++++++++++++++++++++ README.md | 64 +++++++++++++++++++++++------ bin/create-zip.sh | 43 +++++++++++++++++++ package.json | 57 ++++++++++++++++++++++++++ readme.txt | 38 ++++++++++------- tsconfig.json | 26 ++++++++++++ 9 files changed, 379 insertions(+), 47 deletions(-) create mode 100644 .distignore create mode 100644 .eslintrc.js create mode 100644 .stylelintrc.js create mode 100755 bin/create-zip.sh create mode 100644 package.json create mode 100644 tsconfig.json diff --git a/.distignore b/.distignore new file mode 100644 index 0000000..6030bb7 --- /dev/null +++ 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 \ No newline at end of file diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..793c92d --- /dev/null +++ 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, + }, +}; \ No newline at end of file diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 45295f4..7d778ec 100644 --- 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") + + 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 - run: npm run build + - name: Generate translation files + run: npm run translations - - name: Create build directory + - 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. \ No newline at end of file + ## 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:" \ No newline at end of file diff --git a/.stylelintrc.js b/.stylelintrc.js new file mode 100644 index 0000000..06039e3 --- /dev/null +++ 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/**/*', + ], +}; \ No newline at end of file diff --git a/README.md b/README.md index 702dab0..6ea0022 100644 --- 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 diff --git a/bin/create-zip.sh b/bin/create-zip.sh new file mode 100755 index 0000000..8f7a223 --- /dev/null +++ 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 \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..6f1c7b9 --- /dev/null +++ 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" + } +} \ No newline at end of file diff --git a/readme.txt b/readme.txt index 653779d..3ad6696 100644 --- 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 diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..107c692 --- /dev/null +++ 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" + ] +} \ No newline at end of file