Merge pull request #736 from aspeddro/remove-unsafe-string-inter

Remove unsafe string interpolation `j`

Author: ryyppy

src/Blog.res

@@ -123,7 +123,7 @@ module BlogCard = {
           | Some(category) =>
             <>
               {React.string(category)}
-              {React.string(j` · `)}
+              {React.string(` · `)}
             </>
           | None => React.null
           }}

src/DocsOverview.res

@@ -27,10 +27,10 @@ let default = (~showVersionSelect=true) => {
   }
 
   let languageManual = [
-    ("Overview", j` /docs/manual/$version/introduction`),
-    ("Language Features", j`/docs/manual/$version/overview`),
-    ("JS Interop", j`/docs/manual/$version/embed-raw-javascript`),
-    ("Build System", j`/docs/manual/$version/build-overview`),
+    ("Overview", `/docs/manual/${version}/introduction`),
+    ("Language Features", `/docs/manual/${version}/overview`),
+    ("JS Interop", `/docs/manual/${version}/embed-raw-javascript`),
+    ("Build System", `/docs/manual/${version}/build-overview`),
   ]
 
   let ecosystem = [

src/Playground.res

@@ -125,7 +125,7 @@ module ResultPane = {
       <div className={"p-2 " ++ highlightClass}>
         <span className=prefixColor> {React.string(prefixText)} </span>
         <span className="font-medium text-gray-40">
-          {React.string(j` Line $row, column $column:`)}
+          {React.string(` Line ${row->Belt.Int.toString}, column ${column->Belt.Int.toString}:`)}
         </span>
         <AnsiPre className="whitespace-pre-wrap "> shortMsg </AnsiPre>
       </div>
@@ -247,7 +247,7 @@ module ResultPane = {
         "Formatting completed with 0 errors"
       } else {
         let toStr = Api.Lang.toString(toLang)
-        j`Switched to $toStr with 0 errors`
+        `Switched to ${toStr} with 0 errors`
       }
       <PreWrap> {React.string(msg)} </PreWrap>
     | Conv(Fail({fromLang, toLang, details})) =>
@@ -268,11 +268,11 @@ module ResultPane = {
       // We keep both cases though in case we change things later
       let msg = if fromLang === toLang {
         let langStr = Api.Lang.toString(toLang)
-        j`The code is not valid $langStr syntax.`
+        `The code is not valid ${langStr} syntax.`
       } else {
         let fromStr = Api.Lang.toString(fromLang)
         let toStr = Api.Lang.toString(toLang)
-        j`Could not convert from "$fromStr" to "$toStr" due to malformed syntax:`
+        `Could not convert from "${fromStr}" to "${toStr}" due to malformed syntax:`
       }
       <div>
         <PreWrap className="text-16 mb-4"> {React.string(msg)} </PreWrap>
@@ -310,7 +310,9 @@ module ResultPane = {
     | Nothing =>
       let syntax = Api.Lang.toString(targetLang)
       <PreWrap>
-        {React.string(j`This playground is now running on compiler version $compilerVersion with $syntax syntax`)}
+        {React.string(
+          `This playground is now running on compiler version ${compilerVersion} with ${syntax} syntax`,
+        )}
       </PreWrap>
     }
 
@@ -1053,7 +1055,7 @@ module ControlPanel = {
   }
 
   module ShareButton = {
-    let copyToClipboard: string => bool = %raw(j`
+    let copyToClipboard: string => bool = %raw(`
     function(str) {
       try {
       const el = document.createElement('textarea');
@@ -1406,7 +1408,7 @@ module App = {
 // Feel free to play around and compile some
 // ReScript code!
 
-let initialReContent = j`Js.log("Hello Reason 3.6!");`
+let initialReContent = `Js.log("Hello Reason 3.6!");`
 
 let default = (~props: Try.props) => {
   let router = Next.Router.useRouter()

src/Try.res

@@ -6,7 +6,7 @@ let default = (props: {"children": React.element}) => {
   <>
     <Meta title="ReScript Playground" description="Try ReScript in the browser" />
     <Next.Head>
-      <style> {React.string(j`body { background-color: #010427; } `)} </style>
+      <style> {React.string(`body { background-color: #010427; }`)} </style>
     </Next.Head>
     <div className="text-16">
       <div className="text-gray-40 text-14">

src/bindings/RescriptCompilerApi.res

@@ -26,7 +26,7 @@ module Lang = {
     | "ml" => OCaml
     | "re" => Reason
     | "res" => Res
-    | other => raise(DecodeError(j`Unknown language "$other"`))
+    | other => raise(DecodeError(`Unknown language "${other}"`))
     }
   }
 }
@@ -110,7 +110,7 @@ module LocMsg = {
     | #E => "E"
     }
 
-    j`[1;31m[$prefix] Line $row, $column:[0m $shortMsg`
+    `[1;31m[${prefix}] Line ${row->Belt.Int.toString}, ${column->Belt.Int.toString}:[0m ${shortMsg}`
   }
 
   // Creates a somewhat unique id based on the rows / cols of the locMsg
@@ -160,11 +160,11 @@ module Warning = {
     | Warn({warnNumber, details})
     | WarnErr({warnNumber, details}) =>
       let {LocMsg.row: row, column, shortMsg} = details
-      let msg = j`(Warning number $warnNumber) $shortMsg`
+      let msg = `(Warning number ${warnNumber->Belt.Int.toString}) ${shortMsg}`
       (row, column, msg)
     }
 
-    j`[1;31m[$prefix] Line $row, $column:[0m $msg`
+    `[1;31m[${prefix}] Line ${row->Belt.Int.toString}, ${column->Belt.Int.toString}:[0m ${msg}`
   }
 }
 
@@ -295,7 +295,7 @@ module CompileFail = {
     | "warning_flag_error" =>
       let warningFlag = WarningFlag.decode(json)
       WarningFlagErr(warningFlag)
-    | other => raise(DecodeError(j`Unknown type "$other" in CompileFail result`))
+    | other => raise(DecodeError(`Unknown type "${other}" in CompileFail result`))
     }
   }
 }
@@ -336,7 +336,7 @@ module ConversionResult = {
     | "syntax_error" =>
       let locMsgs = field("errors", array(LocMsg.decode), json)
       Fail({fromLang, toLang, details: locMsgs})
-    | other => Unknown(j`Unknown conversion result type "$other"`, json)
+    | other => Unknown(`Unknown conversion result type "${other}"`, json)
     } catch {
     | DecodeError(errMsg) => Unknown(errMsg, json)
     }

src/common/Ansi.res

@@ -52,7 +52,7 @@ module Sgr = {
     }
 }
 
-let esc = j`\u001B`
+let esc = `\u001B`
 
 let isAscii = (c: string) => Js.Re.test_(%re(`/[\x40-\x7F]/`), c)
 
@@ -324,7 +324,7 @@ module SgrString = {
     }
     let params = Belt.Array.map(e.params, Sgr.paramToString)->Js.Array2.joinWith(", ")
 
-    j`SgrString params: $params | content: $content`
+    `SgrString params: ${params} | content: ${content}`
   }
 }
 
