Last active
November 1, 2023 12:43
-
-
Save ugogon/b2a9644350c95f84b2134ef8234e9bc5 to your computer and use it in GitHub Desktop.
vueify
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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__; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment