https://github.com/jtberglund/gatsby-plugin-reason

ReasonML with Gatsby!
https://github.com/jtberglund/gatsby-plugin-reason

gatsby gatsby-plugin reason reason-react reasonml

Last synced: 2 months ago
JSON representation

ReasonML with Gatsby!

• Host: GitHub
• URL: https://github.com/jtberglund/gatsby-plugin-reason
• Owner: jtberglund
• License: mit
• Created: 2018-03-25T00:26:01.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-27T06:57:04.000Z (almost 2 years ago)
• Last Synced: 2024-10-02T17:37:08.384Z (4 months ago)
• Topics: gatsby, gatsby-plugin, reason, reason-react, reasonml
• Language: JavaScript
• Size: 1.03 MB
• Stars: 39
• Watchers: 2
• Forks: 9
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# gatsby-plugin-reason

Gatsby plugin so you can write your site in ReasonML!

Check out [gatsby-starter-reason](https://github.com/jtberglund/gatsby-starter-reason) for an in-depth example of how to use this plugin with your site.

## Setup

1.  Install `gatsby-plugin-reason`

    ```

    npm i gatsby-plugin-reason

    ```

    or

    ```

    yarn add gatsby-plugin-reason

    ```

2.  You'll need `bs-platform` to compile Reason -> BuckleScript.

    You can either

    a) install globally and link to the binary

    ```

        npm i -g bs-platform

        npm link bs-platform

    ```

    or b) Install as a dependency

    ```

        npm i bs-platform

    ```

3.  Add `'gatsby-plugin-reason'` to `gatsby-config.js`.

    ```js

    // gatsby-config.js

    module.exports = {

        // ...

        plugins: ['gatsby-plugin-reason']

        // ...

    };

    ```

4.  Create a `bsconfig.json` file at the root of your gatsby app with the following contents:

    ```json

    {

        "name": "my-gatsby-app",

        "reason": { "react-jsx": 2 },

        "bs-dependencies": ["reason-react"],

        "sources": [

            {

                "dir": "src",

                "subdirs": true

            }

        ],

        "package-specs": {

            "module": "commonjs"

        },

        "suffix": ".bs.js",

        "refmt": 3

    }

    ```

    For more configuration options refer to the [BuckleScript docs](https://bucklescript.github.io/docs/en/installation.html) or the [bsconfig.json spec](https://bucklescript.github.io/bucklescript/docson/#build-schema.json)

5.  That's it! Create your `.ml`/`.re` files and they'll automatically be compiled to javascript when you run `gatsby develop`.

## Usage

### Creating Pages

Normally, Gatsby will take all the components defined in `src/pages` and turn each component into its own page, using the file name as the path.

e.g. `src/pages/home-page.js` exports a component that creates the page shown when a user navigates to `/home-page` in your site.

However, ReasonML does not allow dashes in file names or file names composed of only numbers, which means you can't create files such as `home-page.re` or `404.re`.

To get around that, you can use the `derivePathFromComponentName` option to remap the path to your component based on the name you give your page component. For instance, you can have `src/pages/NotFound.re` map to the `404` route as shown below:

```ocaml

/* Whatever string you pass to ReasonReact.statelessComponent will be the page's route

In this case, this page will be used for the 404 page */

let component = ReasonReact.statelessComponent("404");

let make = children => {

    /* ... */

};

let default = ReasonReact.wrapReasonForJs(~component, jsProps => make(jsProps##children));

```

### Import ReasonReact components from JS components

1.  Create your ReasonReact component (e.g. `Paragraph.re` shown below)

    ```reason

    let component = ReasonReact.statelessComponent("Paragraph");

    let make = children => {

        ...component,

        render: _self => 
 children 

    };


    let default = ReasonReact.wrapReasonForJs(~component, jsProps => make(jsProps##children));

    ```

2.  Import the reason file from your JavaScript components

    ```jsx

    import React from 'react';

    import Paragraph from './Paragraph.re';

    const Component = () => {

        return Hello world!;

    };

    ```

## Options

| Name                        | Type      | Default | Description                                                                                                                   |

| --------------------------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------------------- |

| derivePathFromComponentName | `boolean` | `false` | Instead of deriving a page's URL path from its file name, use the name of the component instead. See [Creating pages](#pages) |

## License

[MIT](https://github.com/jtberglund/gatsby-plugin-reason/blob/master/LICENSE.md)