Package Configuration (package.json)

The package.json file is the heart of the JavaScript development environment for the Sanil Website Builder. It defines the project metadata, dependencies, and automation scripts.

Available Scripts

These scripts are used for building, developing, and linting the project. You can run them using npm run <script-name>.

Primary Scripts

  • npm run build: Compiles the project for production. It runs both the WordPress scripts build process and the SCSS compilation.
    • Executes: wp-scripts build && npm run build:css
  • npm run start: Starts the development environment. It watches for JavaScript changes (via wp-scripts) and SCSS changes simultaneously.
    • Executes: wp-scripts start & npm run watch:css

CSS Compilation Scripts

These scripts manage the SCSS to CSS compilation using the sass compiler.

  • npm run build:css: Performs a one-time compilation of all SCSS files. It targets:
    • Admin styles (admin/assets/css/)
    • Template builder styles
    • Theme options styles
    • Public frontend styles (public/css/)
    • Dynamic header and footer directories (public/header and public/footer)
  • npm run watch:css: Similar to build:css, but remains active and recompiles files whenever a change is detected in any of the tracked SCSS files or directories.

Utility Scripts

  • npm run lint: Runs the WordPress JavaScript linting rules to ensure code quality and consistency.
    • Executes: wp-scripts lint-js

Dependencies

The project relies on several key libraries for its functionality:

Core Frameworks

  • React: The UI is built using React components.
  • @wordpress/scripts: Provides the standard build pipeline for WordPress blocks and plugins.
  • Zustand: Used for lightweight state management across the builder UI.

UI & Interaction

  • @dnd-kit: A powerful drag-and-drop toolkit used for reordering elements in the builder.
  • React Select: Used for enhanced dropdown and selection components.
  • React Colorful: A tiny color picker component used in the settings panels.
  • React Frame Component: Used to render the builder preview inside an <iframe> to ensure style isolation.

Updating the Configuration

Adding Dependencies

To add a new library, use:

npm install <package-name>

Or for development-only tools:

npm install <package-name> --save-dev

Modifying Scripts

If you add new SCSS entry points or need to change the build process, modify the "scripts" section in package.json.

[!IMPORTANT] When adding a new header or footer preset, ensure that the SCSS compiler is aware of the new directory. The current configuration automatically tracks public/header and public/footer recursively.