Reimplement jQuery plugin using the extracted chart renderer functions

package.json

@@ -11,6 +11,7 @@
     "jquery.peity.min.js"
   ],
   "devDependencies": {
+    "@rollup/plugin-terser": "^0.4.4",
     "ejs": "^2.5.5",
     "express": "^4.14.1",
     "jest": "^29.7.0",

rollup.config.mjs

@@ -1,10 +1,38 @@
+import terser from '@rollup/plugin-terser'
+
 import packageJSON from './package.json' assert { type: 'json' }
 
 const banner = `// Piety version ${packageJSON.version}
 // Copyright ${new Date().getFullYear()} Ben Pickles
 // https://benpickles.github.io/piety`
 
 export default [
+  {
+    input: 'src/jquery.js',
+    output: {
+      banner,
+      file: 'dist/jquery.piety.js',
+      format: 'es',
+      intro: '(function($, document, Math, undefined) {',
+      outro: '})(jQuery, document, Math)',
+    },
+  },
+  {
+    input: 'dist/jquery.piety.js',
+    output: {
+      banner,
+      file: 'dist/jquery.piety.min.js',
+      format: 'es',
+    },
+    // context: "window",
+    plugins: [
+      terser({
+        format: {
+          // comments: 'all',
+        },
+      }),
+    ],
+  },
   {
     input: 'src/piety.js',
     output: {

src/jquery.js

@@ -0,0 +1,102 @@
+import * as bar from './charts/bar'
+import * as line from './charts/line'
+import * as pie from './charts/pie'
+import {
+  normaliseData,
+  normaliseFill,
+  normalisePieData,
+  svgElement,
+} from './utils'
+
+const piety = ($.fn.piety = function (type, options) {
+  return this.each(function () {
+    const $this = $(this)
+    let chart = $this.data('_peity')
+
+    if (chart) {
+      if (type) chart.type = type
+      $.extend(chart.opts, options)
+    } else {
+      chart = new Piety($this, type, {
+        ...piety.defaults[type],
+        ...$this.data('piety'),
+        ...options,
+      })
+
+      $this.change(() => chart.render()).data('_peity', chart)
+    }
+
+    chart.render()
+  })
+})
+
+piety.defaults = {}
+piety.graphers = {}
+
+piety.register = function (type, defaults, grapher) {
+  this.defaults[type] = defaults
+  this.graphers[type] = grapher
+}
+
+class Piety {
+  constructor($el, type, opts) {
+    this.$el = $el
+    this.type = type
+    this.opts = opts
+  }
+
+  svgElement = svgElement
+
+  get data() {
+    return normaliseData(this.$el.text())
+  }
+
+  prepare(width, height) {
+    if (!this.$svg) {
+      const svg = svgElement('svg', { class: 'piety' })
+      this.svg = svg
+      this.$svg = $(svg)
+      this.$el.hide().after(svg)
+    }
+
+    return this.$svg.empty().data('_peity', this).attr({
+      height: height,
+      width: width,
+    })
+  }
+
+  render() {
+    const opts = {
+      ...this.opts,
+      fill: normaliseFill(this.opts.fill),
+    }
+    const { helpers, parts } = piety.graphers[this.type](this, opts)
+
+    this.prepare(opts.width, opts.height)
+
+    parts.forEach(({ props, type }) =>
+      this.$svg.append(svgElement(type, props))
+    )
+
+    this.helpers = helpers
+
+    if (opts.after) opts.after(this, helpers)
+  }
+}
+
+piety.register('bar', bar.defaults, (obj, opts) => bar.renderer(obj.data, opts))
+
+piety.register('donut', { ...pie.defaults }, (obj, opts) => {
+  if (!opts.innerRadius) opts.innerRadius = opts.radius / 2
+  return piety.graphers.pie(obj, opts)
+})
+
+piety.register('line', line.defaults, (obj, opts) =>
+  line.renderer(obj.data, opts)
+)
+
+piety.register('pie', pie.defaults, (obj, opts) => {
+  if (!opts.width) opts.width = opts.radius * 2
+  if (!opts.height) opts.height = opts.radius * 2
+  return pie.renderer(normalisePieData(obj.$el.text()), opts)
+})