@@ -338,14 +338,14 @@ module Printer = {
         open Js.String2
         replaceByRe(content, %re("/\n/g"), "\\n")->replace(esc, "")
       }
-      j`Text "$content" ($startPos to $endPos)`
+      `Text "${content}" (${startPos->Belt.Int.toString} to ${endPos->Belt.Int.toString})`
     | Sgr({params, raw, loc: {startPos, endPos}}) =>
       let raw = Js.String2.replace(raw, esc, "")
       let params = Belt.Array.map(params, Sgr.paramToString)->Js.Array2.joinWith(", ")
-      j`Sgr "$raw" -> $params ($startPos to $endPos)`
+      `Sgr "${raw}" -> ${params} (${startPos->Belt.Int.toString} to ${endPos->Belt.Int.toString})`
     | ClearSgr({loc: {startPos, endPos}, raw}) =>
       let raw = Js.String2.replace(raw, esc, "")
-      j`Clear Sgr "$raw" ($startPos to $endPos)`
+      `Clear Sgr "${raw}" (${startPos->Belt.Int.toString} to ${endPos->Belt.Int.toString})`
     }
 
   let plainString = (tokens: array<token>): string =>

src/common/BlogApi.res

@@ -134,7 +134,7 @@ module RssFeed = {
       Belt.Array.get(items, 0)
       ->Belt.Option.map(item => {
         let latestPubDateStr = item.pubDate->dateToUTCString
-        j`<lastBuildDate>$latestPubDateStr</lastBuildDate>`
+        `<lastBuildDate>${latestPubDateStr}</lastBuildDate>`
       })
       ->Belt.Option.getWithDefault("")
 
@@ -143,33 +143,34 @@ module RssFeed = {
       ->Js.Array2.map(({title, pubDate, description, href}) => {
         let descriptionElement = switch description {
         | "" => ""
-        | desc => j`<description>
-            <![CDATA[$desc]]>
+        | desc =>
+          `<description>
+            <![CDATA[${desc}]]>
           </description>`
         }
 
         // TODO: convert pubdate to string
         let dateStr = pubDate->dateToUTCString
-        j`
+        `
         <item>
-          <title> <![CDATA[$title]]></title>
-          <link> $href </link>
-          <guid> $href </guid>
-          $descriptionElement
-          <pubDate>$dateStr</pubDate>
+          <title> <![CDATA[${title}]]></title>
+          <link> ${href} </link>
+          <guid> ${href} </guid>
+          ${descriptionElement}
+          <pubDate>${dateStr}</pubDate>
         </item>`
       })
       ->Js.Array2.joinWith("\n")
 
-    let ret = j`<?xml version="1.0" encoding="utf-8" ?>
+    let ret = `<?xml version="1.0" encoding="utf-8" ?>
   <rss version="2.0">
     <channel>
-      <title>$siteTitle</title>
+      <title>${siteTitle}</title>
       <link>https://rescript-lang.org</link>
-      <description>$siteDescription</description>
+      <description>${siteDescription}</description>
       <language>en</language>
-      $latestPubDateElement
-$itemsStr
+      ${latestPubDateElement}
+${itemsStr}
     </channel>
   </rss>` //rescript-lang.org</link>
 

src/common/BlogFrontmatter.res

@@ -98,15 +98,15 @@ let decodeBadge = (str: string): Badge.t =>
   | "testing" => Testing
   | "preview" => Preview
   | "roadmap" => Roadmap
-  | str => raise(Json.Decode.DecodeError(j`Unknown category "$str"`))
+  | str => raise(Json.Decode.DecodeError(`Unknown category "${str}"`))
   }
 
 exception AuthorNotFound(string)
 
 let decodeAuthor = (~fieldName: string, ~authors, username) =>
   switch Js.Array2.find(authors, a => a.username === username) {
   | Some(author) => author
-  | None => raise(AuthorNotFound(j`Couldn't find author "$username" in field $fieldName`))
+  | None => raise(AuthorNotFound(`Couldn't find author "${username}" in field ${fieldName}`))
   }
 
 let authorDecoder = (~fieldName: string, ~authors, json) => {

src/common/CompilerManagerHook.res

@@ -28,7 +28,7 @@ module LoadScript = {
       loadScript(
         ~src=url,
         ~onSuccess=() => resolve(. Ok()),
-        ~onError=_err => resolve(. Error(j`Could not load script: $url`)),
+        ~onError=_err => resolve(. Error(`Could not load script: ${url}`)),
       )->ignore
     })
   }

src/common/Hooks.res

@@ -1,7 +1,7 @@
 /* Contains some generic hooks */
 %%raw("import React from 'react'")
 
-let useOutsideClick: (ReactDOM.Ref.t, unit => unit) => unit = %raw(j`(outerRef, trigger) => {
+let useOutsideClick: (ReactDOM.Ref.t, unit => unit) => unit = %raw(`(outerRef, trigger) => {
   function handleClickOutside(event) {
     if (outerRef.current && !outerRef.current.contains(event.target)) {
       trigger();
@@ -16,7 +16,7 @@ let useOutsideClick: (ReactDOM.Ref.t, unit => unit) => unit = %raw(j`(outerRef,
   });
 }`)
 
-let useWindowWidth: unit => option<int> = %raw(j` () => {
+let useWindowWidth: unit => option<int> = %raw(` () => {
   const isClient = typeof window === 'object';
 
   function getSize() {

src/components/CodeExample.res

@@ -29,7 +29,7 @@ module DomUtil = {
 }
 
 module CopyButton = {
-  let copyToClipboard: string => bool = %raw(j`
+  let copyToClipboard: string => bool = %raw(`
   function(str) {
     try {
       const el = document.createElement('textarea');

src/components/CodeMirror.res

@@ -8,7 +8,7 @@
     This file is providing the core functionality and logic of our CodeMirror instances.
  */
 
-let useWindowWidth: unit => int = %raw(j` () => {
+let useWindowWidth: unit => int = %raw(` () => {
   const isClient = typeof window === 'object';
 
   function getSize() {
@@ -460,7 +460,7 @@ module GutterMarker = {
     }
 
     let (row, col) = rowCol
-    marker->setId(j`gutter-marker_$row-$col`)
+    marker->setId(`gutter-marker_${row->Belt.Int.toString}-${col->Belt.Int.toString}`)
     marker->setClassName(
       "flex items-center justify-center text-14 text-center ml-1 h-6 font-bold hover:cursor-pointer " ++
       colorClass,
@@ -702,7 +702,7 @@ let make = // props relevant for the react wrapper
  */
   let errorsFingerprint = Belt.Array.map(errors, e => {
     let {Error.row: row, column} = e
-    j`$row-$column`
+    `${row->Belt.Int.toString}-${column->Belt.Int.toString}`
   })->Js.Array2.joinWith(";")
 
   React.useEffect1(() => {

src/layouts/LandingPageLayout.res

@@ -131,7 +131,7 @@ exports.Button = Button;`,
 
 module QuickInstall = {
   module CopyButton = {
-    let copyToClipboard: string => bool = %raw(j`
+    let copyToClipboard: string => bool = %raw(`
   function(str) {
     try {
       const el = document.createElement('textarea');