ReasonML tools

by VladimirNovick. Twitter: @VladimirNovick

This extension contains code snippets for ReasonReact and it's usage with GraphQL along with some useful snippets for writing external bindings, requiring JavaScript etc. It is WIP and will contain various additional tools in the nearest future. List of features:

• Snippets for
  • ReasonML
    • core syntax
    • Bucklescript, Belt
  • ReasonReact
  • reason-urql (TODO)
  • reason-apollo
• Rei files generator (TODO)
• Bindings generator (TODO)

Installation

In order to install an extension you need to launch the Command Pallete (Ctrl + Shift + P or Cmd + Shift + P) and type Extensions. There you have either the option to show the already installed snippets or install new ones.

Supported languages (file extensions) Reason (.re, rei)

Usage

After installing extension you can type snippets starting with rml prefix and will get auto completion for common use cases for both Reason and ReasonReact. Reason GraphQL snippets will be prefixed with rmlgql

Snippets

Every snippet will have $1, $2 and so on placeholders. when using snippet you can navigate from one placeholder to the other using Tab

FFI - include your javascript

• rmlreq - require external javascript package and assing a let binding to it.

[@bs.val] external require: string => string = "",
let $1 = require("$2");

• rmlbsglobal - Bucklescript global value binding

[@bs.val] external $bindingToBeCalledInReason: $typeSignature = "$functionNameOnGlobalScope"

• rmlbsnullundefined - Null or Undefined type

Js.Nullable.t(string)

ReasonReact

• rmlstr - add ReasonReact.string pipe to string in JSX component

$1 |> ReasonReact.string

• rmlcmp - Write basic ReasonML component with JSX 3 syntax

[@react.component],
let make = ($1) => {
  $2
}

• rmldomrender - ReactDom Render

ReactDOMRe.renderToElementWithId(
  <$ComponentName $prop />,
  "$element",
);

• rmlred - add useReducer hook in ReasonReact

let (state, dispatch) = React.useReducer(,
  (state, action) =>
    switch (action) {
      | $1 => { $2 }
    }
  { $3 }
);

• rmleff1 - ReasonReact useEffect1

React.useEffect1(
    () => {
      $returnToUnsubscribeOrNone
    },
  [|$dependency|],
);

• rmlstate - React.useState hook

let ($1, set$1) = React.useState(() => $2);

• rmleff0 - React.useEffect hook

React.useEffect0(() => {
  $sideeffect
});

• rmleff0 - React.useEffect hook

React.useEffect0(() => {
  
});

• rmljscmpdefault - Bring React component from Js

[@bs.module "$1"][@react.component]
external make: ($2: $3) => React.element = "default";

• rmleventtarget - get form event.target.value

e => e->ReactEvent.Form.target##value |> $1

• rmlstyle - write inline style

let $1 = ReactDOMRe.Style.make($2);

GraphQL

Reason Apollo

• rmlgqlhttp - ReasonApollo http link

  let httpLink = ApolloLinks.createHttpLink(~uri="$1", ());

• rmlgqlapolloc

let inMemoryCache = ApolloInMemoryCache.createInMemoryCache();

ReasonApollo.createApolloClient(
  ~link,
  ~cache=inMemoryCache,
  (),
);

• rmlgqlsplit

let link =
  ApolloLinks.split(
    operation => {
      let operationDefition =
        ApolloUtilities.getMainDefinition(operation##query);
      operationDefition##kind == "OperationDefinition"
      &&
      operationDefition##operation == "subscription";
    },
    webSocketLink,
    httpLink,
  );

• rmlgqlws

  let webSocketLink =
    ApolloLinks.webSocketLink(
      ~uri="$1",
      ~reconnect=true,
      (),
    );

• rmlgql - gql for your queries, mutations, subscription

module $1 = [%graphql
  {|
     $2
  |}
];

module $1$3 = ReasonApollo.Create$3($1)

• rmlgqlrp Render prop snippet

  <$1>
    ...{($2) => {
        $3
      }
    }
  </$1>

• rmlgqlm mutation function

mutation(~variables=$1##variables,()) |> ignore;

Release Notes

0.0.02

Initial release of ReasonReact and GraphQL snippets