@charlietango/react-docs-net

Package and publish a NuGet package to a custom feed.

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
@charlietango/react-docs-net
Minified + gzip package size for @charlietango/react-docs-net in KB

Readme

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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.