Error while loading library mapsjs-core and mapsjs-service in salesforce lightning - salesforce

I am trying to load Here maps library in lightning component but on load page is throwing below error.
[Cannot read property 'Object' of undefined]
eval()#https://wellmanage--onbdev.lightning.force.com/resource/GRG_Leaflet/GRG_Leaflet/Here-mapsjs-core.js:6:1666
Proxy.eval()#https://wellmanage--onbdev.lightning.force.com/resource/GRG_Leaflet/GRG_Leaflet/Here-mapsjs-core.js:320:26

According to the stack trace and error, it looks like the HERE scripts are loaded in an environment which doesn't have access to the JavaScript window object, and therefore cannot be evaluated properly.
I'm not familiar with Salesforce Lightning, but it should be possible to execute JavaScript code as their documentation states:
A component bundle can contain JavaScript code in a client-side controller, helper, or renderer. Client-side controllers are the most commonly used of these JavaScript resources.
However, it seems there is a peculiar way to load external scripts, which is described on this page. In particular:
The framework’s content security policy mandates that external JavaScript libraries must be uploaded to Salesforce static resources. For more information on static resources, see “Static Resources” in the Salesforce online help.

Related

How do webextensions internally communicate with the browser?

Webextensios expose Javascript APIs under browser namespace. For example browser.topSites() in Javascript will return list of top visited sites as returned by the broswer.
I am interested how does this talk internally to browser object (presumably a C++ class) to call the appropriate method to get the list of top sites probably stored in some SQL Lite database.
So how does a call from Javascript map to appropriate C++ call architecturally?
There are JavaScript APIs made for this purpose.
JavaScript APIs for WebExtensions can be used inside the extension's
background scripts and in any other documents bundled with the
extension, including browser action or page action popups, sidebars,
options pages, or new tab pages. A few of these APIs can also be
accessed by an extension's content scripts (see the list in the
content script guide).
Update on comment:
Firefox has its own SpiderMonkey: The Mozilla JavaScript runtime

Detect runtime errors in CodeMirror to test documentation site deploy

I have a React UI library that has a documentation site with interactive examples that run with CodeMirror + Babel.
The examples are written within the library repository itself and are read by the client side JS (CodeMirror) of the documentation site when the page is loaded.
I would like add tests to the project's CI server that runs when pull requests are created in order to guarantee the documentation site examples will run without deploying the documentation site itself.
What would be the best way to go about this?
Could it be implemented within a test framework like Mocha? I'd assume you could setup CodeMirror with text inside of it and then search the DOM for nodes that rendered.
Would a try/catch statement be needed? I've not found a hasError API within CodeMirror. Errors tend to bubble up the into the console and block further rendering on the page.

Loading external templates in react-templates during runtime?

How is it possible to load external templates from the server during runtime with react-templates (or other reacte template system)?
I can't find any doc's about it but noticed that some people mentioned it as answer in SO questions.
Or should I just implement it my self and use the function "dangerouslysetinnerhtml" to inject the html?
What I want to do?:
Store html/css snippets in xml (or json), that is produced/managed by a CMS and load these in a react app. It makes it very easy to change the html, or support different languages without changing the code and making a new deployment.
I have an app running that is doing exactly that, that I have made with Google GWT, and I want to do the same in the react app.

How does Angularjs routing work for applications outside the browser?

I am creating a single page app (mobile/desktop) using AngularJS. Based on the limited knowledge I have of AngularJS, I think the routing for the apps/websites is based on urls and $location/$location.path directive is used. However, in mobile or desktop apps, there is no browser. So how does AngularJS routing work in this case if views need to be switched?
Thanks
If you are talking about an Angular application by itself, it will always need something to be interpreted by something. Angular is written in JavaScript which means it will have to be interpreted by something which understands JavaScript. I am using the word interpreted instead of compiled, because JavaScript is not a compiled language.
But then how does something that interprets JavaScript display it on my screen you ask? For this you'll need a bit of background information.
The DOM
This is where we got to the Document Object Model DOM. From W3c:
The Document Object Model is a platform- and language-neutral
interface that will allow programs and scripts to dynamically access
and update the content, structure and style of documents. The document
can be further processed and the results of that processing can be
incorporated back into the presented page. This is an overview of
DOM-related materials here at W3C and around the web.
To dumb the quote above down:
you have a document (web page) which is being displayed and the DOM allows you to change this document which is being displayed.
JavaScript Engine
The link between JavaScript and the DOM is provided by an Engine. Every browser uses a JavaScript Engine. For example Chrome uses the V8 JavaScript engine. From an introduction of V8:
JavaScript is most commonly used for client-side scripting in a
browser, being used to manipulate Document Object Model (DOM) objects
for example. The DOM is not, however, typically provided by the
JavaScript engine but instead by a browser. The same is true of
V8—Google Chrome provides the DOM. V8 does however provide all the
data types, operators, objects and functions specified in the ECMA
standard.
How does this translate to your question?
Everything that wants to display a JavaScript application, needs to have a JavaScript Engine and a DOM. This could be a browser like Chrome, but could also be any other application.
A simple explanation of what a router does, is change the DOM to display different "documents". So plainly said: any application, be it a mobile or desktop application, which has a DOM understands how to use Angular's routing system.
Outside the browser means only application you are speaking about?. angular is tied to HTML pages in general. So its a framework for managing(not exactly appropriate word) the html pages to make them into Single Page Applications so that browser does not need to reload the entire the web application on request of a single page, it helps to invoke the html pages into the main html pages, this makes the application not to reload the entire, but to make available requested pages. this is where the routing comes.
Angular will work just fine there. In fact there is an Ionic project that is based on top of angular. E.g. if you are using Cordova, then the app is rendered inside a browser (or at least with the browser engine). So as far as I know it will behave exactly the same way with the exception of user not being able to type in URL or click back/forward.
Moreover I build an application for browser where I do not user URL as much as possible. E.g. I transition only between states and don't have direct url's in my application at all. Of course I need to support to the extent that a user can type in the url, but the ui-router does that on it's own if you map routes properly. But it seems much more beneficial not to rely on the urls at all for SPA (for internal stuff as you still have the edit url as I said before).

EntryPoint Classes & Modules in GWT

GWT code structure is really getting hard for me to follow :(.
As per my understandings,
Modules references Entry Point classes.
When a module is loaded entry point classes referenced on it get initiated, and onModuleLoad() of corresponding classes will get executed
HTML host pages need to include a nocache.js file (only if it needs to work with entry point classes)
If my understandings are correct,
In standard web development platforms like asp .net an aspx page refer to a servlet. Here mulitple html pages can refer to a single entry point class.Why?(and this is much complicated?)
When I can expect a module to load? If multiple modules & html pages are there, how we can assign modules to html pages, so that a particular module will load when user requests an html page?
I have an Async service call implemented at onModuleLoad(). And want to call this only for index.html page. But How can I identify the html page at onModuleLoad()?
Why Google proposes GWT for GAE app development?
I am newbie in GWT. I want to follow a good programmig structure for GAE app development. Corrections and suggestions are expecting...
Pls see this to understand how a GWT project is organized: https://developers.google.com/web-toolkit/doc/latest/DevGuideOrganizingProjects
(Bootstrap is also described there, how application loads from the html page)
I think the main thing is that everything compiles to one javascript file.
The app runs in a single page.
In .gwt.xml you define the entry-point of your app.
Also you specify what other modules you inherit.
This is very similar to java or .net applications where you specify what other packages you need. The modules are like libraries. For example if you needed to use JSON you would inherit the json module. Also I don't think to you are obliged to use GWT on the front

Resources