Custom output formatter

[mmkal]

Is your feature request related to a problem? Please describe.

I'm setting up Netlify CMS for a mostly-static site, written in Next.js and TypeScript. None of the output types seem quite right for the project:

• md: requires using a frontmatter parser, either at build time or runtime - and what's parsed will be typed as any
• toml: similar to above
• yaml: similar to above
• json: can be directly import-ed and will be strongly-typed, so this is the best option for right now. But multiline markdown blobs are hard to read, compared to md or yaml

And for all of the above, any markdown has to be run through a markdown-to-jsx type library (we're currently using markdown-to-jsx).

All of the above problems are surmountable, and most likely even without perf hits, by some combination of babel, webpack, and static-page-generation. But it feels like there's a trick being missed, because any processing needed of the content could be done when it's generated, rather than leaving it to build-time or runtime, either server-side or client-side.

Describe the solution you'd like

The output that would probably be most useful for our team specifically would be something like a data-only typescript file:

import stripIndent from 'strip-indent'

export const en = {
  title: 'Contact Page',
  body: stripIndent(`
    ## Contact Us
    
    You can contact us at [email protected]. Visit our [help page](/help) for more info.
  `)
}

export const es = { ...spanish equivalent... } 

But of course, that's very project-specific. It depends on the strip-indent library, which is fine for our team, but isn't in general. So I'm not proposing netlify-cms include a typescript formatter. But it'd be great if you could let us define our own. I'm imagining an API something like:

CMS.registerFormatter({
  extension: '.ts',
  formatter: {
    fromFile: content => {
       // whatever magic is required... we can use eval at our own risk, I guess
      let _exports = {}; 
      eval(content.replace(/export const (\w+) = /g, '_exports.$1 = '))
      return exports
    },
    toFile: data => {
      // construct a typescript ast somehow... again, we can make project-specific assumptions here
      return Object.entries(data)
        .map(([name, value]) => `export const ${name} = ${JSON.stringify(value, null, 2)}`)
        .join('\n\n')
    },
  },
})

This formatter would then be inferred for pages with file: foobar.ts.

The actual API of a formatter is really nice and simple (I'm basing this on the json example) so it's easy to imagine users being able to get pretty creative with how the output file gets persisted, to make sure it's a combination of human-readable and useful for the project it lives in.

If users wanted to, they could even do markdown processing in the toFile function to build up a ready-to-render AST.

Describe alternatives you've considered

Conceivably this could be done by wrapping an existing backend but that seems more invasive and scary. There might also be a way to do this already, I haven't found it in the docs though.

There might also be a hacky way to do window.CMS.something.formatters.toFile = ... but I'm not familiar enough with the codebase to know how/whether formatters are exposed.

Additional context

I'm new to Netlify CMS, so please let me know if I'm thinking about things in The Wrong Way.

[erezrokah]

Thanks @mmkal, this issue is a duplicate of #2757, but I'm keeping this one as it's more detailed.

Also to be reviewed #5839

[aymenha]

Anything else required before the PR/build could be approved?

[talves]

https://answers.netlify.com/t/is-this-project-dead/70988/61

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[mmkal]

Hello I am recent activity.