Remove jquery dependency from site/index.html

Author: mauriciopoppe

.prettierignore

@@ -1,4 +1,5 @@
 site/js/vendor
 site/js/plugins.js
 site/*.html
+*auto.html
 .github

package.json

@@ -21,7 +21,7 @@
   },
   "types": "./dist/index.d.ts",
   "scripts": {
-    "html": "node scripts/generate-examples.cjs",
+    "html": "node site/js/examples-to-html.cjs",
     "build": "npx rimraf dist && npm run html && npm run docs && npm run build:typescript && npm run build:webpack && npm run build:site",
     "build:webpack": "NODE_ENV=production webpack",
     "build:typescript": "tsc && mkdir -p dist/samplers && cp src/samplers/*.mjs dist/samplers/",

site/index.html

@@ -197,53 +197,55 @@ <h1><span class="logo">$f(x)$</span> - Function Plot<br /></h1>
       </div>
     </div>
 
-    <!-- includes -->
-    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
     <script>
-      window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')
+    MathJax = {
+        tex: {
+            inlineMath: [['$', '$'], ["\\(", "\\)"]],
+            processEscapes: true,
+        },
+        svg: {
+            fontCache: 'global'
+        }
+    };
     </script>
-    <script src="js/plugins.js"></script>
+    <script id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3.0.1/es5/tex-mml-chtml.js"></script>
 
     <!-- app -->
     <script src="function-plot.js"></script>
-    <script src="js/site.js"></script>
+    <script src="js/examples.js"></script>
     <script>
-      $('#recipes').load('partials/recipes.html')
-      $('#examples').load('partials/examples.html', function () {
-        // declared in js/site.js
-        onSiteDependenciesLoaded()
-        $('pre code').each(function (i, block) {
-          hljs.highlightBlock(block)
-        })
-
-        $('#p-slider').on('change', function () {
-          var value = +this.value
-          $('#p-slider-value').html(value)
-        })
-      })
-    </script>
-    <script
-      type="text/javascript"
-      src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"
-    ></script>
-    <script type="text/x-mathjax-config">
-      MathJax.Hub.Config({
-        showProcessingMessages: false,
-        messageStyle: 'none',
-        tex2jax: {
-          inlineMath: [['$','$']],
-          displayMath: [['$$','$$']],
-          processEnvironments: false
-        },
-        TeX: {
-          equationNumbers: {
-            autoNumber: "AMS"
-          }
-        },
-        'HTML-CSS': {
-          imageFont: null
+        async function siteRenderExamples () {
+            async function loadHtmlToId(path, target) {
+                const response = await fetch(path);
+                const body = await response.text();
+                document.querySelector(target).innerHTML = body;
+            }
+
+            await Promise.all([
+                loadHtmlToId("partials/recipes.auto.html", '#recipes'),
+                loadHtmlToId("partials/examples.auto.html", '#examples')
+            ])
+
+            // Render math
+            MathJax.typesetPromise()
+
+            // render examples, declared in js/examples.js
+            renderExamples()
+
+            // highlight code snippets
+            document.querySelectorAll('pre code').forEach(function (el, i) {
+                hljs.highlightBlock(el)
+            })
+        }
+
+        function ready(fn) {
+            if (document.readyState !== 'loading') {
+                fn();
+            } else {
+                document.addEventListener('DOMContentLoaded', fn);
+            }
         }
-      });
+        ready(siteRenderExamples)
     </script>
   </body>
 </html>

scripts/generate-examples.cjs renamed to site/js/examples-to-html.cjs

@@ -1,6 +1,8 @@
 /**
- * Created by mauricio on 4/9/15.
+ * Performs a build time transformation of the examples
+ * written as JavaScript
  */
+
 const fs = require('fs')
 const dox = require('dox')
 const _ = require('lodash')
@@ -12,7 +14,7 @@ const md = require('markdown-it')({
 })
 
 function renderExamples() {
-  const file = fs.readFileSync('./site/js/site.js', { encoding: 'utf-8' })
+  const file = fs.readFileSync('./site/js/examples.js', { encoding: 'utf-8' })
   const comments = dox.parseComments(file)
 
   const parsed = comments
@@ -46,16 +48,16 @@ function renderExamples() {
       return entry.ids
     })
 
-  const output = fs.createWriteStream('./site/partials/examples.html')
-  output.write(pug.compileFile('./site/tpl/examples.pug')({ comments: parsed }))
+  const output = fs.createWriteStream('./site/partials/examples.auto.html')
+  output.write(pug.compileFile('./site/partials/examples.pug')({ comments: parsed }))
   output.end()
 }
 
 function renderRecipes() {
-  const file = fs.readFileSync('./site/tpl/recipes.md', { encoding: 'utf-8' })
+  const file = fs.readFileSync('./site/partials/recipes.md', { encoding: 'utf-8' })
   const result = md.render(file)
 
-  const output = fs.createWriteStream('./site/partials/recipes.html')
+  const output = fs.createWriteStream('./site/partials/recipes.auto.html')
   output.write(result)
   output.end()
 }

