I have a .html which needs data inserted from svelte using ${} syntax. I haven't found any way to include that html without resorting to inserting as a string into the svelte component.
There is not much Svelte can do here, for Svelte to do it's thing it requires a compile step.
If it's possible to rename the .html file to a .svelve file and compile it like the other components, that would be preferable.
But when the html comes from an api that's not possible.
An option is to use Handlebars or another template engine to insert data from Svelte into the html. (but that resorts to inserting it as a string, see REPL)
A last option I can think of is to place a <div bind:this={el} /> and use DOM api's to create and manage the html (not recommended)
Related
I am developing a web application using Microsoft .NET MVC. As the default CSHTML views are not always responsive enough, there are some pages implemented in Angular. The rendered CSHTML page pretty much only includes a directive to invoke an Angular component, and Angular takes care of the rest.
Now, one of the Angular pages looks like its HTML template is going to get quite long. We're talking about almost a thousand lines of HTML code here. That's just the HTML template, not the Angular component handling it.
So I thought it would be better for development and maintenance to split the template into several HTML files, where the main HTML file would include other HTML files. But this doesn't seem to be possible.
Googling for "include HTML file in another in Angular" returned results about using the <ng-include> directive, but unfortunately that seems to only have been supported in the original AngularJS, not in the new Angular. At least the examples I used didn't work.
Is this somehow possible in Angular, or do I have to actually make the included HTML files into separate components?
const template = `
<div> Your template here! </div>
`;
export default template;
import html from 'template.html'
Then
declare module '*.html' {
const value: string;
export default value
}
And
<div [innerHTML]="theHtmlString"></div>
I need add a custom javascript (bootstrap.js, for example) to the cms mediawiki-1.34.0.
I found a way related to downloading the script file and add string
mw.loader.load ('/w/index.php?title=MediaWiki:bootstrap.js&action=raw&ctype=text/javascript');
in
http://localhost/WikiRobotNET/index.php/MediaWiki:Common.js
However, this method does not suit me. Is it possible to hook up a script directly in the code? How to do it?
What exactly is HTML Modules? I understand that it might allow a developer to create HTML as a module like how ES6 Modules are to JavaScript.
But, are these modules basically templates like Mustache, Handlebars and Pug? Or is it like a wrapper around a similar templating system that will allow us to import an HTML file easily into another HTML file?
Will it pave a way to avoid using templating libraries utilizing the Web Components?
[Update]
Here is the link to where I found this - https://github.com/w3c/webcomponents/blob/gh-pages/proposals/html-modules-explainer.md
HTML Modules are the new proposal for importing HTML files into a document.
HTML import supported a similar feature and permitted to import an HTML file (eventually containing itself JS and CSS) but it has been deprecated and JS module import has partially substituted that feature.
The point of HTML imports are to complete that part and make possible to import HTML files again instead of JavaScript files only.
Today you just can't import files that contain HTML (again, you could do that when meta rel=import href=myfile.html> which is not supported anymore).
If you want to do that, you have to write HTML in JavaScript string prior to process it.
The proposal also introduces notions such as import.meta.document that refer to the internal document to be imported.
Note that is it a proposal, even though it could be inserted into the spec, it should then be implemented by browsers, and finally adopted by the community in order to remain and become a stable feature.
Currently the closest you can use is the Lego Web-Component library that allows to include HTML as a module and extends native HTML functionality:
<template>
<p>Hello World!</p>
</template>
Used as:
<script src="./dist/index.js" type="module"></script>
<hello-world />
Example taken from https://github.com/polight/lego#hello-world
Let's see how the spec is going to evolve for HTML Modules in the future…
I am running a springboot application with Thymeleaf and reactJS. All the HTML text are read from message.properties by using th:text in the pages, but when I have th:text in reactJS HTML block, reactJS seems angry about it.
render() {
return (
<input type="text" th:text="#{home.welcome}">
)
}
The error is:
Namespace tags are not supported. ReactJSX is not XML.
Is there a walkaround besides using dangerouslySetInnerHTML?
Thank you!
There is no sane workaround.
You are getting this error because Thymeleaf outputs XML, and JSX parsers do not parse XML.
You did this because JSX looks very, very similar to XML. But they are very, very different, and even if you somehow hacked Thymeleaf to strip namespaced attributes and managed to get a component to render, it would be merely a fleeting moment of duct-taped-together, jury-rigged code that will fall apart under further use.
This is a really, really bad idea because JSX is Javascript. You are generating Javascript on the fly. Just to name a few reasons this will not work in the long term:
This makes your components difficult if not impossible to test.
Reasoning about application state will be a nightmare as you will struggle to figure out if the source of a certain state is coming from Thymeleaf or JS.
Your application will completely grind to a halt if Thymeleaf outputs bad JS.
These problems will all get worse with time (Thyme?) as as developers abuse the ease with which they can render server-side data to the client-side, leading to an insane application architecture.
Do not do this. Just use Thymeleaf, or just use React.
Sample Alternative: I primarily work on a React application backed by a Java backend. So I understand how someone could stumble upon this hybrid and think it might be a good idea. You are likely already using Thymeleaf and are trying to figure out how you can avoid rewriting your servlets but still get the power of React.
We were in a similar boat two years ago, except with an aging JSP frontend, but the difference is negligible. What we did (and it works well) is use a JSP page to bootstrap the entire React application. There is now one JSP page that we render to the user. This JSP page outputs JSON into a single <script> tag that contains some initial startup data that we would otherwise have to fetch immediately. This contains resources, properties, and just plain data.
We then output another <script> that points to the location of a compiled JS module containing the entire standalone React application. This application loads the JSON data once when it starts up and then makes backend calls for the rest. In some places, we have to use JSP for these, which is less than ideal but still better than your solution. What we do is have the JSP pages output a single attribute containing JSON. In this way (and with some careful pruning by our XHR library) we get a poor man's data interchange layer built atop a JSP framework we don't have time to change.
It is definitely not ideal, but it works well and we have benefited vastly from the many advantages of React. When we do have issues with this peculiar implementation, they are easy to isolate and resolve.
It is possible wrap ReactJS apps in Thymeleaf. Think if you want a static persistent part (like some links, or even just displayed data), you could use Thymeleaf. If you have a complicated part (something that requires DOM repaints, shared data, updates from UI/Sockets/whatever), you could use React.
If you need to pass state you could use Redux/other methods.
You could have your backend send data via a rest API to the React part and just render your simple parts as fragments or as whole chunks of plain HTML using Thymeleaf.
Remember, Thymeleaf is really just HTML. React is virtual DOM that renders as HTML. It's actually fairly easy to migrate one to the other. So you could write anything "Static" or that does not respond much to UI, in Thymeleaf/HTML. You could also just render those parts in React too, but without State.
Thymeleaf 3 allows you to render variables from your Java to a separate JS file. So that is also an option to pass into JSX
function showCode() {
var code = /*[[${code}]]*/ '12345';
document.getElementById('code').innerHTML = code;
}
Now you can use data- prefix attributes (ex. data-th-text="${message}").
https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#support-for-html5-friendly-attribute-and-element-names
Suppose I have a number of compiled HTML-files from Harp, the static site generator.
My question:
How do I post-process multiple HTML files, in each, automatically copying the contents of < h1> tag to the < title> tag?
I'm wondering, if Gulp would be right for the job (and if so, how?), or if, perhaps, Sublime Text 3 would have such feature built-in?
hmm...well you can use gulp or grunt or any other build tool to do that.
You can also use some other text find-and-replace tools like sed.
if you need more stuff to do on your files (packging, post-processing, move, rename, ...) it makes sense to use gulp/grunt.
If you ended up using gulp/grunt you need to define a task which reads the content of those files and then does the replace and write to file. (a bit of nodejs knowledge is required + javascript basics)
How about doing it dynamically onpage load?
var newtext = $("h1").text();
$("title").text(newtext);