Riot.js how to mount a precompiled Tag

Question

Riot.js how to mount a precompiled Tag

114 views Asked by garmoncheg At 05 August 2021 at 16:37

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');

Original Q&A

There are 1 answers

**exside** · Answer 1 · 2022-04-28T15:02:39+00:00

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)
}

TechQA.

Riot.js how to mount a precompiled Tag

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in USER-INTERFACE

Related Questions in DOM

Related Questions in INITIALIZATION

Related Questions in RIOT.JS

Popular Questions

Popular Tags

Trending Questions