bobtemplates.plone
bobtemplates.plone copied to clipboard
svelte app: target node with class not special tag
Change 'svelte_src/expertsearch-plus/src/main.js':
let targets = document.getElementsByClassName("expertsearch-plus");
Change src/greenthumb/expertsearchplus/svelte_apps/my-svelte-app/index.html:
<div class="expertsearch-plus"></div>
Do you have a specific reason why you prefer this? At this point depending what you choose for the svelte_app_custom_element question, you will have a custom element, which usually works by adding a special tag or you will have a more traditional JS component, where we would have a different way. Right now it is the same tag for both variants. But it's not hard to change it if you prefer it for your project. Of course it would be possible to integrate this option in the template, so that you can choose it with a question. But i don't have the plan and the urge to work on that right now.
A custom tag gets stripped off when inserting in source code of rich text field in Plone unless you explicitly allow it. It would be easier for someone to try Svelte in Plone if he is not bothered with this necessary step to set up Plone.
I know, but the bobtemplate adds the tag to the allowed tags, so it should work without any changes. I usually test this kind of things in a Zope Page Template added via ZMI. But only for complex tags where i also need to add properties to the tag.
As i said, we could add a question like this: Use a custom tag to initalize the component? Otherwise we use a CSS class. [Y] This question we should only ask if the user choose svelte native component, but not when she choose custom element. I'm happy to review a PR.