i am working on a micro-front end application with the help of Single-SPA framework.
i am able to import and make it work by adding the MFE routes directly in index.ejs file.
since we have a lot of MFEs, i don't want to keep them all in index.ejs.
want to keep all the routes in separate JSON file and import then JSON file in to index.ejs file.
so the question is , is there a way we can import JSON file directly in EJS template ??
there are similar questions in stackover flow but all of the answers are pointing to render method which i don't find it on single-spa library ?
step-1 : create a JSON file under src folder (ex: src/local-map.json)
step-2 : remove the JSON map from index.ejs and paste in the created JSON in step-1
step-3: update the index.ejs like below
<% if (isLocal) { %>
<script type="systemjs-importmap" src="./local-map.json"></script>
<% } %>
step-4: add the below code in webpack.config.js or webpack-proxy.config.js
devServer: {
static:'src'
}
that's it :)
Related
I have about 50 text files containing SVG paths that need to be parsed in ParseSvg.svelte.
+page.svelte
<script>
import ParseSvg from "../components/widgets/ParseSVG.svelte";
let hex = "#c412dd";
let src = 'w1815'
</script>
<ParseSvg {hex} {src} />
ParseSVG.svelte
Hardcoded works perfectly:
import src from "$lib/svg/w1815.svg?raw";
I've tried:
export let src;
function getSVGUrl(src) {
return new URL( /* #vite-ignore */ `/src/lib/svg/${src}.svg?raw`, import.meta.url).href;
}
const s = getSVGUrl(src)
console.log(s)
Console Log Produces:
file:///src/lib/svg/w1815.svg
Trying this:
const s2 = import(s);
Produces this error:
The above dynamic import cannot be analyzed by Vite.
Please point me in the right direction.
When constructing a URL and just using that, this code will not be processed by Vite at all. For that to work you have to manually include your static assets or (in the case of SvelteKit) put them in the /static directory which is already included.
When doing this you also will not have access to the file contents directly (?raw will do nothing), so if you want to access the contents you first have to load the file, e.g. using fetch.
If you want to use a dynamic import instead, you have to follow certain rules. Vite uses a rollup plugin to support this, which comes with various limitations. One of them is that paths have to be relative, another is that a file extension has to be specified (please see the documentation for the full list so you do not miss anything).
As an example given these files:
+page.svelte
svg.svelte
svg-1.svg
svg-2.svg
The page could use the svg.svelte component to reference one of the SVGs via its suffix:
<script>
import Svg from './svg.svelte';
</script>
<Svg source="1" />
<Svg source="2" />
Then the component could dynamically import the given file and simply output it as HTML:
<script>
export let source;
</script>
{#await import(`./svg-${source}.svg?raw`) then { default: svg }}
<span>{#html svg}</span>
{/await}
(For further processing, the file should be imported in an async function in the script.)
I am using EJS in the browser (not on the server).
I have some ejs that I would like to use in multiple pages, so I want to put that in its own file, say table.ejs.
Is there a way I can include it in my HTML such that it is immediately accessible to my javascript after onload?
I was thinking something like:
<script id="table-ejs" type="text/ejs" src="ejs/table.ejs"></script>
then in my javascript:
ejs.render(document.querySelector('#table-ejs').???, data)
Is this possible?
I could use the Fetch API to retrieve the ejs file but then I would need to rewrite a lot of code to make it async. I was wondering if I could avoid that.
Well,
place all your ejs-files within a file "views" - within your views you can create another file "partials" - in this file you place your header and footer.ejs.
Within, lets say, your home.ejs you have to include the following code:
<%- include('partials/header'); -%>
// the rest of your code
<%- include('partials/footer'); -%>
You can find more here: https://ejs.co/#docs
How to import an HTML template from a relative path like this:
import customSelectHtml from "./custom-select.html!text";
TypeScript compiler complains that it cannot find module. I was trying to create an ambient module definition, but it doesn't allow relative paths in module names. I am using SystemJS as a module loader.
I'm not using typescript, but I do use ES6. Might be useful for you.
The way that I solve this is by declaring template strings using ` ` quotes. It works fine for me, I would be happy to know if someone thinks this is a bad habbit.
below a snippet with Angular(-ui-router).
index.js
var indexTemplate = `
<div>
<h1>{{ Index page }}</h1>
</div
`
export {indexTemplate}
config.js
import { indexTemplate } from './index.js'
function config($stateProvider){
$stateProvider.state('index', {
url: '/',
controller: 'indexController',
template: indexTemplate
})
}
For completeness, this assumes indexController is defined elsewhere. Also, this config function is exported to a place where app is defined. But that all is not related to the question.
It is impossible.
Due to the definition of what is module in typescript, and as far as I know in ES6 javascript (import). Module cannot be html. The common approach is to import a javascript module that exports a string containing html, css, whatever. But that is not importing of the file with raw html.
Maybe you want to have a look at html imports also, but that is completely different thing.
You can import it using require syntax
1) Create app.d.ts file and require definition so typescript know this is function. (you don;t need to add any addition library, systemJs support require syntax)
declare function require(params:string): any;
2) Now you can import your html using
var template = require('./custom-select.html!text')
I found it even better because you can use require inline
var directive = {
template: require('./custom-select.html!text'),
scope: {}
}
I don't know about SystemJS, but this is definitely possible with Webpack and the html-loader
I am using Sails JS and would like to access globals (sails.config.myGlobals) in my assets, currently in js files.
I would have hoped I there is a similar way like injecting in ejs files. But its not.
Any ideas? Do I have to do a Grunt task for that?
In your config folder create a config file for example MyConfig.js (name doesn't matter). Fill that config with something that you wanted like.
module.exports.myconfig = {
configA: 'this is config A'
}
Use that config in your controller, like.
showconfig: function(req, res){
res.view('viewname', {
config: sails.config.myconfig
});
}
Now in your EJS file that is called, by that example is viewName.ejs at views folder, you can use it like <% config.configA %>, and this is config A would be printed. Also if you want Front End js (in assets folder) able to read that value, just print it in script tag, like this.
<script>
global.configA = '<%= config.configA %>';
</script>
Or if you use front end framework library, it can be placed under some value, service, or factory, not making global variable dirty, so other JS are able to read that value.
I don't think this is possible with Sails.
However, what you can do is setting the variable in a ejs view file to access its value in your js asset file.
// someView.ejs
<script>
myGlobals = '<%= config.myGlobals %>';
</script>
I am using rails 3.2.11 and coffee rails 3.2.2.
Here I am trying to render a coffee script in a file /app/views/my_files/create.js.coffee.erb
Here is what my controller code looks like
class MyFilesController < ApplicationController
respond_to :js
def create
end
end
On hitting create action I get missing template error. But when I rename file create.js.coffee.erb to create.js.coffee it works fine.
I am not understanding what is the problem with .erb extension over .coffee, and in this case why it gives missing template error, when template is already there?
Thanks
Rename your file to create.js.coffee
See
How to render new.js.coffee.erb in app/views?
Just had the same problem...
Is there a particular reason you are trying to render coffeescript as a view rather than using it as an asset?
.erb is a ruby script file that produces an html file when compiled.
.js.coffee results in a .js file when compiled. You should be using .erb with a create.html.erb template that in turn uses your create.js.coffee.
<%= javascript_include_tag "create" %>
This should be in your create.html.erb which will be called by the create method in your MyFilesController