embed-raw-javascript.mdx

title	description	canonical
Embed Raw JavaScript	Utility syntax to for raw JS usage in ReScript	/docs/manual/v11.0.0/embed-raw-javascript

Embed Raw JavaScript

Paste Raw JS Code

First thing first. If you're ever stuck learning ReScript, remember that you can always just paste raw JavaScript code into our source file:

<CodeTab labels={["ReScript", "JS Output"]}>

%%raw(`
// look ma, regular JavaScript!
var message = "hello";
function greet(m) {
  console.log(m)
}
`)

// look ma, regular JavaScript!
var message = "hello";
function greet(m) {
  console.log(m)
}

The %%raw special ReScript call takes your code string and pastes it as-is into the output. You've now technically written your first ReScript file!

(The back tick syntax is a multiline string, similar to JavaScript's. Except for us, no escaping is needed inside the string. More on string in a later section.)

While %%raw lets you embed top-level raw JS code, %raw lets you embed expression-level JS code:

<CodeTab labels={["ReScript", "JS Output"]}>

let add = %raw(`
  function(a, b) {
    console.log("hello from raw JavaScript!");
    return a + b
  }
`)

Console.log(add(1, 2))

var add = function(a, b) {
  console.log("hello from raw JavaScript!");
  return a + b
};

console.log(add(1, 2));

The above code:

• declared a ReScript variable add,
• with the raw JavaScript value of a function declaration,
• then called that function in ReScript.

If your boss is ever worried that your teammates can't adopt ReScript, just let them keep writing JavaScript inside ReScript files =).

Debugger

You can also drop a %debugger expression in a body:

<CodeTab labels={["ReScript", "JS Output"]}>

let f = (x, y) => {
  %debugger
  x + y
}

function f(x, y) {
  debugger;
  return x + y | 0;
}

Output:

function f(x, y) {
  debugger; // JavaScript developer tools will set an breakpoint and stop here
  x + y;
}

Tips & Tricks

Embedding raw JS snippets isn't the best way to experience ReScript, though it's also highly useful if you're just starting out. As a matter of fact, the first few ReScript projects were converted through:

• pasting raw JS snippets inside a file
• examining the JS output (identical to the old hand-written JS)
• gradually extract a few values and functions and making sure the output still looks OK

At the end, we get a fully safe, converted ReScript file whose JS output is clean enough that we can confidently assert that no new bug has been introduced during the conversion process.

We have a small guide on this iteration here. Feel free to peruse it later.