DEV Community: Nicholas Babu

Improving developer experience ( part two ) with Webpack hooks

Nicholas Babu — Wed, 08 Oct 2025 17:05:16 +0000

Inspiration:
Sometimes when working on a large webpack project, your compiler might unwilingly decide to take a water-break|take a breath. Also known us hanging or deadlock, in computer terms; where two or more processes (tasks) are waiting for a resource to be released so they can continue, but it's not, because of the same reason ( my turn >< no it's my turn ).

You try to reload your page, but your latest changes are still not reflected in the browser ( because your build script is stuck, maybe), so you CTLR + C to kill the watch script and rerun it a fresh.

What if there was a better way to tell, if your watch script has not been running for a while ( because it's stuck ), before doing the CTLR + C > re run script and repeat this over and over.

This blog is about that.

We are going to work on a project from a previous blog, and improve on that for an even better experience. Call it evolution if you may.

Clone the project from GitHub and run yarn : it fails because of an incompatible dev package :), lets remove that for a better alternative:

run yarn remove @squoosh/lib then yarn add sharp -D to install one of the recommended alternative,

Then in the webpack.config.js change ImageMinimizerPlugin.squooshMinify, to ImageMinimizerPlugin.sharpMinify, and re-run our watch script.

Next, lets improve on this.

We're going to create a simple webpack plugin, and tap into one of the compiler hooks; to output the time when the last compile happened.

We can then compare the last compiled at time, with the system time and then decide if we want to kill the watch script or look elsewhere, why the current changes in the source files are not reflected on the browser.

To start with, lets create a file at the root of our project directory named output-time.js. Then create a class named OutPutTime that defines apply as it's prototype method.

This method, contains the compiler as the argument, and with the compiler instance, we have access to it's hooks; which we can tap into.

We're going to tap into the done hook, and in this hook add the code necessary to output the current system time.

