Riot.js how to mount a precompiled Tag
Question
How can I mount a tag that has been pre compiled to a function with riot.js/cli to iife JS version. What am I doing wrong? By getting an empty html DOM as a result.
<html>
<head>
<script type="riot" src="/riot/tag.js"></script>
<script src="/js/riot.js"></script>
<script>
riot.mount('tag');
</script>
</head>
<body>
<tag></tag>
</body></html>
Maybe there is something more I need to do to mount it like a function style? Also tried to register() first. that did not seem to help. Maybe I did it wrong?
riot.register('tag');
1 answers
solution1
0 2022-04-28 15:02:39
Did you try riot.inject() ? That is meant to be used for on-the fly compiling of riot components, but i think it's the step you are missing.
Check also the docs for more context: https://riot.js.org/compiler/#in-browser-compilation-with-inline-templates
you compiled it already so you don't need this part:
const tagString = document.getElementById('tag').innerHTML
// get the compiled code
const {code} = riot.compileFromString(tagString)
BUT: you still need to get the compiled string that sits in your linked file at /riot/tag.js , so you somehow have to fetch that. If you still want to go with that approach (it's 1/2 year later now =D) i would suggest you change the src attribute to data-src (so it's not loaded automatically by the browser and handle the fetching of the compiled string yourself, something like this:
const el = document.getElementById('tag');
let response = await fetch(el.getAttribute('data-src'), {
method: 'GET'
});
data = await response.text();
response = {
headers: [...response.headers].reduce((acc, header) => {
return {...acc, [header[0]]: header[1]};
}, {}),
status: response.status,
data: data,
};
// create the riot component during runtime,
// response.data holds the compiled component code
riot.inject(response.data, 'tag', './tag.html')
Below is are the functions from riot+compiler for reference, they are relatively simple:
// evaluates a compiled tag within the global context
function evaluate(js, url) {
const node = document.createElement('script')
const root = document.documentElement
// make the source available in the "(no domain)" tab
// of Chrome DevTools, with a .js extension
if (url) node.text = `${js}\n//# sourceURL=${url}.js`
root.appendChild(node)
root.removeChild(node)
}
// cheap module transpilation
function transpile(code) {
return `(function (global){${code}})(this)`.replace('export default', 'return')
}
function inject(code, tagName, url) {
evaluate(`window.${GLOBAL_REGISTRY}['${tagName}'] = ${transpile(code)}`, url)
riot.register(tagName, window[GLOBAL_REGISTRY][tagName])
}
function compileFromString(string, options) {
return compiler.compile(string, options)
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.