https://github.com/ahrefs/reshowcase

A tool to create demos for your ReasonReact components
https://github.com/ahrefs/reshowcase

melange ocaml reason reason-react reasonml

Last synced: 2 months ago
JSON representation

A tool to create demos for your ReasonReact components

• Host: GitHub
• URL: https://github.com/ahrefs/reshowcase
• Owner: ahrefs
• License: mit
• Created: 2022-01-07T15:14:18.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2024-09-21T14:38:37.000Z (4 months ago)
• Last Synced: 2024-11-14T20:08:07.713Z (2 months ago)
• Topics: melange, ocaml, reason, reason-react, reasonml
• Language: Reason
• Homepage: https://ahrefs.github.io/reshowcase/
• Size: 1.99 MB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGES.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Reshowcase

⚠️ this is a fork of [original tool](https://github.com/bloodyowl/reshowcase) with the following updates:

- Migrated to use Melange and Dune, instead of ReScript and Ninja

- Use `reason-react` instead of `rescript-react`

- Use Reason syntax instead of ReScript syntax

> A tool to create demos for your Reason React components

![Screenshot](./example/example-2021.png)

```reason

open Reshowcase.Entry;

/* Create a demo*/

demo(({addDemo: _, addCategory}) => {

  /* Add a category */

  addCategory("Title", ({addDemo, addCategory: _}) => {

    /* Add an example*/

    addDemo("normal", ({string, _})

      /* Register "handles" from your JSX directly*/

      => 
 {string("text", "hello")->React.string} 
);

    addDemo("font-size", ({string, int, _}) =>

      
Belt.Int.toString ++ {js|px|js}},

          (),

        )}>

        {string("text", "hello")->React.string}

      

    );

  });

  /* Add another category */

  addCategory("Button", ({addDemo, addCategory: _}) =>

    addDemo("normal", ({string, bool, _}) =>

      

        {string("text", "hello")->React.string}

      

    )

  );

});


start();

```

## Install

Install [opam](https://opam.ocaml.org/) package manager.

Then:

```

opam pin add reshowcase.dev git+https://github.com/ahrefs/reshowcase.git#main

```

This will make the NodeJS script `reshowcase` available in your opam switch.

To make sure this script works, add the following dependencies to your application `package.json`:

```json

  "devDependencies": {

    "@craftamap/esbuild-plugin-html": "https://github.com/denis-ok/esbuild-plugin-html#79f512f447eb98efa6b6786875f617a095eaaf09"

  }

```

## Usage

### To start / develop:

```console

$ reshowcase start --entry=path/to/Demo.js

```

### To build bundle:

```console

$ reshowcase build --entry=path/to/Demo.js --output=path/to/bundle

```

If you need custom esbuild options, create the `.reshowcase/config.js` and export the esbuild config. Plugins and modules will be merged.

If you need a custom template, pass `--template=./path/to/template.html`.