Giter VIP home page Giter VIP logo

rescript-lang.org's Introduction

Contributor Covenant

rescript-lang.org

This is the official documentation platform for the ReScript programming language.

Please report any technical issues with ReScript to the compiler repository.

In case you are missing some specific documentation:

  • Some language / compiler feature may not be documented yet
  • Create an issue to let us know what you are missing
  • In case you want to contribute missing docs, please refer to our Contribution section

System Requirements

  • node@18 or higher
  • npm@10 or higher

Setup

# For first time clone / build (install dependencies)
npm i

# Initial build
npx rescript

# Only needed for initial clone (or content H2 changes)
npm run update-index

# Build the index data
npm run update-index

# In a new tab
npm run dev

open localhost:3000

In case you want to run ReScript in watchmode:

npx rescript -w

Build Index Data

We are parsing our content for specific index data (such as, all interesting search terms we need for searching inside the Belt docs). You can create your index by running following command:

npm run update-index

All the index data is stored in index_data, but will not be tracked by git. Make sure to build the index after a fresh clone, otherwise Next might not build specific pages (file index_data/x.json not found).

Project Structure Overview

  • data: Contains hand-curated data, such as sidebar ordering, blog data, etc
  • index_data: Contains generated data, usually generated by scripts like scripts/extract-tocs.js
  • compilers: Contains a subdirectory with independently installed ReScript compilers, to be able to compile / test examples with different ReScript versions
  • misc_docs: Contains pages independent resources that are embedded in miscellaneous pages (e.g. for the syntax lookup)
  • pages: All Next pages. Those are written in JS / MDX, some pages are re-exporting ReScript based pages from the src/ directory.
  • styles: Contains all extra CSS that cannot be expressed with Tailwind
  • src: Contains all ReScript related code for the UI. Within src, you will also find all ReScript based Next pages that are re-exported in the pages directory
    • /bindings: (Zero-cost) bindings to JS libraries / apis
    • /common: ReScript modules that are neither bindings, nor components
    • /components: ReScript / React components used by multiple pages
    • /ffi: (to be deprecated) Plain JS that some ReScript code binds to (use raw statements for that)
    • /layouts: All Next layouts used in our pages. Check out src/common/App.res for mapping layouts to routes
  • plugins: Contains plugins for all kinds of things: HighlightJS, MDX, webpack loader, etc.
  • scripts: Contains a mix of JS / ReScript based scripts that do all kind of code generation / code introspection logic
  • tailwind.config.js: Contains our Tailwind configuration for all the low level design tokens

Run Tests

Markdown Codeblock Tests

