I am trying to make my first Sapper site and I'm populating the content similarly to how it's done in the template here.
My problem is that I want to allow usage of custom components in the content of {#html post.html}. Currently it doesn't work, the HTML is just inserted there without being treated like a component, even if I import the component in [slug].html and it works if used directly somewhere besides that {#html post.html}.
The behaviour is kind of expected as the content is fetched after svelte has finished it's work, but I am not sure what should I do then. I want a couple of custom components like <FancyButton> to be usable in the user generated content.
Can I ask the [slug].html component to look at the post.html or just whole content after insertion and create an instance of child component wherever it should be? Or should I somehow compile the string beforehand on the server?
Related
Please check out this page and its source code. If I remove the cdn for the vue-tag-input component, everything except the component renders. But as soon as I add the cdn back, everything after first instance of tag-input component is not rendered on DOM. No error logs.
Please help me understand what is going on. As far as I understand there should not be any issue with component as I can render multiple instances and the same page layout in vue app using cdn. Check out App.vue file as well. This works perfectly fine.
You need to use valid html5 so you can't use self closing tags.
Change <tag-input v-model="tags" /> to <tag-input v-model="tags"></tag-input>
When vue component is used directly inside the html (not in single file vue component template), we need to take care of certain things
Don't use self closing tag for the component
convert all camel case to kebab case for component name and all the props (custom attributes)
There were above two errors because of which the implementation in question was not working.
I have an existing templated website that i want to continue with react. I decided to use create-react-app for that, but i do not know how to move the html based template to the react application. What i am trying to do now is to find a way to create a functional component out of the html file and then pass it to the index.js file for rendering. What i don't know is if this will work. Any ideas on the best way to do this?
There have tiny changes with HTML and JSX. JSX use className instead of class and htmlFor instead of for as mentioned up there.
If you are using VS code editor, here are your steps to make things a bit easier:-
In Vs code, Download an extension name HTML to JSX.
open your raw HTML code with VS code.
Select all code you want to convert.
Right-click and see at the bottom of the list, you will see an option Convert HTML to JSX. Click it and you are done.
step:1
step:2
result
Yes it is, and JSX was designed to be very similar to HTML to allow just that sort of thing.
However, JSX does have a few differences from HTML, which you'll want to read about. For instance, certain HTML attributes "overlap" with JS keywords, so in JSX you should use (for instance) htmlFor instead of for, and className instead of class. Also every tag has to be closed (as in XHTML).
Once you get your initial HTML into your Javascript file, you'll then want to start breaking up the parts of that page into separate React components, so that you can focus on them (and their logic) in independent chunks.
I am using VueJS 2 to build a drag-and-drop layout builder. One of the requirements of that project is to be able to have some components that will allow for custom content to live inside (they will be just a wrapper around that content). And to be really concrete, I am trying to pass in and render another drag-and-drop zone which is implemented in a draggable component.
Basically, I want to pass a VueJS template to the component via a prop and have that template rendered inside of the component. This is necessary because I do not want the UI to limit the needs of the developer and therefore need this to be really extensible.
In the following trivial example I would like the "ui-element" to render the content prop inside of it and use the other prop as a data input.
<ui-element
:content="<draggable :name="contentData"></draggable>"
contentData="col1"
>
</ui-element>
Since just outputting the template will escape it, and v-html directive will treat it as regular HTML and not a template I am lost, not really sure how to get this done.
I spent about an hour or more googling but no luck. Which leaves me to three options:
1) I'm the first one to need this complex use case (unlikely)
2) Doing this is stupid on so many levels that no-one even bothered (if so, please let me know how to get this result in a smarter way)
3) There is a special uber-cool JS term for this which I simply do not know and that made my search attempts futile
You'd want to use slots instead.
In your ui-element component, define a slot like so:
<template>
<div>
<slot name="content"></slot>
</div>
</template>
Then you could pass in the draggable component like so:
<ui-element contentData="col1">
<draggable :name="contentData" slot="content"></draggable>
</ui-element>
Here's a very basic fiddle example of a slot.
I am trying to create a component which displays a code example for a given component. The component shall be passed as HTML to the code-example component and be rendered once normally but also have its code displayed below.
When trying to fetch the code from <ng-content> in ngOnInit, Angular already started rendering the component, which means that I do not get the original code between the tags.
Passing the code via input does not work out, as the components may use single and double quotes which will cause problems when binding the data.
What I also tried is passing the code escaped to the component like
<code-example>
<component></component>
</code-example>
To unescape it and render it afterwards, which did not work out for me as I had trouble adding this pre-defined element to the DOM in a way that Angular renders it as a component.
Are there any other methods of dealing with this problem that I might be missing?
As #Timothy suggested you may try the <pre> tag.
If you also want to highlight the syntax of your code I can recommend a third party module called ng2-prism.
This is a library that supports multiple languages and is quite easy to use.
I am new to react.js and I have heard that this js library reacts badly to anything that modifies it's component structure.
Is there any specific procedure to add content into react elements using Jquery. For example, if we want to add content into react's div field, can we directly use Jquery append method to insert text to that div or is there any other way to implement things?.
The idea is that you either use a traditional approach, or you ditch jQuery and use react and this means using the react rendering tree, probably build tasks, client-side router/SPA.
You should not modify the DOM generated by react components from outside it since it maintains an internal state and a virtual DOM that would become out of sync. You either use one ecosystem or another; they are two very different approaches to writing a website.
If you want to introduce react on a small part of the website first, I would suggest to gather all your data with jquery and then transmit the data into the react component.
Roughly
// gather data with jquery or whatever
var data_array = gatherData();
ReactDOM.render(<MyCustomComponent data={data_array}/>, $('#my-react-root')[0])
Rendering changes during runtime can be managed the same way. Just gather the data again and change the state of the react component accordingly.
If you don't want to extract the data or the html is to complex, you can use dangerouslySetInnerHTML to just path a plain text html string.
From the docs:
<div dangerouslySetInnerHTML={{__html: getMarkup()}} />
Best wishes
Andreas