Below is the code that goes into this file ( no need to install any dependency, as they're already available or required by webpack ).

const { EOL } = require( 'os' )
const { createColors } = require( 'colorette' )
class OutPutTime {
    apply( compiler ) {
        compiler.hooks.done.tapAsync(
            'OutPutTime',
            ( stats, callback) => {
                const { bold, cyan, magenta } = createColors({ useColor: true })
                const now = new Date( Date.now() ).toLocaleTimeString()
                console.info(EOL)
                console.info(`[output-time] ${ bold( cyan('Last compiled at : ') ) } ${bold( magenta( now ) ) }`)
                console.info(EOL)
                callback()
            }
        )
    }
}

module.exports = OutPutTime

Then at the top of our webpack.config.js require the file const OutPutTime = require("./output-time");

Then include our new plugin along with the new MiniCSSExtractPlugin() like so:

....

plugins: [
        new MiniCSSExtractPlugin(),
        new OutPutTime()
    ],

After this, every time there are file changes, we will get a nice message ( Last compiled at : < compiled date > ) before the output of the information related to our assets ( files ).

Resources:

Webpack compiler documentation:
This blog code on GitHub (branch output-time)

Dockerizing your Shopify app

Nicholas Babu — Thu, 02 Mar 2023 08:23:24 +0000

When you generate a Shopify app, using their CLI tool, the generated app comes with a Docker file, you can use when developing or on production.
In this blog, we will explore what's required to develop a Shopify app in Docker, and later translate the same to a Docker instance on a production server with a real domain (URL).

When you run 'yarn dev (--reset)', after the app is generated, Shopify CLI takes care of the initial setup:

like connecting your local app to the Shopify app you created on your partners dashboard (in this example walk through it's docker-inshop; see image below) and
Automatically updates your app's URL in order to create the preview experience
Sets your app with a development store to associate with the app during testing/dev, according to your answers in each promt after yarn dev --reset

Initial setup with Shopify cli after yarn dev --reset

Auto updated App URL

With Docker you will have to do this manually, but it's as easy as ABC now that we understand what we miss when we trade Shopify CLI for Docker during development.
With Docker, you only need the web folder 📂, as you will not be relying on Shopify CLI to serve your app in dev or in production.

The Plan:

Serve the app via https using ngrok
Manually update your App URL
Identify your application with Shopify via credentials

The Docker file exposes your app via port 8081, and so, to expose the app via https, run ngrok http 8081.
Then copy that ngrok url and replace your app's URL under "ALL APPS" > "your app id ||docker-inshop" > "App setup" > "URLs" under, your Shopify partners dashboard.

Updating App URLs

Next, to identify this application with Shopify, on the same dashboard under "Overview", note down the "Client ID" and the "Client secret".

App Credentials

Copy the example.env as dev.env, then replace the values of;

SHOPIFY_API_KEY with the "Client ID" and SHOPIFY_API_SECRET with the "Client secret" from the "Overview" tab above.
SCOPES with the "scopes" in the shopify.app.toml, you can add more and request access as required, from your app's setup dashboard pane.
HOST with the ngrok URL you got after exposing port 8081, same in the image 'Updating App URLs' above, and PORT with the same port defined in the Dockerfile.

Testing the setup:

Run docker build --build-arg SHOPIFY_API_KEY=<shopify client id> -t demos . to build an image
based on the default Dockerfile generated when scaffolding the starter app with Shopify CLI. The SHOPIFY_API_KEY is required to bundle the front end application, done when building this image.

Then run docker run -p 8081:8081 --rm --env-file dev.env demos,to create and start a new container based on a specified Docker image (demos), while including the environment variables defined in the dev.env file.

To install the app into your Shopify store visit the <HOST>/auth?shop=<store_name>.myshopify.com URL in your browser; OR same as https://<ngrok_url>/auth?shop=<store_name>.myshopify.com,

CONCLUSION

To move this to production, replace the HOST value with your domain URL, and also update the URLs under "ALL APPS" > "" > "App setup" > "URLs", with the same value.

If required, to publish your app in the Shopify App Store, follow the guide @ Shopify.

You can find the code for this blog on Github

End to End testing in Laravel with cypress

Nicholas Babu — Fri, 17 Feb 2023 10:13:32 +0000

The first time I heard someone mention 'Writing automated tests', I thought they were being funny, don't get me wrong, I was self learning (taught), and the person had taught us various debugging techniques and tools, including xdebug, dd, the browser among others; but I would later come to realize the funny guy wasn't being funny !.

I won’t bore you with the details of my realization, so we keep this blog as short, as always; but it took a real world scenario for me to see the importance of writing tests. There are various types of tests, but in this blog, we will explore e2e tests with cypress because it's free, fast, written in JavaScript, among other reasons: there're also other great options for this kind of tests, besides cypress.

To get started with e2e tests, we need an app, with implemented user behaviors and layout (output) to test. The app is from a Laravel tutorial: you're welcome to binge watch, code along or skip to the next section (below).

Getting started;

To get started, fork the repo and git clone that into your machine, and checkout a new branch called e2e by running the command git checkout -b e2e, then composer install to install the apps dependencies, defined in the composer.json file.

We’re also going to edit a file or three, to generate the required data, we’ll be writing tests for, just like a real app, before getting started with the tests.

We don’t need to setup a mysql server for this, so we will fallback to using an sqlite database. Edit the file config/database.php line 18 to ''default' => env('DB_CONNECTION', 'sqlite'),

Then to generate users with a hashed password we can use to test login, change the file database/factories/UserFactory.php line 25 to 'password' => Hash::make('123'), // password, be sure to add a use statement at the top of the file for the Illuminate\Support\Facades\Hash; we just used to hash the password string.

Lastly, before we run the app, let’s edit the file database/seeders/DatabaseSeeder.php so we can generate multiple users with multiple Job listings for each user. Change the implementation for the run method to

$users = User::factory(5)->create()
                        ->pluck('id')->toArray();


foreach ($users as $uid) {
   Listing::factory(20)->create([
       'user_id' => $uid
   ]);
}

Starting the application:

Copy example.env as .env
Update the DB_CONNECTION to sqlite in the .env file, and create the database/database.sqlite file.
Run php artisan key:generate to generate your APP_KEY, (auto update .env file)
Run php artisan migrate followed by php artisan db:seed then php artisan serve to run the migrations, seed the dummy (fake users and listings ) data, and run a local development server for your application respectively.

The last command prints a url, which we can use to access the app during development.
From your favorite browser, open that url, notice the layouts; the pagination and it’s behavior when clicked: open an sqlite db browser and select an email in the database/database.sqlite file, then click the login link and try the selected email with password "123" (as set during seeding), try again but with the wrong password and notice the behavior, as these will be the behaviors we will be writing tests for in the next section.

Getting Started with cypress:

We already have a package.json that’s generated by default when we first create a Laravel project using composer, the next step (from a different terminal window, and at the root of this project folder) is running npm i cypress --dev to install cypress.

Then include "cypress:open": "cypress open" under scripts in the package.json, then run npm run cypress:open to open cypress for the first time. And then follow the next prompts to get set up with cypress.

Some files and folders are auto generated when first setting up cypress, these include cypress.config.js and a cypress/ folder, which contains other folders. For this blog, let’s focus on the e2e subfolder inside the cypress folder.

Inside this folder, we can arrange the tests in folders/files.

Let’s add a folder/file named cypress/e2e/landing-page/landingpage.cy.js and another cypress/e2e/user-auth/login.cy.js in this project, to test the landing page and login page elements and user behaviors.

With cypress, we can create a test suite with describe, and run some setup code in beforeEach, like to visit the url of the page we want to test in our case.
Then from here, we can test each element; its attributes and/or their values, as well as their behaviors on user actions, like clicks.

For the landing page let’s test;

The search input
The Pagination elements and their behavior on clicks
The footer Post Job link for non logged in users In that order:

Add the following contents in the landingpage.cy.js to include the test cases above.

/// <reference types="cypress" />

describe('landing page', () => {
    beforeEach(() => {
        cy.visit('http://127.0.0.1:8000/')
    })

    it('displays landing page elements and basic navigation for non logged in user', () => {

        // The search form input
        cy.get(`input[name="search"]`).should('have.attr', 'placeholder')
            .and('eq', 'Search Laravel Gigs...')

        // Pagination (generated enough items).
        cy.get(`nav[role="navigation"]`).should('have.attr', 'aria-label')
            .and('eq', 'Pagination Navigation')

        // To to page 3 on pagination
        // Get third item (index) from list.
        cy.get(`[aria-label="Pagination Navigation"] a`).eq(2)
            .click()
        cy.url().should('include', '?page=3')

        // Footer items, on 'Post Job' btn, user should go to login, if not logged in.
        cy.contains('Post Job').click()
        cy.url().should('include', '/login')

    })

})

For the login page let’s test;

The form crf token for the submission security.
Successful login and nav items for the logged in user.
Unsuccessful login when a user enters a wrong password. In that order:

And the following contents to login.cy.js to include the above tests;

/// <reference types="cypress" />

describe('Login workflow', () => {
    beforeEach(() => {
        cy.visit('http://127.0.0.1:8000/login')
    })

    it('login page elements', () => {

        // Test the form
        cy.get(`form[action="/users/authenticate"]`).should('exist')

        // Crf token and value.
        cy.get(`input[name="_token"]`).should('be.hidden')
        cy.get(`input[name="_token"]`).invoke('val').then(val => {
            val.length > 8
        })

    })

    it('should successfully login', () => {

        // email = dkuvalis@example.com
        // password = 123
        // name = Hugh Hermann
        // see \database\database.sqlite

        cy.get(`input[name="email"]`).type('dkuvalis@example.com')
        cy.get(`input[name="password"]`).type('123')
        cy.get('button[type="submit"]').click();

        // Elements for logged in users:
        cy.get('nav ul > li:first-child > span').invoke('text').then(text => {
            const trimmedText = text.trim();
            cy.wrap(trimmedText).should('eq', 'Welcome Hugh Hermann');
        })


    })

    it('should show error on unsuccessful login', () => {

        // Wrong credentials:
        // email = dkuvalis@example.com
        // password = 1234
        // name = Hugh Hermann

        cy.get(`input[name="email"]`).type('dkuvalis@example.com')
        cy.get(`input[name="password"]`).type('1234')
        cy.get('button[type="submit"]').click();

        // Show error if credential wrong:
        cy.get('p:contains("Invalid Credentials")').should('exist')


    })


})

Running the tests:

After running npm run cypress:open, the cypress app opens, and from here, you can follow the prompts and choose a browser from the options to run the tests on.
When running the tests, one can view the tests being run as well the actions of the same on the app.

Conclusion:

We touched a little about getting started with Cypress testing in a Laravel app, from here, one can write more tests to cover the crucial parts of their application.

With Cypress, developers can write comprehensive tests that simulate user behavior and catch potential issues before they reach production. This also saves developers time and resources by automating the testing process, thus improving the quality of your application.

It's also recommend to use data attributes specific to testing, as DOM selectors instead of class/ids like I have done.

Resources:

The initial app @ https://github.com/bradtraversy/laragigs
The app with tests (PR) @ https://github.com/flaircore/laragigs/pull/1/files
Cypress docs https://docs.cypress.io/guides/getting-started/installing-cypress
Laravel docs https://laravel.com/docs

Reactjs in Drupal with WebPack

Nicholas Babu — Fri, 23 Sep 2022 11:01:11 +0000

Using create react app, is a lot like living with your parents.
In the way, you don't have the freedom to do what you want/wish unless you eject.

No party

From the link, when one ejects , there's no 'safe' route back unless you start over!, you can however re-use your components as ejecting doesn't affect src folder, just the webpack configurations.

The problem with create-react-app and the intended setup:

Everytime js or css files are bundled their content's hash is included in the file name, while this is the desired behavior, it's not what you would expect when you intend to integrate/include your react app in other framework/CMS where asset files are distinctively named before they are required/attached to a page(section) via another app 'service'.

With create react app ( or any other bundler of it's kind in such a setup) everytime the file contents change, the name of the file also changes.

Also other tools that build on top of react like Next.js (Nuxt.js for Vuejs), only loads a component file on the page that it's required to avoid the overhead of downloading/including the whole app (js code ) on everypage.

In summary here's what we seek to achieve;

Distinctively name our output files so we can safely add them in the libraries.yml for Drupal to discover and do it's magic before attaching them on the parts they are required.
Break the react app, into multiple files(react apps) and require/attach each on the pages they're needed. This will avoid downloading code for another react app that doesn't belong to the page being viewed.

The fix:

There's more than one way to achieve this, an easier one I tried was to abstract webpack output process, where we install another npm library (react-app-rewired) that renames the output file(s) right after webpack is done with it, and before it's put in the output directory.

We will however take another approach, by implementing the webpack setup from scratch.

We will be continuing from a previous blog, so we can keep this one even shorter and straight up to getting react ft dependencies in the Drupal system, where we went through the basic setup for webpack with scss, babel and several input and output files, browser support and more.

We will be adding one more dev dependency @babel/react and updating the babel.config.js to use this and also react and react-dom as the project requires that.

Prerequisites:

Nodejs , with 🧶 yarn OR npm installed.
Basic Drupal and React understanding.
Some idea on why and how to webpack 🕸️🕷️.
A working instance of Drupal installation.

But first, before we get to the part (part 2) where we include the webpack + setup, let's start with a simple Drupal module with just, a basic block, a basic controller and some libraries definitions (*libraries.yml).

Part 1 (Module scaffold):

Module file structure:

The info.yml is a requirement, the *.libraries.yml defines our libraries for use by the custom block and controller (more about them later), the *.routing.yml and src/Controller/MjController.php defines a route as well us the routes response(output/render array), while thesrc/Plugin/Block/ReactJsBlock.php defines a basic block that we can attach on any page (with the markup and the library to attach to each instance)

Below is the code that goes into each file.

// start of *.info.yml
name: Modern Js Drupal
type: module
description: 'Module examples on how to use React js in Drupal with WebPack'
core_version_requirement: ^8 || ^9 || ^10
// end of info.yml

// start of *.libraries.yml
react_block:
  version: VERSION
  js:
    dist/block.bundle.js: {}
  css:
    component:
      dist/block.css: { }

react_controller:
  version: VERSION
  js:
    dist/controller.bundle.js: {}
  css:
    component:
      dist/controller.css: { }

// end of *.libraries.yml

// start of *.routing.yml
modern_js_drupal.controller_view:
  path: '/modern-js-drupal'
  defaults:
    _controller: '\Drupal\modern_js_drupal\Controller\MjController::show'
    _title: 'React on Page'
  requirements:
    _permission: 'access content'
// end of *.routing.yml

// start of controller file
<?php

namespace Drupal\modern_js_drupal\Controller;

use Drupal\Core\Controller\ControllerBase;

/**
 * Provides a route response for the modern_js_drupal module.
 */
class MjController extends ControllerBase {

  /**
   * Returns the /modern-js-drupal page.
   *
   * @return array
   *   A simple render array.
   */
  public function show() {
    $markup = '<div> <h1>React on a Controller!</h1><div id="react-controller"></div> </div>';
    return [
      '#markup' => $markup,
      '#attached' => [
        'library' => 'modern_js_drupal/react_controller',
      ],
    ];
  }

}

// end of controller file

// start of ReactJsBlock.php

<?php

namespace Drupal\modern_js_drupal\Plugin\Block;

use Drupal\Core\Block\BlockBase;

/**
 * Provides a 'ReactJsBlock' block.
 *
 * @Block(
 *   id = "react_js_block",
 *   admin_label = @Translation("React js block"),
 *   category = @Translation("Modern Js Drupal"),
 * )
 */
class ReactJsBlock extends BlockBase {

  /**
   * {@inheritdoc}
   */
  public function build() {
    $markup = '<div> <h1>React on a Block</h1><div id="react-block"></div> </div>';
    return [
      '#markup' => $markup,
      '#attached' => [
        'library' => 'modern_js_drupal/react_block',
      ],
    ];
  }

}


// End of ReactJsBlock.php

Part 2 (Webpack + ReactJs):

The last part, is getting a development setup for React using webpack (there are other options too besides webpack).

As mentioned earlier, we will be continuing from a previous blog repo about Webpack basics (optimized branch), so we keep this blog shorter and only include the important details. We had already set up webpack to work well with loaders like post-css and babel. We will only add @babel/preset-react as a dev dependency, update the babel.config.js presets to include this, update webpack.config.js to resolve both .js and .jsx files extension and of course do some cleanup, including deleting files that were specific to that blog, as well as updating the entry and output values (webpack.config.js) to match what we have in the *.libraries.yml.

STEPS:

Inside the modern_js_drupal folder run the commands:

git clone git@github.com:flaircore/a_web.git webpacked
To clone the repo in a folder named webpacked.

Then, cd webpacked/ followed by git checkout optimized to switch to the optimized branch.
Folders and files to delete inside this webpacked folder are; assets/, libs/, charts.html, composer.json, index.html and anything inside the src folder, also .git which is usually hidden.

Run yarn add @babel/preset-react -D && yarn add react react-dom prop-types to install the 4 packages (depedencies) we need.
Before we move on to building the react apps, lets add the two entry files in the src folder, namely block.js and controller.js, then update babel.config.js to include @babel/preset-react and webpack.config.js entry and output values to match, we'll also tell webpack to use the same loaders for jsx files as for js by updating the rules and adding a resolve key for webpack to recognize the .jsx files.

Below is the updated code for babel.config.js and webpack.config.js:

// start of babel.config.js
module.exports = {
    presets: [
      ["@babel/preset-env", {debug: true, useBuiltIns: "usage", corejs: 3}],
      ["@babel/preset-react", { runtime: "automatic" }],
    ]
}

// end of babel.config.js

// start of webpack.config.js
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
const MiniCSSExtractPlugin = require("mini-css-extract-plugin")
const path = require("path")

let mode = "development",
    source_map = "source-map"

if (process.env.NODE_ENV === "production") {
    mode = "production"
    source_map = "nosources-source-map"
}

module.exports = {
    mode: mode,
    /**
     * entries for raw js files (source)
     */
    entry: {
        block: path.resolve(__dirname, 'src/block.js'),
        controller: path.resolve(__dirname, 'src/controller.js'),
    },
    /**
     * output folder,
     * where [name] === entry[name]/entry[i] from above
     */
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, '../dist'),
        clean: true,
    },

    /**
     * devtools controls if and how source maps are generated.
     */
    devtool: source_map,

    /**
     * https://webpack.js.org/configuration/plugins/
     */
    plugins: [
        new MiniCSSExtractPlugin()
    ],

    /**
     * https://webpack.js.org/configuration/module/#rule
     */
    module: {
        rules: [
            {
                test: /\.(sc|c)ss$/i,
                use:[
                    MiniCSSExtractPlugin.loader,
                    "css-loader",
                    "postcss-loader",
                    "sass-loader"
                ]
            },
            {
                test: /\.(js|jsx)$/i,
                exclude: /node_modules/,
                use: [
                    "babel-loader"
                ]
            },
            {
                test: /\.(png|jpe?g|gif|svg)$/i,
                type: "asset"
            },
        ]
    },
    optimization: {
        minimizer: [
            "...",
            new ImageMinimizerPlugin({
                minimizer: {
                    implementation: ImageMinimizerPlugin.squooshMinify,
                    options: {
                        // Your options for `squoosh`
                    },
                },
            }),
        ],
    },
  resolve: {
    extensions: ['.js', '.jsx']
  },
}
// end of webpack.config.js

Recap so far, and adding the react apps:

From here, we can run yarn watch to watch for file changes and recompile our apps into the dist folder, or yarn build to build a production bundle.

Inside the wepacked/src folder, we'll arrange our files and folder like we would any react app (including base reusable components, and any other as our app requires.
Below is the folder/file structure of the webpacked sub folder.

// start of block.js
import { createRoot } from "react-dom/client";
import { StrictMode } from "react";
import App from "./App";
import "./scss/main.scss"

const root = createRoot(document.getElementById('react-block'))
root.render(
  <StrictMode>
    <App appTitle="Block: Create Product or Service"/>
  </StrictMode>
)

// end of block.js

// start of controller.js

import { createRoot } from "react-dom/client";
import { StrictMode } from "react";
import App from "./App";
import "./scss/main.scss"

const root = createRoot(document.getElementById('react-controller'))
root.render(
  <StrictMode>
    <App appTitle="Controller: Create Product or Service"/>
  </StrictMode>
)

// end of controller.js

// Start of App.jsx
import PropTypes from 'prop-types'

import UploadFileComponent from "./components/UploadFileComponent";
import BaseInputField from "./components/base/BaseInputField";
import {useState} from "react";
import BaseButton from "./components/base/BaseButton";

const App = ({appTitle}) => {
    const [values, updateValues] = useState({
        productName: '',
        productImage: '',
        planName: '',
        price: ''
    });

    const handleChange = (input) => {
        const {key, value} = input
        updateValues({...values, [key]: value})

    }

    const handleClick = e => {
        e.preventDefault()
    }

    return (
        <>
            <main className="container">
                <section className="section item-create">
                    <div className="page-title">Form Title: {appTitle} </div>
                    <form className='product-form'>
                        <div className="general-info">
                            <div className="section-title">General info</div>
                            <div className="user-inputs">
                                <BaseInputField
                                    value={values.productName}
                                    name='productName'
                                    required={true}
                                    placeholder='E.g. Spark plugs/ cables.'
                                    label='Product name'
                                    onChange={handleChange}
                                />
                                <UploadFileComponent
                                    value={values.productImage}
                                    name='productImage'
                                    type="file"
                                    placeholder='Upload the product image that doesn’t exceed 2 MB.'
                                    label='Product image'
                                    handleChange={handleChange}
                                />
                            </div>
                        </div>

                        <div className="pricing">
                            <div className="section-title">
                                Pricing Plans
                            </div>
                            <span className="title-description">
                                Create pricing plans for this product/service.
                            Note that every product/service can have multiple plans.
                        </span>

                            <div className="user-inputs">
                                <BaseInputField
                                    value={values.planName}
                                    name='planName'
                                    required={true}
                                    placeholder='E.g. Monthly, Lifetime, etc.'
                                    label='Plan name'
                                    onChange={handleChange}
                                />

                                <div className="group">
                                    <div>Billing Type</div>
                                    <div className="billing-type">
                                        <BaseButton
                                            name='Recurring'
                                            label='Recurring'
                                            onClick={handleClick}
                                        />
                                        <BaseButton
                                            name='One time'
                                            label='One time'
                                            classes="selected"
                                            onClick={handleClick}
                                        />
                                    </div>

                                </div>

                                <BaseInputField
                                    value={values.price}
                                    name='price'
                                    type='text'
                                    required={true}
                                    label='Price'
                                    placeholder="0.00"
                                    onChange={handleChange}
                                />

                            </div>
                            <div className="another-group">
                                <BaseButton
                                    name='another plan'
                                    label='+ Add Another Plan'
                                    onClick={handleClick}
                                />
                            </div>

                        </div>

                        <div className="form-actions">
                            <BaseButton
                                name='Cancel'
                                label='Cancel'
                                onClick={handleClick}
                            />
                            <BaseButton
                                name='Create'
                                label='Create'
                                classes="disabled"
                                onClick={handleClick}
                            />
                        </div>
                    </form>
                </section>
            </main>

        </>
    );
};

App.propTypes = {
  appTitle: PropTypes.string.isRequired
}

export default App;


// End of App.jsx

// start of components/base/BaseButton.jsx
import PropTypes from "prop-types";

import BaseInputField from "./BaseInputField";

const BaseButton = ({name, label, onClick, classes}) => {
    return (
        <div className="button">
            <input
                type="submit"
                value={label}
                className={classes}
                name={name}
                onClick={onClick}
            />
        </div>
    );
};

BaseInputField.propTypes = {
    name: PropTypes.string,
    label: PropTypes.string,
    classes: PropTypes.string,
    onChange: PropTypes.func.isRequired,
}

BaseInputField.defaultProps = {
    name: '',
    label: '',
    classes: '',
}

export default BaseButton;

// end of components/base/BaseButton.jsx

// start of components/base/BaseInput.jsx

import PropTypes from 'prop-types'

const BaseInputField = ({type, name, value, label, placeholder, onChange, required}) => {

    const updateChanges = (event) => {
        const {value, name: key } = event.target
        // @TODO validate and show/set errors related to this scope(input).
        // Send input name (object key in parent) and it's value.
        onChange({key, value})

    }
    return (
        <div className="form-group">
            {label && <label htmlFor={name}>{label} {!required && <span className="optional">(Optional)</span>}</label>}
            <input
                type={type}
                value={value}
                name={name}
                required={required}
                className="form-control"
                placeholder={placeholder}
                onChange={updateChanges}
            />
        </div>
    );
};

BaseInputField.propTypes = {
    type: PropTypes.string,
    value: PropTypes.string,
    name: PropTypes.string,
    label: PropTypes.string,
    required: PropTypes.bool,
    placeholder: PropTypes.string,
    onChange: PropTypes.func.isRequired,
}

BaseInputField.defaultProps = {
    type: 'text',
    value: '',
    name: '',
    label: '',
    required: false,
    placeholder: '',
}

export default BaseInputField;

// End of components/base/BaseInput.jsx

// start of components/UploadFileComponent.jsx
import PropTypes from "prop-types";
import BaseInputField from "./base/BaseInputField";

const UploadFileComponent = ({name, value, label, placeholder, handleChange, required}) => {
    return (
        <div className="form-group">
            {label && <label htmlFor={name}>{label} {!required && <span className="optional">(Optional)</span>}</label>}
            <input
                type="file"
                value={value}
                name={name}
                required={required}
                className="form-control"
                placeholder={placeholder}
                onChange={handleChange}
            />
            <span className="description">Upload an image that doesn’t exceed 2 MB.</span>

        </div>
    );
};


BaseInputField.propTypes = {
  name: PropTypes.string,
  value: PropTypes.string,
  label: PropTypes.string,
  placeholder: PropTypes.string,
  required: PropTypes.bool,
  handleChange: PropTypes.func.isRequired,
}

BaseInputField.defaultProps = {
  name: '',
  value: '',
  label: '',
  placeholder: '',
  required: false,
}


export default UploadFileComponent;
// end of components/UploadFileComponent.jsx

// start of scss/main.scss
@import "variables";

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500&display=swap');
//@import "form";

.page-title {
  font-family: 'Roboto', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  line-height: 35px;
  /* identical to box height, or 146% */
  text-align: center;
  letter-spacing: 0.26px;
  color: #000000;
  padding: $general_padding;
  margin-top: 1em;
}

// end of scss/main.scss

// start of scss/_variables.scss
$general_padding: .8em;
// @todo centralize app variables, including font-weight,  font-size,   line-height,

// end of scss/_variables.scss

CONCLUSION:

We've successfully integrated ReactJs with Drupal while still having the best of both/tool specific (eating our cake 🍰 while still having it), we can even pass variables from Drupal to the React apps accordingly.
And while at it, I might have shaded create-react-app, but only because of the nature of the requirements, I have used create-react-app in the past and I would still highly consider using it, but that will depend on the project specifics.

I also omitted the contents of scss/_form.scss, it's was an attempt to make the form presentable (on large screens) and the implementations on that file can be improved (mixins/re-usables), find it's contents here.

Other webpack loaders/plugins to consider would be @babel/preset-typescript if you want to use typescript in your project, and style-loader if you want to use styled components in your webpack react project.

RESOURCES:

Content moderation in WordPress (WordPress apis)

Nicholas Babu — Mon, 12 Sep 2022 12:54:59 +0000

Last time we solved a real world problem (creatively), where we moderated the content published on a Drupal site, as we learnt some of the basics of Drupal apis (even though there are ways one could achieve this by configuring the available modules like rules and views). In this blog we will achieve the same, but in WordPress, just like saying hello in another dialect.

But how do we do this in WordPress?

The plan:

Implement WordPress add actions/events to listen to when posts and/or comments are published and check their contents against some words/phrases.
Create an admin settings form with a textfield, so it's easier to add/edit words or phrases to check for in the contents.
Implement WordPress do action, to let other parts of the WP app, aware, that we have found content relating to the defined words/phrases to filter. Other plugins can then, act on this event, with it's argument(s) and any data related to that context(current session).

That doesn't sound like much, but it's because we will do some improvements in a later blog, where admins (content reviews roles) can access the contents that were unpublished because they had the words or phrases defined in the settings form above.

Prerequisites:

A working installation of a WordPress website.
A Code Editor.

Let's name this plugin flair-antispam, because, you know how hard it is to name stuff! and we have a lot of that to do.

Below is the plugin file/folder structure, also this plugins code can be found @gitbub

Plugin inside wp-content\plugins\ folder.

Since the plugin file flair-antispam.php requires admin\admin.php file, lets start with the contents and the whys of that file, before moving to the plugin file itself (flair-antispam.php).

Before we get to the code, let's see what's required to be defined/implemented in this file:

Add an action: admin_menu hook, to register an extra submenu in the settings tab, of the admin dashboard/panel, it's also a requirement to, when registering a menu to include a menu slug (used in the uri) and a callback to serve the request, when this menu link is clicked. Some hooks that can be used inside the callback above to add admin links/menus include add_menu_page, add_submenu_page, add_options_page, etc depending on where you want you menu link to appear(parent).
Add an action: admin_init hook, to add a new section to the settings page (options group) and use the same section definitions to define form field settings as well as render them on this page (options page).

Below is the code that goes into this file.

<?php

if (!defined('ABSPATH')) {
    exit();
}

function add_flair_antispam_settings_page(): void
{
    add_options_page(
            __('Flair Antispam plugin', "flair-antispam"),
            __('Flair Antispam Config', "flair-antispam"),
        'manage_options',
        'flair-antispam-settings-page',
        'flair_antispam_admin_index',
            null);
}


function flair_antispam_settings_init(): void
{
    // Setup settings section
    add_settings_section(
        'flair_antispam_settings_section',
        'Flair Antispam Settings Page',
        '',
        'flair-antispam-settings-page'
    );

    // Register form fields

    // phrases
    register_setting(
        'flair-antispam-settings-page',
        'flair_antispam_settings_phrases',
        array(
            'type' => 'string',
            'sanitize_callback' => 'sanitize_text_field',
            'default' => ''
        )
    );

    // Add settings fields
    add_settings_field(
        'flair_antispam_settings_phrases',
        __('Words/phrases to check for, comma separated', 'flair-antispam'),
        'flair_antispam_settings_phrases_callback',
        'flair-antispam-settings-page',
        'flair_antispam_settings_section'
    );
}

function flair_antispam_settings_phrases_callback(): void
{
    $options = get_option('flair_antispam_settings_phrases');
    ?>
    <div class="flair-antispam-settings-phrases">
        <label for="flair_antispam_settings_phrases">
            Words or phrases to look for, comma separated, no spaces unless you want to include them too.
        </label>
        <br>
        <textarea
                rows="10"
                cols="55"
                name="flair_antispam_settings_phrases"
                id="flair_antispam_settings_phrases"
                placeholder="a bad word, another bad word, another one"
                class="regular-text"
        ><?php esc_html_e( $options, 'flair-antispam' ); ?></textarea>
        <div>
            Current pattern according to settings: '
            <?php
                $pattern = str_replace(',', '|', $options);
                $pattern = '/('.$pattern.')/i';
                esc_html_e( $pattern, 'flair-antispam' );
            ?> '
        </div>
    </div>


    <?php
}
function flair_antispam_admin_index(): void
{
    ?>
    <div class="wrap">
        <form action="options.php" method="post">
            <?php

            // Security field
            settings_fields('flair-antispam-settings-page');

            // output settings section here
            do_settings_sections('flair-antispam-settings-page');

            // Save settings btn

            submit_button('Save words/phrases');

            ?>
        </form>
        <div class="phrases-example-hints">
            <p>Example 1: wolf,moon,what will be converted to /(wolf|moon|what)/i</p>
            <p>Example 2: wolf, moon, what will be converted to /(wolf| moon| what)/i</p>
        </div>
    </div>
    <?php
}

add_action('admin_menu', 'add_flair_antispam_settings_page');
add_action('admin_init', 'flair_antispam_settings_init');

flair-antispam.php:

It's in this last file that we will:

Implement listeners(callbacks) for save_post and comment_post actions, to check for words/phrases from the input of the admin form we defined above.
Tell this plugin to load the implementations in the admin/admin.php file for admins only, as well as, add a plugins action link that goes to admin.php?page=flair-antispam-settings-page (the menu slug defined in add_options_page in admin/admin.php, which in turn renders the options form.
Define a database table, what will store the post/comment id and data related to that entry, so we can differentiate between drafts that were set so by the flair-antispam plugin implementations from other drafts.
Add a do_action everytime some matching content is found, so other plugins to act upon/react to that action 👀👀.

Below is the code that goes into this file.

<?php

/**
 * Plugin Name:       Flair Antispam
 * Description:       Filter and unpublish contents (posts/comments) based of defined words/phrases and provides a way to analyze the spam content.
 * Requires at least: 5.7
 * Tested up to: 6.0
 * Stable tag: 1.0.0
 * Requires PHP:      7.0
 * Version:           1.0.2
 * Author:            Nicholas Babu
 * Author URI:        https://profiles.wordpress.org/bahson/
 * License:           GPL-2.0-or-later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:       flair-antispam
 *
 * @package           flair-antispam
 */

if (!defined('ABSPATH')) {
    exit();
}

if (!class_exists('Flair_AntiSpam')) {
    class Flair_AntiSpam {

        private $pattern;

        public function __construct() {

            add_action( 'save_post', array($this, 'is_spam_post'), 10, 3 );
            add_action( 'comment_post', array($this, 'is_spam_comment'), 10, 2 );

            register_activation_hook(__FILE__, array($this, 'create_tables'));

            register_deactivation_hook(__FILE__, array($this, 'drop_tables'));

            $this->flair_antispam_setup();
        }

        public function flair_antispam_setup() {
            if ( is_admin() ) {
                $plugin = plugin_basename(__FILE__);
                add_filter("plugin_action_links_$plugin", array($this, 'flair_antispam_settings_links'));
                require_once __DIR__ . '/admin/admin.php';
            }

            $phrases = get_option('flair_antispam_settings_phrases');
            $pattern = str_replace(',', '|', $phrases);
            $this->pattern = '/('.$pattern.')/i';
        }

        public function flair_antispam_settings_links($links) {
            $settings_link = '<a href="admin.php?page=flair-antispam-settings-page">Configuration</a>';
            $links[]       = $settings_link;
            return $links;
        }

        public function create_tables() {
            global $wpdb;
            $table = $wpdb->prefix . "flair_antispam";
            $charset = $wpdb->get_charset_collate();

            $msg_sql = "CREATE TABLE $table(
        id mediumint NOT NULL AUTO_INCREMENT,
        item_id varchar(200) NOT NULL,
        item_type varchar(20) NOT NULL,
        PRIMARY KEY (id)
        )$charset;";

            require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
            dbDelta($msg_sql);
        }

        public function drop_tables() {
            global $wpdb;
            $tables = array(
                $wpdb->prefix . "flair_antispam",
                'another_one'
            );
            foreach ($tables as $table) {
                $sql = "DROP TABLE IF EXISTS $table";
                $wpdb->query($sql);
            }
        }

        public function is_spam_post( $post_id, $post, $update ) {
            $title = $post->post_title;
            $content = $post->post_content;
            $status = $post->post_status;
            if ($status === 'publish' && ($content || $title)) {
                // unhook this function so it doesn't loop infinitely
                remove_action( 'save_post', array($this, 'is_spam_post'));
                global $wpdb;
                $table = $wpdb->prefix . "flair_antispam";

                if (!empty($this->does_match( $content )) || !empty($this->does_match( $title ))) {
                    wp_update_post(array(
                        'ID'    =>  $post_id,
                        'post_status'   =>  'draft'
                    ));

                    $this->create_entry( $post_id, 'post' );

                    // Fires this event throughout the app.
                    do_action('flair_antispam_post', $post);

                } else {
                    $wpdb
                        ->delete( $table, array( 'item_id' => $post_id ), array( '%d' ) );
                }

                // re-hook this function
                add_action( 'save_post', array( $this, 'is_spam_post' ), 10, 3 );
            }

        }

        public function is_spam_comment( $comment_id, $comment_approved ) {

            if ( $comment_approved ) {
                $comment = get_comment( $comment_id );
                global $wpdb;
                $table = $wpdb->prefix . "flair_antispam";

                if (!empty($this->does_match($comment->comment_content))) {
                    // unhook this function so it doesn't loop infinitely
                    remove_action( 'save_post', array($this, 'is_spam_comment'));
                    // If spam un-approve comment
                    wp_set_comment_status( $comment_id, '0' );

                    $this->create_entry( $comment_id, 'comment' );

                    // re-hook this function
                    add_action( 'comment_post', array( $this, 'is_spam_comment' ), 10, 2 );

                    // Fires this event throughout the app.
                    do_action('flair_antispam_post', $comment);
                } else {
                    $wpdb
                        ->delete( $table, array( 'item_id' => $comment_id ), array( '%d' ));
                }
            }

        }

        private function create_entry($item_id, $item_type) {
            global $wpdb;
            $table = $wpdb->prefix . "flair_antispam";
            $where_array = array();
            $where_array[] = $wpdb->prepare( "item_type = %s", $item_type );
            $where_array[] = $wpdb->prepare( "item_id = %d", $item_id );
            $sql = "SELECT item_id FROM {$table}";
            $sql .= ' WHERE ' . join( ' AND ', $where_array);
            $saved = $wpdb->get_var($sql);

            if (!$saved) {
                $comment_data = array(
                    'item_id' =>  $item_id,
                    'item_type' => $item_type
                );
                $format = array( '%d', '%s' );
                // Write to table, so there's a separation from other Drafts according to other metrics.
                // This records a Draft as a result of the post/comment being spam.
                $wpdb->insert( $table, $comment_data, $format );
            }
        }

        public function does_match( $input ): array {
            preg_match_all( $this->pattern, $input, $matches );
            return $matches[0];
        }
    }

    $anti_spam = new Flair_AntiSpam();
}

Recap/Testing:

From here, we can enable the plugin and either access our options form by clicking the 'Configuration' link below the plugin description or by through the Settings parent menu from the Admin panel/dashboard.

Just for demo, let's filter content with words; wolf,moon,@gmail: by entering the same text, comma separated into the form input and clicking save.

Try and create new posts, edit existing ones or comment on posts, be sure to include some of the phrases/words from the form input value.

For now, go to prefix_flair_antispam table and note the entries vs the item_id which is equal to the post/comment ID from WordPress core.

Building on/Conclusion:

We are also firing an event(broadcast 🗼🗼🗼), whenever 'spam' content is saved(posted), this event passes on,to any listener listening to it,one param, ie, the post/comment; according to our custom filters(words/phrases), so it's easier to build upon(extend) this functionality, to further fit your custom needs.
What one can do is implement actions (add_action) for when such events occur (are fired), and maybe work with that data and the context around it (any data related to this session). eg send a slack notification to the moderation team, call the police 🚔🚔 on the user or put them in your own jail (suspension).

Also, the next step, would be to add menu links somewhere in the admin UI to display these unpublished contents for review and separate them with any other drafts.

Resources

Paypal express checkout and drupal (updated + smart buttons)

Nicholas Babu — Mon, 05 Sep 2022 13:23:28 +0000

A while ago, I wrote a blog demonstrating how one could integrate PayPal express checkout in Drupal, but...; in tech, things move(change) fast, mostly for better:
that approach had some limitations like; handling credit cards, the user checkout experience was not as 'great', the PayPal SDK library we were extending has been abandoned (deprecated) for a better one (which was recently deprecated but no other alternative, so here we're ).

In this blog we will attempt to achieve the same and make things better.
Code for this blog is available on @github.
And a live example available @https://flaircore.com, you're welcome(invited) to test with real money, which will be spent on your behalf.

In an age of smart phones, fridges, rings, contracts..., we will implement smart payment buttons, not because smart is trendy, but because of the user experience and the added security around it.
Smart buttons can be used to initiate, authorize and capture an order, but in this blog, we will only initiate and authorize, and add the necessary logic in Drupal to process (capture) the authorized order (payment) details in the request object.

All this will be done without leaving the page the button is on.

Prerequisites:

Working instance of Drupal where dependencies are managed via composer.
Basic understanding of Drupal module structure.

A look into the module structure (paypal_example):

Below, we will go through the contents of each file and it's purpose in this project (it's a prerequisite to at least be familiar with Drupal module structure/development), starting with the base files and later with the sub folders.

paypal_example.info.yml

This files defines the module and makes it discoverable by Drupal to install, it also contains the supported core versions and a 'configure' key with a value of 'paypal_example.paypal_settings_form' which is a route id defined in the routing.yml (more to that later). This renders a configure link below this module description on the modules' listing page.

paypal_example.libraries.yml

Defines the javascipt file(s) and their dependencies that will enable us to implement the smart buttons on the client side.

paypal_example.module

Contains a hook_theme() implementation, registering the templates\paypal-example.html.twig file for use by
any part of Drupal that wants to render that template.

paypal_example.routing.yml

Defines two routes, one to render the config form (src\Form\PayPalPaymentsConfigForm.php) and the other to render the page we will be testing the paypal functionality as defined in the src\Controller\PayPalController.php file, and finally

paypal_example.services.yml

Registers the src\PayPalClient.php class definition as a Drupal service for use by any Drupal module that wants to.

We will now go through the contents of each file below before moving on with how the each relate with the subfolders and their files.

# paypal_example.info.yml

name: 'Paypal example'
type: module
description: 'Paypal payment example for Drupal'
package: 'Payment'

core_version_requirement: ^8.8.0 || ^9 || ^10

configure: paypal_example.paypal_settings_form

# End of file.

#paypal_example.libraries.yml

# https://github.com/paypal/paypal-js#legacy-browser-support
paypal_cdn:
  version: VERSION
  header: true
  js:
    //unpkg.com/@paypal/paypal-js@5.1.1/dist/iife/paypal-js.min.js: {
      type: external,
      minified: true,
      attributes: { }
      #attributes: { defer: true, async: true}
      # window.paypalLoadScript is not a function error, see
      # https://github.com/paypal/paypal-js; should be managed
      # via npm as setting attributes to defer and async
      # causes the error above sometimes.
    }

