Component: Single Language code example from file

[commercetools]

Component: Single Language code example from file

[nkuehn]

update from a conversation with @emmenko about how to approach the topic:

• we will go for an import and webpack-based approach. Users learn the import notation and have to lean it anyways for MDX transclusion.
• code examples from outside the repository will be provided via a special package in the respective content repository which pulls the examples from whereever they live (e.g. the repository of an SDK) and then provides the files as a javascript package.

I'll update the issue description here

FYI @davifantasia

[davifantasia]

I just want to say I started working on this.

[davifantasia]

To be able to implement this:

import CartCreateExampleJs from '@commercetools-docs/code-examples/javascript/cart/create.js'
import CartCreateExampleJava from '../../code-examples/java/cart/create.java'

<CartCreateExampleJs title="Creating a Cart in Javascript" />
<CartCreateExampleJava highlightLines="5-10" title="Creating a Cart in Java" />

I looked into exporting CodeBlock component from a webpack loader. I mainly used this plugin as a base, because it pretty much has a similar process compared to what we want to achieve:

https://github.com/gregberge/svgr/blob/master/packages/webpack

My conclusion is that I have to understand how Babel transpiles both ES6 and React. At least for now, I don’t think it’s worth the effort.

[davifantasia]

Current solution proposal:

Expose a AutoCodeExample component which authors can then use like so:

<AutoCodeExample import="@package/path/to/sample-code.js" title="JavaScript Code Sample" />

<AutoCodeExample import="/path/to/sample-code.java" />

AutoCodeExample - name was chosen after discussing with @adinakleine , since this tool is author-centric.

This component would only work with a simple webpack loader tool that returns file contents as a string which the component can then render as content of a code block.

[emmenko]

In the PR #299 you only load code examples from a local folder. What about external files?

[davifantasia]

In the PR #299 you only load code examples from a local folder. What about external files?

That is still a draft PR. I appreciate early review but in this case I suggest you wait until I mark it as ready for review.

[davifantasia]

I still had trouble implementing this task by taking advantage of building a webpack plugin. So I sat down with @jenschude to find a solution, after that I decided on a different approach. Please see the PR here - #300