0

I am working on creating a template for a storybook file and it includes double "{{" for the actual file. How do I make sure that Handlebars ignores that when it is actually needed in the template?

import styled from 'styled-components';
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
import { Source } from '@storybook/addon-docs/blocks'
import {{pascalCase component}} from "./{{pascalCase component}}.component";

<Meta
  title="{{pascalCase component}}"
  component={{{pascalCase component}}}
  parameters={{ previewTabs: {{ canvas: { hidden: true } }} }} // This hides the canvas tab - its extraneous
/>

export const Template = (args) => <{{pascalCase component}} {...args}>Example</{{pascalCase component}}>;

# {{pascalCase component}}


<Canvas withToolbar>
  <Story
    name="{{pascalCase component}} - main"
    argTypes={{{
      id: {
        name: "id",
        description: "{{pascalCase component}} ID",
        control: { type: "text" },
        table: {
          type: { summary: "string" },
          defaultValue: { summary: "" },
        },
      },
      className: {
        name: "className",
        control: { type: "text" },
        table: {
          type: { summary: "string" },
          defaultValue: { summary: "" },
        },
      },
    }}}
  >
    {(args) => {
      return <{{pascalCase component}} {...args} />;
    }}
  </Story>
</Canvas>

<ArgsTable story="{{pascalCase component}} - main" />

This file is what I am attempting to fix some of the broken changes are in here still.

Josh Bowden
  • 892
  • 3
  • 12
  • 28
  • Does this answer your question? [Escape double braces {{ ... }} in Mustache template. (templating a template in NodeJS)](https://stackoverflow.com/questions/13944623/escape-double-braces-in-mustache-template-templating-a-template-in-n) – Zulfe Jan 31 '22 at 19:00
  • No that doesn't quite seems to work. I tried `component=\{{{pascalCase component}}}` but that still fails based on those docs with the value living in the object – Josh Bowden Jan 31 '22 at 19:06
  • What if you did `component=\{{ component }}`? – Zulfe Jan 31 '22 at 19:08
  • That just prints: component={{pascalCase component}} which isn't the goal either. Its like I need the first { escaped but not the rest – Josh Bowden Jan 31 '22 at 19:10
  • Hmm... That is quite tricky. Can you preprocess your component value and wrap it in curly braces? `component = '{' + component + '}'` – Zulfe Jan 31 '22 at 19:14
  • Perhaps a custom helper may help here as well... https://www.npmjs.com/package/handlebars-helpers#prepend – Zulfe Jan 31 '22 at 19:19

0 Answers0