ryyppy

// Example based on following tweet: https://twitter.com/housecor/status/1247497178882486272

// Class Example
class User {
  constructor(name, email) {
    this.name = name;
    this.email = email;
  }

  greet() {

ryyppy

module Mark = {
  [@unboxed]
  type t =
    | Any('a): t;

  module Link = {
    type attrs = {
      href: string,
      target: string,
    };

ryyppy

module CardsQuery = [%graphql
  {|
  query {
    EventItems(
      filter_query: {featured: { in: true } }) {
      items {
        slug
        content {
          date
          title

ryyppy

[@react.component]
let make = (~width="760", ~height="380") => {
  <svg
    className="w-full"
    viewBox="0 0 758 381"
    fill="none"
    xmlns="http://www.w3.org/2000/svg">
    <path
      d="M78.8374 255.364H664.923C664.923 255.364 677.451 256.743 677.451 270.971C677.451 285.2 667.673 288.178 667.673 288.178H579.485C579.485 288.178 592.014 290.163 592.014 304.888C592.014 319.612 582.785 321.101 582.785 321.101H524.544C524.544 321.101 507.676 322.59 508.776 333.896C509.876 345.201 520.204 346.194 520.204 346.194H626.849C626.849 346.194 644.266 347.683 643.166 363.897C642.066 380.11 632.288 380.11 632.288 380.11H186.032C186.032 380.11 166.964 379.118 167.514 364.393C168.064 349.668 186.582 350.661 186.582 350.661H121.801C121.801 350.661 104.628 351.598 104.628 338.252C104.628 320.715 121.862 322.149 121.862 322.149H142.457C142.457 322.149 159.264 323.362 159.264 306.101C159.264 293.748 144.657 292.7 144.657 292.7H77.6151C77.6151 292.7 56.4084 290.439 56.4695 275.769C56.5918 260.879 66.3089 255.364 78.8374 

ryyppy

/* Needed, so vim + prettier is working correctly, otherwise prettier is yielding a weird parsing error message */

module.exports = {
    trailingComma: 'es5',
    tabWidth: 2,
    semi: false,
    singleQuote: true,
    parser: 'babylon',
    overrides: [
        {

ryyppy

ReasonReact + useReducer hooks

This Gist is based on a tweet & blog post by Prateek Pandey on how to use a record based reducerComponent with ReasonReact : https://blog.theporter.in/reason-react-component-29fbffd784d6

It's based on the old record API, so I wanted to make an example which uses the newest ReasonReact API which is based on React hooks. IMO the hooks based API is much more lightweight and easier to understand. You can find more infos about it in the official ReasonReact docs.

Below you will find a similar solution to the Loadable state tracking as described in the blog post. The first example shows state tracking via a reducer (useReducer), the second example shows a more simplistic version with useState (the one I would prefer for this sp

ryyppy

/*
 Let's Assume we want to have a Functor which creates a new Module from
 a specific Component Model
 
 The Functor recieves another Module named `Component`, which needs to satisfy certain constraints:
 - Component requires an abstract type t (no matter what concrete type)
 - It also needs to implement a `render` function which gets said type t and returns a `string`
 
 Also, the newly created module will then contain a function `doSomething`, which will handle any
 instance of `Component.t`. So our `Component` also will need a function to create an instance for that,

ryyppy

WorkerConf ReasonML Workshop

In this workshop, Patrick will introduce you to the ReasonML platform to build highly type-safe ReactJS applications with the BuckleScript JavaScript compiler.

The goal of this workshop is to build a little webapplication, with following rough outline:

• Setting up the Development environment (VSCode)
• Little introduction to the ReasonML platform
• NextJS as the basis for our application
• Write our first ReasonReact components to build simple UI

ryyppy

// Generated by BUCKLESCRIPT VERSION 4.0.18, PLEASE EDIT WITH CARE

import * as React from "react";
import * as ReasonReact from "reason-react/src/ReasonReact.js";

var component = ReasonReact.statelessComponent("SidebarNavLink");

function s(prim) {
  return prim;
}

ryyppy

open Util;
module Secondary = {
  let component = ReasonReact.statelessComponent(__MODULE__);

  type active = {
    href: string,
    target: string,
  };

  type kind =