We check the validity of our code examples marked with:

  • ```res example (ReScript code snippet)
  • ```res sig (signature)
  • ```res prelude (ReScript code snippet available for all subsequent code snippets)

Run the checks with:

node scripts/test-examples.mjs

Markdown Hyperlink Tests

We are also verifying markdown href links to relative resources (via [text](url) syntax) with our scripts/test-hrefs.js script. Here is a short explanation on how the href testing works:

Domain relative links, such as /docs/manual/latest, ./introduction, introduction, /docs/foo/introduction.md will be verified. That means the tester will check if given path exists in the pages directory.

If there are any anchor refs, such as /docs/manual#test, then the anchor will be ignored for the specific file path check. If there are any hrefs with .md, .mdx or .html file extension, then those will be stripped before the check happens (the markdown renderer drops file extensions on relative links as well).

External hrefs, such as https://www.hello.world, //www.hello.world will NOT be checked since they are assumed to be external resources.

Here is an example on how to run the tests:

# Tests all files
node scripts/test-hrefs.mjs

# Or just a subset (glob pattern)
node scripts/test-hrefs.mjs "pages/docs/manual/**/*.mdx"

Continous Integration

Always make sure to run npm test before pushing any content, otherwise our CI might trigger a failure warning. Failing branches are very unlikely to be merged.

Design / UX

Design mockups can be found here.

Be aware that some screen designs might still be work in progress, if you have any design / UX questions, either comment directly on the design tool as guest, or open an issue.

Useful commands

Build CSS seperately via npx postcss (useful for debugging)

# Devmode
npx postcss styles/main.css -o test.css

# Production
NODE_ENV=production npx postcss styles/main.css -o test.css

Writing Blog Posts

In case you are a blog author, please refer to our guide on writing blog posts.

How to Add Your Company Logo to Our Front Page

In case your company is a user of ReScript and wants to be displayed on our front page ("Trusted by our users" section), do the following:

  • Get your logo as a black / white .svg version and use #979AAD as a fill color (check out the existing logos on our front page).
  • Put your logo into the public/static/lp folder; the file should be named after your company.
  • Open src/common/OurUsers.res and add your info
  • Commit, push, and open a PR.

Contributing

Please make sure to first read and comply to our Code of Conduct and check out our CONTRIBUTING.md file to learn how to get started with our contribution process!

rescript-lang.org's People

Contributors

a-c-sreedhar-reddy avatar aspeddro avatar baransu avatar bdunn313 avatar bettistein avatar bobzhang avatar brettcannon avatar chenglou avatar cknitt avatar cometkim avatar cristianoc avatar dzakh avatar fhammerschmidt avatar jdeisenberg avatar jderochervlk avatar jeong-sik avatar jiaek avatar kellydanma avatar kevanstannard avatar lessp avatar minnozz avatar moox avatar mununki avatar nikgraf avatar ryyppy avatar sync avatar tsnobip avatar weakish avatar wontheone1 avatar zth avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

rescript-lang.org's Issues

Difficult to find where to report issues from rescript-lang.org

When browsing rescript-lang.org is hard to figure out where to report issues like broken links and typos.

Currently I clicked on the github link in the top right and navigates to ReScript Github profile
image

I would expect to find the repo for rescript-lang.org there, so I can open a github issue. So then I had to search until I found that this repo was under the reason-association.

I suggest placing an easy call to action for reporting issues

Add reason syntax to latest version docs

I believe the best way to use rescript atm is using reason syntax. since it's more mature and has a greater editor support.
don't get me wrong I like rescript syntax (I even wrote small vim syntax for it) and appreciate all the work done behind the scene to move to new syntax (especially the work done by @IwanKaramazow for parser) but the new syntax still needs a bit more time to be more mature and polished (there are some bugs occasionally and it's getting better by adding more features).
it makes adoption a bit harder, people don't want to use a language with immature parser and w/o editor support, I think prioritizing rescript syntax in the docs atm makes people feel using it is the best option and reason syntax is not supported in newer versions.

Add section about JSON literal

https://github.com/reason-association/reasonml.org/blob/master/pages/docs/reason-compiler/latest/function.mdx#fixed-arguments

The [@bs.as "exit"] and the placeholder _ argument together indicates that you want the first argument to compile to the string "exit". You can also use any JSON literal with bs.as: [@bs.as {json|true|json}], [@bs.as {json|{"name": "John"}|json}], etc.

Above was about everything I could find about JSON literal on the doc and it doesn't have its own section. Also, it is hard to find about this. I think it should be included in a doc about JSON or have its own page and better paragraphs.

Add TS interop tutorial with links to GenType

Just found out about ReScript, looks very promising. But I almost threw it to the trash because I thought there was no TS interop. Shouldn't genType for TS be one of the main parts of Language Manual?

Document co / contravariance (`<+a>`, `<-a>`)

This one is definitely an advanced topic.

  • What does + and - mean?
  • What syntax constructs are possible? (type, function, etc.)
  • What practical use-cases does it have / Why do we need it?

Things to avoid:

  • Complex / too scientific wording
  • Too generic examples without practical context

Hints:

  • We use a covariant type in Js.Promise.t (see it here)

Add more detailed documentation of bs decorators

Right now, there's a section that lists them, but information about how to use them is scattered in quite a few places, turning them into hidden knowledge. This will definitely confuse beginners and make them want to go back to their former community.

[Doc] Invalid `Module.()` syntax

Hi,

It looks like the syntactic sugar about opening a module indicated on https://rescript-lang.org/docs/manual/latest/module#opening-a-module isn't valid anymore in rescript.

On the playground, the following code

module School = {
  type profession = Teacher | Director

  let person1 = Teacher
  let getProfession = (person) =>
    switch person {
    | Teacher => "A teacher"
    | Director => "A director"
    }
}

School.(getProfession(person1))

will produce the error

[E] Line 12, column 8:
I'm not sure what to parse here when looking at "(".

on the last line with the res syntax.

Typo: Rogue ';' in 'let binding' docs

Currently there is a rogue ';' in the let binding section of the docs in the 'Design Decisions' section of the docs:

if displayGreeting {
  let message = "Enjoying the docs so far?"
  Js.log(message)
}; // <~ here

My understanding is that this is no longer necessary to have a semicolon here, so it can be dropped. Please let me know if I am mistaken as I'm not 100% confident given the changeover to ReScript and optional semicolons.

Please link to old docs?

Could we please link to the old docs at https://bucklescript.netlify.app/ ? As a kindness for people who are still on versions of Bucklescript older than 8.0.0. The company where I work is doing our best to migrate to 8.0.0 but we're not there yet. No one on my team knew how to find the old docs, and the only reason I knew is because I asked on the Discord channel. It shouldn't be that hidden. Please, for the sake of long time bucklescript users, can we support the old docs a little?

Javascript issues on Firefox + noscript

Hello,
I have issues opening any page on https://rescript-lang.org/ on Firefox. I guess the issue is related with the noscript extension.
When opening the page, I briefly see the content, then the page goes blank, and the "A webpage is slowing down your browser" banner appears.
The console is spammed with the following error :

TypeError: o.apply is not a function
    NextJS 57

After stopping Js execution and opening the NoScript panel, the site went fine after activating scripts from jsdeliver.net

Typo in "External"

In the guide to external it says:

Imagine writing a let binding, but

external is like a let binding, but:

So either something is missing in the first sentence or it can be removed altogether ๐Ÿ™‚

Extensible variants are undocumented

transferred from rescript-lang/rescript-compiler#4869 by @earksiinni

I encountered the following code in the wild:

type thunk('state) = ..;

type ReduxThunk.thunk(_) +=
  | StringAction (stringAction)
  | CounterAction (action);

This code essentially creates an "extensible variant" called thunk and adds two constructors to it. I'm not certain whether I'm using the right term to explain this feature since it's not described anywhere in the ReasonML or ReScript docs. It should be.

The ReScript docs also don't explain .., which is an elision, which is documented in ReasonML's docs on open objects. ReScript's docs don't talk about open objects at all, let alone elisions, but both sets of docs omit the fact that you can apparently use elisions to define extensible variants.

The use of the += feature isn't described anywhere in either set of docs, either.

It would be great to describe all these features, and while we're at it it would be great to have ReScript docs on polymorphic variants and how they differ from this kind of extensible non-polymorphic variant.

Make ES6 the default output for the playground

It's probably what 90% of the people would be using (isn't it the defacto standard for NodeJS as well at this point?).

Also it would be great to store the settings in localstorage, so they are restored on refresh

Community: ReScript Editor mode

Hello everyone,

Today I was talking with a member of reasonml-editor on this PR reasonml-editor/reason-mode#53

We have a idea to create a separated mode to ReScript in my case I'll use in Emacs but I think it can be centralized to editor cases.

I created an organization called https://github.com/rescript-editor to create and share some modes, but I think it can be make at this community.

What do you think about?

In the first step I'm thinking to fork reason-mode to just support ReScript extensions files at Emacs.

Syntax lookup widget

We recently found this really neat widget for discovering JS operators, and we think this is a really great way to look for dedicated syntax constructs as well.

Some rough implementation details on how this widget could be built:

We'd create a SyntaxWidget component, that will import some arbitrary markdown files as React components, and put them in an array of items.

type mdxComponent = Js.t({..}) => React.element
@module("./syntax-widget/decorator-module.mdx") external decoratorModule: mdxComponent = "default"

type item = {
  keywords: array<string>,
  summary: string,
  component: mdxComponent
}

let items = [
  keywords: ["bs.module", "module"],
  component: decoratorModule
];

let make = () => {
  // use state to fuzzy find through the keywords and get the right `component` item
   let component = findMatches(items);


   <div>
    <input type_="text" />
    <div>
        { component(Js.Obj.empty()) }        
    </div>
   </div>
 }

In our markdown file (probably within the pages/docs/manual/latest folder), we'd use our new component like this:

import { make as SyntaxWidget } from "components/SyntaxWidget"

<SyntaxWidget />

Remarks

With this implementation we are pretty flexible with editing the content in a separate syntax folder which could also act as our syntax spec documentation.

In case we need to be flexible with the styling, we could wrap the SyntaxWidget with a MdxProvider with custom a custom components prop.

The usage example of the Lazy Values feature is confusing

I'm new in the ReScript community and haven't written any working code yet. So for now, I'm just covering all the listed language features and I have to admit that I already love it.

But I've found that the usage example of the Lazy Values feature is confusing. The biggest accent in the doc is made on the fact that the value is only computed once. Yeah, that's cool, but then I've remembered about another cool feature called something like block let binding (literally a self-called function) where value is also computed once when it initialized.

And then I had a dilemma then what for..., and realized that the biggest advantage of the Lazy Values feature is the Lazy.force that gives you total control under when you want to compute the value of a variable and either want to do it at all.

So as an example I think it's more appropriate to add something like this:

type payload =
  | NeedFilesWithLogHi
  | NeedFilesWithLogBye
  | NoResult
let getFiles =
  lazy({
    Js.log("Reading dir")
    Node.Fs.readdirSync("./pages")
  })

let data = NeedFilesWithLogHi
switch data {
| NeedFilesWithLogHi => {
  Js.log("Hi")
  getFiles
}
| NeedFilesWithLogBye => {
  Js.log("Bye")
  getFiles
| NoResult =>
  Js.log("Bah.")
}

We kind of define the lazy value in an upper scope, but don't compute it if this is not really necessary.

After that, I'll have a question "why not to use a normal function instead" and I'll gladly listen to your arguments that a lazy value is only computed once, doesn't have a runtime overhead etc-etc. I think at that point it will be more reasonable.

Playground: Keep all query parameters except `code` from shared url

Right now when you are loading a shared URL, all the query parameters are getting stripped.
Actually we only want to remove code, because this particular query param can get out of date very easily.

Would also be great to update the query params in the url when a setting has been toggled

AST explorer in playground

As a complete newbie teaching myself Rescript, it's very difficult to know what to google for when you're not sure on some syntax. I find it very useful to past a snippet into a tool like https://astexplorer.net to find out what's going on in the syntax.

Could such a tool be added to the playground? Maybe it would be easier to integrate Recript into astexplorer itself, such is the case for Reason: https://astexplorer.net/#/gist/3412c637cd5ffe6019f772f540d14365/f0a2a0945bba8cade7a1d28896409db872a0af0e

Rescript users section

Should we have a section showing companies/projects which are using rescript like what we had in old bucklescript and reason website?

Sync color palette with up to date design

Since we released the logo, our primary brand color fire has changed to a more red-pinkish value #e6484f.
We need to verify this change with the current website design

Missing pieces from old docs (v3 to v7)

According to #102 there are apparently some missing pieces on features that ppl rely on.
This thread lists missing items, so we can add them back accordingly.

  • bs.deriving (jsConverter, abstract)
  • Node API docs
  • decorator index pointing to the relevant sections

If anyone is missing some other information, please add this to this thread. Some features were initially left out, since there are a lot of features with duplicate functionality.

Layout thrasing on rescript-lang.org

I recently looked at rescript-lang.org on a fresh browser and the twitter logo went full screen for half a sec, i'm assuming this happens b/c tailwind or the css doesn't load fast enough

not sure if this is a real big issue but wanted to post it anyway

Add OCaml output to rescript playground

For people considering ReScript for full stack development I think it would help looking at what certain rescript snippet produces when compiled to OCaml. I think the reasonml Try already does that, since rescript is like the natural successor to reasonml. I think it would help to have that too may not on by default but a toggle in settings like there is for res and re syntaxes.

Wrong Pipe Type Used For Promise

(The Documentation)

According to the documentation and the definition, Js.Promise.then_ receives a callback as the first argument, and the promise to chain as the second argument. However, inside the documentation, -> is used instead of |>, which makes the code invalid.

"a".[0] syntax is not working

According to the ReScript manual, a string "a" can be converted to char 'a' by .[0]

To convert a String to a Char, use "a".[0]. To convert a Char to a String, use String.make(1, 'a').

but the syntax is not working in ReScript.

>>>> Start compiling
bsb: [1/5] src/Test.ast
FAILED: src/Test.ast

  Syntax error!
  /home/cometkim/Workspace/tmp/rescript-template-test-8/src/Test.res:1:13

  1 โ”‚ let a = "a".[0]
  2 โ”‚

  I'm not sure what to parse here when looking at "[".


  Syntax error!
  /home/cometkim/Workspace/tmp/rescript-template-test-8/src/Test.res:1:14

  1 โ”‚ let a = "a".[0]
  2 โ”‚

  consecutive statements on a line must be separated by ';' or a newline

bsb: [2/5] src/App-MyRescriptApp.cmj
FAILED: src/App-MyRescriptApp.cmj

I'm not sure it's a compiler bug or It is just a mistake. I'd like to update the docs to use String.unsafe_get instead.

can not build it locally

arning ../package.json: No license field
$ next
ready - started server on http://localhost:3000
Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.
See here for more info: https://err.sh/next.js/built-in-css-disabled

info  - automatically enabled Fast Refresh for 1 custom loader
info  - Using external babel configuration from /Users/hongbozhang/git/rescript-lang.org/.babelrc
error - ./layouts/CommunityLayout.bs.js:13:15
Module not found: Can't resolve '../index_data/community_toc.json'
  11 | import * as Router from "next/router";
  12 | 
> 13 | var tocData = (require('../index_data/community_toc.json'));
     |               ^
  14 | 
  15 | var overviewNavs = [
  16 |   {
Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry

event - build page: /next/dist/pages/_error
wait  - compiling...
error - ./layouts/CommunityLayout.bs.js:13:15
Module not found: Can't resolve '../index_data/community_toc.json'
  11 | import * as Router from "next/router";
  12 | 
> 13 | var tocData = (require('../index_data/community_toc.json'));
     |               ^
  14 | 

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.