Started to add intl apis

Cargo.toml

@@ -24,6 +24,7 @@ gloo-utils = { version = "0.2", path = "crates/utils", optional = true }
 gloo-history = { version = "0.2", path = "crates/history", optional = true }
 gloo-worker = { version = "0.5", path = "crates/worker", optional = true }
 gloo-net = { version = "0.5", path = "crates/net", optional = true }
+gloo-intl = { version = "0.1", path = "crates/intl", optional = true }
 
 [features]
 default = [
@@ -38,6 +39,7 @@ default = [
     "history",
     "worker",
     "net",
+    "intl",
 ]
 futures = [
     "timers",
@@ -58,6 +60,7 @@ utils = ["gloo-utils"]
 history = ["gloo-history"]
 worker = ["gloo-worker"]
 net = ["gloo-net"]
+intl = ["gloo-intl"]
 
 [workspace]
 members = [
@@ -73,6 +76,7 @@ members = [
     "crates/worker",
     "crates/worker-macros",
     "crates/net",
+    "crates/intl",
 
     "examples/markdown",
     "examples/clock",

crates/intl/Cargo.toml

@@ -0,0 +1,18 @@
+[package]
+name = "gloo-intl"
+version = "0.1.0"
+authors = [
+    "Rust and WebAssembly Working Group",
+    # "Mendy Berger",
+]
+edition = "2021"
+license = "MIT OR Apache-2.0"
+repository = "https://github.com/rustwasm/gloo"
+description = "Clean Intl API for WASM Apps"
+readme = "README.md"
+keywords = ["intl", "i18l", "Internationalization", "localization"]
+categories = ["wasm", "api-bindings"]
+
+[dependencies]
+wasm-bindgen = "0.2"
+js-sys = "0.3"

crates/intl/README.md

@@ -0,0 +1,24 @@
+<div align="center">
+
+  <h1><code>gloo-intl</code></h1>
+
+  <p>
+    <a href="https://crates.io/crates/gloo-intl"><img src="https://img.shields.io/crates/v/gloo-intl.svg?style=flat-square" alt="Crates.io version" /></a>
+    <a href="https://crates.io/crates/gloo-intl"><img src="https://img.shields.io/crates/d/gloo-intl.svg?style=flat-square" alt="Download" /></a>
+    <a href="https://docs.rs/gloo-intl"><img src="https://img.shields.io/badge/docs-latest-blue.svg?style=flat-square" alt="docs.rs docs" /></a>
+  </p>
+
+  <h3>
+    <a href="https://docs.rs/gloo-intl">API Docs</a>
+    <span> | </span>
+    <a href="https://github.com/rustwasm/gloo/blob/master/CONTRIBUTING.md">Contributing</a>
+    <span> | </span>
+    <a href="https://discordapp.com/channels/442252698964721669/443151097398296587">Chat</a>
+  </h3>
+
+  <sub>Built with 🦀🕸 by <a href="https://rustwasm.github.io/">The Rust and WebAssembly Working Group</a></sub>
+</div>
+
+Wraps common `js_sys` Intl with a cleaner API.
+
+See the API docs to learn more

crates/intl/src/date_time_format.rs

@@ -0,0 +1,103 @@
+use super::utils::options;
+
+pub struct DateTimeFormat {
+    js: js_sys::Intl::DateTimeFormat,
+}
+
+// TODO: Add a `new` method that takes a strongly types locale. Maybe an enum.
+impl DateTimeFormat {
+    /// New DateTimeFormat instance from locale &str.
+    pub fn new_str(locale: &str, options: Options) -> Self {
+        let locales = js_sys::Array::of1(&wasm_bindgen::JsValue::from_str(locale));
+        Self::new_js_array(locales, options)
+    }
+    /// New DateTimeFormat instance from js_sys::Array of locales.
+    pub fn new_js_array(locales: js_sys::Array, options: Options) -> Self {
+        let options = options.to_js_object();
+        let js = js_sys::Intl::DateTimeFormat::new(&locales, &options);
+        Self { js }
+    }
+    /// Corresponds to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format
+    pub fn format(&self, date: &js_sys::Date) -> String {
+        self.js
+            .format()
+            .call1(&self.js, &date.into())
+            .unwrap()
+            .as_string()
+            .unwrap()
+    }
+}
+
+/// Corresponds to the options in https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat
+// TODO: add all options here.
+#[derive(Clone, Default)]
+pub struct Options {
+    pub year: Option<Year>,
+    pub month: Option<Month>,
+    pub day: Option<Day>,
+    pub hour: Option<Hour>,
+    pub minute: Option<Minute>,
+    pub second: Option<Second>,
+}
+impl Options {
+    // TODO: should be a derive macro?
+    fn to_js_object(&self) -> js_sys::Object {
+        let output = js_sys::Object::new();
+        if let Some(year) = &self.year {
+            pro(&output, "year", year.string_rep());
+        }
+        if let Some(month) = &self.month {
+            pro(&output, "month", month.string_rep());
+        }
+        if let Some(day) = &self.day {
+            pro(&output, "day", day.string_rep());
+        }
+        if let Some(hour) = &self.hour {
+            pro(&output, "hour", hour.string_rep());
+        }
+        if let Some(minute) = &self.minute {
+            pro(&output, "minute", minute.string_rep());
+        }
+        if let Some(second) = &self.second {
+            pro(&output, "second", second.string_rep());
+        }
+        output
+    }
+}
+
+fn pro(obj: &js_sys::Object, key: &str, value: &str) {
+    js_sys::Reflect::set(
+        &obj,
+        &wasm_bindgen::JsValue::from_str(key),
+        &wasm_bindgen::JsValue::from_str(value),
+    )
+    .unwrap();
+}
+
+options!(Year, {
+    Numeric: "numeric",
+    Digit2: "2-digit",
+});
+options!(Month, {
+    Numeric: "numeric",
+    Digit2: "2-digit",
+    Long: "long",
+    Short: "short",
+    Narrow: "narrow",
+});
+options!(Day, {
+    Numeric: "numeric",
+    Digit2: "2-digit",
+});
+options!(Hour, {
+    Numeric: "numeric",
+    Digit2: "2-digit",
+});
+options!(Minute, {
+    Numeric: "numeric",
+    Digit2: "2-digit",
+});
+options!(Second, {
+    Numeric: "numeric",
+    Digit2: "2-digit",
+});

crates/intl/src/lib.rs

@@ -0,0 +1,4 @@
+pub mod date_time_format;
+pub mod number_format;
+
+mod utils;

crates/intl/src/number_format.rs

@@ -0,0 +1,84 @@
+use super::utils::options;
+
+pub struct NumberFormat {
+    js: js_sys::Intl::NumberFormat,
+}
+
+// TODO: Add a `new` method that takes a strongly types locale. Maybe an enum.
+impl NumberFormat {
+    /// New NumberFormat instance from locale &str.
+    pub fn new_str(locale: &str, options: Options) -> Self {
+        let locales = js_sys::Array::of1(&wasm_bindgen::JsValue::from_str(locale));
+        Self::new_js_array(locales, options)
+    }
+    /// New NumberFormat instance from js_sys::Array of locales.
+    pub fn new_js_array(locales: js_sys::Array, options: Options) -> Self {
+        let options = options.to_js_object();
+        let js = js_sys::Intl::NumberFormat::new(&locales, &options);
+        Self { js }
+    }
+    /// Corresponds to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/format
+    pub fn format<T>(&self, number: T) -> String
+    where
+        T: Into<f64>,
+    {
+        let number: f64 = number.into();
+        self.js
+            .format()
+            .call1(&self.js, &number.into())
+            .unwrap()
+            .as_string()
+            .unwrap()
+    }
+}
+
+/// Corresponds to the options in https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat
+// TODO: add all options here.
+#[derive(Clone, Default)]
+pub struct Options {
+    pub style: Option<Style>,
+    pub currency_display: Option<CurrencyDisplay>,
+    pub currency_sign: Option<CurrencySign>,
+}
+impl Options {
+    // TODO: should be a derive macro?
+    fn to_js_object(&self) -> js_sys::Object {
+        let output = js_sys::Object::new();
+        if let Some(year) = &self.style {
+            pro(&output, "style", year.string_rep());
+        }
+        if let Some(month) = &self.currency_display {
+            pro(&output, "currencyDisplay", month.string_rep());
+        }
+        if let Some(day) = &self.currency_sign {
+            pro(&output, "currencySign", day.string_rep());
+        }
+        output
+    }
+}
+
+fn pro(obj: &js_sys::Object, key: &str, value: &str) {
+    js_sys::Reflect::set(
+        &obj,
+        &wasm_bindgen::JsValue::from_str(key),
+        &wasm_bindgen::JsValue::from_str(value),
+    )
+    .unwrap();
+}
+
+options!(Style, {
+    Decimal: "decimal",
+    Currency: "currency",
+    Percent: "percent",
+    Unit: "unit",
+});
+options!(CurrencyDisplay, {
+    Code: "code",
+    Symbol: "symbol",
+    NarrowSymbol: "narrowSymbol",
+    Name: "name",
+});
+options!(CurrencySign, {
+    Standard: "standard",
+    Accounting: "accounting",
+});