Skip to content

create statically generated message object from jsx

Notifications You must be signed in to change notification settings

edvardchen/protobuf-jsx

Repository files navigation

protobuf-jsx

create statically generated message object from jsx

Why

While we use statically generated javascript code, we can't simply create Message object from plain object due to missing fromObject method (as the reverse of toObject)

See more in this issue

Before official support for fromObject method, we can use protobuf-jsx as a friendly workaround.

Installation

npm i -S protobuf-jsx

Usage

  1. Enable jsx in tsconfig.json
{
  "compilerOptions": {
    "jsx": "react",
    "jsxFactory": "Protobuf.createMessage"
  }
}

If you don't use TypeScript, check out how to register jsx factory for your tool chain.

  1. Write jsx in your javascript file.
import Protobuf from '../src';
import { Feature, Point } from './fixtures/static_codegen/route_guide_pb';

const feature: Feature = (
  <Feature name="hello" location={<Point {...point} />}></Feature>
);

// or using children render function

const feature: Feature = (
  <Feature name="hello">{() => ({ location: <Point {...point} /> })}</Feature>
);

Work with eslint

The following configurations prevent variables used in JSX to be marked as unused.

rules:
  react/jsx-uses-vars: 2
plugins:
  - react```

About

create statically generated message object from jsx

Resources

Stars

Watchers

Forks

Packages

No packages published