Support for twig files

[schmidtsonian]

Is your feature request related to a problem? Please describe.

Support twig files

Describe the solution you'd like

I want to implement storybook in a wordpress environment

this is my current working solution with storybook 8:

{
  "name": "storybook",
  "version": "3.0.0",
  "description": "",
  "author": "estebanco.com",
  "license": "ISC",
  "main": "index.js",
  "engines": {
    "node": "22.x",
    "bun": "1.x"
  },
  "scripts": {
    "watch": "NODE_ENV=development node ./../storybook/dev-wrapper.mjs",
    "build": "NODE_ENV=production storybook build -o ./../storybook --loglevel silly"
  },
  "devDependencies": {
    "@babel/core": "^7.28.4",
    "@babel/preset-env": "^7.28.3",
    "@storybook/addon-essentials": "^8.6.11",
    "@storybook/html": "^8.6.11",
    "@storybook/html-webpack5": "^8.6.11",
    "babel-loader": "^10.0.0",
    "react": "^19.2.0",
    "react-dom": "^19.2.0",
    "storybook": "^8.6.11",
    "storybook-addon-turbo-build": "^2.0.1",
    "twig": "^1.17.1",
    "twig-drupal-filters": "^3.2.0",
    "twigjs-loader": "^1.0.3",
    "lit": "^3.3.1",
    "webpack": "^5.102.1"
  }
}

// main.ts

import path from 'path';
import type { StorybookConfig } from '@storybook/html-webpack5';

/* eslint-disable no-undef */
/* eslint-disable @typescript-eslint/no-require-imports */
const manifest = require(
  path.resolve(
    __dirname,
    '../../wordpress/wp-content/themes/dorfjungs/assets/dist/assets-manifest.json',
  ),
);
const pathTheme = path.resolve(__dirname, '../../wordpress/wp-content/themes/dorfjungs');
const pathStories = `${pathTheme}/views/stories`;
const config: StorybookConfig = {
  stories: [
    `${pathStories}/examples/**/*.stories.js`,
    `${pathStories}/atoms/**/*.stories.js`,
    `${pathStories}/molecules/**/*.stories.js`,
    `${pathStories}/organisms/**/*.stories.js`,
    `${pathStories}/layouts/**/*.stories.js`,
    `${pathStories}/modules/**/*.stories.js`,
    `${pathStories}/blocks/**/*.stories.js`,
    `${pathStories}/headers/**/*.stories.js`,

    `${pathStories}/atoms/**/*.mdx`,
    `${pathStories}/molecules/**/*.mdx`,
    `${pathStories}/organisms/**/*.mdx`,
  ],
  addons: ['@storybook/addon-essentials', 'storybook-addon-turbo-build'],
  staticDirs: undefined as string[] | undefined,

  // "framework": "@storybook/server",
  // staticDirs: [
  //   './../html'
  // ],
  previewHead: (head: unknown) => `
    ${head}
    <link type="text/css" rel="stylesheet" href="/wp-content/themes/dorfjungs/assets/dist/${manifest['app.css']}" />

    <!-- Make sure the dom is present before executing the main script -->
    <script>
      document.addEventListener('DOMContentLoaded', () => {
        const elScript = document.querySelector('script.app');
        if ( ! elScript) {
          const script = document.createElement('script');
          script.classList.add('app')
          script.src = '/wp-content/themes/dorfjungs/assets/dist/${manifest['app.js']}';
          document.body.appendChild(script);
        }
      });
    </script>
  `,
  core: {
    // lazyCompilation: true,
    disableTelemetry: true, // Remove anonymous usage reports
  },
  features: {
    // postcss: false,
  },
  // sidebar: {
  //   showRoots: false,
  // },
  webpackFinal: async (config) => {
    if (config.resolve) {
      config.resolve.modules = [path.resolve(__dirname, '../node_modules'), 'node_modules'];
      config.resolve.alias = {
        '/stories': path.resolve(
          __dirname,
          '../../wordpress/wp-content/themes/dorfjungs/views/stories/',
        ),
      };
    }
    if (config.module && config.module.rules) {
      config.module.rules.push({
        test: /\.twig$/,
        use: 'twigjs-loader',
      });
    }

    // console.log(config);
    return config;
  },
  framework: {
    name: '@storybook/html-webpack5',
    options: {},
  },
  docs: {
    autodocs: false,
  },
};
if (process.env.NODE_ENV === 'development') {
  config.staticDirs = ['/var/www/html/wordpress'];
}
module.exports = config;

and it works, but I can't make the upgrade to storybook 10 using " @storybook/web-components-vite" with a twig plugin for vite

Describe alternatives you've considered

No response

Are you able to assist to bring the feature to reality?

no

Additional context

No response