wingsuit-designsystem / wingsuit

Twig for Storybook
GNU General Public License v2.0
90 stars 16 forks source link

Custom Twing Functions and Filters #185

Closed jowan closed 2 years ago

jowan commented 2 years ago

I'd like the ability to add my own Twing functions that correspond the custom Twig functions in my theme. I have done this, but not in a sustaianable way.

I saw there was the package twing-drupal-filters. I replicated this module and changed the namespace, and I have a package called twing-jowan-filters.

I have a patch for @wingsuit-designsystem/pattern to add this module in the same way as twing-drupal-filters, so in @wingsuit-designsystem/pattern/dist/TwingRenderer.js I have added the lines:

var jowanTwingFilters = require('../../../../custom_modules/twing-jowan-filters');
jowanTwingFilters(this.environment);

and it works - yay !

What I would like is a better way to do this. I can either fork twing-drupal-filters and add my own filters/functions there, but will still need a patch to add my forked package in TwingRenderer.js, or ... is there a way that I can override TwingRenderer() in my storybook project. Or just another way entirely to add my own Twing Function and Filters ! any help welcome, but essentailly ok for now with patch.

christianwiedemann commented 2 years ago

Hi, I added a IRenderer parameter to the configure function inside the apps/storybook/preview.js

const renderImpl = new TwingRenderer();
const twingEnvironment = renderImpl.getEnvironment();

configure(
  module,
  [
    require.context('./patterns', true, /\.stories(\.jsx|\.js|\.mdx)$/),
    require.context('wspatterns', true, /\.stories(\.jsx|\.js|\.mdx)$/),
  ],
  require.context('./config', false, /\.json|\.ya?ml$/),
  require.context('wspatterns', true, /\.twig$/),
  namespaces,
  renderImpl
);

Would be greate if you can check that and let me know. If you have some lines of code for documentation would make me happy.

christianwiedemann commented 2 years ago

Hi, I added this to the docs. Will close this for now.