Skouerr-scripts NPM

Skouerr Scripts

This JavaScript library allows you to develop your Skouerr blocks, a suite of tools dedicated to designing WordPress themes. This command-line tool enables you to launch the compilation of your blocks and start an HMR (Hot Module Replacement) server for interactive development. Based on Vite, the Skouerr starter theme facilitates the rapid compilation of your assets within modular blocks, thereby optimizing the performance and modularity of your projects.

Installation

You only need to install one npm module:

  npm install skouerr-scripts

  yarn add skouerr-scripts

Setup

This CLI provides commands to add to your development scripts in the package.json file of the theme directory.

{
    "scripts": {
        "build": "skouerr-scripts build",
        "watch": "skouerr-scripts watch"
    }
}

Build command

For the build command to execute correctly, the templates.json file must be present at the root of the theme.

Watch Command

When developing multiple projects, you can select a different port for each one.

skouerr-scripts watch -p <PORT>

In the WordPress theme, it is possible to modify the port that will run the development script.

add_filter('wp_sk_scripts_port', function(){
    return <PORT>
})

This project uses Socket.IO, which imposes CORS issues. Therefore, we need to specify a development URL, which defaults to http://localhost. You can modify it using a command-line parameter.

skouerr-scripts watch --dev-url <URL>

Compiling

A script using Chokidar monitors file changes. When a modification is detected, the build scripts are triggered. The build process is managed by ViteJS.

HMR Custom

WordPress and PHP do not offer a native, performant solution for real-time development on a document. Therefore, we have implemented a file reloading system. Events are emitted via Socket.IO to handle reloads and error displays.

Style files

The HTML tags affected by the changes are removed before being re-injected, allowing for style updates.

Script files

JavaScript files are reloaded on every modification, which is not optimal.

Back-end files

PHP, Twig, and other files containing textual content modify the current page using a diff-dom based system. When a new page is fetched via a fetch request, the new elements are injected into the current page.

Contribution

We welcome contributions to this project! If you would like to contribute, please follow the steps below to ensure a smooth integration of your changes.