Merge pull request #38 from reasonml-community/rescript

ReScript

Author: cknitt

.gitignore

@@ -5,3 +5,4 @@ dist/
 .merlin
 .bsb.lock
 *.bs.js
+yarn-error.log

bsconfig.json

@@ -4,18 +4,17 @@
     "src",
     {
       "dir": "examples",
-      "type" : "dev",
-      "subdirs": true,
-    },
+      "type": "dev",
+      "subdirs": true
+    }
   ],
-  "bs-dependencies": ["reason-react"],
+  "bs-dependencies": ["@rescript/react"],
   "reason": {
-    "react-jsx": 3,
+    "react-jsx": 3
   },
-  "refmt": 3,
   "package-specs": {
     "module": "es6",
-    "in-source": true,
+    "in-source": true
   },
-  "suffix": ".bs.js",
+  "suffix": ".bs.js"
 }

examples/App.re renamed to examples/App.res

@@ -1,50 +1,46 @@
-type action =
-  | SetLocale(Locale.locale);
+type action = SetLocale(Locale.locale)
 
-let initialState = Locale.En;
+let initialState = Locale.En
 
 let reducer = (_, action) =>
-  switch (action) {
+  switch action {
   | SetLocale(locale) => locale
-  };
+  }
 
 // As an alternative to using IntlProvider like in the main make function below,
 // you can construct the intl instance yourself and pass it to RawIntlProvider instead.
 // This is especially useful if you need to create/use the intl instance outside of a
 // React component.
 module WithRawIntlProvider = {
   let createIntlForLocale = locale => {
-    let intlConfig =
-      ReactIntl.intlConfig(
-        ~locale=locale->Locale.toString,
-        ~messages=locale->Locale.translations->Translation.toDict,
-        (),
-      );
-    let intlCache = ReactIntl.createIntlCache();
-
-    ReactIntl.createIntl(intlConfig, intlCache);
-  };
-
-  [@react.component]
+    let intlConfig = ReactIntl.intlConfig(
+      ~locale=locale->Locale.toString,
+      ~messages=locale->Locale.translations->Translation.toDict,
+      (),
+    )
+    let intlCache = ReactIntl.createIntlCache()
+
+    ReactIntl.createIntl(intlConfig, intlCache)
+  }
+
+  @react.component
   let make = () => {
-    let (locale, dispatch) = reducer->React.useReducer(initialState);
+    let (locale, dispatch) = reducer->React.useReducer(initialState)
 
-    let intl =
-      React.useMemo1(() => createIntlForLocale(locale), [|locale|]);
+    let intl = React.useMemo1(() => createIntlForLocale(locale), [locale])
 
     <ReactIntl.RawIntlProvider value=intl>
       <Page locale setLocale={locale => locale->SetLocale->dispatch} />
-    </ReactIntl.RawIntlProvider>;
-  };
-};
+    </ReactIntl.RawIntlProvider>
+  }
+}
 
-[@react.component]
+@react.component
 let make = () => {
-  let (locale, dispatch) = reducer->React.useReducer(initialState);
+  let (locale, dispatch) = reducer->React.useReducer(initialState)
 
   <ReactIntl.IntlProvider
-    locale={locale->Locale.toString}
-    messages={locale->Locale.translations->Translation.toDict}>
+    locale={locale->Locale.toString} messages={locale->Locale.translations->Translation.toDict}>
     <Page locale setLocale={locale => locale->SetLocale->dispatch} />
-  </ReactIntl.IntlProvider>;
-};
+  </ReactIntl.IntlProvider>
+}

examples/Locale.re

@@ -0,0 +1,22 @@
+@module("./translations/en.json")
+external en: array<Translation.t> = "default"
+@module("./translations/ru.json")
+external ru: array<Translation.t> = "default"
+
+type locale =
+  | En
+  | Ru
+
+let all = [En, Ru]
+
+let toString = x =>
+  switch x {
+  | En => "en"
+  | Ru => "ru"
+  }
+
+let translations = x =>
+  switch x {
+  | En => en
+  | Ru => ru
+  }

examples/Locale.res

@@ -1,36 +1,34 @@
-open ReactIntl;
+open ReactIntl
 
