Question on Usage with Default Template and other JSX Files

[borwahs]

@yeojz -

Thanks for this awesome module.

I have been trying to read through the code to understand if I can setup my project in a certain way but haven't been able to find the right place to look or what to configure.

I am looking to setup a structure as such:

src/
    work/
        index.jsx
    index.jsx
    default.jsx

using the following configuration:

isStatic: true,
directory: './src',
defaultTemplate: 'default.jsx',
pattern: '**/*.jsx',

Ultimately, the idea is that default.jsx would be used as the template for any other jsx files processed (index.jsx and work/index.jsx).

Initially, I set {this.props.contents} in my default.jsx but that returns the file as a string.

Is there something I am missing configuration wise to have it transform the other jsx files and use it in default.jsx? Or is there any other way to do so? If not, I am willing to work on implementing it (if you think it fits) - would just need some guidance on where you think the best place to start is.

[yeojz]

@borwahs

Thanks.

Metalsmith reads and parse the source files into a Buffer, which is subsequently converted into a string. As such, {this.props.contents} would be affected as it's no longer a module.

From your snippets, it would seem that your source and template directory is the same (I presume from the name of the folder), and as such, the files are subjected to the above when read.

I've taken a shot at a possible solution - https://github.com/yeojz/m-rt-issue-53 It makes use of node's module system to programmatically evaluate and create the module that is passed as {this.props.contents}.

Maybe take a look and let me know if that fits / works for you / have a better solution if inspiration hits from that 👍

[borwahs]

@yeojz -

Thanks for the quick response! I really appreciate it.

Your solution makes total sense and should fit. I'm kicking myself for not thinking of converting the string back via module.

I'm going to play around with the solution tonight and will report back!

[borwahs]

@yeojz -

The solution you provided above does solve what I was looking. It has given me enough to be able to take it a bit further and get a solution working that allows for importing/requiring JSX files with one another within the src/ directory (a bit hacky though).

Another avenue I plan to explore is setting up a partials/ directory such that the default.jsx template and any files in src/ could import them.

I'll report back here when I get all of that setup. Not sure if there is any interest on your side for this module but in case anyone else comes across this.

Thanks for your help and this module!

[yeojz]

@borwahs

Glad that worked for you!

Sure. I think this is a good use case to support as core since metalsmith is not all about just markdown files. It can be an enhancement to the existing react strategy or even part of the documentation.

Maybe when you've got things ironed out we can see if this can fit into a more generic strategy or part of the documentation so that it is not only applicable for react, but others as well.

Thanks and Cheers!!