{"id":19757014,"url":"https://github.com/jtberglund/gatsby-plugin-reason","last_synced_at":"2025-10-15T06:33:04.238Z","repository":{"id":31018679,"uuid":"126651459","full_name":"jtberglund/gatsby-plugin-reason","owner":"jtberglund","description":"ReasonML with Gatsby!","archived":false,"fork":false,"pushed_at":"2023-01-27T06:57:04.000Z","size":1078,"stargazers_count":39,"open_issues_count":6,"forks_count":9,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-02T17:37:08.384Z","etag":null,"topics":["gatsby","gatsby-plugin","reason","reason-react","reasonml"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jtberglund.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-25T00:26:01.000Z","updated_at":"2023-05-18T15:08:33.000Z","dependencies_parsed_at":"2023-02-15T06:25:40.267Z","dependency_job_id":null,"html_url":"https://github.com/jtberglund/gatsby-plugin-reason","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jtberglund%2Fgatsby-plugin-reason","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jtberglund%2Fgatsby-plugin-reason/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jtberglund%2Fgatsby-plugin-reason/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jtberglund%2Fgatsby-plugin-reason/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jtberglund","download_url":"https://codeload.github.com/jtberglund/gatsby-plugin-reason/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224208021,"owners_count":17273697,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gatsby","gatsby-plugin","reason","reason-react","reasonml"],"created_at":"2024-11-12T03:17:45.082Z","updated_at":"2025-10-15T06:32:59.213Z","avatar_url":"https://github.com/jtberglund.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# gatsby-plugin-reason\n\nGatsby plugin so you can write your site in ReasonML!\n\nCheck 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.\n\n## Setup\n\n1.  Install `gatsby-plugin-reason`\n\n    ```\n    npm i gatsby-plugin-reason\n    ```\n\n    or\n\n    ```\n    yarn add gatsby-plugin-reason\n    ```\n\n2.  You'll need `bs-platform` to compile Reason -\u003e BuckleScript.\n\n    You can either\n\n    a) install globally and link to the binary\n\n    ```\n        npm i -g bs-platform\n        npm link bs-platform\n    ```\n\n    or b) Install as a dependency\n\n    ```\n        npm i bs-platform\n    ```\n\n3.  Add `'gatsby-plugin-reason'` to `gatsby-config.js`.\n\n    ```js\n    // gatsby-config.js\n    module.exports = {\n        // ...\n        plugins: ['gatsby-plugin-reason']\n        // ...\n    };\n    ```\n\n4.  Create a `bsconfig.json` file at the root of your gatsby app with the following contents:\n\n    ```json\n    {\n        \"name\": \"my-gatsby-app\",\n        \"reason\": { \"react-jsx\": 2 },\n        \"bs-dependencies\": [\"reason-react\"],\n        \"sources\": [\n            {\n                \"dir\": \"src\",\n                \"subdirs\": true\n            }\n        ],\n        \"package-specs\": {\n            \"module\": \"commonjs\"\n        },\n        \"suffix\": \".bs.js\",\n        \"refmt\": 3\n    }\n    ```\n\n    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)\n\n5.  That's it! Create your `.ml`/`.re` files and they'll automatically be compiled to javascript when you run `gatsby develop`.\n\n## Usage\n\n### \u003ca name=\"pages\"\u003e\u003c/a\u003eCreating Pages\n\nNormally, 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.\n\ne.g. `src/pages/home-page.js` exports a component that creates the page shown when a user navigates to `/home-page` in your site.\n\nHowever, 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`.\n\nTo 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:\n\n```ocaml\n/* Whatever string you pass to ReasonReact.statelessComponent will be the page's route\nIn this case, this page will be used for the 404 page */\nlet component = ReasonReact.statelessComponent(\"404\");\n\nlet make = children =\u003e {\n    /* ... */\n};\n\nlet default = ReasonReact.wrapReasonForJs(~component, jsProps =\u003e make(jsProps##children));\n```\n\n### Import ReasonReact components from JS components\n\n1.  Create your ReasonReact component (e.g. `Paragraph.re` shown below)\n\n    ```reason\n    let component = ReasonReact.statelessComponent(\"Paragraph\");\n\n    let make = children =\u003e {\n        ...component,\n        render: _self =\u003e \u003cp\u003e children \u003c/p\u003e\n    };\n\n    let default = ReasonReact.wrapReasonForJs(~component, jsProps =\u003e make(jsProps##children));\n    ```\n\n2.  Import the reason file from your JavaScript components\n\n    ```jsx\n    import React from 'react';\n    import Paragraph from './Paragraph.re';\n\n    const Component = () =\u003e {\n        return \u003cParagraph\u003eHello world!\u003c/Paragraph\u003e;\n    };\n    ```\n\n## Options\n\n| Name                        | Type      | Default | Description                                                                                                                   |\n| --------------------------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------------------- |\n| 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) |\n\n## License\n\n[MIT](https://github.com/jtberglund/gatsby-plugin-reason/blob/master/LICENSE.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjtberglund%2Fgatsby-plugin-reason","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjtberglund%2Fgatsby-plugin-reason","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjtberglund%2Fgatsby-plugin-reason/lists"}