-[@react.component]
+@react.component
 let make = (~locale, ~setLocale) => {
-  let intl = ReactIntl.useIntl();
-  let className = locale' => locale' === locale ? "active" : "";
+  let intl = ReactIntl.useIntl()
+  let className = locale' => locale' === locale ? "active" : ""
 
   <div className="container">
     <div className="buttons">
-      <button
-        className={Locale.En->className} onClick={_ => Locale.En->setLocale}>
+      <button className={Locale.En->className} onClick={_ => Locale.En->setLocale}>
         {Locale.En->Locale.toString->React.string}
       </button>
-      <button
-        className={Locale.Ru->className} onClick={_ => Locale.Ru->setLocale}>
+      <button className={Locale.Ru->className} onClick={_ => Locale.Ru->setLocale}>
         {Locale.Ru->Locale.toString->React.string}
       </button>
     </div>
     <div className="message">
       <FormattedMessage id="page.hello" defaultMessage="Hello" />
-      " "->React.string
+      {" "->React.string}
       <FormattedMessage id="page.world" defaultMessage="World" />
     </div>
     <div>
       {intl->Intl.formatMessage(PageLocale.today)->React.string}
-      " "->React.string
+      {" "->React.string}
       {intl->Intl.formatDate(Js.Date.make())->React.string}
-      " (intl.formatDate)"->React.string
+      {" (intl.formatDate)"->React.string}
       <br />
       {intl->Intl.formatMessage(PageLocale.today)->React.string}
-      " "->React.string
+      {" "->React.string}
       <FormattedDate value={Js.Date.make()} />
-      " (FormattedDate)"->React.string
+      {" (FormattedDate)"->React.string}
     </div>
     <div>
       <FormattedMessage
@@ -39,10 +37,9 @@ let make = (~locale, ~setLocale) => {
         values={
           "bold": text => <strong> text </strong>,
           "italic": text => <em> text </em>,
-          "combined": (italicBold, text) =>
-            <strong> italicBold text </strong>,
+          "combined": (italicBold, text) => <strong> italicBold text </strong>,
         }
       />
     </div>
-  </div>;
-};
+  </div>
+}

examples/Page.re renamed to examples/Page.res

@@ -0,0 +1,6 @@
+open ReactIntl
+@@intl.messages
+
+let hello = {id: "page.hello", defaultMessage: "Hello"}
+let world = {id: "page.world", defaultMessage: "World"}
+let today = {id: "page.today", defaultMessage: "Today is"}

examples/PageLocale.re

@@ -0,0 +1,19 @@
+type t = {
+  id: string,
+  defaultMessage: string,
+  message: Js.nullable<string>,
+}
+
+let toDict = (translations: array<t>) =>
+  translations->Belt.Array.reduce(Js.Dict.empty(), (dict, entry) => {
+    dict->Js.Dict.set(
+      entry.id,
+      switch entry.message->Js.Nullable.toOption {
+      | None
+      | Some("") =>
+        entry.defaultMessage
+      | Some(message) => message
+      },
+    )
+    dict
+  })

examples/PageLocale.res

@@ -7,6 +7,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <script src="./index.re"></script>
+    <script src="./index.bs.js"></script>
   </body>
 </html>

examples/Translation.re

@@ -0,0 +1,4 @@
+switch ReactDOM.querySelector("#app") {
+| Some(element) => ReactDOM.render(<App />, element)
+| None => ()
+}

examples/Translation.res

@@ -7,33 +7,33 @@
   "main": "src/ReactIntl.bs.js",
   "scripts": {
     "start": "parcel examples/index.html",
-    "build": "bsb -clean-world -make-world",
-    "watch": "bsb -clean-world -make-world -w",
-    "clean": "bsb -clean-world",
+    "build": "rescript build -with-deps",
+    "watch": "rescript build -with-deps -w",
+    "clean": "rescript clean -with-deps",
     "extract": "node examples/extractor",
     "preextract": "yarn run build",
-    "format": "bsrefmt --in-place **/*.re",
+    "format": "yarn rescript format",
     "test": "exit 0",
     "preversion": "yarn run clean"
   },
   "peerDependencies": {
-    "bs-platform": ">=7.2.2",
+    "@rescript/react": ">=0.10.0",
     "react-intl": ">=4.0.0",
-    "reason-react": ">=0.7.0"
+    "rescript": ">=9.1.0"
   },
   "devDependencies": {
-    "bs-platform": "7.3.2",
-    "bs-react-intl-extractor-bin": "0.9.0",
+    "@rescript/react": "^0.10.3",
+    "bs-react-intl-extractor-bin": "0.10.0",
     "bsb-js": "^1.1.7",
-    "parcel-bundler": "1.12.4",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
+    "parcel-bundler": "1.12.5",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "react-intl": "4.5.3",
-    "reason-react": "0.9.1"
+    "rescript": "^9.1.2"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/alexfedoseev/bs-react-intl.git"
+    "url": "https://github.com/reasonml-community/bs-react-intl"
   },
   "files": [
     "src",