paypal:
  js:
    js/paypal_example.js: {attributes: { defer: true, async: true}}
  dependencies:
    - core/jquery
    - core/drupalSettings
    - paypal_example/paypal_cdn

# End of file.

<?php
/**
 * @file
 * Contains paypal_example.module.
 */

use Drupal\Core\Routing\RouteMatchInterface;

/**
 * Implements hook_help().
 */
function paypal_example_help($route_name, RouteMatchInterface $route_match) {
  switch ($route_name) {
    // Main module help for the paypal_example module.
    case 'help.page.paypal_example':
      $output = '';
      $output .= '<h3>' . t('About') . '</h3>';
      $output .= '<p>' . t('Paypal example checkout') . '</p>';
      return $output;

    default:
  }
}

/**
 * Implements hook_theme().
 */
function paypal_example_theme() {
  return [
    'paypal_example' => [
      'render element' => 'children',
      'template' => 'paypal-example',
      'variables' => [
        'data' => NULL,
      ]
    ]
  ];
}

# paypal_example.routing.yml

paypal_example.paypal_settings_form:
  path: '/admin/config/paypal_example/settings'
  defaults:
    _form: '\Drupal\paypal_example\Form\PayPalPaymentsConfigForm'
    _title: 'Your PayPal payments settings'
  requirements:
    _permission: 'administer paypal_payments'


