Combining Split and Snap in VanillaJS

[ChristopherCardinalCoforge]

Hi, and thanks for the awesome work on this library! I'd like to use Split and Snap in a non-React app. So I'm porting your example code to VanillaJS (the ultimate goal is to get to AngularJS). I copied the code you provided in your examples and compiled in into basic CSS, HTML and JS. Snap is working fine, but Split is giving an error. Let me know if you have any idea what may be causing this issues. Thanks and let me know if you need more information! (As a side note, I successfully merged Snap and Split into a single React app based on the code you provided. The goal is to remove React completely.)

Split gives an error: "Uncaught Error: You must overwrite toDisplayFeatures".

The error occurs when executing the following code, either via the UI or in Console:
draw.changeMode('splitLineMode', { spliter: mode });
Same error for mode as 'point', 'line_string', or 'polygon'.

I've tried loading different library versions for just about all the libraries. It seems like [email protected] and [email protected] are required.

I'm using the following libraries from CDN:

<script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.2.0/mapbox-gl-draw.js"></script>
<script src="https://unpkg.com/mapbox-gl-draw-snap-mode"></script>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/mapbox-gl-draw-split-line-mode"></script>

The full error in Console:
Uncaught Error: You must overwrite toDisplayFeatures
at q.toDisplayFeatures (mode_interface.js:145:9)
at Object.render (object_to_mode.js:69:14)
at Object.currentModeRender (events.js:214:26)
at a (render.js:37:22)
at render.js:32:28
at Array.forEach ()
at Q.K (render.js:32:14)
at store.js:27:16

Some more code, in case it is helpful:

draw = new MapboxDraw({
  modes: {
    ...MapboxDraw.modes,
    draw_point: SnapPointMode,
    draw_polygon: SnapPolygonMode,
    draw_line_string: SnapLineMode,
    direct_select: SnapDirectSelect,
    splitLineMode: SplitLineMode,
    passing_mode_point: mapboxGlDrawPassingMode(
      MapboxDraw.modes.draw_point
    ),
    passing_mode_line_string: mapboxGlDrawPassingMode(
      MapboxDraw.modes.draw_line_string
    ),
    passing_mode_polygon: mapboxGlDrawPassingMode(
      MapboxDraw.modes.draw_polygon
    ),
  },
  styles: SnapModeDrawStyles,
  userProperties: true,
  snap: true,
  // snapOptions: {
  //   snapPx: 15,
  //   snapToMidPoints: true,
  //   snapVertexPriorityDistance: 0.0025
  // },
  guides: false,
});