data-main<\/code> script before fetching the Visitor Api<\/a>.<\/p>\nUpdate – this post’s solution\u00a0is now obsolete (1. Aug. 2014)<\/h4>\n
The co-existence problems of the two RequireJS libraries have been resolved with the version 2.1 of the VisitorAPI<\/a>. The VisitorAPI library is distributed from now on as a single JavaScript file too. That source file is AMD loader compatible. Thus the VisitorAPI v. 2.1 no longer introduces global variables in the JavaScript context.<\/p>\nThe whole loading code condenses down to:<\/p>\n
requirejs.config({\r\n paths: {\r\n \/\/\/ load the Visitor API from the module named \"LiveSupport\"\r\n LiveSupport: '\/\/YALST_PRODUCT_SERVER\/YALST_DIR\/visitor_api\/v2.1\/LiveSupport.min',\r\n\r\n \/\/\/ or alternatively load the anonymous module\r\n yalstAPI: '\/\/YALST_PRODUCT_SERVER\/YALST_DIR\/visitor_api\/v2.1\/LiveSupportAnonymous.min'\r\n }\r\n }\r\n);\r\n\r\nrequire([\"LiveSupport\"], function(LiveSupportLibrary)\r\n\u00a0 \u00a0 {\r\n\u00a0 \u00a0 \u00a0 \u00a0 LiveSupportLibrary.require([\"api\/VisitorAPI\"], function(api)\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 {\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ use the VisitorAPI provided in the api argument\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }\r\n\u00a0 \u00a0 \u00a0 \u00a0 );\r\n\u00a0 \u00a0 }\r\n);\r\n<\/code><\/pre>\nThe details are discussed in this tutorial<\/a>.<\/p>\nThe Original Problem<\/h4>\n
The RequireJS<\/a> library adds support for Javascript modules which is missing in the current webbrowser implementations.
\nThe yalst Visitor Api<\/a> uses a renamed RequireJS<\/a> (version 2.1.9 at the time of writing) for code organisation and loading, and so may the client pages themselves.
\nHowever since RequireJS does not provide a noConflict()<\/code> method both versions can interfere on the page resulting in Javascript errors.<\/p>\nRequireJS in the Visitor Api<\/h4>\n
The Visitor Chat JavaScript Api provides the namespace LiveSupport<\/code> which<\/p>\n\n- under the namespace
LiveSupport.VisitorAPI<\/code> contains the documented public methods<\/a> and<\/li>\n- under the root contains it’s own version of RequireJS.<\/li>\n<\/ul>\n
Thus in addition to the documented use<\/a> these methods are available in the Api too:<\/p>\nLiveSupport.define()\r\nLiveSupport.require()\r\nLiveSupport.requirejs()\r\n<\/code><\/pre>\nThe api is put in this namespace by the RequireJS optimiser r.js<\/a> using a build.js<\/em> file like this:<\/p>\n({\r\n\tappDir: \".\",\r\n\tbaseUrl: \".\",\r\n\tpaths: {\r\n\t\trequireLib: \"vendor\/require\" \/\/ path to vanilla RequireJS 2.1.9\r\n\t},\r\n\tnamespace: \"LiveSupport\",\r\n\tmodules: [\r\n\t\t{\r\n\t\t\tname: \"LiveSupport\",\r\n\t\t\tinclude: ['requireLib'],\r\n\t\t\tcreate: true\r\n\t\t}\r\n\t]\r\n})\r\n<\/code><\/pre>\nThe Solution<\/h4>\n
The client page can use it’s own (non-namespaced) version of RequireJS, given it completes loading the data-main<\/code> script before the Visitor Api’s namespaced version.<\/em><\/p>\nAn Example<\/h4>\n
The example page index-sync.html<\/em> uses RequireJS in require.min.js<\/em> with the data-main<\/code> script main.js<\/em> to load jQuery<\/em>, underscore<\/em> and Lo-Dash<\/em>.
\nIn this example the <script><\/code> tag for the Visitor Api is created “by hand” [1<\/a>] in a function called from the data-main<\/code> script main.js<\/em>. This tag loads the Visitor Api’s own namespaced RequireJS in LiveSupport.js<\/em> with the data-main<\/code> script LiveSupportMain.js<\/em> which in turn loads the actual api source files.
\nAmong the api files is yet an own version of underscore<\/em> which by using _.noConflict()<\/code> is guaranteed to be free of side effects for the client page.<\/p>\nThe directory structure and the network activity log<\/a> of a web page containing both the vanilla version of RequireJS and the namespaced version of the Visitor Api is shown here:
\n![\"RequireJS](\"https:\/\/www.yalst.de\/wp-content\/uploads\/2015\/04\/NoConflictLoadingNetworkLog.png\")
\nHere is the code to accomplish sequential loading of the libraries:<\/p>\n\/\/index-sync.html\r\n