https://github.com/lessp/rask

Experimental exploration of a SwiftUI-like syntax in ReasonML
https://github.com/lessp/rask

experimental reasonml

Last synced: 30 days ago
JSON representation

Experimental exploration of a SwiftUI-like syntax in ReasonML

• Host: GitHub
• URL: https://github.com/lessp/rask
• Owner: lessp
• License: mit
• Created: 2019-10-12T17:17:00.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T12:22:09.000Z (almost 2 years ago)
• Last Synced: 2023-03-02T20:31:42.699Z (over 1 year ago)
• Topics: experimental, reasonml
• Language: Reason
• Homepage:
• Size: 677 KB
• Stars: 9
• Watchers: 2
• Forks: 0
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 💨 Rask

An continuous exploration of a SwiftUI-like syntax in ReasonML.

> Experimental and quickly put together. In other words, only use for the purpose of exploring! 😄

## Syntax

```ocaml

Text.(

  make("Hello World!")

  ->fontFamily("Roboto")

  ->fontSize(32)

  ->color(Red)

);

```

## Trying it out

```sh

npm i

npm start

# in another tab

npm run example

```

## Example

Here's an example in React, solely because it was easiest to get something up and running.

```ocaml

module HelloRask = {

  [@react.component]

  let make = () => {

    let (greeting, setGreeting) = React.useState(() => "Hello");

    let toggleText = _event =>

      setGreeting(prevGreeting => prevGreeting == "Hello" ? "World!" : "Hello");

    let greetMe =

      Text.(

        make(greeting)

        ->color(Pink)

        ->fontFamily("sans-serif")

        ->fontSize(32)

        ->onClick(toggleText)

        ->toReactElement

      );

    View.(

      make()

      ->backgroundColor(White)

      ->width(Px(320))

      ->height(Px(320))

      ->padding(~x=Px(32), ~y=Px(32))

      ->rounded(~all=5, ())

      ->shadow(

          ~x=0,

          ~y=8,

          ~blur=24,

          ~spread=12,

          ~color=Rgba(0, 0, 0, 0.05),

        )

      ->children(greetMe)

      ->reactElement("div")

    );

  };

};

```

## License

[MIT](./LICENSE)