paypal_example.payment_example:
  path: '/flair-core/paypal_payment'
  defaults:
    _controller: '\Drupal\paypal_example\Controller\PayPalController::pay'
    _title: 'pay with Paypal'
  requirements:
    _permission: 'access content'

# End of file.

# paypal_example.services.yml
services:
  paypal_example.paypal_client:
    class: Drupal\paypal_example\PayPalClient
    arguments: []
    calls:
      - [setConfig, ['@config.factory']]
      - [setEntity, ['@entity_type.manager'] ]

# End of file.

Recap so far.

In the services.yml file, the service id paypal_example.paypal_client is well isolated and re-usable, it relies on the V2 php SDK we are extending, which will also make it easier to swap between newer sdks in the future if need be.
In the libraries.yml, the library id paypal_cdn which is required by the library id paypal below it as a dependency, defines paypal.js with legacy browser support to make sure the buttons' functionality is consistent across browsers. Even though the recommended way is to use a package manager with paypal.js, I made that compromise to keep the scope of this blog relevant to the topic, omitting some important attributes (paypal_cdn lib definitions) to make sure that library is loaded before the library that depends on it is.

Subfolder section:

For the sub folders and 'files', we will start with those that interact with Drupal 'internal' apis and finish up the once that interact with the user facing apis (Render/Controller).
Before proceeding to implement the paypal_example.paypal_client service definitions (services.yml file) let's install the paypal sdk it relies on by running composer require paypal/paypal-checkout-sdk inside the Drupal root directory.

src\PayPalClient.php

This file relies on 3 main variants;

paypal_example.settings configuration entity id, updatable via the PayPalPaymentsConfigForm definitions.
PayPalCheckoutSdk\Core\PayPalHttpClient which is part of the php package we installed earlier and can be independently swappable as you wish.
paypal_payment_example entity id as defined in the src\Entity\PayPalPaymentExample.php file

This class contains two public methods we can use with our class instance anywhere, these are;

getConfigs(), which returns values of paypal_example.settings configuration entity as an array.
captureOrder(), takes two arguments; $order_id and $sku, the order_id is the token PayPay gives an authorized order, once a client has gone through their api authentification, and is passed to the request, while sku is any unique string to identify the product item associated with this order. This method also creates a new entry of paypal_payment_example entity content with the values from the captured order.

templates\paypal-example.html.twig

Defines the content markup (see hook_theme() in .module file) and contains the amount input field and an empty html dom to anchor the PayPal smart buttons defined in the file js\paypal_example.js

js\paypal_example.js

This file depends on <module-id>/paypal_cdn defined in the .libraries.yml file, and defines a way to create an order with the data passed from the Controller as drupalSettings.paypal_payment_data and the amount input field value, it also redirects an approved order to the current page, with the relevant url params as defined in the onAprrove call back in the paypal.Buttons({}) object.

Below is the contents of each of these three files in details.

<?php
# PayPalClient.php

namespace Drupal\paypal_example;

use Drupal\Core\Config\ConfigFactoryInterface;
use Drupal\Core\Entity\EntityTypeManagerInterface;
use PayPalCheckoutSdk\Core\PayPalHttpClient;
use PayPalCheckoutSdk\Core\SandboxEnvironment;
use PayPalCheckoutSdk\Core\ProductionEnvironment;
use PayPalCheckoutSdk\Orders\OrdersCaptureRequest;
use PayPalHttp\HttpException;


class PayPalClient {

  /**
   * @var \Drupal\Core\Config\ConfigFactoryInterface
   */
  protected $configFactory;

  /** @var  \Drupal\Core\Entity\EntityTypeManagerInterface */
  protected $entityTypeManager;

  public function setConfig(ConfigFactoryInterface $configFactory){
    $this->configFactory = $configFactory;
  }

  public function setEntity(EntityTypeManagerInterface $entityTypeManager){
    $this->entityTypeManager = $entityTypeManager;
  }

  public function getConfigs(){
    $config = $this->configFactory->getEditable('paypal_example.settings');
    $client_id = $config->get('client_id');
    $client_secret = $config->get('client_secret');
    $environment = $config->get('environment');
    $store_currency = $config->get('currency');
    $payment_title = $config->get('payment_title');

    return [
      'client_id' => $client_id,
      'client_secret' => $client_secret,
      'environment' => $environment,
      'currency' => $store_currency,
      'payment_title' => $payment_title,
    ];
  }

  /**
   * Returns PayPal HTTP client instance with environment that has access
   * credentials context. Use this instance to invoke PayPal APIs, provided the
   * credentials have access.
   */
  public function client() {
    return new PayPalHttpClient($this->environment());
  }

  /**
   * Set up and return PayPal PHP SDK environment with PayPal access credentials.
   * This sample uses SandboxEnvironment. In production, use LiveEnvironment.
   */
  protected function environment() {

    //
    $config = $this->getConfigs();

    $clientId = getenv("PP_CLIENT_ID") ?: $config['client_id'];
    $clientSecret = getenv("PP_CLIENT_SECRET") ?: $config['client_secret'];

    if ($config['environment'] === 'sandbox') {
      return new SandboxEnvironment($clientId, $clientSecret);
    } else return new ProductionEnvironment($clientId, $clientSecret);

  }

  /**
   * @param $order_id
   *
   */


  /**
   * @param $order_id
   * the APPROVED-ORDER-ID
   * @param $sku
   *  The product sku
   *
   * @return array
   * @throws \Drupal\Component\Plugin\Exception\InvalidPluginDefinitionException
   * @throws \Drupal\Component\Plugin\Exception\PluginNotFoundException
   * @throws \Drupal\Core\Entity\EntityStorageException
   * @throws \PayPalHttp\IOException
   */
  public function captureOrder($order_id, $sku){

    $request = new OrdersCaptureRequest($order_id);
    $request->prefer('return=representation');
    try {
      // Call API with your client and get a response for your call
      $response = $this->client()->execute($request);

      //$status_code = $response->statusCode;
      $status = $response->result->status;
      $id = $response->result->id;
      $email_address = $response->result->payer->email_address;
      //$intent = $response->result->intent;
      $currency_code = $response->result->purchase_units[0]->amount->currency_code;
      $payments_id = $response->result->purchase_units[0]->payments->captures[0]->id;
      $amount = $response->result->purchase_units[0]->amount->value;

      $values = [
        'payer_email' => $email_address,
        'amount' => $amount,
        'transaction_id' => $payments_id,
        'sale_id' => $id,
        'payment_status' => $status,
        'invoice_id' => $id,
        'sku' => $sku,
      ];

      $entity = $this->entityTypeManager->getStorage('paypal_payment_example');


      $entity->create($values)->save();

      # TODO:: add event emitter above


      \Drupal::messenger()->addMessage(t("Transaction completed for $amount $currency_code ."));

      return $values;

    }catch (HttpException $ex) {


      \Drupal::messenger()->addError('Issue completing the transaction : '.$ex->getMessage());

      return ['error' => $ex->getMessage()];
    }

  }
}

# End of file

