Expected Output File

[lan-lyu]

Created the expected output file using a BaseObject and method chaining: https://github.com/cmudig/apigen/blob/structureCleaning/GeneratedFiles/output.ts.

When run

const VLspec = spec(mark("line"), data("example.csv"), encode(x("meters", "quantitative"), y("year", "quantitative"), color().value("color")));
console.log(toJSON(VLspec));

it generated a json like this

{
  "mark": { "type": "line" },
  "data": { "value": "example.csv" },
  "encode": {
    "x": { "field": "meters", "type": "quantitative" },
    "y": { "field": "year", "type": "quantitative" },
    "color": { "value": "color" }
  }
}

[lan-lyu]

Some Questions

Name of Field and Method

There is a conflict between the class filed name and the class method name if we want to implement the vl.color().value("green")

The code structure is like this:

class Color extends BaseObject {
    constructor(private field_arg?: { field: string, type: "quantitative" | "ordinal" }, private value_arg?: string) {
        super();
        init(this);
    }

    field(field: string, type: "quantitative" | "ordinal") {
        this.field_arg = { field, type };
    }

    value(value: string) {
        this.value_arg = value;
    }
}

The output json will be:

"encode_arg": {
  "x_arg": { "field_arg": "meters", "type_arg": "quantitative" },
  "y_arg": { "field_arg": "meters", "type_arg": "quantitative" },
  "color_arg": { "value_arg": "green" }
}

Now I remove those _arg when generating the json using vl.toJSON(spec), but it may be time-consuming when there is a large json.
Is there a way to solve the conflict between constructor(private value?: string) and value() (it will show an error of duplicate identifier) so that we can have a direct output of "color": {"value": "green"}?

FieldDef

Also as for FieldDef, should I use

constructor(private field?: { field: string, type: "quantitative" | "ordinal" })

or

interface FieldDef {
    field: string
    type: "quantitative" | "ordinal"
}
constructor(private field?: FieldDef)

I now use the upper one, but when the type become more complicated maybe the second one is better.

PositionDef

Below these ones, which should we provide?

// whether to have position()
x.position().field("height", "quantitative")
or
x.field("height", "quantitative")
or
x("height", "quantitative")

// how to pass fieldDef
x.field("height", "quantitative")
or
x.field({"height", "quantitative"})
or 
x.field({"field": "height", "type": "quantitative"})

The input is

interface FieldDef {
  field: string
  type: "quantitative" | "ordinal"
}

type PositionDef = FieldDef;

interface Encoding {
  x?: PositionDef;
  y?: PositionDef;
  color?: ColorDef;
}

Spec

const spec = vl.spec().mark().data().encode()
or
const spec = vl.spec(vl.mark(), vl.data(), vl.encode())
or
const spec = vl.mark().data().encode

[domoritz]

To solve the naming collision, you might want to make the members private. You can just signal that they are private with _ as a prefix and actually enforce it with a # prefix. The latter is a new js feature. https://caniuse.com/mdn-javascript_classes_private_class_fields