1.0.1 • Published 2 years ago
storybook-liquid-render v1.0.1
Storybook Liquid Render
This library was created originally to parse a liquid file, using an options object into an HTML output, just as Shopify does it, to use this output in Storybook.
To use alongside Storybook, you must:
Install Storybook
Install it using npm install
npm i -D storybook-liquid-render
- Import it into your stories file and use it, like this:
// Button.stories.ts
import { Story, Meta } from '@storybook/html';
// More on default export: https://storybook.js.org/docs/html/writing-stories/introduction#default-export
export default {
title: 'Example/Button',
argTypes: {
name: {
control: 'text',
default: 'foo',
},
},
} as Meta;
interface ButtonProps {
name: string;
}
const Template: Story<ButtonProps> = (args) => {
const liquidExample = '<button>{{name}}</button>';
const options = {
...args,
};
// expectedHTMLOutput -> '<button>foo</button>';
return render(liquidExample, liquidOptions);
};
export const Primary = Template.bind({});
Primary.args = {
name: 'foo',
};
Render Method:
The render method receives three arguments:
- liquidContent: You Liquid string.
- options: An object defining the variables present on the Liquid structure.
- liquidObjectOptions: An object of the liquidjs constructor options.
The render method can't deal with Shopify specific filters or features unsupported by the liquidjs. :(
Important note: rendering snippets
- Storybook runs on the client side / browser. It can't access your files, so it has no idea of your imported snippets.
To solve that you must extend the Storybook Express server and use a middleware plugin that enables finding child files as a GET request:
...
const expressMiddleWare = function (router) {
...
router.get('/file/:filename', function (req, res) {
res.sendFile(path.resolve(__dirname, `path/to/your/snippets/${req.params.filename}.liquid`));
});
};
...
After that you can use the root option in the third argument to enable Storybook to search for child files from a GET request:
return render(liquidExample, liquidOptions, { root: './file' });
Hope that helps you in your Shopify/Liquid development! :)