{# paypal-example.html.twig #}

{% if data.client_id %}
  <div class="content">
    <div style="padding-bottom: 1em; font-weight: 600">
      {{ data.title }}
    </div>

    <div id="paypal-example" class="paypal-example" style="padding-bottom: 1em;">
      <label for="amount">Amount in {{ data.currency }} : </label>

      <input type="number" id="amount" name="amount"
             min="5" value="{{ data.amount }}">
    </div>
    <div id="paypal-button-container"></div>
  </div>

{% else  %}

  <div>
    <h2> Please configure your app with the relevant info provided by paypal.</h2>
    <span> Message : {{ data.info }} .</span>
  </div>
{% endif  %}

{# End of file #}

// paypal_example.js
(function ($, Drupal, drupalSettings) {

  const data = drupalSettings.paypal_payment_data
  if (!data.client_id) {
    console.warn("Some information is missing!!")
    return
  }

  $(document).ready(function () {
    console.log(data)
    console.log(data)
    console.log(data)
    window.paypalLoadScript({ "client-id": data.client_id }).then((paypal) => {
      const amountInput = document.querySelector('#paypal-example input')
      const uniqueId = data.title + ((Math.random() * Math.pow(36, 6)) | 0).toString(36)
      paypal.Buttons({
        // Set up the transaction
        createOrder: function(dt, actions) {
          // This function sets up the details of the transaction, including the amount and line item details.

          data.amount = amountInput.value

          if (!data.amount) {
            console.error('Please enter an amount')
            return
          }

          return actions.order.create({
            intent: 'CAPTURE',
            purchase_units: [{
              reference_id:  uniqueId,
              custom_id: uniqueId,
              amount: {
                value: data.amount,
                currency_code: data.currency,
                breakdown: {
                  item_total: {
                    currency_code: data.currency,
                    value: data.amount
                  }
                }
              },
              items: [
                {
                  name: data.title,
                  description: data.title,
                  sku: uniqueId,
                  unit_amount: {
                    currency_code: data.currency,
                    value: data.amount
                  },
                  quantity: 1
                },
              ]
            }]
          });
        },
        onInit: function (dt, actions) {
          // Btns initialized
        },
        onApprove: function(dt, actions) {
          amountInput.value = data.amount
          window.location = `?&order_sku=${uniqueId}&order_id=${dt.orderID }`
        }
      }).render('#paypal-button-container');
    });

  })

})(jQuery, Drupal, drupalSettings)

// End of file

// End of file

Finally the last three files to complete this module.

src/Entity/PayPalPaymentExample.php

This file contains the paypal_payment_example database table definitions, as well as getters and setters to use with any instance of this Class (Object).

src/Form/PayPalPaymentsConfigForm.php

Contains the markup (Form field definitions) and renders on the route id paypal_example.paypal_settings_form that's defined in the .routing.yml file. The form writes to paypal_example.settings config entity with the new values everytime it's saved.

src/Controller/PayPalController.php

It's in this file that, almost everything we've worked on, so far, is wired to work with each other, and complete this payment's feature implementation. This file defines the content to render in the paypal_example.payment_example route id, defined in the .routing.yml file. This include libraries too (js/css). The pay method serves this route and supplies the $data array values to our template file and js file via the drupalSettings. Also the onApprove method, in the smart button implementation (js\paypal_example.js) redirects to this route, supplying some url params accordingly. This also handles the payment capture(charge) and save to database, once the order is authorized and the right values are available in the url params.

Below is the code that goes into each of these three files.

<?php
# start of PayPalPaymentExample.php

namespace Drupal\paypal_example\Entity;

use Drupal\Core\Entity\ContentEntityBase;
use Drupal\Core\Entity\ContentEntityInterface;
use Drupal\Core\Entity\EntityTypeInterface;
use Drupal\Core\Field\BaseFieldDefinition;

/**
 * Defines PayPalPaymentExample entity.
 *
 * @ingroup paypal_payment_example
 *
 * @ContentEntityType(
 *   id = "paypal_payment_example",
 *   label = @Translation("PayPalPaymentExample"),
 *   base_table = "paypal_payment_example",
 *   entity_keys = {
 *     "id" = "id",
 *     "uuid" = "uuid",
 *   },
 * )
 */

class PayPalPaymentExample extends ContentEntityBase implements ContentEntityInterface {

  /**
   * {@inheritdoc}
   */
  public function getCreatedTime() {
    return $this->get('created')->value;
  }

  public function getPayerEmail() {
    return $this->get('payer_email')->value;
  }


  public function setPayerEmail($payer_email) {
    $this->set('payer_email', $payer_email);
    return $this;
  }

  public function getAmount() {
    return $this->get('amount')->value;
  }


  public function setAmount($amount) {
    $this->set('amount', $amount);
    return $this;
  }
  public function getTransactionId() {
    return $this->get('transaction_id')->value;
  }


  public function setTransactionId($transaction_id) {
    $this->set('transaction_id', $transaction_id);
    return $this;
  }
  public function getSaleId() {
    return $this->get('sale_id')->value;
  }


  public function setSaleId($sale_id) {
    $this->set('sale_id', $sale_id);
    return $this;
  }

  public function getInvoiceId() {
    return $this->get('invoice_id')->value;
  }


  public function setInvoiceId($invoice_id) {
    $this->set('invoice_id', $invoice_id);
    return $this;
  }

  public function getPaymentStatus() {
    return $this->get('payment_status')->value;
  }


  public function setPaymentStatus($payment_status) {
    $this->set('payment_status', $payment_status);
    return $this;
  }

  public function getSku() {
    return $this->get('sku')->value;
  }


  public function setSku($sku) {
    $this->set('sku', $sku);
    return $this;
  }


  /**
   * Determines the schema for slack_settings entity table
   */
  public static function baseFieldDefinitions(EntityTypeInterface $entity_type) {
    // Standard field, used as unique if primary index.
    $fields['id'] = BaseFieldDefinition::create('integer')
      ->setLabel(t('ID'))
      ->setDescription(t('The ID of the content entity.'))
      ->setReadOnly(TRUE);

    // Standard field, unique outside of the scope of the current project.
    $fields['uuid'] = BaseFieldDefinition::create('uuid')
      ->setLabel(t('UUID'))
      ->setDescription(t('The UUID of the content entity.'))
      ->setReadOnly(TRUE);

    $fields['payer_email'] = BaseFieldDefinition::create('string')
      ->setLabel(t('Paypal email'))
      ->setDescription(t('The Paypal email address'));

    $fields['amount'] = BaseFieldDefinition::create('float')
      ->setLabel(t('Amount'))
      ->setDescription(t('The Amount in Store currency'));

    $fields['transaction_id'] = BaseFieldDefinition::create('string')
      ->setLabel(t('Transaction id'))
      ->setSettings(array(
        'max_length' => 60,
      ))
      ->setDescription(t('The unique transaction id generated by paypal'));

    $fields['sale_id'] = BaseFieldDefinition::create('string')
      ->setLabel(t('Sale ID'))
      ->setSettings(array(
        'max_length' => 60,
      ))
      ->setDescription(t('Stores the sale id in-case of a refund'));

    $fields['invoice_id'] = BaseFieldDefinition::create('string')
      ->setLabel(t('Invoice ID'))
      ->setSettings(array(
        'max_length' => 60,
      ))
      ->setDescription(t('The invoice number of the payment'));

    $fields['payment_status'] = BaseFieldDefinition::create('string')
      ->setLabel(t('Payment Status'))
      ->setSettings(array(
        'default_value' => '',
        'max_length' => 15,
      ))
      ->setDescription(t('Status either a Success or a Refund'));

    $fields['sku'] = BaseFieldDefinition::create('string')
      ->setLabel(t('SKU'))
      ->setSettings(array(
        'max_length' => 60,
      ))
      ->setDescription(t('The product SKU'));

    $fields['created'] = BaseFieldDefinition::create('created')
      ->setLabel(t('Created'))
      ->setDescription(t('The time that the entity was created.'));

    return $fields;
  }
}

# End of file

<?php
# start of PayPalPaymentsConfigForm.php
namespace Drupal\paypal_example\Form;

use Drupal\Core\Form\ConfigFormBase;
use Drupal\Core\Form\FormStateInterface;

/**
 * Class PayPalPaymentsSettingsForm.
 *
 * Store the paypal credentials required to make the api calls
 */
class PayPalPaymentsConfigForm extends ConfigFormBase {

  /**
   * Gets the configuration names that will be editable.
   *
   * @return array
   *   An array of configuration object names that are editable if called in
   *   conjunction with the trait's config() method.
   */
  protected function getEditableConfigNames() {

    return ['paypal_example.settings'];
  }

  /**
   * {@inheritdoc}
   */
  public function getFormId() {
    return 'paypal_example_settings_form';
  }

  /**
   * {@inheritdoc}
   */
  public function buildForm(array $form, FormStateInterface $form_state) {

    $config = $this->config('paypal_example.settings');
    $environmentTypes = [
      'live' => 'Live',
      'sandbox' => 'Sandbox',
    ];

    $currency = [
      'USD' => 'USD',
      'GBP' => 'GBP',
      'AUD' => 'AUD',
      'CAD' => 'CAD',
      'EUR' => 'EUR',
      'JPY' => 'JPY'
    ];

    $form['client_id'] = [
      '#type' => 'textfield',
      '#title' => $this->t('Client ID'),
      '#description' => $this->t('The Client ID from PayPal, you can put any value here if you have set PP_CLIENT_ID in your environment variables'),
      '#default_value' => $config->get('client_id'),
      '#maxlength' => 128,
      '#size' => 64,
      '#required' => TRUE,
    ];
    $form['client_secret'] = [
      '#type' => 'textfield',
      '#title' => $this->t('Client Secret'),
      '#description' => $this->t('The Client Secret Key From PayPal, (You can put any value here, if you have set PP_CLIENT_ID in your env variables.)'),
      '#default_value' => $config->get('client_secret'),
      '#maxlength' => 128,
      '#size' => 64,
      '#required' => TRUE,
    ];
    $form['environment'] = [
      '#type' => 'select',
      '#title' => $this->t('Environment'),
      '#options' => $environmentTypes,
      '#description' => $this->t('Select either; live or sandbox(for development)'),
      '#default_value' => $config->get('environment'),
      '#required' => TRUE,
      '#multiple' => FALSE,
    ];
    $form['currency'] = [
      '#type' => 'select',
      '#title' => $this->t('Store Currency'),
      '#options' => $currency,
      '#description' => $this->t('Select the currency to use with your store'),
      '#default_value' => $config->get('currency'),
      '#required' => TRUE,
    ];

    $form['payment_title'] = [
      '#type' => 'textfield',
      '#title' => $this->t('Payment Title'),
      '#description' => $this->t('The title to associate with this payment'),
      '#placeholder' => 'Example Payment',
      '#default_value' => $config->get('payment_title'),
      '#maxlength' => 180,
      '#size' => 120,
      '#required' => TRUE,
    ];

    $form['paypal_instructions'] = [
      '#type' => 'markup',
      '#markup' => $this->paypalDocumentation(),
    ];

    $form['submit'] = [
      '#type' => 'submit',
      '#value' => $this->t('Save'),
    ];

    return $form;
  }

  /**
   * {@inheritdoc}
   */
  public function validateForm(array &$form, FormStateInterface $form_state) {
    parent::validateForm($form, $form_state);
  }

  /**
   * {@inheritdoc}
   */
  public function submitForm(array &$form, FormStateInterface $form_state) {

    $env = $form_state->getValue('environment');

    $config = $this->config('paypal_example.settings');
    $config
      ->set('currency', $form_state->getValue('currency'))
      ->set('environment',$env)
      ->set('client_secret', $form_state->getValue('client_secret'))
      ->set('client_id', $form_state->getValue('client_id'))
      ->set('payment_title', $form_state->getValue('payment_title'))
      ->save();

    drupal_flush_all_caches();
    parent::submitForm($form, $form_state);

  }

  private function paypalDocumentation() {
    return '
    <div>
    <p> <strong>Getting started. </strong></p>
    <p>
        * After logging in at: <a target="_blank" href="https://www.paypal.com/">Paypal.com</a> , got to
        <a target="_blank" href="https://developer.paypal.com/developer/accountStatus/">Developer.paypal.com </a>
    </p>
    <p>
        * Under <strong>Dashboard > My Apps & Credentials </strong>, click on Create App button, give it a
        name, select a sandbox Business Account to use while testing, and confirm create.
    </p>
    <p>
        * Note the <strong>Client ID</strong>,  and the <strong>Secret</strong> as those are required
        in the above inputs.
    </p>
    </div>
      <br>
    ';
  }
}

# End of file

<?php
# start of PayPalController.php

namespace Drupal\paypal_example\Controller;

use Drupal\Core\Controller\ControllerBase;
use Drupal\Core\Config\ConfigFactoryInterface;
use Drupal\paypal_example\PayPalClient;
use Symfony\Component\HttpFoundation\RedirectResponse;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\DependencyInjection\ContainerInterface;

class PayPalController extends ControllerBase {


  /**
   * @var \Drupal\Core\Config\ConfigFactoryInterface
   */
  protected $configFactory;

  /** @var \Drupal\paypal_example\PayPalClient */
  protected $paypalClient;

  public function __construct(ConfigFactoryInterface $configFactory, PayPalClient $paypalClient) {
    $this->configFactory = $configFactory;
    $this->paypalClient = $paypalClient;
  }

  public static function create(ContainerInterface $container) {
    return new static(
      $container->get('config.factory'),
      $container->get('paypal_example.paypal_client'),
    );
  }

  public function pay(Request $request) {
    $config = $this->paypalClient->getConfigs();
    $currency = $config['currency'];
    $client_id = $config['client_id'];
    $payment_title = $config['payment_title'];
    $order_id = $request->get('order_id');
    $order_sku = $request->get('order_sku');

    if ($order_sku && $order_id) {
      $capture_order = $this->paypalClient->captureOrder($order_id, $order_sku);

      if (isset($capture_order['payment_status'])) {
        // Do something

      }
      (new RedirectResponse('/flair-core/paypal_payment'))->send();

    }
    $info = !$client_id ? 'Missing paypal app details.' : null;

    $data = [
      'title' => $payment_title,
      'info' => $info,
      'client_id' => $client_id,
      'currency' => $currency,
      'amount' => 10
    ];

    return [
      '#theme' => 'paypal_example',
      '#cache' => [
        'max-age' => 0
      ],
      '#attached' => [
        'library' => 'paypal_example/paypal',
        'drupalSettings' => [
          'paypal_payment_data' => $data
        ]
      ],
      // The items twig variable as an array as defined paypal_example_theme().
      '#data' => $data,
    ];
  }

}

# End of file.

The 'Test Drive!'

We have put some time and effort into this, so it's time to give it a test (be an end user).

Lets enable the module by navigating to the module listing page, checking on the Paypal example module from the modules list, and clicking install.
After the module is installed, a Configure link is available below it's description (still on the module listing page), click on that to go the paypal configuration form we created, another way to access the form would be going to /admin/config/paypal_example/settings url.

On a new tab, login to https://www.paypal.com/ and then got to https://developer.paypal.com/developer/accountStatus/ and under Dashboard > My Apps & Credentials, click on Create App, note the Client ID and Secret, as these are required in the configuration form. A sandbox user account to use with this app will be auto created for use (where test funds will be sent to/business owner), you will also be required to create a sandbox account(s) to test with as the buyer. A sandbox account lets you create a fake user (email, password and some bucks in that account) to test payments (only in sandbox environment).
Input the configuration form with the right info(details) and click save.
Head to /flair-core/paypal_payment url. (remember the route id paypal_example.payment_example defined in the .routing.yml)

From here, you can use one of the sandbox accounts you created earlier, as a buyer to test, and later upgrade to a live (real business account) account to collect funds as it fits your business/shop.

CONCLUSION:

From here, some improvements would include;

Managing our javascript dependencies via a package manager, to achieve the performance associated with that, and avoid running into issues, when paypal_example/paypal is loaded before the paypal_example/paypal_cdn is.
We have payment entries/records in the database, a way to display that should be among the next things towards making this example module complete.
The php library we updated to, is also recently abandoned, but no other alternative is provided by PayPal, for this, all the logic that interacts with their api has been separated into it's own class (src\PayPalClient.php) so it's easier to change to any other wrapper/SDK in the future.

RESOURCES:

Reading and writing to drupal (8) config.

Nicholas Babu — Thu, 21 Jul 2022 08:30:06 +0000

Drupal 8 provides several apis for storing your application data, these include;entity api, configuration api and the state api.
There are several ways to determine what api to use depending on what data you want to store, and in this blog we will look at the config api.

We're going to see how we could define default values on module install, and later edit the same via a config form, and finally we will use these settings in a controller to render items on a page including pictures of cats, from _ the cats api _. (I choose this api because it requires a key and we need that to demo the capabilities of drupal config api ).

Code for this blog on github here;

Before we get to the code, I will outline the folders and files structures required first, then get into what goes into each file.
Let's name the module rw_config, which will also be the name of the module folder.

At the root of this folder we will have:

config (folder to contain default settings on install and schema file)
src (folder that will contain our module classes)
templates (folder to contain this modules templates files)
rw_config.info.yml
rw_config.module
rw_config.routing.yml

The config sub folder will contain two sub folders; 'install' and 'schema' and each of these folders will each contain one file namely 'rw_config.settings.yml' and 'rw_config.schema.yml', respectively. For the src folder, we will go into what files and folders goes in there later when need be. We will get direct into what goes into
each of the files now.

Below is an illustration of how the rw_config module should be structured.

##Below is the code that goes into rw_config.info.yml. and defines our module.

# see https://www.drupal.org/docs/drupal-apis/configuration-api/configuration-api-overview

name: 'Read Write Config'
type: module
description: 'Example on how to write and read to drupal config'
core: 8.x
package: 'Dev Examples'

In the 'rw_config.module' file, we will just define/register the template we will be using for this project, so other classes (Controller in our case) can use the same.

Below is the code that goes into rw_config.module

<?php

/**
 * Implements hook_theme().
 */
function rw_config_theme($existing, $type, $theme, $path) {

  return [
    'rw_config_listing' => [
      'render element' => 'children',
      'template' => 'rw-config-listing', #name of the template file +.html.twig
      'variables' => [
        'data' => FALSE
      ]
    ]
  ];
}

The 'rw_config.routing.yml' will contain two routes, one to render a config form (edit/update the configs), and another to render a page that will output data while relying on our custom config settings. This file relies on everything we will add in the src folder, but on on the src folder later.

##Below is the code that goes into rw_config.routing.yml

#see src\Controller\ConController class
rw_config.r_test:
 path: '/rwconfig/tests/page'
 defaults:
   _controller: '\Drupal\rw_config\Controller\ConController::showCats'
   _title: 'Rw Config Test Page'
 requirements:
   _permission: 'access content'

#see src\Form\RwConfigSettingsForm class
rw_config.config_form:
 path: '/rw_config/config_settings'
 defaults:
   _form: '\Drupal\rw_config\Form\RwConfigSettingsForm'
   _title: 'Rw Config Test Page'
 requirements:
   _permission: 'access content' # should be a defined better permission

Remember our two files in the config sub folder 'congif\install\rw_config.settings.yml' and 'config\schema\rw_config.schema.yml'. As their name suggests, rw_config.schema.yml defines our config object schema, while rw_config.settings.yml defines default values on module install, and can be updated or deleted. (NB: as of Drupal 8 we don't need to define the schema structure for the configuration api, you can ignore the rw_config.schema.yml and your module should work fine.)

## Below is the code that goes into each file.

# ---- Start of rw_config.settings.yml file --------------

# Contains the default values on install and can be
# overridden in our config settings form, accessible
# on route `<yoursite.com>/rw_config/config_settings`

api_key: 'Test default api_key on install'
app_title: 'Test default app title on install'
show_pictures: false


# ---- End of rw_config.settings.yml file --------------

# ---- Start of rw_config.schema.yml file --------------
# Defines rw_config.settings schema
rw_config.settings:
  type: config_object
  label: 'Read Write Config Example'
  mapping:
    api_key:
      type: string
      label: 'API key'
    app_title:
      type: string
      label: 'The app title'
    show_pictures:
      type: boolean
      label: 'Control if picture display on test page'

# ---- End of rw_config.schema.yml file --------------

Remember our routing file and our src folder, let's create what we need and join the remaining pieces. We need two more files in the src sub folder namely; 'src\Form\RwConfigSettingsForm.php' and 'src\Controller\ConController.php' which defines our configuration form/page and our apps display page respectively.

## Below is the code that goes into each file;

<?php
// RwConfigSettingsForm.php start ------------------------------------------------

namespace Drupal\rw_config\Form;


use Drupal\Core\Form\ConfigFormBase;
use Drupal\Core\Form\FormStateInterface;

/**
* Class RwConfigSettingsForm
*
* @package Drupal\rw_config\Form
*
* see https://www.drupal.org/docs/drupal-apis/configuration-api/working-with-configuration-forms
*/
class RwConfigSettingsForm extends ConfigFormBase {

 protected function getEditableConfigNames() {
   return ['rw_config.settings'];
 }

 public function getFormId() {
   return 'rw_config_app_settings';
 }

 public function buildForm(array $form, FormStateInterface $form_state) {
   $config = $this->config('rw_config.settings');

   $form['api_key'] = [
     '#default_value' => $config->get('api_key'),
     '#description' => $this->t('Your api key give at https://thecatapi.com/'),
     '#maxlength' => 40,
     '#required' => TRUE,
     '#title' => $this->t('API key'),
     '#type' => 'textfield',
   ];

   $form['app_title'] = [
     '#default_value' => $config->get('app_title'),
     '#description' => $this->t('Example page title'),
     '#maxlength' => 40,
     '#required' => TRUE,
     '#title' => $this->t('App title'),
     '#type' => 'textfield',
   ];

   $form['show_pictures'] = [
     '#default_value' => $config->get('show_pictures'),
     '#description' => $this->t('Show pictures '),
     '#title' => $this->t('Control if picture display on test page : ..../rwconfig/tests/page'),
     '#type' => 'checkbox',
   ];


   return parent::buildForm($form, $form_state);
 }


 public function submitForm(array &$form, FormStateInterface $form_state) {

   # save to config and clear cache
   $config = $this->config('rw_config.settings');
   $config
     ->set('api_key', $form_state->getValue('api_key'))
     ->set('app_title', $form_state->getValue('app_title'))
     ->set('show_pictures', $form_state->getValue('show_pictures'))
     ->save();

   // clear cache
   drupal_flush_all_caches();

   parent::submitForm($form, $form_state);
 }

}


// RwConfigSettingsForm.php End ------------------------------------------------

<?php
// ConController.php Start ------------------------------------------------
namespace Drupal\rw_config\Controller;


use Drupal\Component\Serialization\Json;
use Drupal\Core\Config\ConfigFactoryInterface;
use Drupal\Core\Controller\ControllerBase;
use GuzzleHttp\Client;
use Symfony\Component\DependencyInjection\ContainerInterface;

class ConController extends ControllerBase {


 /**
  * @var \Drupal\Core\Config\ConfigFactoryInterface
  */
 protected $configFactory;

 /**
  * @var \GuzzleHttp\Client
  */
 private $client;

 public function __construct(ConfigFactoryInterface $configFactory, Client $client) {
   $this->configFactory = $configFactory;
   $this->client = $client;
 }

 public static function create(ContainerInterface $container) {
   return new static(
     # see https://www.drupal.org/docs/drupal-apis/configuration-api/simple-configuration-api#s-interacting-with-configuration
     $container->get('config.factory'),
     # see  https://www.drupal.org/docs/contributed-modules/http-client-manager
     $container->get('http_client')
   );
 }

 public function showCats(){
   $config = $this->configFactory->getEditable('rw_config.settings');
   $api_url = 'https://api.thecatapi.com/v1/images/search?limit=20&page=1&order=Desc';

   $options = [
     'headers' => [
       'Content-Type' => 'application/json',
       'x-api-key' => $config->get('api_key')
     ]
   ];

   $data = $this->client->request('GET', $api_url, $options);

   $items = Json::decode($data->getBody()->getContents());

   return [
     '#theme' => 'rw_config_listing', # remember template definition in rw_config.module
     '#data' => [ # data to the template file
       'app_title' => $config->get('app_title'),
       'items' => $items,
       'show_pictures' => $config->get('show_pictures'),

     ]
   ];
 }

}

// ConController.php End ------------------------------------------------

Finally, before we test the module, let's create the last file named 'rw-config-listing.html.twig' in our templates folder (see rw_config_theme() in rw_config.module file ).

## Below is the code that goes into this file;

<h1> App Name: {{ data['app_title'] }}</h1>
<hr/>
{% for key, item in data['items'] %}
  <div style="width: 300px">
    <hr/>
    <h1> Picture id: {{ item['id'] }}</h1>
    {% if data['show_pictures'] %}

      Show Picture:
      <img src={{ item['url'] }} alt={{ item['url'] }}>
    {% else %}
      <h4> Picture display set to off!!!</h4>
    {% endif %}
  </div>


{% endfor %}

Now if we enable the module and head to url "/rw_config/config_settings", the config form we defined in 'src\Form\RwConfigSettingsForm.php will be rendered and the form fields will be populated with the default values we defined in the 'congif\install\rw_config.settings.yml'.

Now head to https://thecatapi.com/ and sign up to have an api key sent to your email, and use the same on the config form above, make sure to check 'Show pictures' and give your app a title maybe (you can come back to this page and change your settings), before heading to '/rwconfig/tests/page' to see the config settings in action.

CONCLUSION:
Configuration definitions can be exported as files between sites , if doing this and working with sensitive keys, you might consider treating your config files with care(privacy).

RESOURCES:

Configuration API overview https://www.drupal.org/docs/drupal-apis/configuration-api/configuration-api-overview
Yaml docs https://yaml.org/spec/1.2/spec.html#id2760395
custom twig templates for custom module https://www.drupal.org/docs/theming-drupal/twig-in-drupal/create-custom-twig-templates-for-custom-module
Managing drupal site configuration https://www.drupal.org/docs/configuration-management/managing-your-sites-configuration

An introduction to Drupal apis (creative blog)

Nicholas Babu — Fri, 08 Jul 2022 16:05:27 +0000

The problem to solve:

Imagine you run a community/social website, where users can comment on posts/comments' threads, but wanted to unpublish some comments based on some rules or company TCs. Maybe some slurs or anything around that. Now you could achieve this without code by configuring modules like rules and views, but our blog title has the word creative and Drupal apis in it: they also say Drupal is a framework and our title is not a clickbait; if you can count beyond ten, those are four reasons why we should solve this problem via custom code.


We have four!!

The plan:

Implement hook_entity_insert() to listen to event of type 'entity insert' of entity type id 'comment', and register a service/class "Pattern" to be used for the logic inside this hook.
Create a controller/route to display these 'unpublished' comments, to be reviewed by the right user (roles/permissions).
Create a custom twig filter/function (creative_format_date) to be used together with our template in the controller above.
Implement custom Drush commands to better manage this feature and improve the developer experience.

Prerequisites:
All that is required is a working instance of a Drupal project in your local machine, with at least one user (uid: 1 and two article content/dummy for use by the Drush generate spam comments command we will add later).

'creative' will be the name of this module and we will follow the file(s) naming conventions.

Folder structure:( place the creative folder inside the modules/custom folder )
The module repo is available on Github and I invite you to use that also as a reference through out this blog, just in case.

High level purpose of each file:

creative.info.yml (required); Contains our module details including name, description, supported core versions, type (module) etc and makes our module discoverable/aware by Drupal to install.
creative.libraries.yml: Defines our libraries (stylesheets and javascript) that we will use to style the page(s) our controller defines.
creative.module: Defines/contains our custom hooks (in our case just hook_entity_insert() and hook_theme())
creative.routing.yml: Defines our routes path and the attributes around that, including the controller and method for each defined path (src/Controller folder).
creative.services.yml: Defines our custom services to be added to the Drupal service container, so other parts of Drupal can access their instances via the service container.
drush.services.yml: Defines the class that handles our custom drush commands as well us makes our drush commands discoverable by Drupal (src/Commands).

Contents of files and how they are wired:

In this section, we will go through the contents of each file and how they are wired/discovered around Drupal.

We will start at the bottom of our feature (src\Service) folder and work our way up, to where we interact with the drupal apis.

#src/Service and src/Twig folder:

src/Service and src/Twig folder:

Pattern file in the src/Service folder and CreativeTwigExtension in the src/Twig folder relies on creative.service.yml which registers the services (Pattern and CreativeTwigExtension ) to the Drupal app service container.
In creative.service.yml file we are registering Pattern service with the class namespace and for the CreativeTwigExtension, we are using a service id(machine name) whose value is the CreativeTwigExtension namespace. I choose to use two different ways to register the service, just so any looks familiar.
It's also required to add a key of id tags with a array of an object with property name of value 'twig.extension' (to the custom twig filter/function) so it's added and discovered by the twig templating engine app instance.

The Pattern class provides a method named doesMatch($input), which takes a string as a param and compares that against a constant PATTERN (a regex expression) of the same class and returns an array of matching values if any. We will use this later in one of our module hooks to check against comment subject and comment body values.
The CreativeTwigExtension defines a custom twig filter creative_format_date which references a callback function timeElapsedString($datetime), which takes in a timestamp and returns a string of how much time has elapsed since. We will use this the the twig template file (templates/creative-spam-comments.html.twig)

We will now see the code in the above 3 files before moving on to the .modules, .routing/Controller and the template file.



// start of creative.services.yml
services:

  Drupal\creative\Service\Pattern:
    class: Drupal\creative\Service\Pattern
    arguments: []

  creative.twig:
    class: Drupal\creative\Twig\CreativeTwigExtension
    tags:
      - { name: twig.extension }

// end of creative.services.yml

// Start of src\Service\Pattern.php file
<?php

namespace Drupal\creative\Service;

/**
 * Provides regex function(s)
 */
class Pattern {

  const PATTERN = '/(wolf|woof|moon)/i';

  /**
   * Returns an array of text that match
   * the pattern above.
   *
   * @param $input
   *
   * @return array
   */
  public function doesMatch($input): array {
    // $matches is passed by reference
    preg_match_all(self::PATTERN, $input, $matches);
    return $matches;
  }

}

// End of src\Service\Pattern.php file

// Start of src\Twig\CreativeTwigExtension.php file
<?php

namespace Drupal\creative\Twig;

use Twig\Extension\AbstractExtension;
use Twig\TwigFilter;

/**
 * Class CreativeTwigExtension provides twig filter functions.
 */
class CreativeTwigExtension extends AbstractExtension {

  /**
   * @return \Twig\TwigFilter[]
   */
  public function getFilters() {
    return [
      new TwigFilter('creative_format_date', [$this, 'renderFormatDate']),
    ];
  }

  /**
   * @param $date
   * @return string
   */
  public function renderFormatDate($date) {
    return $this->timeElapsedString($date);
  }

  /**
   * @param $datetime
   * @return string
   */
  private function timeElapsedString($datetime) {
    /** @var \Drupal\Core\Datetime\DateFormatterInterface $formatter */
    $formatter = \Drupal::service('date.formatter');
    $now = \Drupal::time()->getRequestTime();

    /** @var \Drupal\Core\Datetime\FormattedDateDiff $diff */
    $diff = $formatter->formatDiff($datetime, $now, [
      'granularity' => 7,
      'return_as_object' => TRUE,
      ])->getString();

    return ' '.$diff . ' ago.';
  }

}

// End of src\Twig\CreativeTwigExtension.php file

# .modules, .routing, Controller\SpamController.php and the template files.

The creative.module file, contains two functions/hooks:

hook_entity_insert(): Which is fired when entity type of id 'comment' has been stored, and uses the Pattern service (class) to check if the comment subject or body contains any of the words wolf, woof or moon and returns an array of the matching words, we then use this logic to determine if we should revert, the just stored comment from published to unpublished by setting its property 'status' from '1' to a '0'.
and
hook_theme(): Implements the logic behind how we will render the unpublished comments in our controller; defining the theme id, template to use and variables to expect.

The creative.routing.yml file makes our route/path ('creative/spam-comments') discoverable by Drupal, and defines some other requirements, like the Controller class and class method that servers each defined path(s), the permissions and such.

The src/Controller/SpamController.php file defines the Class and method that handles our path, as defined in the creative.routing.yml, the Controller method getComments returns a render array, including the template to use (defined in our hook_theme()), the items as an array of Comment objects (limit 30 items) and the pager variables as a render element. The $render_array variable also includes an #attached render element of type library which references the definitions (attr and all) of the bootstrap libraries we're loading from cdn @creative.libraries.yml file, (the javascript functionality is not needed anywhere in our page, but we are requiring just for this demo).

Below is the code in each for these files:

// start of creative.module file
<?php

/**
 * @file
 * Contains hook implements for the creative module.
 */

use Drupal\Core\Entity\EntityInterface;
use Drupal\creative\Service\Pattern;

/**
 * Implements hook_entity_insert().
 */
function creative_entity_insert(EntityInterface $entity): void {
  if ($entity->getEntityTypeId() == 'comment') {

    /** @var \Drupal\creative\Service\Pattern $pattern */
    $pattern = Drupal::getContainer()->get(Pattern::class);
    $comment_subject = $entity->getSubject();
    $comment_body = $entity->get('comment_body')->value;
    if ($pattern->doesMatch($comment_subject)[0] || $pattern->doesMatch($comment_body)[0]) {
      $entity->set('status', 0);
      $entity->save();
    }

  }

}

/**
 * Implements hook_theme().
 */
function creative_theme($existing, $type, $theme, $path): array {
  return [
    'creative_spam_comments' => [
      'render-element' => 'children',
      // Template == creative-spam-comments.html.twig.
      'template' => 'creative-spam-comments',
      'variables' => [
        'items' => NULL,
        'pager' => NULL,
      ],
    ],
  ];
}

// end of creative.module file

// start of creative.routing.yml file
creative.spam_comments:
  path: 'creative/spam-comments'
  defaults:
    _controller: '\Drupal\creative\Controller\SpamController::getComments'
    _title: 'Spam comments'
  requirements:
    _permission: 'administer content'

// end of creative.routing.yml file

// start of src\Controller\SpamController.php file
<?php

namespace Drupal\creative\Controller;

use Drupal\comment\Entity\Comment;
use Drupal\Core\Controller\ControllerBase;

/**
 * Provides the spam comments listing page.
 */
class SpamController extends ControllerBase {

  /**
   * Returns a render-able array for spam comments page.
   */
  public function getComments(): array {
    $query = \Drupal::entityQuery('comment');
    $ids = $query
      ->condition('status', 0)
      ->pager(30)
      ->execute();

    /** @var \Drupal\comment\Entity\Comment[] $comments */
    $comments = Comment::loadMultiple($ids);

    $render_array = [
      // Your theme hook name defined in creative.module file.
      '#theme' => 'creative_spam_comments',
      '#attached' => [
        'library' => 'creative/creative_bootstrap',
      ],
      // The items twig variable as an array as defined in creative hook_theme().
      '#items' => $comments,
      // The pager twig variable as a render array as defined in creative hook_theme()
      '#pager' => [
        '#type' => 'pager',
      ],
      '#cache' => [
        'max-age' => 0,
      ],
    ];

    return $render_array;
  }

}

//  End of src\Controller\SpamController.php file

Upto this point, we can test the feature by enabling the module and adding comments to any existing node (content), that include any of the words/phrases defined in the Pattern class/service and that will propagate through the hook_entity_insert() function/listener, causing the comments with such words to be unpublished right after creation.

In the templates/creative-spam-comments.html.twig file, all that markup implementation is rendered in the content region.
We have access to the Comment object as each 'items' variable passed from our controller, so we can access the public methods/properties for the same.
Also the created date is formatted by the custom twig filter 'creative_format_date' registered in the 'creative.services.yml' file with tag 'twig.extension'.

#Demystifying the pager render element and \Drupal::entityQuery('<entity type id>');:

I will be honest, I thought I needed to do more with the pager render element and the ?page= in the uri as you walk/click through the pager links, but: every time a user clicks on a page id (pager item), it makes a get request to the same page adding a request param of id 'page' with a value of the clicked item from the pager(page number), for example; if a user clicks on item 3, that instructs Drupal to make a get request, on the current page, adding '?page=3' on the current page, the \Drupal::entityQuery('<entity type id>'); class return a '\Drupal\Core\Entity\Query\QueryInterface or rather Query/QueryBase.php ' instance which in turn extends Drupal\Core\Database\Query\PagerSelectExtender; ; it has access to the request object and uses the page query param to determine what items to load (pager offset).

// start of templates/creative-spam-comments.html.twig
<!-- Comments list -->
<div class="container">
  <div class="row d-flex justify-content-center">
    <div class="col">
      <div class="card shadow-0 border" style="background-color: #f0f2f5;">
        <div class="card-body p-4">
          {% for comment in items %}
            <div class="card mb-4" key="{{ comment.id }}">
              <div class="card-body">
                <h5 class="card-title">{{ comment.get('subject').value }}</h5>
                <div class="card-text">
                  <p>{{ comment.get('comment_body').value }}</p>

                  <div class="d-flex justify-content-between">
                    <div class="d-flex flex-row align-items-center">
                      <img src="https://via.placeholder.com/150/000000/FFFFFF/?text=IPaddress.netC/O https://placeholder.com/ " alt="avatar" width="25"
                           height="25" />
                      <p class="small mb-0 ms-2">{{ comment.getAuthorName }}</p>
                    </div>
                    <div class="d-flex flex-row align-items-center">
                      <p class="small text-muted m-1">Created:  </p>
                      <p class="small text-muted m-1"> {{ comment.get('created').value | creative_format_date }}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
  {{ pager }}
</div>

// end of templates/creative-spam-comments.html.twig

// start of creative.libraries.yml

creative_bootstrap:
  version: VERSION
  css:
    theme:
      //cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css: { external: true }
  js:
    //cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js: { external: true }

// end of creative.libraries.yml

Finally the Drush commands to make developing and maintenance better as well as a custom Batch Operation to enhance this on 'production!!'.

The last part of this blog is about the remaining three files, i.e;
drush.services.yml, src\Service\BatchService.php and src\Commands\CreativeCommands.php.

The drush.services.yml makes our CreativeCommands.php command(s) definitions discoverable by Drush and includes the commands machine name ('creative.commands') with defaults such as the php class and a tag of 'drush.command' which is required. It also contains a key of 'calls' which is an array of our constructor methods to call in the class defined above.

Required to install are Drush and the faker php library by running composer require drush/drush fakerphp/faker because the CreativeCommands class depends on them, it's also a common practice to install drush globally and also as a project dependency. (NB: if you install drush only in your project scope use vendor/bin/drush <command id> instead)

The CreativeCommand class defines two drush commands, one to create spam comments (drush creative:comment:generate 20) and another to delete all comments that are unpublished (drush creative:comments:delete). Generate comments is meant to be used in development, where we generate spam comments and test the hook_entity_create() definitions on creative.module file and creative:comments:delete deletes the spam comments after they have been reviewed by the user(s) with such roles or permissions.

The creative:comment:generate <comments count> command uses faker generator instance to generate the comment subject and body and also includes one item from the const SLURS of the CreativeCommands class, to make sure the hook_entity_insert() is fired/called on each comment generated. It also assigns the uid (comment owner) to value 1 and entity_id (the node that the comment(s) belong to) to 2, the node id, so make sure you have a user and a node with the same ids before running this command.

The creative:comments:delete utilizes the batch api because it's meant to be used in production (refer to src\Service\BatchService.php) which could also be called from a form submission handler on a normal Drupal page. I didn't include this in the services.yml because I felt that the Drupal service container doesn't need to be made aware of it, as we will be using it the drush commands for this example(we have access to it like an ordinally php namespaced class), About the batch api, I found this yt video pretty informative and with great use case examples.

// Start of drush.services.yml
services:
  creative.commands:
    class: \Drupal\creative\Commands\CreativeCommands
    tags:
      - { name: drush.command }
    arguments: []
    calls:
      - [setFaker, []]

// End of creative.services.yml

// Start of src\Commands\CreativeCommands.php
<?php

namespace Drupal\creative\Commands;

use Drupal\Core\Batch\BatchBuilder;
use Drupal\creative\Service\BatchService;
use Drush\Commands\DrushCommands;
use Drush\Exceptions\UserAbortException;
use Faker\Factory;

/**
 * Provides/defines custom commands associated with creative module.
 */
class CreativeCommands extends DrushCommands {

  const SLURS = ['wolf', 'werewolf', 'moon', 'full-moon'];

  /**
   * Faker Generator instance.
   *
   * @var \Faker\Generator
   */
  protected $faker;

  /**
   * Constructor setter for $faker property.
   *
   * @return void
   */
  public function setFaker() : void {
    $this->faker = Factory::create();
  }

  /**
   * Drush command that generates dummy spam comments.
   *
   * @param int $howMany
   *   How many spam comments to generate
   *   argument provided to the drush command.
   *
   * @command creative:comments:generate
   * @aliases cr-co-gn
   *
   * @usage creative:comment:generate 20
   *   20 is the number of comments to generate
   *   || drush cr-co-gn 300 -y
   *   Where 300 is the number of comments to generate
   *   and -y flags all confirmations ($this->io()->confirm()).
   */
  public function generateSpamComments(int $howMany) {
    $confirm = $this->io()->confirm('Confirm you want to generate ' . $howMany . ' comments!');
    if (!$confirm) {
      throw new UserAbortException('Try again with the number of comments you wish to generate!');
    }

    $commentEntity = \Drupal::entityTypeManager()
      ->getStorage('comment');

    for ($i = 0; $i < $howMany; $i++) {

      $key = array_rand(self::SLURS);

      $subject = $this->faker->words(3, TRUE) . self::SLURS[$key] . $this->faker->words(2, TRUE);
      $body = $this->faker->paragraph(2) . self::SLURS[$key] . $this->faker->sentence(7);
      $values = [
      // Default with install.
        'comment_type' => 'comment',
      // Published or unpublished.
        'status' => 1,
      // Node id the comment belongs to.
        'entity_id' => 2,
        'subject' => $subject,
      // Id of the comment owner/author.
        'uid' => 1,
        'comment_body' => $body,
        'entity_type' => 'node',
      // Field id on this node form.
        'field_name' => 'comment',
      ];

      /** @var \Drupal\comment\Entity\Comment $comment */
      $comment = $commentEntity->create($values);
      $comment->save();

      $this->output()->writeln('Comment created: id = ' . $comment->id() . ' || Comment subject: ' . $comment->getSubject());
    }

  }

  /**
   * Drush command that deletes all spam comments.
   *
   * @command creative:comments:delete
   *
   * @aliases cr-co-del
   *
   * @usage creative:comments:delete
   */
  public function deleteSpamCommentsEntity() {
    $query = \Drupal::entityQuery('comment');

    // Get all unpublished comments,
    // status == 0 (unpublished)
    $commentIds = $query
      ->condition('status', 0)
      ->execute();

    $items = array_values($commentIds);

    $this->logger()->notice(t('Initializing deletion of @count comments', [
      '@count' => count($items),
    ]));

    // Called on each op
    $operation_callback = [
      BatchService::class,
      'processSpamComments'
    ];

    $finish_callback = [
      BatchService::class,
      'processSpamCommentsFinished'
    ];

    // Batch operation setup/definition instance.
    $batch_builder = (new BatchBuilder())
      ->setTitle(t('Delete Spam comments batch process'))
      ->setFinishCallback($finish_callback)
      ->setInitMessage(t('Deleting Spam comments initialized'))
      ->setProgressMessage(t('Running delete Spam comments batch process'))
      ->setErrorMessage(t('Deleting Spam comments has encountered an error!'));


    // Add as many ops as you would like, Each op goes through
    // the progress bar from start to finish, then goes on to the next batch.
    $batch_builder->addOperation($operation_callback, [$items]);

    // If we are not inside a form submit handler we also need to call
    // batch_process() to initiate the redirect if needed.

    batch_set($batch_builder->toArray());
    drush_backend_batch_process();
    // Log message when done.
    $this->logger()->notice("Batch operations finished.");
  }

}

// End of src\Commands\CreativeCommands.php


// Start of src\Service\BatchService.php
<?php

namespace Drupal\creative\Service;

use Drupal\comment\Entity\Comment;

/**
 * Class BatchService provides batch process callbacks and op(s).
 * Documentation
 * @ https://api.drupal.org/api/drupal/core%21includes%21form.inc/group/batch/8.8.x
 * Also found this video with great examples/explanations on batch api
 * @ https://www.youtube.com/watch?v=Xw90GKoc6Kc
 */
class BatchService
{

  /**
   * @param array $items
   * @param array|\DrushBatchContext $context
   * @return void
   */
  public static function processSpamComments($items, &$context)
  {
    // Context sandbox is empty on initial load. Here we take care of things
    // that need to be done only once. This context is then subsequently
    // available for every subsequent batch run.
    if (empty($context['sandbox'])) {
      $context['sandbox']['progress'] = 0;
      //$context['sandbox']['errors'] = [];
      $context['sandbox']['max'] = count($items);
    }

    // If we have nothing to process, mark the batch as 100% complete (0 = not started
    // , eg 0.5 = 50% completed, 1 = 100% completed).
    if (!$context['sandbox']['max']) {
      $context['finished'] = 1;
      return;
    }

    // If we haven't yet processed all
    if ($context['sandbox']['progress'] < $context['sandbox']['max']) {

      // This is a counter that's passed from batch run to batch run.
      if (isset($items[$context['sandbox']['progress']])) {
        $comment = Comment::load($items[$context['sandbox']['progress']]);

        // Let the editor know info about what is being run.
        // If via drush command, also let user know of the
        // progress percentage as they will not see the progress bar.
        if (PHP_SAPI === 'cli') {
          $context['message'] = t('[@percentage] Deleting comment subject: "@subject" and id: @id', [
            '@percentage' => round(($context['sandbox']['progress'] / $context['sandbox']['max']) * 100) . '%',
            '@subject' => $comment->getSubject(),
            '@id' => $comment->id(),
          ]);
        } else {
          $context['message'] = t('Deleting "@subject" @id', [
            '@subject' => $comment->getSubject(),
            '@id' => $comment->id(),
          ]);
        }

        // Delete/remove the comment entry.
        $comment?->delete();
      }
      $context['sandbox']['progress']++;
    }
    $context['finished'] = $context['sandbox']['progress'] / $context['sandbox']['max'];
  }

  /**
   * @param $success
   * @param array $results
   * @param array $operations
   * @return void
   */
  public static function processSpamCommentsFinished($success, array $results, array $operations): void
  {
    $messenger = \Drupal::messenger();

    if ($success) {
      $messenger->addMessage(t('Spam comments processed successfully.'));
    } else {
      // An error occurred.
      // $operations contains the operations that remained unprocessed.
      $error_operation = reset($operations);
      $messenger->addMessage(
        t('An error occurred while processing @operation with arguments : @args',
          [
            '@operation' => $error_operation[0],
            '@args' => print_r($error_operation[0], TRUE),
          ]
        )
      );
    }
  }

}

// End of src\Service\BatchService.php

Conclusion:

We have touched some basics on some Drupal apis, but there more to each and even more apis that we haven't touched, that make Drupal great (as a framework), both for no code and code development.

Our feature is also not upto the basic standards as it lacks tests, which I will be sharing about in an upcoming blog (where we test the functional parts of our feature's implementations).

Resources:

Improving developer experience as well as front-end performance with webpack.

Nicholas Babu — Fri, 03 Jun 2022 10:26:41 +0000

In this blog, we will see how we could improve our front end developer experience as well as performance by introducing webpack (plugins and loaders in the eco system) as an extra tool in our front-end development toolbox 🧰 🧰 .

Some of the problems webpack tries to solve include;

We can arrange our front-end project into different files and folders for easier development and maintenance and bundle/pack that maybe into one or several files as our app requires.
Ensure our code is compatible across browsers by introducing loaders like post-css and babel to add vendor prefixes and transpile newer ECMAScript syntax into older javascript and adding pollyfils for newer web apis/ES implements respectively.
Minify/compress our files (js/css/images) accordingly for performance reasons.
Include/import only the required portions of our dependencies (library/package) into our final bundle (Tree Shaking) instead of the whole package, to reduce the size our end-users have to download.

Because of the nature of our app ( Drupal/WordPress maybe), we will independently manage our templates (html) but webpack could also be configured to do that.

Our blog is about improvement, so it's better if we start with something to improve upon.I went ahead and made an app and hosted it on heroku,
also pushed its code to github (branch name: unoptimized).
The final code is also available on github (branch name: optimized).

Since we're going to be adding files or changing/updating their contents throughout the blog, I will be linking that to each file in the optimized branch for the ease of reference.

Below is the folder structure of our app so far.

Its a two page app (index.html and charts.html), the libs folder contains our .js and .css files that serve the two templates, and these are the files we will be focusing on.

About the templates:
For the templates, I'm importing both bootstrap css and bootstrap js (with its dependency ie poppers.js) via cdn, also libs/main.css (custom css) is included in all template files.
In the index.html; libs/main.js is included, while in charts.html; libs/charts.js and its dependency chart.js via cdn.

The Plan:

Install and configure post-css loader to ensure vendor prefixes are added according to our project specifications.
Install and configure babel so our javascript runs on all browsers (again according to our project specifications).
Introduce css preprocessors so we can modularize our css files and take advantage of the magic around such setups.
Download and bundle our app dependencies instead of loading them via cdn, including only the parts of the dependencies our app needs (like from bootstrap index.html only needs 'bootstrap/js/dist/dropdown' for the navbar and charts.html only needs 'bootstrap/js/dist/modal' for modal.
Minify images for faster downloads.

We will now discover the reason our app works on some browsers and not in others and is probably not as performant (downloadable files) as it should be, as we go through our webpack configurations.

Below is the code that powers our templates (without it's dependencies).
(all dependencies are loaded via cdn at this point)

main.css contents:



// start of main.css
* {
    margin: 0;
    padding: 0;
}
/**
https://developer.mozilla.org/en-US/docs/Web/CSS/place-items
 */
header {
    min-height: 20vh;
    display: flex;
    place-items: center;
    background: dimgrey;
}

.content {
    min-height: 60vh;
    /** background: #dcdcdc;*/
    background-image: url("../assets/bikers_trees.jpg"),
                      url("../assets/nature_trees.jpg");
    background-position: center;
    background-size: cover;
}

#todo-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    flex: 1;
    margin: 0rem 2rem;
}

footer {
    min-height: 20vh;
    display: grid;
    place-items: center;
    background: dimgrey;
}

// end of main.css

main.js contents:

// main.js contents
console.log("++++ latest Web APIS ++++++ ")
const content = document.querySelector(".content")
const original = { name: "Web technology for developers Web APIs; Testing: structuredClone()" };
original.itself = original;

const clone = structuredClone(original);
content.innerText = clone.name
content.style.color = "white"

console.log(clone)

// end of main.js

chart.js contents:

// charts.js
const chart01 = document.getElementById('chart01').getContext('2d');
const chart02 = document.getElementById('chart02').getContext('2d');
const todoListDiv = document.querySelector('#todo-list')

const todoList = {
    value: ["Walk Dog", "Publish Blog", "Renew expired subscriptions"]
}

todoList.value = [...todoList.value, "Buy groceries"]
todoList.value = [...todoList.value, "Fix reactivity Bug"]

for (const todo of todoList.value) {
    // Creates a "todo" document
    const todoDiv = document.createElement("div")
    todoDiv.classList.add("todo")
    const newItem = document.createElement("li")
    newItem.innerText = todo
    newItem.classList.add("item")
    todoDiv.appendChild(newItem)


    // Add item to list
    todoListDiv.appendChild(todoDiv)
}

// Just the same examples on chart.js documentation
// @ https://www.chartjs.org/
const myChart = new Chart(chart01, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

const myChart02 = new Chart(chart02, {
    type: 'bar',
    data: {
        labels: ['Houses', 'Hotels', 'Lofts', 'Parks', 'Cottage', 'Cruise-Ships'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

// end of charts.js

For instance;

the structuredClone(original) implement in main.js on line 6, does not work on my version of chrome because of the support across all browsers.
place-items center, will not work on all browsers because, of the support across all browsers at caniuse,

flex: 1; on line 29 of libs/main.css, will not work on all browsers at the time of this writing, the same for the array spreads on lines 9 and 10 of libs/charts.js .

Implementing the solution:
Prerequisites;

Nodejs and npm or yarn installed on your machine

CSS and Browser support with postcss#

Lets initialize a new npm project by running yarn init -y in the root of the a_web folder, and install the necessary dev dependencies to get our css working as intended across all browsers, by runing 'yarn add -D webpack webpack-cli cross-env css-loader mini-css-extract-plugin postcss postcss-loader postcss-preset-env'

Lets add three more scripts to our package.json as;

"build-dev": "webpack",
"watch": "webpack --watch",
"build": "cross-env NODE_ENV=production webpack" build-dev; builds our dev bundle with source maps and not minified as we will see in another file we will add next (webpack.config.js)

watch; runs in the background, and watches for file changes(saves) and recompiles the files (css/js) during development; to be loaded by your template files.

build; sets and enviroment valiable of NODE_ENV=production using cross-env lib and builds the production bundle, minified and without source-maps as set in the webpack.config.js file.

Upto this point, we will be required to add several files to get our css fully working as intended: namely;

webpack.config.js,
postcss.config.js, and
.browserslistrc

Purpose of each file(s):

webpack.config.js:
It's in this file that we will define;

application specific settings according to mode; development or production.
Entry files and output folder (file names).
Control the output of our files in regard to mode (development/production)
Define how to process/transpile file types and plugins to apply to each as defined in the plugins property, eg scss/css or javascript/ts

postcss.config.js:
postcss-loader we installed and defined in module.rules0 reads from this file, and uses "postcss-preset-env" plugin to determine which browsers to add support for, but (you can run npx browserslist in the command line before and after adding the below file (.browserslistrc)).

.browserslistrc:
Compliments postcss.config.js and .babelrc(to add later) and adds extra rules for more granular browser support.
Our .browserslistrc contains two lines of text/code ie;


    last 2 versions
    > 0.5%

Last 2 versions tells webpack to support the "last two versions " of any browser(s), and "> 0.5%" tells webpack to add support to any browser version that has a traffic/usage of more than 0.5%.

Below is the code contained in each file (some details in comments).

postcss.config.js file contents

// start of postcss.config.js
module.exports = {
    plugins: [require("postcss-preset-env")]
}
// the end of postcss.config.js

**
webpack.config.js file contents**

// start of webpack.config.js
const MiniCSSExtractPlugin = require("mini-css-extract-plugin")
const path = require("path")

let mode = "development",
    source_map = "source-map"

// if NODE_ENV is set to prod, we disable source-maps,
// and set webpack mode is production for it to use
// its built in optimizations accordingly eg minified/optimized
// files.
if (process.env.NODE_ENV === "production") {
    mode = "production"
    source_map = "eval"
}

module.exports = {
    mode: mode,
    /**
     * entries for raw js files (source)
     */
    entry: {
        main: path.resolve(__dirname, 'src/main.js'),
        charts: path.resolve(__dirname, 'src/charts.js'),
    },
    /**
     * output folder,
     * where [name] === entry[name]/entry[i] from above
     */
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
       // clean: true; cleans the output folder from previous builds.
        clean: true,
    },

    /**
     * devtools controls if and how source maps are generated.
     */
    devtool: source_map,

    /**
     * https://webpack.js.org/configuration/plugins/
     */
    plugins: [
        new MiniCSSExtractPlugin()
    ],

    /**
     * https://webpack.js.org/configuration/module/#rule
     */
    module: {
        rules: [
            {
                test: /\.(s[ac]|c)ss$/i,
                /**
                 * postcss-loader,
                 * css-loader and
                 * finally we extract css to
                 * a separate file with MiniCSSExtractPlugin.loader plugin.
                 * Another option, is to use style-loader to inject inline css into
                 * our template files but we don't need that approach.
                 */
                use:[
                    MiniCSSExtractPlugin.loader,
                    "css-loader",
                    "postcss-loader"
                ]
            }
        ]
    }
}

// end of webpack.config.js @todo add babel

#Running the builds so far:

Copy all the files in the libs folder (main.js, charts.js and main.css) into the src folder to match the property entry of module.exports in wepack.config.js, and include import "./main.css" at the top of src/main.js file.
Run yarn build-dev

Browser vendor prefixes added.

Taking a look inside the dist folder: (defined by the property output of module.exports in wepack.config.js,)

Recap so far: From the top,

we have the images files (not minimized, but we will come back and fix this, for smaller files === faster downloads)
In the charts.bundle.js the syntax todoList.value = [...todoList.value, "Buy groceries"] todoList.value = [...todoList.value, "Fix reactivity Bug"] , and in the main.bundle.js our structuredClone() method still exists, we dont want this for the browser support.
In the main.css, we have achieved the webpack magic: (vendor prefixes) added by the post-css configurations that makes sure our css rules are supported across the browser versions/types defined in the .browserslistrc file.

Let's add babel for es6 support:

Run 'yarn add babel-loader @babel/core @babel/preset-env -D'
Lets add another file named babel.config.js and update the modules.rules[] property of webpack.config.js with one more rules object like below.

Contents of babel.config.js

// start of babel.config.js
// @babel/preset-env is complimented by .browserslistrc
module.exports = {
    presets: ["@babel/preset-env"]
}
// end of babel.config.js

module.rules[1], item

// Start of module.rules[1] @
{
                test: /\.js$/,
                exclude: /node_modules/,
                /**
                 * babel-loader (babel.config.js)
                 */
                use: [
                    "babel-loader"
                ]
            },

// End of module.rules[1]

Recap so far:

Run yarn build-dev again and lets search through the dist/charts.bundle.js and dist/main.bundle.js for "[...todoList.value, "Buy groceries"]" and "structuredClone(original)" respectively.

From this we can tell only structuredClone() was not converted to an older version of it's implementation to ensure older browser support like the array spreads for the todoList variable for instance (also remember structuredClone() was not recognized in my version of chrome, and one way to solve this is to update my browser version, but our end users might be "lazy" to do this). A better way to achieve this would be to introduce polyfills so we don't force our users to always update their browsers (remember customer is king) : enter core-js.

Run yarn add core-js to add core-js as a project dependency and change the contents of the babel.config.js file to

module.exports = {
    presets: [
        [
            "@babel/preset-env",
            {debug: true, useBuiltIns: "usage", corejs: 3},
        ]
    ]
}

this tells webpack to only auto include the polyfills we need in our final output i.e only the necessary support specific to our application.

Let's run yarn build-dev one more time before moving on to the next step.
Next, let's tell our templates files to now load these files in the dist folder instead.The first step is easy, just tell index.html to load dist/main.css, and dist/main.bundle.js; and charts.html to load dist/main.css and dist/charts.bundle.js, we may also delete the libs folder, because we don't need it at this stage of our app, and maybe test our app to make sure nothing was broken before moving on to manage and bundle all the other dependencies we're requiring via cdn.

#Application dependencies :

Let's install our app dependencies and include them in our entry files and update webpack.config to process sass files by running;
'yarn add sass sass-loader -D && yarn add bootstrap chart.js @popperjs/core'

Then update our webpack rules as required, to process scss files as well and update the loaders to use sass-loader: too, because we'll also optimize our css by including only the parts of bootstrap our app requires using sass imports.

Steps:

Change test: /\.css$/i, to test: /\.(sc|c)ss$/i, in webpack.config.js and include "sass-loader" as the last item in the array value of key "use" in the same module.rules0.
Include only the bootstrap modules we require ie add import 'bootstrap/js/dist/modal' and import Chart from 'chart.js/auto' in our charts.js and import 'bootstrap/js/dist/dropdown' in main.js because we need that in nav-item dropdown in index.html: and delete all the other libraries our templates were loading via cdn.
Lastly we will need to rename our main.css file to main.scss and update the import of the same @ main.js file, then we will need to import only the scss component our app uses/needs from bootstrap so it looks like below;

 // Configuration
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

// Layout & components
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/images";
@import "bootstrap/scss/containers";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/transitions";
@import "bootstrap/scss/dropdown";
@import "bootstrap/scss/button-group";
@import "bootstrap/scss/nav";
@import "bootstrap/scss/navbar";
@import "bootstrap/scss/modal";
@import "bootstrap/scss/close";



* {
    margin: 0;
    padding: 0;
}
/**
https://developer.mozilla.org/en-US/docs/Web/CSS/place-items
 */
header {
    min-height: 20vh;
    display: flex;
    place-items: center;
    background: dimgrey;
}
// more code from older file...

Run yarn build-dev again and test if the two pages are broken, i.e index.html and charts.html, we have included only the parts we need from the libraries our app depends on instead of all, we have also splited our javascript code into separate files so we can only include chart.js on the page/template it's required.

Minify images:

Run yarn add image-minimizer-webpack-plugin @squoosh/lib -D to install the image minifiers we will be using and and update the contents of the webpack.config.js as follows: At the top add const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin"); and below the module property of module.exports = {}, add another property named optimization with a value like so:

optimization: {
        minimizer: [
            "...",
            new ImageMinimizerPlugin({
                minimizer: {
                    implementation: ImageMinimizerPlugin.squooshMinify,
                    options: {
                        // Your options for `squoosh`
                    },
                },
            }),
        ],
    },

And run yarn build to build a production optimized bundle with everything optimized and minified before uploading this version of the app on heroku and testing the improvements.

Conclusion / Benefits:

We have improved developer experience and can now use the latest es6 implement and latest css rules without worrying of our app being inconsistent across all browsers.
We have also made sure users download only what a webpage requires to function by removing additional code that was included in our dependencies, but our app didn't require them.
You can throw in any new css rule or es implementation without the worry of inconsistency across browsers; post-css, babel and core-js 🎉🥳 🥂 🍻!
Better SEO ranking (bigger reach), due to best practices (consistency across browsers) resulting in more sales or/and engagements.
There are several other tools/options one could use to optimize and improve their front-end developer experience as well as performance; grunt, gulp, parcel or vite, but you might find some, limiting according to your project needs or setup sometimes.

Resources:

Webpack js documentation
Babel documentation
PostCSS
Polyfill (MDN)
Vendor Prefix (MDN)
https://cssdb.org/
Bootstrap Optimize (but apply the same to any library you're using)
Core-js