RequireJS - custom paths and the text! plugin - javascript

I'm working on a SPA, and have optimized one of my code files with the requireJS optimizer, and set the new path like this:
config.paths['billingmanager/billing/billing'] = 'billingmanager/billing/billing-build';
Unfortunately, code that now (conceptually) does this
require(['text!billingmanager/billing/billing.htm'], callback);
now attempts to find billingmanager/billing/billing-build.htm and fails miserably.
Can can I tell text! that, no matter how the normal require path for billingmanager/billing/billing is set, I want you to fetch the file billingmanager/billing/billing.htm—period.
I do have a workaround, to do something like this
config.paths['billingmanager/billing-htm'] = 'billingmanager/billing/billing.htm';
and then manually know to use require(['text!billingmanager/billing-htm']); but I'm really hoping there's a simple fix here.

I've not run into this specific problem but the first thing I'd do to work around it would be to replace the path I give to text! with a relative path, which should avoid the clash with the path you've got in your paths. So, for instance:
require(['text!../parent/billingmanager/billing/billing.htm'], callback);
Of course the actual relative path you should use depends on the architecture of your application. It turns out that just using ./ won't be enough to work around RequireJS' cleverness so in the illustration above, I'm backing out of the current directory and then going back in. I've assumed that the current directory is name parent.
Note that the rules for path resolution for the path given to text! is different than the regular path resolution rules. Normally, adding an extension to a path given to require will completely bypass the paths setting. So require(['billingmanager/billing/billing/foo.js']... will look for a file named billingmanager/billing/billing/foo.js relative to baseUrl and will not use the paths setting you've shown in the question. This is not the case for paths given to text!. These paths go through the paths setting even if they have an extension. (This is documented here.)

Related

Absolute links within own domain in Gatsby

I would like to create an absolute link to files (images, downloads, ...) in my static directory, so during development the link would be http://localhost/myimage.jpg and once deployed it should be https://www.example.com/myimage.jpg.
Is there an easy way (e.g. an environment variable etc.) to reference the current domain name in Gatsby?
I would like to achieve this behavior without changing any config files.
A relative link is not an option in my case. The reason is that I am using the plugin gatsby-plugin-react-intl which modifies all relative links by adding the locale in front of it, meaning, the above mentioned link would automatically turn into https://www.example.com/en/myimage.jpg instead of https://www.example.com/myimage.jpg.
The default behavior is what you described. Using the static folder, a structure like /static/myimage.jpg will be referenced as https://somedomain.com/myimage.jpg.
The same approach applies to PDF or any static asset you wish to make available.
Following that, a structure like: /static/images/myimage.jpg will become https://somedomain.com/images/myimage.jpg.
Keep in mind that the static folder structure is "cloned" inside the public one once the site is built so everything inside will become public. /static becomes the root path once cloned.
I know that this is the default behavior. The problem is, that I'm
using react-intl (or more specifically, gatsby-plugin-react-intl),
which modifies all these paths by adding the locale in front of it,
e.g. <img src='/myimage.jpg' /> becomes <img src='/en/myimage.jpg />.
Using gatsby-image for all purposes is not possible, because it
doesn't work with SVGs etc. I haven't figured out how to stop the
plugin from doing this and I thought knowing how to refer to a your
own domain in js (or react) would be something worth knowing.
Well, there are multiple ways to point to your current domain. From the window.location.origin (check caveats of using window or global objects in SSR) to the default location props exposed by Gatsby (because its extension from #reach/router, from React). Note that location props will be only available in top-level components (pages) but you can drill down or use it as you wish, as any other property.
In addition, the gatsby-plugin-react-intl plugin exposes some methods that provide the current language information, useful to build your own static path to the asset. Using:
const { locale } = useIntl();
Will give you the current locale. You can use it to build your own asset like:
<img src={`/${locale}/images/myimage.jpg`} />
This path will work whether you are in local development or in your hosted project domain, because of the relativity. If you still want to use the full domain, you can use the previously explained location (React-based approach) or the window.location (JavaScript-based approach).
Regarding the automatic modification of static assets and paths, I'm afraid it's the default plugin's behavior and I haven't found any way or exposed method to change it otherwise.

jQuery ajax request relative path

I'm implementing a jQuery plugin that needs to use some html markup. I try to load the html code by ajax request but the problem I'm facing is it doesn't accept relative paths. I can't specify the path from root folder because I need this plugin to run as library and I don't know on which path the user of the library will put the library folder.
If it's not possible to do something like that what is the best possible workaround. Personally I don't like to put the html markup inside of the javascript code.
UPDATE
html import seems to solve my issue but unfortunately most of the browsers don't support this future yet. Here is a link that describes what html import is http://www.html5rocks.com/en/tutorials/webcomponents/imports/
You shouldn't have to specify an absolute path. jQuery.ajax will accept a relative path. Just be sure to prefix the path with '/'.
The result here is that it will access the relative path of whatever domain/host the script is currently executing.
Alternatively, you can also make the host configurable within your app.

How to specify absolute path when the program parses relative path?

I'm using a Javascript library which takes a string specifying a relative path as an option. Using this path, it loads a CSS files which is used for the theme. However, I have placed the themes files elsewhere and want to reference this using an absolute path instead.
This path is relative to the page which calls it. So if the path I gave was /absolute/path/file.js, and I am on [host]/abc/def/ghi, it will call [host]/abc/def/ghi/absolute/path/file.js. If I am on [host]/xyz, it will call [host]/xyz/absolute/path/file.js
I cannot simple go up two or three levels ../../ because that might not be the root directory. Instead, I am doing ../../../../../../../../absolute/path/here.css, to ensure it goes as far back as practically necessary, which does work.
There are no option in the library to use base path.
Is there a more elegant way to specify an absolute path when the library parses only relative paths?

How can I generate a path relative to a Javascript/jQuery file?

I have a CMS template that uses JavaScript/jQuery to insert an image onto the page. This works fine when I specify an explicit path to the image, but because I use the template on several sites, the path needs to be determined automatically.
Making things a little harder is the fact that the path to the template (and therefore the image I'm linking to) changes periodically with each revision to the template.
Here's the (extremely simple) relevant code at the moment - which technically works in the short term, but is not the solution I'm looking for:-
src = '../template_v1/images/pdf_small.png'
This correctly generates the base URL, but breaks as soon as the template version is incremented (and the path changed) to template_v2 or template_v3, for example.
The JavaScript/jQuery file (again, included with the template) is located at http://www.domain.com/template_v1/js/this_file.js - so with that in mind, I want to be able to automatically generate a path to the image relative to the location of the this_file.js file. If this were CSS this would be easy, as non-explicit paths are relative to the CSS file calling the path - but I don't know how to accomplish this with JavaScript/jQuery.
Thanks in advance for any tips.
Do you need to go up a folder at the start of the source? Would going from the current directory work and stay within the template folder entirely:
src = './images/pdf_small.png'

Including JS and CSS files relative to website root

I'm looking for best practices when including CSS/JS files, in terms of the file URI. I see people include files both relative from the website root by giving the full URI to the file:
<link rel="stylesheet" href="/my/path/to/css/main.css">
I tend to do it this way because I find it easier to know where the file is when I'm reading the code, and I've not come across an issue with it. But I also see a lot of relative includes:
<link rel="stylesheet" href="css/main.css">
Which way do you define the file location and why? Is one better than the other?
I prefer relative includes because they are robust against platform changes (e.g. deploying from test to live platform) because as long as the internal structure of your project does not change they still will work while absolute paths may break in such cases.
Also it's sometimes difficult to know the absolute path while the relative document dependent path is pretty obvious.
However, if you have files in several different places throughout your project, you would have different relative paths each time (for the same file which might be quite confusing), so in this case absolute ones might be preferred (for robustness' sake you should have the webroot path in a variable or similar: $WEBROOT/css/main.css). It all comes down to your personal needs I guess.
In the first case, the URI is absolute to the website's domain. So, the URI would be:
http://www.example.com/my/path/to/css/main.css
For the second method, the path is relative to the current path. So let's say you are now in
http://www.example.com/store/product/121
Then the path to the css files would be:
http://www.example.com/store/product/css/main.css
Thus, it depends where are your files located.

Categories