@charlietango/react-docs-net

React Docs Net

Take the JSON output from react-docgen, and convert it to C# ViewModels for consumption in .NET projects. Why would you do this? It allows us to define the ViewModels in the Frontend where we actually use them.

⚠️ Warning

This is a basic rewrite of the React props to C#/.NET. No validation is done on the actual files. Not all Flow features are supported, since there's not a simple way to convert them to C#.

• All models are converted to upper camelcase, with ViewModel appendend.
• Enum models are converted to upper camelcase, with Types appended
• Flow number is converted to int. Use @type {TYPE} in comment tag for the prop, to change the number type.

Requirements

• Node 8.x+
• Flow Currently only supports extracting models from Flow Types.
• react-docgen JSON files

Usage

Add the dependency

yarn add @charlietango/react-docs-net --dev

Generate JSON files with react-docgen, and process them:

const docNet = require('@charlietango/react-docs-net');

docNet.createModels([{name: 'CustomModel', docs: {...}}], {
  namespace: 'Dk.CharlieTango',
  dest: 'dist/models', // Add dest to write to files
});

or calling the bin

$ react-doc-net src/models/**/*.json --ns Dk.CharlieTango --dest dist/models

The .cs view models will be created in dist/models.

Config

Name	Type	Default	Description
namespace	string		Namespace to use in all the models
dest	string		Write .cs files to the this path
verbose	boolean	false	Output extra logging
quiet	boolean	false	Don't output anything to log

JSDoc flags

You can use these flags in JS comments to modify how a prop is handled.

• @internal - Ignore this prop - It's only used internally in the React App.
• @type - Set a specific C# type for this prop - Like decimal
• @static - Marks classes or fields as static.
• @generic - Should always be put above a generic prop
• @genericTypes T: Enum - Optional. Should be placed before the current type definition