site/js/site.js renamed to site/js/examples.js

@@ -1,4 +1,4 @@
-function onSiteDependenciesLoaded() {
+function renderExamples() {
   const functionPlot = window.functionPlot
   let a, b, c
 

site/js/plugins.js

@@ -0,0 +1,130 @@
+<h3>Evaluate a function at some value <code>x</code></h3>
+<pre><code class="language-javascript">const y = functionPlot.$eval.builtIn(datum, fnProperty, scope)
+</code></pre>
+<p>Where <code>datum</code> is an object that has a function to be evaluated in the property <code>fnProperty</code> ,
+to eval this function we need an <code>x</code> value which is sent through the scope</p>
+<p>e.g.</p>
+<pre><code class="language-javascript">const datum = {
+  fn: 'x^2'
+}
+const scope = {
+  x: 2
+}
+const y = functionPlot.$eval.builtIn(datum, 'fn', scope)
+</code></pre>
+<p>Every element of the <code>data</code> property sent to <code>functionPlot</code> is saved on <code>instance.options.data</code>,
+if you want to get the evaluated values of all the elements here run</p>
+<pre><code class="language-javascript">const instance = functionPlot( ... )
+instance.options.data.forEach(function (datum) {
+  const datum = {
+    fn: 'x^2'
+  }
+  const scope = {
+    // a value for x
+    x: 2
+  }
+  const y = functionPlot.$eval.builtIn(datum, 'fn', scope)
+}
+</code></pre>
+<h3>Maintain aspect ratio</h3>
+<p>Given the <code>xDomain</code> values you can compute the corresponding <code>yDomain</code> values to main
+the aspect ratio between the axes</p>
+<pre><code class="language-javascript">function computeYScale(width, height, xScale) {
+  const xDiff = xScale[1] - xScale[0]
+  const yDiff = (height * xDiff) / width
+  return [-yDiff / 2, yDiff / 2]
+}
+
+const width = 800
+const height = 400
+
+// desired xDomain values
+const xScale = [-10, 10]
+
+functionPlot({
+  width: width,
+  height: height,
+  xDomain: xScale,
+  yDomain: computeYScale(width, height, xScale),
+
+  target: '#demo',
+  data: [
+    {
+      fn: 'x^2',
+      derivative: {
+        fn: '2x',
+        updateOnMouseMove: true
+      }
+    }
+  ]
+})
+</code></pre>
+<h3>Changing the format of the values shown on the axes</h3>
+<pre><code class="language-javascript">const instance = functionPlot({
+  target: '#complex-plane',
+  xLabel: 'real',
+  yLabel: 'imaginary'
+})
+// old format
+const format = instance.meta.yAxis.tickFormat()
+const imaginaryFormat = function (d) {
+  // new format = old format + ' i' for imaginary
+  return format(d) + ' i'
+}
+// update format
+instance.meta.yAxis.tickFormat(imaginaryFormat)
+// redraw the graph
+instance.draw()
+</code></pre>
+<h3>React Component</h3>
+<pre><code class="language-typescript">import React, { useEffect, useRef } from 'react'
+import functionPlot, { FunctionPlotOptions } from 'function-plot'
+
+export interface FunctionPlotProps {
+  options?: FunctionPlotOptions
+}
+
+export const FunctionPlot: React.FC&lt;FunctionPlotProps&gt; = React.memo(({ options }) =&gt; {
+  const rootEl = useRef(null)
+
+  useEffect(() =&gt; {
+    try {
+      functionPlot(Object.assign({}, options, { target: rootEl.current }))
+    } catch (e) {}
+  })
+
+  return (&lt;div ref={rootEl} /&gt;)
+}, () =&gt; false))
+</code></pre>
+<h3>Styling</h3>
+<p>Selectors (sass)</p>
+<pre><code class="language-sass">.function-plot {
+  .x.axis {
+    .tick {
+      line {
+        // grid's vertical lines
+      }
+      text {
+        // x axis labels
+      }
+    }
+    path.domain {
+      // d attribute defines the graph bounds
+    }
+  }
+
+  .y.axis {
+    .tick {
+      line {
+        // grid's horizontal lines
+      }
+      text {
+        // y axis labels
+      }
+    }
+    path.domain {
+      // d attribute defines the graph bounds
+    }
+  }
+}
+</code></pre>