daKmoR

"scripts": {
  "storybook": "start-storybook",
}

daKmoR

{
  html: '<h1>This is my component</h1><my-component></my-component>',
  jsCode: "import './my-component.js';"
}

daKmoR

const stories = [{ key: 'demo', story: demo, code: demo }];
for (const story of stories) {
  const storyEl = rootNode.querySelector(`[mdjs-story-name="${story.key}"]`);
  storyEl.story = story.story;
  storyEl.code = story.code;
}

daKmoR

export default {
  title: 'My Group/My Awesome Component',
};

daKmoR

"scripts": {
  "start": "es-dev-server",
}

daKmoR

import { Chart } from '../components/chart'

# Here’s a chart

The chart is rendered inside our MDX document.

daKmoR

module.exports = {
  stories: ['../README.md', '../docs/**/*.md'],
  esDevServer: {
    nodeResolve: true,
    watch: true,
    open: true,
  },
};

daKmoR

<demo-1 />

daKmoR

const { mdjsTransformer } = require('@mdjs/core');

module.exports = {
  nodeResolve: true,
  open: 'README.md',
  watch: true,
  responseTransformers: [mdjsTransformer],
};

daKmoR

{
  html: '<h1>This is my component</h1><my-component></my-component>',
  jsCode: "import './my-component.js';",
  stories: [
    key: 'demo',
    name: 'demo',
    code: 'export const demo = () => `<my-component header="from attribute"></my-component>`',
  ]
}