Riot.js Runtime version #2917

GianlucaGuarini · 2021-05-29T16:35:40Z

GianlucaGuarini
May 29, 2021
Maintainer

I am thinking to release in future a bigger Riot.js version riot.runtime.js for users that want to use its syntax in their existing DOM.
At moment there seems to be a demand for it see also https://github.com/alpinejs/alpine
This feature will be similar to the behaviour Riot.js v3 used to evaluate components expressions at runtime.

Of course, this bundle will have a size between riot.js and riot+compiler.js and it will be not CSP compliant. Some users might want to use it to evaluate components slots directly from the DOM.

For example:

riot.mount('my-component')

<!DOCTYPE html>
<html>
  <head> </head>
  <body>
    <my-component>
      <!-- Notice that this markup was not compiled! -->
      <p>{ state.message }</p>
    </my-component>
  </body>
</html>

GianlucaGuarini · 2021-06-24T12:18:53Z

GianlucaGuarini
Jun 24, 2021
Maintainer Author

@kachurun is something you can try out? I will be happy to set up a call discussing how to implement it. Please let me know if you are interested

5 replies

kachurun Jun 24, 2021

I didn't quite understand how this is applicable in real projects. I took a look at Alpine.js and couldn't figure out what kind of pain it could solve. Can you show an example of how this might be applicable?

GianlucaGuarini Jun 26, 2021
Maintainer Author

Some users want to use Riot.js components providing slots with expressions directly in the DOM without passing through the compiler.

We might provide a script that creates the template bindings in runtime from Inline HTML. It should be much smaller than the Riot.js compiler and might be used in context where CSP is not a problem. Of course we will need to integrate the @riotjs/parser to create the bindings.

This example should work with the Riot.js runtime parser https://plnkr.co/edit/F72rw5mtMRLpwY5A

kachurun Jun 26, 2021

Got it. This should make getting started with Riot a little easier. Riot3 seems to have implemented this?

GianlucaGuarini Jun 26, 2021
Maintainer Author

Yeah in Riot3 was possible but I removed this feature because Runtime Parsing is unsafe and slow. Some users might want that anyway so I think It should be possible having a new bundle riot.runtime.js. The riot.mount method could be patched to achieve this behavior

kachurun Jun 26, 2021

I think that's a good idea

GianlucaGuarini · 2022-08-03T07:03:39Z

GianlucaGuarini
Aug 3, 2022
Maintainer Author

Riot.js@7 Implements this feature, you can play with this demo to see how it works

1 reply

exside May 1, 2024

@GianlucaGuarini is it intended that this only works when using <my-tag> and not if I do <div is="my-tag">?

EDIT: needed to update the mount riot.mount('[is="my-tag"]')...

Although I still have the problem that the slot is ignored in a current project (using riot v9), server side I output:

<div is="admin">
	<template slot="docs"><p>This can be documentation you don't wanna read!</p></template>
</div>

then inside the component I have:

<slot name="docs" />

when compiled/mounted, the slot is gone, but the template tag from above is still at its original place... slots is undefined when I log the component, any ideas what I'm doing wrong?

I'm using a custom compile mechanism, it's pretty simple, but thought maybe that is the reason?

import 'https://unpkg.com/riot@9.0.3/riot+compiler.js'

/**
 * Transpiles ES Module code into something directly usable by browsers.
 * 
 * @param {string} code - An ES6 module in string form as the riot compiler creates it.
 * @returns 
 */
function transpile(code) {
	return `(function(global){${code}})(this)`.replace('export default', 'return');
};

const input = await Deno.readTextFile(path);
const tag = riot.compileFromString(input, { scopedCss: scoped });
const code = `riot.register('${tag.meta.tagName}', ${transpile(tag.code)})`;

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Riot.js Runtime version #2917

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments 6 replies

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Riot.js Runtime version #2917

GianlucaGuarini May 29, 2021 Maintainer

Replies: 2 comments · 6 replies

GianlucaGuarini Jun 24, 2021 Maintainer Author

kachurun Jun 24, 2021

GianlucaGuarini Jun 26, 2021 Maintainer Author

kachurun Jun 26, 2021

GianlucaGuarini Jun 26, 2021 Maintainer Author

kachurun Jun 26, 2021

GianlucaGuarini Aug 3, 2022 Maintainer Author

exside May 1, 2024

GianlucaGuarini
May 29, 2021
Maintainer

Replies: 2 comments 6 replies

GianlucaGuarini
Jun 24, 2021
Maintainer Author

GianlucaGuarini Jun 26, 2021
Maintainer Author

GianlucaGuarini Jun 26, 2021
Maintainer Author

GianlucaGuarini
Aug 3, 2022
Maintainer Author