Components within HTML string view pattern

[tvardy]

I have a very simple component:

import { app, Component } from 'apprun/dist/apprun-html.esm.js'

export default class Simple extends Component {
  view = (state) => `<pre>state: ${JSON.stringify(state)}</pre>`
}

How can I render it within my test app using the HTML string vue pattern:

import SimpleComponent from './Simple.js';

const state = 'Hello';
const view = state => {
  return `<div>
    <h1>${state}</h1>
    <!-- Want to put my component here -->
  </div>`;
};
app.start('my-app', state, view);

?

[yysun]

You can make custom element/web components.

import SimpleComponent from './Simple.js';

app.webComponent('my-component', SimpleComponent);

const state = 'Hello';
const view = state => {
  return `<div>
    <h1>${state}</h1>
    <my-component />
  </div>`;
};
app.start('my-app', state, view);

[tvardy]

It didn't want to work at the beginning. Then I prepared a repl.it demo to demonstrate the issue and... it worked well. It appears that AppRun didn't like to work with ESbuild. But I managed to configure ESbuild to use JSX with AppRun

[yysun]

I have an example of esbuild: https://repl.it/@yysun/apprun-esbuild

You can also try:

npx apprun --init --spa --esbuild

[tvardy]

Yes... And it uses the JSX syntax, which I was trying to avoid at the beginning. That's why I asked about the way to use the tagged templates... 'cause I couldn't make it running myself...
For a moment It worked this way that if I'd put 2 components:

<my-component />
<my-component />

then the second one worked and displayed.

I'm not sure yet, but I think it might be related with a wrong handling of the "self closing tag" syntax. But I'm not sure yet. If I find some time to investigate, I certainly will and then... after maybe some more findings I'll file a bug ticket here.

Thank you very much for the help so far.