ugogon/math.js

## math.js
import { ref, watch, nextTick } from 'vue';


const __sfc__ = {
  props: ['math'],
  setup(__props, { expose: __expose }) {
  __expose();

const props = __props;


const elem = ref(null);

watch(() => props.math, async (newMath, oldMath) => {
  nextTick(() => {
    MathJax.typeset([elem.value])
  })
})

const __returned__ = { props, elem, ref, watch, nextTick }
Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true })
return __returned__
}

}
import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createElementBlock("span", { ref: "elem" }, _toDisplayString($props.math), 513 /* TEXT, NEED_PATCH */))
}
__sfc__.render = render;
__sfc__.__file = "/home/ugo/Desktop/scoped-vue/comp.vue";
export default __sfc__;

## vueify-example.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>H&T Test</title>
  </head>
  <body>

    <main>
      <v-data-local>
        {
          x: 0,
          y: 1
        }
      </v-data-local>
      x: {{ x }}<br>
      y: {{ y }}
      <div>
        <v-data-local>
          {
            y: 2,
            get z() {
              return x*this.y;
            }
          }
        </v-data-local>
        x: {{ x }}<br>
        y: {{ y }}<br>
        z: {{ z }}<br>
        <input v-model.number="x" />
      </div>
      <div @click="x++">Click Me!</div>
    </main>


    <script type="importmap">
    {
      "imports": {
        "vue": "./vueify/vue.esm-browser.js"
      }
    }
    </script>
    <script type="module">
      import plugin from "./vueify.js"
      plugin.init();
    </script>
  </body>
</html>

## vueify.js
import math from "./math.js";
import { createApp, reactive, toRefs } from 'vue';

function initializeVue() {
  function processNode(el, ctx) {
    let dataSource = el.getAttribute("v-data") || el["v-data"]
    if (el.getAttribute("v-data") != undefined) el.removeAttribute("v-data")
    if (dataSource == "" || (dataSource == undefined && el.classList.contains("vueify"))) {
      dataSource = "{}";
    }
    if (dataSource) {
      let new_Scope = reactive(new Function("$data", "$el", `with($data){return ${dataSource.trim()}}`)(ctx, el));
      ctx = reactive({...toRefs(ctx),...toRefs(new_Scope)})
      const bind_this = (obj) => {
        for (var key in obj) {
          if (obj[key] instanceof Function) {
            obj[key] = obj[key].bind(ctx);
          }
          else if (Symbol.iterator in Object(obj[key])) {
            bind_this(obj[key])
          }
        }
      }
      bind_this(ctx);
      el["v-data"] = dataSource;
      let app = createApp({
        setup() {
          return ctx;
        }
      });
      if (window.components !== undefined) {
        for (var i = 0; i < window.components.length; i++) {
          app = app.component(window.components[i][0],window.components[i][1]);
        }
      }
      app.component("math", math).mount(el);
    }
    for (var i = 0; i < el.children.length; i++) {
        processNode(el.children[i], ctx);
    }
  }
  document.querySelectorAll("v-data").forEach((item, i) => {
      item.closest("section.slide").setAttribute("v-data", item.innerHTML);
      item.remove();
  });
  document.querySelectorAll("v-data-local").forEach((item, i) => {
      item.parentNode.setAttribute("v-data", item.innerHTML);
      item.remove();
  });
  document.querySelectorAll("[v-data]").forEach((item, i) => {
      item.setAttribute("v-pre","true")
  });

  let global_ctx = reactive({});
  document.querySelectorAll("v-data-global").forEach((item, i) => {
    let code = item.innerHTML;
    let new_Scope = reactive(new Function("$data", "$el", `with($data){return ${code.trim()}}`)(global_ctx, document.body));
    for (var key in new_Scope) {
      if (new_Scope[key] instanceof Function) {
        new_Scope[key] = new_Scope[key].bind(ctx);
      }
    }
    global_ctx = reactive({...toRefs(global_ctx),...toRefs(new_Scope)});
    item.remove();
  });
  processNode(document.body, reactive(global_ctx));
}

function replaceMath() {
  document.querySelectorAll(".language-math").forEach((item, i) => {
    if (item.innerHTML.includes("{{") && item.innerHTML.includes("}}")){
      let str = `<math :math="\`${item.innerHTML.replaceAll("\\","\\\\").replaceAll("{{","${").replaceAll("}}","}")}\`"></math>`
      item.outerHTML = str;
    }
  });
}

let Reveal;

const Plugin = {
  id: "vueify",
  init: function (deck) {
    return new Promise((resolve) => {
      Reveal = deck;
      replaceMath();
      initializeVue();
      resolve();
    });
  },
};

