view-models

ViewModels

Tools for converting type definitions in client side apps to type definitions in server-side languages. Currently supports converting types from React or TypeScript/React to C#, Kotlin or TypeScript.

These tools were developed for adding type safety to websites that employ server-side rendering where the client and server use different languages (like rendering React components in C# using ReactJS.NET). Combining this with CI/CD helps uncover breaking changes in the client/server integration before they reach end users.

npm install --save-dev view-models

Table of contents

• TLDR usage
• Reliability
• Docs
• About

TLDR usage

CLI

To see the CLI help, run view-models --help.

Read more here

Webpack plugin

Config example. See complete list of options here

const ViewModelsPlugin = require('view-models/webpack-plugin');
const { generators, parsers } = require('view-models');

module.exports = {
  entry: { ... },
  output: { ... },
  plugins: [
    new ViewModelsPlugin({
      include: [/\.tsx$/],
      exclude: ['node_modules', 'some/path/to/exclude'],
      compilerOptions: {
        parser: parsers.typescriptReact, // Optional
        generator: generators.kotlin // Optional
      }
    })
  ]
};

Babel plugin

Read more here

{
  "plugins": ["view-models/babel-plugin"]
}

Eslint plugin

Read more here

npm install --save-dev eslint-plugin-view-models

{
  "plugins": ["eslint-plugin-view-models"],
  "rules": {
    "view-models/no-errors": "error",
    "view-models/no-unused-meta": "warn",
    "view-models/no-meta-mismatch": "warn",
    "view-models/no-prop-mapping": "warn"
  }
}

Reliability

Only some of the parsers/generators in this package have been properly tested:

• JavaScript-React parser: used in production since 2018
• Typescript-React parser: experimental
• C# generator: used in production since 2018
• TypeScript generator: used in production since 2020
• Kotlin generator: experimental

Docs

Tools

• Webpack plugin
• Babel plugin
• Eslint plugin
• Compiler

Parsers

• React parser
• Typescript/React parser

Generators

• C# generator
• Kotlin generator
• TypeScript generator

About

This is a TypeScript rewrite of @creuna/prop-types-csharp which I created while employed at Creuna. At Creuna we started using ReactJS.NET for server-side rendering pretty heavily around 2017 and soon discovered that a javascript/C# integration can be quite brittle. Breakage was common. I introduced this tool mid-2018 and since sorting out the initial kinks it has been very helpful in reducing runtime breakage.

If you're migrating from @creuna/prop-types-csharp here's a migration guide.