From 047b35fad87bc21d12c5e2d38384e6428e31214c Mon Sep 17 00:00:00 2001
From: Khoa Nguyen <hi@khoanguyen.me>
Date: Sun, 4 Aug 2019 16:16:26 +0700
Subject: [PATCH] fix(bs): Mapping commonjs pkg to browserify

close https://github.com/Sketch-sh/sketch-sh/issues/247
---
 .vscode/settings.json                         |  3 ---
 client/src/container/Container_fetcher_npm.re | 27 ++++++++++---------
 .../Container_fetcher_npm_setting.re          | 16 +++++++++++
 client/src/pages/edit/Edit_main.re            |  5 +++-
 client/src/pages/edit/Edit_state.re           | 21 ++++++++++-----
 5 files changed, 49 insertions(+), 23 deletions(-)
 create mode 100644 client/src/container/Container_fetcher_npm_setting.re

diff --git a/.vscode/settings.json b/.vscode/settings.json
index f750c599..35e550fd 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,8 +1,5 @@
 {
   "git.ignoreLimitWarning": true,
-  "reason.diagnostics.tools": ["merlin", "bsb"],
-  "editor.formatOnSave": true,
-  "reason.format.width": 80,
   "javascript.updateImportsOnFileMove.enabled": "never",
   "reason_language_server.show_debug_errors": false,
   "workbench.colorCustomizations": {
diff --git a/client/src/container/Container_fetcher_npm.re b/client/src/container/Container_fetcher_npm.re
index 209e2fdd..fb49f922 100644
--- a/client/src/container/Container_fetcher_npm.re
+++ b/client/src/container/Container_fetcher_npm.re
@@ -142,6 +142,9 @@ module Jsdelivr = {
     // cdn_base/npm/thangngoc89@1.0.0/package.json
     let url =
       [|cdn_base, "npm", slug->Pkg.Slug.to_string, "package.json"|]->Url.join;
+    let decode_browser = json => {
+      D.dict(D.string, json)->Result.flatMapError(_ => Ok(Js.Dict.empty()));
+    };
     let decoder = json => {
       D.Pipeline.(
         succeed((dependencies, browser) =>
@@ -160,7 +163,7 @@ module Jsdelivr = {
           }
         )
         |> optionalField("dependencies", D.dict(D.string))
-        |> optionalField("browser", D.dict(D.string))
+        |> optionalField("browser", decode_browser)
         |> run(json)
       );
     };
@@ -302,6 +305,15 @@ Try to require a full path, for example: require($(pkg_slug)/path_to_file.js)|j}
 Try to require a full path, for example: require($(pkg_slug)/path_to_file.js)|j};
 
 let fetch_commonjs = (~pkg, ~url) => {
+  [%log.info "pkg_info"; ("pkg", pkg)];
+  let pkg =
+    switch (
+      Container_fetcher_npm_setting.package_map->Js.Dict.get(pkg.Pkg.name)
+    ) {
+    | Some(name) => {...pkg, name}
+    | None => pkg
+    };
+
   let fetch_result:
     Future.t(
       Belt.Result.t(
@@ -381,16 +393,6 @@ let fetch_commonjs = (~pkg, ~url) => {
   fetch_result;
 };
 
-/* TODO: This needs to come from kind of api */
-let umd_pathname: Js.Dict.t(string) = [%bs.raw
-  {|
-  {
-    "react": "umd/react.development.min.js",
-    "react-dom": "umd/react-dom.development.min.js"
-  }
-|}
-];
-
 let handle_npm = (~url, ~meta, ~pathname) => {
   [%log.info
     "npm fetching";
@@ -406,7 +408,8 @@ let handle_npm = (~url, ~meta, ~pathname) => {
     ("parsed_slug", Pkg.get_slug(pkg))
   ];
 
-  let is_umd = Js.Dict.get(umd_pathname, pkg.Pkg.name);
+  let is_umd =
+    Js.Dict.get(Container_fetcher_npm_setting.umd_pathname, pkg.Pkg.name);
 
   let fetch_result =
     switch (is_umd) {
diff --git a/client/src/container/Container_fetcher_npm_setting.re b/client/src/container/Container_fetcher_npm_setting.re
new file mode 100644
index 00000000..6550cca3
--- /dev/null
+++ b/client/src/container/Container_fetcher_npm_setting.re
@@ -0,0 +1,16 @@
+let umd_pathname: Js.Dict.t(string) = [%bs.raw
+  {|
+  {
+    "react": "umd/react.development.min.js",
+    "react-dom": "umd/react-dom.development.min.js"
+  }
+|}
+];
+
+let package_map: Js.Dict.t(string) = [%bs.raw
+  {|
+  {
+    "crypto": "crypto-browserify",
+  }
+|}
+];
diff --git a/client/src/pages/edit/Edit_main.re b/client/src/pages/edit/Edit_main.re
index d08c32ec..a2e96c74 100644
--- a/client/src/pages/edit/Edit_main.re
+++ b/client/src/pages/edit/Edit_main.re
@@ -37,7 +37,7 @@ module S = {
     ->style;
 };
 
-let default_value = {code|let str = React.string;
+let default_value_react = {code|let str = React.string;
 
 module Counter = {
   [@react.component]
@@ -55,6 +55,9 @@ module Counter = {
 
 ReactDOMRe.renderToElementWithId(<Counter name="Counter" />, "root");|code};
 
+let default_value = {code|[@bs.module] external ulid: unit=>string="ulid";
+
+Js.log(ulid());|code}
 let initial_files = {
   Belt.Map.String.empty
   ->Belt.Map.String.set("index.re", Edit_state.make_file(default_value))
diff --git a/client/src/pages/edit/Edit_state.re b/client/src/pages/edit/Edit_state.re
index 21b87eeb..1fbeb92f 100644
--- a/client/src/pages/edit/Edit_state.re
+++ b/client/src/pages/edit/Edit_state.re
@@ -12,7 +12,7 @@ let make_file = code => {
 };
 
 let get_extension: string => string = [%raw
-  filename => {|  filename.slice((filename.lastIndexOf(".") - 1 >>> 0) + 2)|}
+  filename => {| return filename.slice((filename.lastIndexOf(".") - 1 >>> 0) + 2)|}
 ];
 
 let get_extension = filename => {
@@ -56,14 +56,21 @@ let debounce_compile =
       switch (filename->get_extension) {
       | Some("re") => Some(Engine_bs.reason_compile(code))
       | Some("ml") => Some(Engine_bs.ocaml_compile(code))
-      | _ => None
+      | _ =>
+        %log.info
+        "Can't get file_extension";
+        None;
       }
     )
-    |> (
-      fun
-      | Some(c) => send(Compile_result(filename, c))
-      | None => ()
-    )
+    ->(
+        fun
+        | Some(c) => {
+            %log.info
+            "got compile_result";
+            send(Compile_result(filename, c));
+          }
+        | None => ()
+      )
   );
 
 let reducer = (action, state) => {