Is anyone else using Google Maps + MarkerWithLabel + RequireJS? I basically want to see if it's possible to eliminate the extra http request for MarkerWithLabel and somehow optimize how everything is loaded and initialized.
Right now I'm loading the Google Maps library dynamically from within a Require module (I need this for dynamic params), but I can only get MarkerWithLabel working after Google Maps has been loaded. Ideally it would be great to either fetch them together or at the very least preload MarkerWithLabel and keep the Google Maps handle (URL) dynamic.
I'm considering 'Delayed Module Evaluation' if there's no way to consolidate Maps + MarkerWithLabel. I'm curious how others are approaching this.
http://blog.millermedeiros.com/requirejs-2-0-delayed-module-evaluation-and-google-maps/
You can use requirejs async plugin. Basically you should end-up with something like :
require.config({
paths: {
/* Bower Libraries */
async: '../bower_components/requirejs-plugins/src/async',
markerlabel: '../bower_components/gmaps-makerwithlabel/index',
...
and after that, you can shim it to make sure google maps loads first:
markerlabel: {
deps: ['async!https://maps.googleapis.com/maps/api/js&sensor=false']
}
Take a look to this: https://github.com/lupugabriel1/gmaps-markerwithlabel-amd
Based on Google Maps MarkerWithLabel 1.1.9. This is basically a fork that adds src/markerwithlabel-amd.js.
This extension offers AMD support for Google Maps MarkerWithLabel utility library of Google Maps Javascript API v3. Also fixes the problem with requirejs optimizer.
Related
I'm trying to implement Esri ArcGIS JS in Lightning Web Component. While using ArcGIS JS, the sample code uses require function to load modules. In order to do that I'm trying to use require.js. I downloaded it from here (Require.js). And then uploaded to my sandbox as static resource. I'm trying to use that static resource in my Lightning Web Component. I also added the script tag for the ArcGIS Javascript API in my Experience Cloud site's header as
<script src="https://js.arcgis.com/4.24"></script>
Lightning Web Component:
import { LightningElement, track } from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';
import requireJS from '#salesforce/resourceUrl/requireJS';
export default class TestMap extends LightningElement {
renderedCallback() {
loadScript(this, requireJS).then(() => {
console.log('requireJS loaded');
require([
"esri/geometry/Extent"
], (
Extent
) => {
var initExtent = new Extent({
xmin: -15884312,
ymin: 1634835,
xmax: -6278767,
ymax: 7505198,
spatialReference: 102100
});
});
}).catch(exception => {
console.log(exception);
});
}
}
My problem right now, eventhough I can see in the Network tab that the require.js is loaded from static resource, require function cannot be found.
Exception message catched
I'm not sure where is the issue since this is how I loaded my all javascript files before.
I was expecting to see the the require function is working after the require.js script loaded from Static Resource.
This one is a bit tricky, I will try to guide you as much as I can.
First, don't put the script tag in your website header. This is a last chance solution, we'll keep it if nothing else work.
Second, requireJS is not compatible with LWC (or Locker Service to be precise). So you can forget it. loadScript is in someways similar.
Now the solution, usually I download the whole from a CDN and host it as a static resource. Then you can load it via loadScript and use it as per the documentation.
In case the library is really small, it could be created as a LWC and then be imported but usually libraries are too heavy regarding Salesforce limit.
Looking at the library, it seems that they do not provide any compiled full version (which is probably huge). In this case I would recommend to make a custom build locally containing only the necessary pieces of code and then uploading as a static resource. Unfortunately I can't help on this part as I still didn't do it myself yet.
Feel free to comment and I will improve my answer is it's unclear.
I would like to use the Buildfire Custom Plugin to create a home page for my app. From there I need to link to external websites and internal plugins using Deep Linking.
When I target deep links I get a mixed content error:
Mixed Content: The page at 'https://app.buildfire.com/#/pluginControl/01331574-e5fc-4d9e-b226-ecd69029358b/01331574-e5fc-4d9e-b226-ecd69029358b-1549414186849/New%20Home/3000dd44-17a3-464c-a438-d31843d7cbe4/false?headerId=5c5a2f2b236aa005d368b399' was loaded over HTTPS, but requested an insecure resource 'app0070be://plugin/169d5e94-6c5e-4769-b4ca-a7d0175985e7-1528925513379'. This content should also be served over HTTPS.
Here is the code I'm using:
var search = document.getElementById("search");
search.addEventListener('click', function() {
console.log("Search"); // I am seeing this in the console prior to the error.
document.location('app0070be://plugin/ba4139dd-09c6-4121-aa4a-c72570af07fc-1490476490653');
});
Is there a way to make this secure? Is there a better / different approach I should consider?
I have a working ordinary Hapi application that I'm planning to migrate to Swagger. I installed swagger-node using the official instructions, and chose Hapi when executing 'swagger project create'. However, I'm now confused because there seem to be several libraries for integrating swagger-node and hapi:
hapi-swagger: the most popular one
hapi-swaggered: somewhat popular
swagger-hapi: unpopular and not that active but used by the official Swagger Node.js library (i.e. swagger-node) as default for Hapi projects
I though swagger-hapi was the "official" approach, until I tried to find information on how do various configurations on Hapi routes (e.g. authorization, scoping, etc.). It seems also that the approaches are fundamentally different, swagger-hapi taking Swagger definition as input and generating the routes automatically, whereas hapi-swagger and hapi-swaggered seem to have similar approach with each other by only generating Swagger API documentation from plain old Hapi route definitions.
Considering the amount of contributors and the number of downloads, hapi-swagger seems to be the way to go, but I'm unsure on how to proceed. Is there an "official" Swagger way to set up Hapi, and if there is, how do I set up authentication (preferably by using hapi-auth-jwt2, or other similar JWT solution) and authorization?
EDIT: I also found swaggerize-hapi, which seems to be maintained by PayPal's open source kraken.js team, which indicates that it might have some kind of corporate backing (always a good thing). swaggerize-hapi seems to be very similar to hapi-swagger, although the latter seems to provide more out-of-the-box functionality (mainly Swagger Editor).
Edit: Point 3. from your question and understanding what swagger-hapi actually does is very important. It does not directly serves the swagger-ui html. It is not intended to, but it is enabling the whole swagger idea (which the other projects in points 1. and 2. are actually a bit reversing). Please see below.
It turns out that when you are using swagger-node and swagger-hapi you do not need all the rest of the packages you mentioned, except for using swagger-ui directly (which is used by all the others anyways - they are wrapping it in their dependencies)
I want to share my understanding so far in this hapi/swagger puzzle, hope that these 8 hours that I spent can help others as well.
Libraries like hapi-swaggered, hapi-swaggered-ui, also hapi-swagger - All of them follow the same approach - that might be described like that:
You document your API while you are defining your routes
They are somewhat sitting aside from the main idea of swagger-node and the boilerplate hello_world project created with swagger-cli, which you mentioned that you use.
While swagger-node and swagger-hapi (NOTE that its different from hapi-swagger) are saying:
You define all your API documentation and routes **in a single centralized place - swagger.yaml**
and then you just focus on writing controller logic. The boilerplate project provided with swagger-cli is already exposing this centralized place swagger.yaml as json thru the /swagger endpoint.
Now, because the swagger-ui project which all the above packages are making use of for showing the UI, is just a bunch of static html - in order to use it, you have two options:
1) to self host this static html from within your app
2) to host it on a separate web app or even load the index.html directly from file system.
In both cases you just need to feed the swagger-ui with your swagger json - which as said above is already exposed by the /swagger endpoint.
The only caveat if you chose option 2) is that you need to enable cors for that end point which happened to be very easy. Just change your default.yaml, to also make use of the cors bagpipe. Please see this thread for how to do this.
As #Kitanotori said above, I also don't see the point of documenting the code programmatically. The idea of just describing everything in one place and making both the code and the documentation engine to understand it, is great.
We have used Inert, Vision, hapi-swagger.
server.ts
import * as Inert from '#hapi/inert';
import * as Vision from '#hapi/vision';
import Swagger from './plugins/swagger';
...
...
// hapi server setup
...
const plugins: any[] = [Inert, Vision, Swagger];
await server.register(plugins);
...
// other setup
./plugins/swagger
import * as HapiSwagger from 'hapi-swagger';
import * as Package from '../../package.json';
const swaggerOptions: HapiSwagger.RegisterOptions = {
info: {
title: 'Some title',
version: Package.version
}
};
export default {
plugin: HapiSwagger,
options: swaggerOptions
};
We are using Inert, Vision and hapi-swagger to build and host swagger documentation.
We load those plugins in exactly this order, do not configure Inert or Vision and only set basic properties like title in the hapi-swagger config.
I've noticed that every time I want to use a package in Node I need to "npm install" it locally and then use the require keyword. I wanted to know if there's a way I could include a remote library kind of like that way we can include remote files using client side html when we use a CDN:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
require() in node core is synchronous, so there is no way to do it natively (since network i/o is async in node). You'd have to write some function to fetch the resource first and then require() it.
You can't actually supply a URL to "require", but you can of course fetch a remote resource from a URL, including a javascript resource. And then load it locally.
The following answer even links to a "remote_require" that someone wrote to do another kludgy version of this.
how to require from URL in Node.js
If you are trying to use other JavaScript files in your application, you will need to export all of the functions defined by those JavaScript files.
You would export a function like so:
exports.nameOfExport = function(x, y, z) {
// Function content
};
You would then require this file in the file you are trying to use it in with this line:
var myFileName = require('./routes/folder1/myFileName'); // Relative path to required file
If this doesn't answer your question, I suggest going to https://www.npmjs.org/ to search for a package that does what you are trying to do.
Using YUI scripts on our SSL page turned out to break the SSL connection because they dynamically load scripts from yahoo (combo) over a http connection.
As we only use the history manager of YUI 3, I wanted to host the code on our server. If I copy the code from http://yui.yahooapis.com/combo?3.2.0/build/yui/yui-min.js&3.2.0/build/oop/oop-min.js&3.2.0/build/dom/dom-base-min.js&3.2.0/build/dom/selector-native-min.js&3.2.0/build/dom/selector-css2-min.js&3.2.0/build/event-custom/event-custom-min.js&3.2.0/build/event/event-base-min.js&3.2.0/build/node/node-base-min.js&3.2.0/build/event/event-synthetic-min.js&3.2.0/build/json/json-min.js&3.2.0/build/history/history-min.js&3.2.0/build/history/history-hash-ie-min.js It does not work anymore ("Y.History.getBookmarkedState is not a function" says firebug).
Does anyone know how to do that correctly?
Thanks
You're loading the modules correctly, but you're trying to use the deprecated History API (from YUI <=3.1.x). In YUI 3.2.0, the History Utility was rewritten, and the API is not backwards-compatible.
You can still use the old API in 3.2.0 by loading the history-deprecated module instead of history. Alternatively (and preferably) you can migrate to the new API, which is simpler and more flexible than the old one. You'll find a migration guide in the History Utility documentation.
I guess you should check the API. I've checked the code from this combo and it really loads History and submodules.
YUI({ bootstrap: false }).use('history', function(Y) {
Y.log(Y.History);
});
It shows outputs G(); Also I found getBookmarkedState declaration inside history-deprecated submodule so it seems like something new is used instead of this.