vite-plugin-twing-drupal

1.1.2 verified Mon Apr 27 auth: no javascript

A Vite plugin that transforms Twing.js templates into HTML with Drupal-specific features such as attributes, classes, and default attributes. Currently at version 1.1.2, released frequently with multiple fixes per month. It integrates Twing.js (a Twig engine for JavaScript) with Vite and provides hooks for Drupal-like theme initialization. Key differentiators: built-in Drupal attribute support, Storybook integration, and handling of Drupal-specific template patterns like classes array rendering and default attribute handling.

Common errors

error Error: [vite-plugin-twing-drupal] Environment is not defined. Use hooks to create an environment. ↓

cause Missing or misconfigured hooks in plugin options.

fix

Add a hooks object with initEnvironment callback that creates a Twing environment.

error TypeError: (0 , vite_plugin_twing_drupal_1.default) is not a function ↓

cause Using CommonJS require with an ESM-only package.

fix

Use import syntax: import vitePluginTwingDrupal from 'vite-plugin-twing-drupal'

error Error: Cannot find module 'twing' ↓

cause Twing.js is not installed.

fix

Run: npm install twing

error Error: Unknown function "dd" ↓

cause Drupal functions like dd are not available by default.

fix

Declare custom functions in plugin config under functions option.

Warnings

gotcha The plugin is for Twing.js (a JavaScript Twig implementation), not Twig PHP. Do not expect PHP Twig extensions to work. ↓

fix Use only JavaScript-compatible Twig functions/filters.

breaking In v1.0.7, initEnvironment was renamed to Hooks. Old configs using initEnvironment will break. ↓

fix Rename initEnvironment to Hooks in your plugin config.

deprecated Peer dependency supports Vite ^4.4.11 || ^5 || ^6 || ^7. Older Vite versions may not be compatible. ↓

fix Upgrade Vite to at least 4.4.11.

gotcha The plugin's default export is ESM-only. Using require() may fail. ↓

fix Use import syntax or dynamic import().

gotcha The plugin does not include Twing.js itself; you must install twing separately. ↓

fix Install twing as a dependency: npm install twing

Install

npm install vite-plugin-twing-drupal

yarn add vite-plugin-twing-drupal

pnpm add vite-plugin-twing-drupal

Imports

vitePluginTwingDrupal

wrong

const { vitePluginTwingDrupal } = require('vite-plugin-twing-drupal')

correct

import vitePluginTwingDrupal from 'vite-plugin-twing-drupal'

Default export is the plugin function. CommonJS require may not work as it's ESM-first.

Hooks
wrong
```
import Hooks from 'vite-plugin-twing-drupal'
```
correct
```
import { Hooks } from 'vite-plugin-twing-drupal'
```
Hooks is a named export, not default. It provides callbacks for environment initialization.
PluginConfig
```
import type { PluginConfig } from 'vite-plugin-twing-drupal'
```
PluginConfig is a TypeScript type for configuration options.

Quickstart

Shows how to configure the plugin with Drupal-specific functions, filters, globals, hooks, and options for Twing environment and loader.

import { defineConfig } from 'vite';
import vitePluginTwingDrupal from 'vite-plugin-twing-drupal';

export default defineConfig({
  plugins: [
    vitePluginTwingDrupal({
      functions: {
        'dd': (...args) => { console.log(...args); },
        'dpm': (...args) => { console.log(...args); },
      },
      filters: {
        't': (str) => str,
      },
      globals: {
        'current_path': '/',
      },
      hooks: {
        initEnvironment(env) {
          // custom initialization
        },
      },
      twingEnvironment: {
        debug: true,
        autoReload: true,
        strictVariables: true,
      },
      twingLoader: {
        prefix: '@theme',
      },
    }),
  ],
});