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