export default Plugin;
	import { ref, watch, nextTick } from 'vue';


	const __sfc__ = {
	props: ['math'],
	setup(__props, { expose: __expose }) {
	__expose();

	const props = __props;


	const elem = ref(null);

	watch(() => props.math, async (newMath, oldMath) => {
	nextTick(() => {
	MathJax.typeset([elem.value])
	})
	})

	const __returned__ = { props, elem, ref, watch, nextTick }
	Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true })
	return __returned__
	}

	}
	import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"

	export function render(_ctx, _cache, $props, $setup, $data, $options) {
	return (_openBlock(), _createElementBlock("span", { ref: "elem" }, _toDisplayString($props.math), 513 /* TEXT, NEED_PATCH */))
	}
	__sfc__.render = render;
	__sfc__.__file = "/home/ugo/Desktop/scoped-vue/comp.vue";
	export default __sfc__;
	<!DOCTYPE html>
	<html lang="en" dir="ltr">
	<head>
	<meta charset="utf-8">
	<title>H&T Test</title>
	</head>
	<body>

	<main>
	<v-data-local>
	{
	x: 0,
	y: 1
	}
	</v-data-local>
	x: {{ x }}<br>
	y: {{ y }}
	<div>
	<v-data-local>
	{
	y: 2,
	get z() {
	return x*this.y;
	}
	}
	</v-data-local>
	x: {{ x }}<br>
	y: {{ y }}<br>
	z: {{ z }}<br>
	<input v-model.number="x" />
	</div>
	<div @click="x++">Click Me!</div>
	</main>


	<script type="importmap">
	{
	"imports": {
	"vue": "./vueify/vue.esm-browser.js"
	}
	}
	</script>
	<script type="module">
	import plugin from "./vueify.js"
	plugin.init();
	</script>
	</body>
	</html>
	import math from "./math.js";
	import { createApp, reactive, toRefs } from 'vue';

	function initializeVue() {
	function processNode(el, ctx) {
	let dataSource = el.getAttribute("v-data") \|\| el["v-data"]
	if (el.getAttribute("v-data") != undefined) el.removeAttribute("v-data")
	if (dataSource == "" \|\| (dataSource == undefined && el.classList.contains("vueify"))) {
	dataSource = "{}";
	}
	if (dataSource) {
	let new_Scope = reactive(new Function("$data", "$el", `with($data){return ${dataSource.trim()}}`)(ctx, el));
	ctx = reactive({...toRefs(ctx),...toRefs(new_Scope)})
	const bind_this = (obj) => {
	for (var key in obj) {
	if (obj[key] instanceof Function) {
	obj[key] = obj[key].bind(ctx);
	}
	else if (Symbol.iterator in Object(obj[key])) {
	bind_this(obj[key])
	}
	}
	}
	bind_this(ctx);
	el["v-data"] = dataSource;
	let app = createApp({
	setup() {
	return ctx;
	}
	});
	if (window.components !== undefined) {
	for (var i = 0; i < window.components.length; i++) {
	app = app.component(window.components[i][0],window.components[i][1]);
	}
	}
	app.component("math", math).mount(el);
	}
	for (var i = 0; i < el.children.length; i++) {
	processNode(el.children[i], ctx);
	}
	}
	document.querySelectorAll("v-data").forEach((item, i) => {
	item.closest("section.slide").setAttribute("v-data", item.innerHTML);
	item.remove();
	});
	document.querySelectorAll("v-data-local").forEach((item, i) => {
	item.parentNode.setAttribute("v-data", item.innerHTML);
	item.remove();
	});
	document.querySelectorAll("[v-data]").forEach((item, i) => {
	item.setAttribute("v-pre","true")
	});

	let global_ctx = reactive({});
	document.querySelectorAll("v-data-global").forEach((item, i) => {
	let code = item.innerHTML;
	let new_Scope = reactive(new Function("$data", "$el", `with($data){return ${code.trim()}}`)(global_ctx, document.body));
	for (var key in new_Scope) {
	if (new_Scope[key] instanceof Function) {
	new_Scope[key] = new_Scope[key].bind(ctx);
	}
	}
	global_ctx = reactive({...toRefs(global_ctx),...toRefs(new_Scope)});
	item.remove();
	});
	processNode(document.body, reactive(global_ctx));
	}

	function replaceMath() {
	document.querySelectorAll(".language-math").forEach((item, i) => {
	if (item.innerHTML.includes("{{") && item.innerHTML.includes("}}")){
	let str = `<math :math="\`${item.innerHTML.replaceAll("\\","\\\\").replaceAll("{{","${").replaceAll("}}","}")}\`"></math>`
	item.outerHTML = str;
	}
	});
	}

	let Reveal;

	const Plugin = {
	id: "vueify",
	init: function (deck) {
	return new Promise((resolve) => {
	Reveal = deck;
	replaceMath();
	initializeVue();
	resolve();
	});
	},
	};

	export default Plugin;