Riot.js 如何挂载预编译标签

Question

How can I mount a tag that has been pre compiled to a function with riot.js/cli to iife JS version.如何使用 riot.js/cli 将已预编译为 function 的标签挂载到 iife JS 版本。 What am I doing wrong?我究竟做错了什么？ By getting an empty html DOM as a result.结果得到一个空的 html DOM。

<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?也许我需要做更多的事情才能像 function 样式一样安装它？ Also tried to register() first.还尝试先注册（）。 that did not seem to help.这似乎没有帮助。 Maybe I did it wrong?也许我做错了？

riot.register('tag');

Answer 1

Did you try riot.inject() ?你试过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另请查看文档以获取更多上下文： 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.但是：您仍然需要获取位于/riot/tag.js的链接文件中的已编译字符串，因此您必须以某种方式获取它。 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:如果你仍然想用这种方法 go （现在是 1/2 年后 =D）我建议你将src属性更改为data-src （这样它就不会被浏览器自动加载并自己处理编译字符串的获取，像这样：

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:下面是riot+compiler的函数供参考，比较简单：

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

Riot.js 如何挂载预编译标签

问题描述

1 个解决方案

解决方案1
0 2022-04-28 15:02:39

Riot.js 如何挂载预编译标签

问题描述

1 个解决方案

解决方案1 0 2022-04-28 15:02:39

解决方案1
0 2022-04-28 15:02:39