How can I show external file in a View Code block

Question

I would like to show the source of another file within my Styleguidists MarkDown document. I do not want the source to be always visible inline; I'd like to only appear when the reader clicks on View Code.

Per the documentation (https://react-styleguidist.js.org/docs/configuration.html), I've added updateExamples to my `styleguide.config.js

  updateExample(props, exampleFilePath) {
    const { settings, lang } = props;
    if (typeof settings.file === 'string') {
      const filepath = path.resolve(
        path.dirname(exampleFilePath),
        settings.file
      );
      const { file, ...restSettings } = settings;
      return {
        content: fs.readFileSync(filepath, 'utf8'),
        settings: restSettings,
        lang,
      };
    }
    return props;
  }

This almost works, but not quite:

If I include

`` `jsx { "file": "./documentation-mocks.js", "static": true}
`` `

then I see the full source, always expanded, rather than reduced to "View code" button.

Or, if I include

`` `jsx { "file": "./documentation-mocks.js"}
`` `

then I get the "View code" button I want, but it is preceded by an attempt to evaluate the code, so I also get a box with SyntaxError: Unexpected token 'export' (and a matching ugly error in the Chrome console).

How can I put an external file into a View Code button, without also having it evaluated?

How can I show external file in a View Code block

0 Answers0