Feat: exports for Base Plugin (#3495)

src/dom.ts

@@ -31,12 +31,12 @@ function renderNode(tagName: string, content: TreeNode): HTMLElement | SVGElemen
   return element
 }
 
-function render(tagName: string, content: TreeNode & { xmlns: string }, container?: Node): SVGElement
-function render(tagName: string, content?: TreeNode, container?: Node): HTMLElement
-function render(tagName: string, content?: TreeNode, container?: Node): HTMLElement | SVGElement {
+export function createElement(tagName: string, content: TreeNode & { xmlns: string }, container?: Node): SVGElement
+export function createElement(tagName: string, content?: TreeNode, container?: Node): HTMLElement
+export function createElement(tagName: string, content?: TreeNode, container?: Node): HTMLElement | SVGElement {
   const el = renderNode(tagName, content || {})
   container?.appendChild(el)
   return el
 }
 
-export default render
+export default createElement

src/plugins/envelope.ts

@@ -5,7 +5,7 @@
 import BasePlugin, { type BasePluginEvents } from '../base-plugin.js'
 import { makeDraggable } from '../draggable.js'
 import EventEmitter from '../event-emitter.js'
-import render from '../dom.js'
+import createElement from '../dom.js'
 
 export type EnvelopePoint = {
   id?: string
@@ -66,7 +66,7 @@ class Polyline extends EventEmitter<{
     const height = wrapper.clientHeight
 
     // SVG element
-    const svg = render(
+    const svg = createElement(
       'svg',
       {
         xmlns: 'http://www.w3.org/2000/svg',
@@ -88,7 +88,7 @@ class Polyline extends EventEmitter<{
     this.svg = svg
 
     // A polyline representing the envelope
-    const polyline = render(
+    const polyline = createElement(
       'polyline',
       {
         xmlns: 'http://www.w3.org/2000/svg',
@@ -173,7 +173,7 @@ class Polyline extends EventEmitter<{
   private createCircle(x: number, y: number) {
     const size = this.options.dragPointSize
     const radius = size / 2
-    return render(
+    return createElement(
       'ellipse',
       {
         xmlns: 'http://www.w3.org/2000/svg',

src/plugins/hover.ts

@@ -3,7 +3,7 @@
  */
 
 import BasePlugin, { type BasePluginEvents } from '../base-plugin.js'
-import render from '../dom.js'
+import createElement from '../dom.js'
 
 export type HoverPluginOptions = {
   lineColor?: string
@@ -33,8 +33,8 @@ class HoverPlugin extends BasePlugin<HoverPluginEvents, HoverPluginOptions> {
     this.options = Object.assign({}, defaultOptions, options)
 
     // Create the plugin elements
-    this.wrapper = render('div', { part: 'hover' })
-    this.label = render('span', { part: 'hover-label' }, this.wrapper)
+    this.wrapper = createElement('div', { part: 'hover' })
+    this.label = createElement('span', { part: 'hover-label' }, this.wrapper)
   }
 
   public static create(options?: HoverPluginOptions) {

src/plugins/minimap.ts

@@ -4,7 +4,7 @@
 
 import BasePlugin, { type BasePluginEvents } from '../base-plugin.js'
 import WaveSurfer, { type WaveSurferOptions } from '../wavesurfer.js'
-import render from '../dom.js'
+import createElement from '../dom.js'
 
 export type MinimapPluginOptions = {
   overlayColor?: string
@@ -63,7 +63,7 @@ class MinimapPlugin extends BasePlugin<MinimapPluginEvents, MinimapPluginOptions
   }
 
   private initMinimapWrapper(): HTMLElement {
-    return render('div', {
+    return createElement('div', {
       part: 'minimap',
       style: {
         position: 'relative',
@@ -72,7 +72,7 @@ class MinimapPlugin extends BasePlugin<MinimapPluginEvents, MinimapPluginOptions
   }
 
   private initOverlay(): HTMLElement {
-    return render(
+    return createElement(
       'div',
       {
         part: 'minimap-overlay',

src/plugins/regions.ts

@@ -7,7 +7,7 @@
 import BasePlugin, { type BasePluginEvents } from '../base-plugin.js'
 import { makeDraggable } from '../draggable.js'
 import EventEmitter from '../event-emitter.js'
-import render from '../dom.js'
+import createElement from '../dom.js'
 
 export type RegionsPluginOptions = undefined
 
@@ -120,7 +120,7 @@ class SingleRegion extends EventEmitter<RegionEvents> {
       wordBreak: 'keep-all',
     }
 
-    const leftHandle = render(
+    const leftHandle = createElement(
       'div',
       {
         part: 'region-handle region-handle-left',
@@ -134,7 +134,7 @@ class SingleRegion extends EventEmitter<RegionEvents> {
       element,
     )
 
-    const rightHandle = render(
+    const rightHandle = createElement(
       'div',
       {
         part: 'region-handle region-handle-right',
@@ -188,7 +188,7 @@ class SingleRegion extends EventEmitter<RegionEvents> {
       elementTop = elementHeight * this.channelIdx
     }
 
-    const element = render('div', {
+    const element = createElement('div', {
       style: {
         position: 'absolute',
         top: `${elementTop}%`,
@@ -319,7 +319,7 @@ class SingleRegion extends EventEmitter<RegionEvents> {
     }
     if (typeof content === 'string') {
       const isMarker = this.start === this.end
-      this.content = render('div', {
+      this.content = createElement('div', {
         style: {
           padding: `0.2em ${isMarker ? 0.2 : 0.4}em`,
           display: 'inline-block',
@@ -439,7 +439,7 @@ class RegionsPlugin extends BasePlugin<RegionsPluginEvents, RegionsPluginOptions
   }
 
   private initRegionsContainer(): HTMLElement {
-    return render('div', {
+    return createElement('div', {
       style: {
         position: 'absolute',
         top: '0',

src/plugins/spectrogram.ts

@@ -215,7 +215,7 @@ function FFT(bufferSize: number, sampleRate: number, windowFunc: string, alpha:
  * Spectrogram plugin for wavesurfer.
  */
 import BasePlugin, { type BasePluginEvents } from '../base-plugin.js'
-import render from '../dom.js'
+import createElement from '../dom.js'
 
 export type SpectrogramPluginOptions = {
   /** Selector of element or element in which to render */
@@ -347,7 +347,7 @@ class SpectrogramPlugin extends BasePlugin<SpectrogramPluginEvents, SpectrogramP
   }
 
   private createWrapper() {
-    this.wrapper = render('div', {
+    this.wrapper = createElement('div', {
       style: {
         display: 'block',
         position: 'relative',
@@ -357,7 +357,7 @@ class SpectrogramPlugin extends BasePlugin<SpectrogramPluginEvents, SpectrogramP
 
     // if labels are active
     if (this.options.labels) {
-      this.labelsEl = render(
+      this.labelsEl = createElement(
         'canvas',
         {
           part: 'spec-labels',
@@ -376,7 +376,7 @@ class SpectrogramPlugin extends BasePlugin<SpectrogramPluginEvents, SpectrogramP
   }
 
   private createCanvas() {
-    this.canvas = render(
+    this.canvas = createElement(
       'canvas',
       {
         style: {

src/plugins/timeline.ts

@@ -3,7 +3,7 @@
  */
 
 import BasePlugin, { type BasePluginEvents } from '../base-plugin.js'
-import render from '../dom.js'
+import createElement from '../dom.js'
 
 export type TimelinePluginOptions = {
   /** The height of the timeline in pixels, defaults to 20 */
@@ -104,7 +104,7 @@ class TimelinePlugin extends BasePlugin<TimelinePluginEvents, TimelinePluginOpti
   }
 
   private initTimelineWrapper(): HTMLElement {
-    return render('div', { part: 'timeline-wrapper', style: { pointerEvents: 'none' } })
+    return createElement('div', { part: 'timeline-wrapper', style: { pointerEvents: 'none' } })
   }
 
   // Return how many seconds should be between each notch
@@ -153,7 +153,7 @@ class TimelinePlugin extends BasePlugin<TimelinePluginEvents, TimelinePluginOpti
     const secondaryLabelSpacing = this.options.secondaryLabelSpacing
     const isTop = this.options.insertPosition === 'beforebegin'
 
-    const timeline = render('div', {
+    const timeline = createElement('div', {
       style: {
         height: `${this.options.height}px`,
         overflow: 'hidden',
@@ -179,7 +179,7 @@ class TimelinePlugin extends BasePlugin<TimelinePluginEvents, TimelinePluginOpti
       Object.assign(timeline.style, this.options.style)
     }
 
-    const notchEl = render('div', {
+    const notchEl = createElement('div', {
       style: {
         width: '0',
         height: '50%',

src/wavesurfer.ts

@@ -1,5 +1,6 @@
-import type { GenericPlugin } from './base-plugin.js'
+import BasePlugin, { type GenericPlugin } from './base-plugin.js'
 import Decoder from './decoder.js'
+import * as dom from './dom.js'
 import Fetcher from './fetcher.js'
 import Player from './player.js'
 import Renderer from './renderer.js'
@@ -140,6 +141,9 @@ class WaveSurfer extends Player<WaveSurferEvents> {
   protected subscriptions: Array<() => void> = []
   protected mediaSubscriptions: Array<() => void> = []
 
+  public static readonly BasePlugin = BasePlugin
+  public static readonly dom = dom
+
   /** Create a new WaveSurfer instance */
   public static create(options: WaveSurferOptions) {
     return new WaveSurfer(options)