Auto test docs tutorial

.eslintrc.cjs

@@ -13,6 +13,14 @@ module.exports = {
 			files: ['*.js', '*.mjs', '*.cjs'],
 			extends: ['@vizzu/eslint-config/standard']
 		},
+		{
+			files: ['docs/tutorial/shorthands_store/03_b.js'],
+			extends: ['@vizzu/eslint-config/standard'],
+			rules: {
+				'no-var': 'off',
+				'no-unused-vars': 'off'
+			}
+		},
 		{
 			files: ['test/e2e/test_cases/**', 'test/e2e/test_data/**'],
 			extends: ['@vizzu/eslint-config/standard'],

docs/assets/javascripts/mdchart.js

@@ -1,16 +1,18 @@
 import Vizzu from '../dist/vizzu.min.js'
+import { loadAnimations } from './snippet.js'
 
 class MdChart {
 	constructor(data, id) {
 		this.data = data
 		this.id = id
 	}
 
-	create(snippets) {
+	async create(snippets) {
+		const animations = await loadAnimations(snippets)
 		let chart = Promise.resolve()
-		for (let i = 0; i < snippets.length; i++) {
+		for (let i = 0; i < animations.length; i++) {
 			const number = i + 1
-			chart = this.animate(('0' + number).slice(-2), snippets[i], chart)
+			chart = this.animate(('0' + number).slice(-2), animations[i], chart)
 		}
 	}
 
@@ -30,9 +32,8 @@ class MdChart {
 				if (prevChart) {
 					animTarget.config = Object.assign({}, prevChart.config)
 					animTarget.style = Object.assign({}, prevChart.style)
-					// remove if it can be found in the prevChart
-					if (snippet.initDataFilter) {
-						animTarget.data = { filter: snippet.initDataFilter }
+					if (snippet?.assets?.initDataFilter) {
+						animTarget.data = { filter: snippet.assets.initDataFilter }
 					}
 				}
 			}
@@ -70,7 +71,7 @@ class MdChart {
 				})
 				for (let i = 0; i < snippet.anims.length; i++) {
 					chart = chart.then((chart) => {
-						chart = snippet.anims[i](chart, {})
+						chart = snippet.anims[i](chart, this.data, snippet?.assets)
 						if (this.id === 'tutorial' && firstRun && chart.activated) {
 							chart.activated.then((control) => control.seek('100%'))
 						}

docs/assets/javascripts/snippet.js

@@ -0,0 +1,74 @@
+export async function loadAnimation(url, config) {
+	try {
+		let code
+		if (
+			typeof window === 'undefined' &&
+			typeof process !== 'undefined' &&
+			process.versions?.node
+		) {
+			const fs = await import('fs').then((module) => module.promises)
+			code = await fs.readFile(
+				config?.nodeBaseUrl ? `${config.nodeBaseUrl}/${url}` : url,
+				'utf8'
+			)
+		} else {
+			const response = await fetch(
+				config?.browserBaseUrl ? `${config.browserBaseUrl}/${url}` : url
+			)
+			if (!response.ok) throw new Error(`Error fetching: ${response.statusText}`)
+			code = await response.text()
+		}
+		const replace = config?.replace
+		if (Array.isArray(replace)) {
+			replace.forEach(([searchValue, replaceValue]) => {
+				code = code.replaceAll(searchValue, replaceValue)
+			})
+		}
+		const returnOriginal = config?.returnOriginal
+		return new Function( // eslint-disable-line no-new-func
+			'chart',
+			'data',
+			'assets',
+			returnOriginal ? `${code}; return chart;` : `return ${code}`
+		)
+	} catch (error) {
+		console.error('Error during animation load or execution:', error)
+	}
+}
+
+export async function loadAnimations(
+	animations,
+	nodeBaseUrl = undefined,
+	browserBaseUrl = undefined
+) {
+	const steps = []
+	const baseUrl = {
+		nodeBaseUrl,
+		browserBaseUrl
+	}
+
+	for (const animation of animations) {
+		const step = { anims: [] }
+
+		let subAnimations
+		if (Array.isArray(animation)) {
+			subAnimations = animation
+		} else {
+			subAnimations = animation?.anims ?? []
+			if (animation?.assets) step.assets = animation.assets
+		}
+
+		for (const subAnimation of subAnimations) {
+			let anim
+			if (typeof subAnimation === 'string') {
+				anim = await loadAnimation(`${subAnimation}.js`, baseUrl)
+			} else if (typeof animation === 'object' && subAnimation.name) {
+				const { name, ...config } = subAnimation
+				anim = await loadAnimation(`${name}.js`, Object.assign({}, config, baseUrl))
+			}
+			step.anims.push((chart, data, assets) => anim(chart, data, assets))
+		}
+		steps.push(step)
+	}
+	return steps
+}

docs/tutorial/.eslintrc.cjs

@@ -0,0 +1,12 @@
+module.exports = {
+	globals: {
+		chart: true,
+		Vizzu: true,
+		assets: true,
+		image: true,
+		clickHandler: true,
+		labelDrawHandler: true,
+		logoDrawHandler: true,
+		backgroundImageHandler: true
+	}
+}