Why does Bucklescript indent the output javascript so much?

#1

Here I have some code that bucklescript has compiled, and the indentation makes it look very weird

// Generated by BUCKLESCRIPT VERSION 5.0.4, PLEASE EDIT WITH CARE
'use strict';

var Jest = require("@glennsl/bs-jest/src/jest.js");

((global.fetch = require('node-fetch')));

Jest.describe("Server", (function (param) {
        return Jest.testPromise("request", undefined, (function (param) {
                      var __x = fetch("https://api.ipify.org?format=json");
                      var __x$1 = __x.then((function (prim) {
                              return prim.text();
                            }));
                      return __x$1.then((function (text) {
                                    return Promise.resolve(Jest.Expect[/* toBe */2]("{\"ip\":\"83.93.187.177\"}", Jest.Expect[/* expect */0](text)));
                                  }));
                    }));
      }));

/*  Not a pure module */

The reasonml

[%raw "global.fetch = require('node-fetch')"];
open Jest;
open Expect;
open Js.Promise;

describe("Server", () =>
  testPromise("request", () =>
    Fetch.fetch("https://api.ipify.org?format=json")
    ->then_(Fetch.Response.text, _)
    ->then_(
        text =>
          expect(text) |> toBe("{\"ip\":\"83.93.187.177\"}") |> resolve,
        _,
      )
  )
);

and how it would look if you ran it through prettier:

// Generated by BUCKLESCRIPT VERSION 5.0.4, PLEASE EDIT WITH CARE
"use strict";

var Jest = require("@glennsl/bs-jest/src/jest.js");

global.fetch = require("node-fetch");

Jest.describe("Server", function(param) {
  return Jest.testPromise("request", undefined, function(param) {
    var __x = fetch("https://api.ipify.org?format=json");
    var __x$1 = __x.then(function(prim) {
      return prim.text();
    });
    return __x$1.then(function(text) {
      return Promise.resolve(
        Jest.Expect[/* toBe */ 2](
          '{"ip":"83.93.187.177"}',
          Jest.Expect[/* expect */ 0](text)
        )
      );
    });
  });
});

/*  Not a pure module */
#2

there simply aren’t any efforts spending to improve this because there aren’t any points in doing so. prettier is a good tool built for this job

#3

I actually went and look for if there were any settings for indentation width, it looked like it was indented with 8 spaces haha.

#4

I actually see where Kevin is coming from. .bs.js files are supposed to be readable. They’re the only place to set breakpoints, for instance, since BuckleScript doesn’t produce source maps last time I checked. So if you’re setting breakpoints, for instance, the only place you can set them is the js output. It’s not that convenient to format it manually on every rebuild.

P.S. Having said that, as far as generated JS goes, BuckleScript output is already very readable. It’s just that things can always be improved further :slight_smile:
P.S. And yes, on the other hand, Prettier output is “generated JS” too :thinking:

#5

The output is possibly indented with tab characters, and either your editor or the browser are expanding the tabs to 8 spaces. You might be able to change that in your editor settings and/or add a .prettierrc file.

I think tabs are a good default, because editors can be configured to display them in various ways, and people can reformat the output with Prettier if they want.

I’d like better support for 4-space indentation, since that’s what I use for readability in languages that have curly braces.