add constructors to mark class types

src/mark.d.ts

@@ -482,6 +482,7 @@ export interface MarkOptions {
 
 /** The abstract base class for Mark implementations. */
 export class Mark {
+  constructor(data?: Data, channels?: Record<string, Channel>, options?: MarkOptions, defaults?: MarkOptions);
   /**
    * Renders a new plot, prepending this mark as the first element of **marks**
    * of the specified *options*, and returns the corresponding SVG element, or
@@ -492,8 +493,10 @@ export class Mark {
 
 /** A concrete Mark implementation. */
 export class RenderableMark extends Mark {
+  // Declared as a method rather than a property so that subclasses can override
+  // it and call super.render(). See https://www.typescriptlang.org/docs/handbook/release-notes/typescript-5-3.html#checks-for-super-property-accesses-on-instance-fields
   /** Renders this mark, returning a new SVGElement (or null). */
-  render: RenderFunction;
+  render(...args: Parameters<RenderFunction>): ReturnType<RenderFunction>;
 }
 
 /** A compound Mark, comprising other marks. */

src/marks/area.d.ts

@@ -205,4 +205,6 @@ export function areaX(data?: Data, options?: AreaXOptions & AreaLineOptions): Ar
 export function areaY(data?: Data, options?: AreaYOptions & AreaLineOptions): Area;
 
 /** The area mark. */
-export class Area extends RenderableMark {}
+export class Area extends RenderableMark {
+  constructor(data?: Data, options?: AreaOptions);
+}

src/marks/arrow.d.ts

@@ -111,4 +111,6 @@ export interface ArrowOptions extends MarkOptions {
 export function arrow(data?: Data, options?: ArrowOptions): Arrow;
 
 /** The arrow mark. */
-export class Arrow extends RenderableMark {}
+export class Arrow extends RenderableMark {
+  constructor(data?: Data, options?: ArrowOptions);
+}

src/marks/bar.d.ts

@@ -203,7 +203,11 @@ export function barX(data?: Data, options?: BarXOptions): BarX;
 export function barY(data?: Data, options?: BarYOptions): BarY;
 
 /** The barX mark. */
-export class BarX extends RenderableMark {}
+export class BarX extends RenderableMark {
+  constructor(data?: Data, options?: BarXOptions);
+}
 
 /** The barY mark. */
-export class BarY extends RenderableMark {}
+export class BarY extends RenderableMark {
+  constructor(data?: Data, options?: BarYOptions);
+}

src/marks/cell.d.ts

@@ -71,4 +71,6 @@ export function cellX(data?: Data, options?: CellOptions): Cell;
 export function cellY(data?: Data, options?: CellOptions): Cell;
 
 /** The cell mark. */
-export class Cell extends RenderableMark {}
+export class Cell extends RenderableMark {
+  constructor(data?: Data, options?: CellOptions);
+}

src/marks/contour.d.ts

@@ -89,4 +89,6 @@ export function contour(data?: Data, options?: ContourOptions): Contour;
 export function contour(options?: ContourOptions): Contour;
 
 /** The contour mark. */
-export class Contour extends RenderableMark {}
+export class Contour extends RenderableMark {
+  constructor(data?: Data, options?: ContourOptions);
+}

src/marks/density.d.ts

@@ -51,4 +51,6 @@ export interface DensityOptions extends MarkOptions {
 export function density(data?: Data, options?: DensityOptions): Density;
 
 /** The density mark. */
-export class Density extends RenderableMark {}
+export class Density extends RenderableMark {
+  constructor(data?: Data, options?: DensityOptions);
+}

src/marks/difference.d.ts

@@ -97,4 +97,6 @@ export function differenceX(data?: Data, options?: DifferenceOptions): Differenc
 export function differenceY(data?: Data, options?: DifferenceOptions): Difference;
 
 /** The difference mark. */
-export class Difference extends RenderableMark {}
+export class Difference extends RenderableMark {
+  constructor(data?: Data, options?: DifferenceOptions);
+}

src/marks/dot.d.ts

@@ -144,4 +144,6 @@ export function circle(data?: Data, options?: Omit<DotOptions, "symbol">): Dot;
 export function hexagon(data?: Data, options?: Omit<DotOptions, "symbol">): Dot;
 
 /** The dot mark. */
-export class Dot extends RenderableMark {}
+export class Dot extends RenderableMark {
+  constructor(data?: Data, options?: DotOptions);
+}

src/marks/frame.d.ts

@@ -20,4 +20,6 @@ export interface FrameOptions extends MarkOptions, InsetOptions, RectCornerOptio
 export function frame(options?: FrameOptions): Frame;
 
 /** The frame decoration mark. */
-export class Frame extends RenderableMark {}
+export class Frame extends RenderableMark {
+  constructor(options?: FrameOptions);
+}

src/marks/geo.d.ts

@@ -72,4 +72,6 @@ export function sphere(options?: GeoOptions): Geo;
 export function graticule(options?: GeoOptions): Geo;
 
 /** The geo mark. */
-export class Geo extends RenderableMark {}
+export class Geo extends RenderableMark {
+  constructor(data?: Data | GeoPermissibleObjects, options?: GeoOptions);
+}

src/marks/hexgrid.d.ts

@@ -31,4 +31,6 @@ export interface HexgridOptions extends MarkOptions {
 export function hexgrid(options?: HexgridOptions): Hexgrid;
 
 /** The hexgrid mark. */
-export class Hexgrid extends RenderableMark {}
+export class Hexgrid extends RenderableMark {
+  constructor(options?: HexgridOptions);
+}

src/marks/image.d.ts

@@ -104,4 +104,6 @@ export interface ImageOptions extends MarkOptions {
 export function image(data?: Data, options?: ImageOptions): Image;
 
 /** The image mark. */
-export class Image extends RenderableMark {}
+export class Image extends RenderableMark {
+  constructor(data?: Data, options?: ImageOptions);
+}

src/marks/line.d.ts

@@ -154,4 +154,6 @@ export function lineX(data?: Data, options?: LineXOptions): Line;
 export function lineY(data?: Data, options?: LineYOptions): Line;
 
 /** The line mark. */
-export class Line extends RenderableMark {}
+export class Line extends RenderableMark {
+  constructor(data?: Data, options?: LineOptions);
+}

src/marks/link.d.ts

@@ -74,4 +74,6 @@ export interface LinkOptions extends MarkOptions, MarkerOptions, CurveAutoOption
 export function link(data?: Data, options?: LinkOptions): Link;
 
 /** The link mark. */
-export class Link extends RenderableMark {}
+export class Link extends RenderableMark {
+  constructor(data?: Data, options?: LinkOptions);
+}

src/marks/raster.d.ts

@@ -259,4 +259,6 @@ export function interpolatorRandomWalk(options?: {
 }): RasterInterpolateFunction;
 
 /** The raster mark. */
-export class Raster extends RenderableMark {}
+export class Raster extends RenderableMark {
+  constructor(data?: Data, options?: RasterOptions);
+}

src/marks/rect.d.ts

@@ -270,4 +270,6 @@ export function rectX(data?: Data, options?: RectXOptions): Rect;
 export function rectY(data?: Data, options?: RectYOptions): Rect;
 
 /** The rect mark. */
-export class Rect extends RenderableMark {}
+export class Rect extends RenderableMark {
+  constructor(data?: Data, options?: RectOptions);
+}

src/marks/rule.d.ts

@@ -137,7 +137,11 @@ export function ruleX(data?: Data, options?: RuleXOptions): RuleX;
 export function ruleY(data?: Data, options?: RuleYOptions): RuleY;
 
 /** The ruleX mark. */
-export class RuleX extends RenderableMark {}
+export class RuleX extends RenderableMark {
+  constructor(data?: Data, options?: RuleXOptions);
+}
 
 /** The ruleY mark. */
-export class RuleY extends RenderableMark {}
+export class RuleY extends RenderableMark {
+  constructor(data?: Data, options?: RuleYOptions);
+}

src/marks/text.d.ts

@@ -239,4 +239,6 @@ export function textX(data?: Data, options?: TextXOptions): Text;
 export function textY(data?: Data, options?: TextYOptions): Text;
 
 /** The text mark. */
-export class Text extends RenderableMark {}
+export class Text extends RenderableMark {
+  constructor(data?: Data, options?: TextOptions);
+}

src/marks/tick.d.ts

@@ -72,7 +72,11 @@ export function tickX(data?: Data, options?: TickXOptions): TickX;
 export function tickY(data?: Data, options?: TickYOptions): TickY;
 
 /** The tickX mark. */
-export class TickX extends RenderableMark {}
+export class TickX extends RenderableMark {
+  constructor(data?: Data, options?: TickXOptions);
+}
 
 /** The tickY mark. */
-export class TickY extends RenderableMark {}
+export class TickY extends RenderableMark {
+  constructor(data?: Data, options?: TickYOptions);
+}

src/marks/tip.d.ts

@@ -110,4 +110,6 @@ export type TipFormat = string | ((d: any, i: number) => string);
 export function tip(data?: Data, options?: TipOptions): Tip;
 
 /** The tip mark. */
-export class Tip extends RenderableMark {}
+export class Tip extends RenderableMark {
+  constructor(data?: Data, options?: TipOptions);
+}

src/marks/vector.d.ts

@@ -116,4 +116,6 @@ export function vectorY(data?: Data, options?: VectorOptions): Vector;
 export function spike(data?: Data, options?: VectorOptions): Vector;
 
 /** The vector mark. */
-export class Vector extends RenderableMark {}
+export class Vector extends RenderableMark {
+  constructor(data?: Data, options?: VectorOptions);
+}

src/marks/waffle.d.ts

@@ -86,7 +86,11 @@ export function waffleY(data?: Data, options?: WaffleYOptions): WaffleY;
 export function waffleX(data?: Data, options?: WaffleXOptions): WaffleX;
 
 /** The waffleX mark. */
-export class WaffleX extends RenderableMark {}
+export class WaffleX extends RenderableMark {
+  constructor(data?: Data, options?: WaffleXOptions);
+}
 
 /** The waffleY mark. */
-export class WaffleY extends RenderableMark {}
+export class WaffleY extends RenderableMark {
+  constructor(data?: Data, options?: WaffleYOptions);
+}

test/mark-constructors-test.ts

@@ -0,0 +1,172 @@
+// Verify that all mark classes can be extended.
+// See https://github.com/observablehq/plot/issues/2422
+
+import * as Plot from "@observablehq/plot";
+import {describe, it} from "vitest";
+
+describe("mark constructors", () => {
+  const data = [1, 2, 3];
+
+  // data + options
+  class MyArea extends Plot.Area {
+    constructor(data: Plot.Data, options: Plot.AreaOptions) {
+      super(data, options);
+    }
+  }
+  class MyArrow extends Plot.Arrow {
+    constructor(data: Plot.Data, options: Plot.ArrowOptions) {
+      super(data, options);
+    }
+  }
+  class MyBarX extends Plot.BarX {
+    constructor(data: Plot.Data, options: Plot.BarXOptions) {
+      super(data, options);
+    }
+  }
+  class MyBarY extends Plot.BarY {
+    constructor(data: Plot.Data, options: Plot.BarYOptions) {
+      super(data, options);
+    }
+  }
+  class MyCell extends Plot.Cell {
+    constructor(data: Plot.Data, options: Plot.CellOptions) {
+      super(data, options);
+    }
+  }
+  class MyContour extends Plot.Contour {
+    constructor(data: Plot.Data, options: Plot.ContourOptions) {
+      super(data, options);
+    }
+  }
+  class MyDensity extends Plot.Density {
+    constructor(data: Plot.Data, options: Plot.DensityOptions) {
+      super(data, options);
+    }
+  }
+  class MyDot extends Plot.Dot {
+    constructor(data: Plot.Data, options: Plot.DotOptions) {
+      super(data, options);
+    }
+  }
+  class MyGeo extends Plot.Geo {
+    constructor(data: Plot.Data, options: Plot.GeoOptions) {
+      super(data, options);
+    }
+  }
+  class MyImage extends Plot.Image {
+    constructor(data: Plot.Data, options: Plot.ImageOptions) {
+      super(data, options);
+    }
+  }
+  class MyLine extends Plot.Line {
+    constructor(data: Plot.Data, options: Plot.LineOptions) {
+      super(data, options);
+    }
+  }
+  class MyLink extends Plot.Link {
+    constructor(data: Plot.Data, options: Plot.LinkOptions) {
+      super(data, options);
+    }
+  }
+  class MyRaster extends Plot.Raster {
+    constructor(data: Plot.Data, options: Plot.RasterOptions) {
+      super(data, options);
+    }
+  }
+  class MyRect extends Plot.Rect {
+    constructor(data: Plot.Data, options: Plot.RectOptions) {
+      super(data, options);
+    }
+  }
+  class MyRuleX extends Plot.RuleX {
+    constructor(data: Plot.Data, options: Plot.RuleXOptions) {
+      super(data, options);
+    }
+  }
+  class MyRuleY extends Plot.RuleY {
+    constructor(data: Plot.Data, options: Plot.RuleYOptions) {
+      super(data, options);
+    }
+  }
+  class MyText extends Plot.Text {
+    constructor(data: Plot.Data, options: Plot.TextOptions) {
+      super(data, options);
+    }
+  }
+  class MyTickX extends Plot.TickX {
+    constructor(data: Plot.Data, options: Plot.TickXOptions) {
+      super(data, options);
+    }
+  }
+  class MyTickY extends Plot.TickY {
+    constructor(data: Plot.Data, options: Plot.TickYOptions) {
+      super(data, options);
+    }
+  }
+  class MyTip extends Plot.Tip {
+    constructor(data: Plot.Data, options: Plot.TipOptions) {
+      super(data, options);
+    }
+  }
+  class MyVector extends Plot.Vector {
+    constructor(data: Plot.Data, options: Plot.VectorOptions) {
+      super(data, options);
+    }
+  }
+  class MyWaffleX extends Plot.WaffleX {
+    constructor(data: Plot.Data, options: Plot.WaffleXOptions) {
+      super(data, options);
+    }
+  }
+  class MyWaffleY extends Plot.WaffleY {
+    constructor(data: Plot.Data, options: Plot.WaffleYOptions) {
+      super(data, options);
+    }
+  }
+
+  // no data
+  class MyFrame extends Plot.Frame {
+    constructor(options: Plot.FrameOptions) {
+      super(options);
+    }
+  }
+  class MyHexgrid extends Plot.Hexgrid {
+    constructor(options: Plot.HexgridOptions) {
+      super(options);
+    }
+  }
+
+  it("Area", () => Plot.plot({marks: [new MyArea(data, {x1: Plot.identity, y1: Plot.identity})]}));
+  it("Arrow", () =>
+    Plot.plot({
+      marks: [new MyArrow(data, {x1: Plot.identity, y1: Plot.identity, x2: Plot.identity, y2: Plot.identity})]
+    }));
+  it("BarX", () => Plot.plot({marks: [new MyBarX(data, {x1: 0, x2: Plot.identity, y: Plot.identity})]}));
+  it("BarY", () => Plot.plot({marks: [new MyBarY(data, {y1: 0, y2: Plot.identity, x: Plot.identity})]}));
+  it("Cell", () => Plot.plot({marks: [new MyCell(data, {x: Plot.identity})]}));
+  it("Contour", () =>
+    Plot.plot({marks: [new MyContour(data, {x: Plot.identity, y: Plot.identity, fill: Plot.identity})]}));
+  it("Density", () => Plot.plot({marks: [new MyDensity(data, {x: Plot.identity, y: Plot.identity})]}));
+  it("Dot", () => Plot.plot({marks: [new MyDot(data, {x: Plot.identity})]}));
+  it("Geo", () => Plot.plot({marks: [new MyGeo([{type: "Point", coordinates: [0, 0]}], {geometry: Plot.identity})]}));
+  it("Image", () => Plot.plot({marks: [new MyImage(data, {x: Plot.identity, y: Plot.identity, src: "test.png"})]}));
+  it("Line", () => Plot.plot({marks: [new MyLine(data, {x: Plot.identity, y: Plot.identity})]}));
+  it("Link", () =>
+    Plot.plot({
+      marks: [new MyLink(data, {x1: Plot.identity, y1: Plot.identity, x2: Plot.identity, y2: Plot.identity})]
+    }));
+  it("Raster", () =>
+    Plot.plot({marks: [new MyRaster(data, {x: Plot.identity, y: Plot.identity, fill: Plot.identity})]}));
+  it("Rect", () => Plot.plot({marks: [new MyRect(data, {x1: Plot.identity, x2: Plot.identity})]}));
+  it("RuleX", () => Plot.plot({marks: [new MyRuleX(data, {x: Plot.identity})]}));
+  it("RuleY", () => Plot.plot({marks: [new MyRuleY(data, {y: Plot.identity})]}));
+  it("Text", () => Plot.plot({marks: [new MyText(data, {x: Plot.identity, text: Plot.identity})]}));
+  it("TickX", () => Plot.plot({marks: [new MyTickX(data, {x: Plot.identity})]}));
+  it("TickY", () => Plot.plot({marks: [new MyTickY(data, {y: Plot.identity})]}));
+  it("Tip", () => Plot.plot({marks: [new MyTip(data, {x: Plot.identity})]}));
+  it("Vector", () => Plot.plot({marks: [new MyVector(data, {x: Plot.identity, y: Plot.identity})]}));
+  it("WaffleX", () => Plot.plot({marks: [new MyWaffleX(data, {x1: 0, x2: Plot.identity, y: Plot.identity})]}));
+  it("WaffleY", () => Plot.plot({marks: [new MyWaffleY(data, {y1: 0, y2: Plot.identity, x: Plot.identity})]}));
+  it("Frame", () => Plot.plot({marks: [new MyFrame({})]}));
+  it("Hexgrid", () => Plot.plot({marks: [new MyHexgrid({})]}));
+});