I'm developing a custom Dojo widget which in fact acts as a wrapper for Timeline JS library (http://www.simile-widgets.org/timeline/).
Is there a possibility to include the required JS code for Timeline in the custom dojo widget or must I include manually in my "index.html"??
Thanks in advance.
Do you have control over the Timeline source code, that is, are you hosting it yourself?
If this is the case you could turn the dependency into a dojo module by inserting an appropriate dojo.provide call on the top or you could just straight up copy-and-paste everything inside your MyWidget.js source file.
If this is all ends up too compicated for you to consider it worth it, adding the script tag by hand on the index.html is not that bad (given how base Javascript actually doesn't have a real module system you could use instead)
Related
Currently I'm developing a website using the following stack:
vue.js
#vue/server-renderer
vite
tailwind CSS
SSG was chosen as the rendering mode.
Tailwind, as described in the documentation, allows you to specify directories and file extensions (content property) , in which he will try to find the classes, in order to leave only those that are actually used in the project.
As a result, the 'main.css' file is formed, in which only those classes that are used remain.
Next, I just take this file and include it in every page that was rendered during the build phase of the project.
This results in:
index.html - main.css
about.html - main.css
blog.html - main.css
It turns out that main.css file may contain classes that are needed only for one of the pages and are not needed for others.
I would like to implement the following:
Take main.css which turned out
Render a page, for examle about.html
take only those styles that are needed for about.html page from the main.css file
create a new about.css file
link the resulting about.css styles to about.html
I’ve already tried to implement this using an awesome PurgeCSS tool as following:
render page content usind #vue/server-renderer's renderToString() method;
Pass an resulting css and html sources to PurgeCSS
here is an example
But there are too many corner cases around this solution, such as:
Dynamic classes which can be added to the html on the client side
Some components may be missing in rendered html and their content will be added later (for example, v-if directive was used on the component)
A few takeaways:
PurgeCSS is not needed anymore since Tailwind v2 (the latest being v3.x)
as far as I know, you cannot have code-splitting with Tailwind, not that it matters anyway since it will still perform okay with further optmizations
the classes that will be generated, will be only once for the whole app (hence no need to have a bg-red-500 for index or about page, both are referencing the same unique declaration)
if you want to have SSR/SSG, I recommend the usage of Nuxt (in it's v3 if you're using Vue3 or plan to have anything long-term)
dynamic classes are not possible with Tailwind, you can create things like bg-[#ccc] but it goes on the opposite side of what Tailwind is achieving and should be used exceptionally
for Tailwind's content, still the defaults on this page, section Configure your template paths, no need to do anything crazy or complicated
if you want to have some scoped/local style, style to using style scoped, you can still use Tailwind inside of those tags tho
if you want to write vanilla CSS into dedicated CSS files like index, about, blog etc, then Tailwind is probably not the best approach because this is not how it is supposed to work
stay simple, the performance will still be amazing. Only focus on not having too many screens, colors etc that you're not using
you could run some bundle size tests to see if the CSS is taking a huge chunk in terms of size. Will probably not, but if it still is: you can then start making complex configurations
JS will be far harder to reduce and be more impactful regarding the performance (because of how a browser works with it: parsing, executing is indeed blocking the main thread)
I'm using Nuxt to build a component library for use with the various CMSs that my company uses. Basically, I want to use the generated HTML to create reusable widgets for the CMS. The CMSs in question can't use Vue components directly because the client's admin area doesn't play well with Vue (for example, the inline editor in Kentico 12 does not work at all with Vue and our clients require this functionality).
Using Nuxt to build the component library works great as long as the components don't DO anything. However, if I want to create an accordion that has an #click event, it doesn't work when loaded into the CMS. I narrowed down the issue:
A) http://example.com/Accordions/
B) http://example.com/Accordions/index.html
Case A works fine. With Case B, the page loads but none of the scripts work. The events do not fire at all, and I'm getting the following error:
"DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method."
The Accordions component doesn't work on any page that is not http://example.com/Accordions/.
Nuxt is generating the Accordions/index.html page so I'm assuming it's connecting the route with the functionality in the JS, but I'm not sure exactly what the problem is, what to search for or how to fix it. I've been searching for hours. Can anyone help me with this?
Is it possible to use VusJS Components into Moqui Screens?
I know for sure that you can render Basic HTML but I wasn't able to find a hook for the VueJS app.
The need comes from the following scenario:
While form-single widget can be made collapsible, form-list cannot. So I wanted to use vue-collapsible (https://github.com/vue-comps/vue-collapsible) but I don't know where I am supposed to register the component.
If there's no way to use vue, maybe you can help me with my concrete issue.
In the 'vuet' render mode which is used in the /vapps path (as opposed to /apps) it isn't actually HTML sent to the client it is a Vue Template. If you look at the text returned by the server you'll see a number of Vue Components already being used (see the WebrootVue.js file for their source). You can see this in Chrome using the Sources or Network tab in the tools window or similar tools in other browsers. If you inspect an element you'll be looking at the rendered HTML, ie after Vue runs the components to change the Vue Template to HTML.
This means that if you include the necessary JavaScript file(s), and CSS file(s) if needed, then you can use any Vue component in the Vue Template returned. You can do this inline in XML Screen files using the render-mode.text element with the #type=vuet.
None of this runs under NPM in the way VueJS is used in Moqui Framework through XML Screens. In other words it isn't a pre-packaged Vue app with 100% client/browser rendering but rather is a hybrid client and server rendered approach.
You can include scripts in this Moqui hybrid approach using the script element with a #src attribute for the script file which the WebrootVue.js file loads on the fly. There are various examples of this for additional JS scripts like Chart.JS
When using filter and pagination plugins for EnhancedGrid, the HTML templates for the same are loaded from dojox\grid\enhanced\templates.
Is there any way by which I can avoid the server requests for these HTML files by making them part of the Enhanced Grid's inline javascript?
You should make a custom dojo build that creates one js file as a result. follow this instructions from a previous QA:
How to build Dojo into a single file, given a list of dependencies?
EDIT:
The build should add those html files inline, but doesn't. I googled a bit and found this link related to your problem:
http://grokbase.com/t/dojo/dojo-interest/121e536t64/enhancedgrid-filter-problem
It suggests a fix using this link
http://dojo-toolkit.33424.n3.nabble.com/Custom-build-including-CSS-and-HTML-files-td3536573.html
Citation:
If you are using the AMD style of module definition, then you can specify a text dependency like so:
define(["dojo/text!some/file.html", "other/module"],
function(template, otherModule){
...
// to use the contents of the html file, treat template as if it were a normal string
someNode.innerHTML = template;
...
});
The build system should automatically convert the text dependency to an inline string literal. Most Dojo files are already formatted to use this feature, but I can't account for dojox modules. I'm not sure whether similar functionality is possible with the dojo.require/dojo.provide system of dependency declaration.
I have got the solution. Those struglling from this issue pls. note that there is bug with Dojo 1.7.1 and we need to use Dojo 1.8.3 and use internStrings option with the build command. You should see HTML files being interned in the build-report.
Hi I have tried every ways and means to load dojo page into ContentPane.
It seems That I am not able to do that. Correct me if I am wrong.
Looks like the only solution is through the creation and destroy of any widget while running
Clement
The dojo docs for dojox/layout/ContentPane (which allows references to script files) mentions your issue:
NOTE that dojo.require in script in the fetched file isn't recommended Many widgets need to be required at page load to work properly
#see http://dojotoolkit.org/api/1.8/dojox/layout/ContentPane
It looks like you just need to require these files in the parent widget.