vimesh-ui
vimesh-ui copied to clipboard
vimeshjs
component gets initialized twice, when used in dynamic html
i want to use some components in dynamicly loaded markup. unfortunately they will be initialized twice. do you know of a way of avoiding this?
example:
<head>
<script src="https://unpkg.com/@vimesh/ui"></script>
<script src="//unpkg.com/alpinejs" defer></script>
</head>
<body>
<h1>Test..</h1>
<div x-data="{html: ''}" x-init="setTimeout(()=>{html='<h2>hello</h2><vui-test></vui-test>'}, 2000)">
<div x-html="html"></div>
</div>
<template x-data x-component="test" x-init="$api && $api.init()">
<div class="toplist">
<button x-on:click="console.log('hi from web component')">test</button>
</div>
<script>
return {
init() {
console.log(`init test component`)
},
}
</script>
</template>
</body>
This is a known issue because of the x-html internal implementation in alphinejs. Vimesh UI provides an alternative x-shtml, means safe html. For your problem, just replace x-html to x-shtml
You could also refer to /examples/spa/app.html , which is a minimal single page application framework with vimesh ui. x-shtml is used to load dynamic pages, with help of x-import:dynamic, these pages will be lazy loaded.
this is so cool! it just works! i really missed this x-shtml. i think it belongs on the README :) now i'm able to include alpine driven components in markdown. alpinejs should make this an official components extension. or maybe it's time for a mesh-up: the best of petite-vue & alpine plus tight component support (with the least necessary new syntax/magix).
let's dream:
- no build step, no tooling required
- declarative style/ reactive
- friendly to boring, old school server rendered pages (php, ruby, python ...)
- components!
- onboard devs: choose between x-* and v-*, support even react-like templating though template strings
all the best!