add autogenerated api doc to bottom of tutorial

packages/core/drawLine.mjs

@@ -9,8 +9,8 @@ import Fraction, { gcd } from './fraction.mjs';
 /**
  * Intended for a debugging, drawLine renders the pattern as a string, where each character represents the same time span.
  * Should only be used with single characters as values, otherwise the character slots will be messed up.
- * Character legend: 
- * 
+ * Character legend:
+ *
  * - "|" cycle separator
  * - "-" hold previous value
  * - "." silence
@@ -19,7 +19,7 @@ import Fraction, { gcd } from './fraction.mjs';
  * @param {number} chars max number of characters (approximately)
  * @returns string
  * @example
- * const line = drawLine(pattern, 10); // |0--123|0--123
+ * const line = drawLine("0 [1 2 3]", 10); // |0--123|0--123
  * console.log(line);
  */
 function drawLine(pat, chars = 60) {

packages/core/euclid.mjs

@@ -24,6 +24,7 @@ const euclid = (pulses, steps, rotation = 0) => {
  * Euclidian rhythms are really useful for computer/algorithmic music because they can accurately
  * describe a large number of rhythms used in the most important music world traditions.
  *
+ * @memberof Pattern
  * @param {number} pulses the number of onsets / beats
  * @param {number} steps the number of steps to fill
  * @param {number} rotation (optional) offset in steps

packages/core/pattern.mjs

@@ -62,7 +62,7 @@ export class Pattern {
   }
 
   /**
-   * As with {@link Pattern#withQuerySpan|withQuerySpan}, but the function is applied to both the
+   * As with {@link Pattern#withQuerySpan}, but the function is applied to both the
    * begin and end time of the query timespan.
    * @param {Function} func the function to apply
    * @returns Pattern
@@ -72,7 +72,7 @@ export class Pattern {
   }
 
   /**
-   * Similar to {@link Pattern#withQuerySpan|withQuerySpan}, but the function is applied to the timespans
+   * Similar to {@link Pattern#withQuerySpan}, but the function is applied to the timespans
    * of all haps returned by pattern queries (both `part` timespans, and where
    * present, `whole` timespans).
    * @param {Function} func
@@ -83,7 +83,7 @@ export class Pattern {
   }
 
   /**
-   * As with {@link Pattern#withHapSpan|withHapSpan}, but the function is applied to both the
+   * As with {@link Pattern#withHapSpan}, but the function is applied to both the
    * begin and end time of the hap timespans.
    * @param {Function} func the function to apply
    * @returns Pattern
@@ -182,7 +182,7 @@ export class Pattern {
 
   /**
    * Returns a new pattern, with the function applied to the value of
-   * each hap. It has the alias {@link Pattern#fmap|fmap}.
+   * each hap. It has the alias {@link Pattern#fmap}.
    * @param {Function} func
    * @returns Pattern
    */
@@ -191,7 +191,7 @@ export class Pattern {
   }
 
   /**
-   * see {@link Pattern#withValue|withValue}
+   * see {@link Pattern#withValue}
    */
   fmap(func) {
     return this.withValue(func);
@@ -298,7 +298,7 @@ export class Pattern {
   }
 
   /**
-   * As with {@link Pattern#appBoth|appBoth}, but the `whole` timespan is not the intersection,
+   * As with {@link Pattern#appBoth}, but the `whole` timespan is not the intersection,
    * but the timespan from the function of patterns that this method is called
    * on. In practice, this means that the pattern structure, including onsets,
    * are preserved from the pattern of functions (often referred to as the left
@@ -330,7 +330,7 @@ export class Pattern {
   }
 
   /**
-   * As with {@link Pattern#appLeft|appLeft}, but `whole` timespans are instead taken from the
+   * As with {@link Pattern#appLeft}, but `whole` timespans are instead taken from the
    * pattern of values, i.e. structure is preserved from the right hand/outer
    * pattern.
    * @param {Pattern} pat_val
@@ -1022,8 +1022,10 @@ export class Pattern {
     return this._withContext((context) => ({ ...context, velocity: (context.velocity || 1) * velocity }));
   }
 
-  _loopAt(factor,cps=1) {
-    return this.speed((1/factor)*cps).unit("c").slow(factor)
+  _loopAt(factor, cps = 1) {
+    return this.speed((1 / factor) * cps)
+      .unit('c')
+      .slow(factor);
   }
 }
 

tutorial/ApiDoc.jsx

@@ -0,0 +1,45 @@
+import React, { Fragment } from 'react';
+import { docs } from '../doc.json';
+import { MiniRepl } from './MiniRepl';
+
+function ApiDoc() {
+  console.log('docJson', docs);
+  return (
+    <div>
+      {docs
+        .filter((item) => !item.name?.startsWith('_') && item.kind !== 'package')
+        .map((item, i) => (
+          <Fragment key={i}>
+            {' '}
+            <h2 id={`${item.memberof ? `${item.memberof}-` : ''}${item.name}`}>
+              {item.memberof && item.memberof !== item.name ? `${item.memberof}.` : ''}
+              {item.name}
+            </h2>
+            <div
+              dangerouslySetInnerHTML={{
+                __html: item.description.replaceAll(/\{\@link ([a-zA-Z]+)?\#?([a-zA-Z]*)\}/g, (_, a, b) => {
+                  // console.log(_, 'a', a, 'b', b);
+                  return `<a href="#${a}${b ? `-${b}` : ''}">${a}${b ? `#${b}` : ''}</a>`;
+                }),
+              }}
+            />
+            <ul>
+              {item.params?.map((param, i) => (
+                <li key={i}>
+                  {param.name} ({param.type?.names?.join('|')}): {param.description?.replace(/(<([^>]+)>)/gi, '')}
+                </li>
+              ))}
+            </ul>
+            {item.examples?.length && <h3>Examples</h3>}
+            <div className="space-y-2">
+              {item.examples?.map((example, k) => (
+                <MiniRepl key={k} tune={example} />
+              ))}
+            </div>
+          </Fragment>
+        ))}
+    </div>
+  );
+}
+
+export default ApiDoc;

tutorial/tutorial.mdx

@@ -693,3 +693,14 @@ If you want to contribute in another way, either
 - [fork strudel repo on GitHub](https://github.com/tidalcycles/strudel)
 - [Join the Discord Channel](https://discord.gg/remJ6gQA)
 - [play with the Strudel REPL](https://strudel.tidalcycles.org/)
+
+import ApiDoc from './ApiDoc';
+
+<br />
+<br />
+
+# API Docs
+
+The following Chapter is the technical API documentation. It is autogenerated from the jsdoc comments in the source files.
+
+<ApiDoc />