{"id":22900,"library":"vite-plugin-twing-drupal","title":"vite-plugin-twing-drupal","description":"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.","status":"active","version":"1.1.2","language":"javascript","source_language":"en","source_url":"https://github.com/christianwiedemann/vite-plugin-twing-drupal","tags":["javascript","Vite","Vite plugin","Twig","Storybook","Drupal"],"install":[{"cmd":"npm install vite-plugin-twing-drupal","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-twing-drupal","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-twing-drupal","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency for Vite plugin functionality","package":"vite","optional":false}],"imports":[{"note":"Default export is the plugin function. CommonJS require may not work as it's ESM-first.","wrong":"const { vitePluginTwingDrupal } = require('vite-plugin-twing-drupal')","symbol":"vitePluginTwingDrupal","correct":"import vitePluginTwingDrupal from 'vite-plugin-twing-drupal'"},{"note":"Hooks is a named export, not default. It provides callbacks for environment initialization.","wrong":"import Hooks from 'vite-plugin-twing-drupal'","symbol":"Hooks","correct":"import { Hooks } from 'vite-plugin-twing-drupal'"},{"note":"PluginConfig is a TypeScript type for configuration options.","symbol":"PluginConfig","correct":"import type { PluginConfig } from 'vite-plugin-twing-drupal'"}],"quickstart":{"code":"import { defineConfig } from 'vite';\nimport vitePluginTwingDrupal from 'vite-plugin-twing-drupal';\n\nexport default defineConfig({\n  plugins: [\n    vitePluginTwingDrupal({\n      functions: {\n        'dd': (...args) => { console.log(...args); },\n        'dpm': (...args) => { console.log(...args); },\n      },\n      filters: {\n        't': (str) => str,\n      },\n      globals: {\n        'current_path': '/',\n      },\n      hooks: {\n        initEnvironment(env) {\n          // custom initialization\n        },\n      },\n      twingEnvironment: {\n        debug: true,\n        autoReload: true,\n        strictVariables: true,\n      },\n      twingLoader: {\n        prefix: '@theme',\n      },\n    }),\n  ],\n});","lang":"typescript","description":"Shows how to configure the plugin with Drupal-specific functions, filters, globals, hooks, and options for Twing environment and loader."},"warnings":[{"fix":"Use only JavaScript-compatible Twig functions/filters.","message":"The plugin is for Twing.js (a JavaScript Twig implementation), not Twig PHP. Do not expect PHP Twig extensions to work.","severity":"gotcha","affected_versions":"*"},{"fix":"Rename initEnvironment to Hooks in your plugin config.","message":"In v1.0.7, initEnvironment was renamed to Hooks. Old configs using initEnvironment will break.","severity":"breaking","affected_versions":"<1.0.7"},{"fix":"Upgrade Vite to at least 4.4.11.","message":"Peer dependency supports Vite ^4.4.11 || ^5 || ^6 || ^7. Older Vite versions may not be compatible.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Use import syntax or dynamic import().","message":"The plugin's default export is ESM-only. Using require() may fail.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Install twing as a dependency: npm install twing","message":"The plugin does not include Twing.js itself; you must install twing separately.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Add a hooks object with initEnvironment callback that creates a Twing environment.","cause":"Missing or misconfigured hooks in plugin options.","error":"Error: [vite-plugin-twing-drupal] Environment is not defined. Use hooks to create an environment."},{"fix":"Use import syntax: import vitePluginTwingDrupal from 'vite-plugin-twing-drupal'","cause":"Using CommonJS require with an ESM-only package.","error":"TypeError: (0 , vite_plugin_twing_drupal_1.default) is not a function"},{"fix":"Run: npm install twing","cause":"Twing.js is not installed.","error":"Error: Cannot find module 'twing'"},{"fix":"Declare custom functions in plugin config under functions option.","cause":"Drupal functions like dd are not available by default.","error":"Error: Unknown function \"dd\""}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}