honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fixed so that AMD modules don't detect define

This commit is contained in:
Mikael Svenson 2018-03-26 12:37:57 +02:00
parent fdef364015
commit b199044b17
4 changed files with 22 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
samples/react-script-editor/README.md
View File

@ -70,22 +70,9 @@ You may add CSS via style tags or `link` tags.
</div>
```
## Notes for AMD/UMD modules
If the library you load is an AMD/UMD module you have to add the custom attribute `module` on the script tag, specifying the global name which should hold the module.
```html
<div id="time"></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js" module="mymoment"></script>
<script>
var m = mymoment();
document.getElementById("time").innerHTML = m.format('MMMM Do YYYY, HH:mm:ss');
</script>
```
## Support for classic _spPageContextInfo
If your scripts rely on the classic _spPageContextInfo, you can enable that in the web part property pane.
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/drop-1.4.1-green.svg)
@ -110,6 +97,7 @@ Version|Date|Comments
1.0.0.3|January 10th, 2018|Updated SPFx version, added remove padding property and refactoring
1.0.0.4|February 14th, 2018|Added title property for edit mode and documentation for enabling the web part on Group sites / tenant wide
1.0.0.5|March 8th, 2018|Added support for loading scripts which are AMD/UMD modules. Added support for classic _spPageContextInfo. Refactoring.
1.0.0.6|March 26th, 2018|Fixed so that AMD modules don't detect `define`, and load as non-modules.
## Disclaimer
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**

2
samples/react-script-editor/config/package-solution.json
View File

@ -2,7 +2,7 @@
"solution": {
"name": "Modern Script Editor web part by Puzzlepart",
"id": "1425175f-3ed8-44d2-8fc4-dd1497191294",
"version": "1.0.0.5",
"version": "1.0.0.6",
"includeClientSideAssets": true,
"skipFeatureDeployment": false
},

3
samples/react-script-editor/config/write-manifests.json
View File

@ -1,3 +1,4 @@
{
"cdnBasePath": "<!-- PATH TO CDN -->"
"$schema": "https://dev.office.com/json-schemas/spfx-build/write-manifests.schema.json",
"cdnBasePath": "<!-- PATH TO CDN -->"
}

39
samples/react-script-editor/src/webparts/scriptEditor/ScriptEditorWebPart.ts
View File

@ -129,7 +129,7 @@ export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEd
private async executeScript(element: HTMLElement) {
// Define global name to tack scripts on in case script to be loaded is not AMD/UMD
if(this.properties.spPageContextInfo && !window["_spPageContextInfo"]){
if (this.properties.spPageContextInfo && !window["_spPageContextInfo"]) {
window["_spPageContextInfo"] = this.context.pageContext.legacyPageContext;
}
@ -139,7 +139,7 @@ export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEd
const scripts = [];
const children_nodes = element.childNodes;
for (var i = 0; children_nodes[i]; i++) {
for (let i = 0; children_nodes[i]; i++) {
const child: any = children_nodes[i];
if (this.nodeName(child, "script") &&
(!child.type || child.type.toLowerCase() === "text/javascript")) {
@ -149,44 +149,41 @@ export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEd
const urls = [];
const onLoads = [];
const moduleMap = [];
for (var j = 0; scripts[j]; j++) {
const scriptTag = scripts[j];
for (let i = 0; scripts[i]; i++) {
const scriptTag = scripts[i];
if (scriptTag.src && scriptTag.src.length > 0) {
urls.push(scriptTag.src);
if (scriptTag.attributes["module"] && scriptTag.attributes["module"].value.length > 0) {
moduleMap[scriptTag.src] = scriptTag.attributes["module"].value;
}
}
if (scriptTag.onload && scriptTag.onload.length > 0) {
onLoads.push(scriptTag.onload);
}
}
// Execute promises in sequentially - https://hackernoon.com/functional-javascript-resolving-promises-sequentially-7aac18c4431e
// Use "ScriptGlobal" as the global namein case script is AMD/UMD
let oldamd = null;
if (window["define"] && window["define"].amd) {
oldamd = window["define"].amd;
window["define"].amd = null;
}
for (let i = 0; i < urls.length; i++) {
try {
let m: any = await SPComponentLoader.loadScript(urls[i], { globalExportsName: "ScriptGlobal" });
let moduleName = moduleMap[urls[i]];
if (moduleName) {
//If it's a AMD/UMD module, then assign to that global variable
window[moduleName] = m;
}
await SPComponentLoader.loadScript(urls[i], { globalExportsName: "ScriptGlobal" });
} catch (error) {
console.error(error);
}
}
if (oldamd) {
window["define"].amd = oldamd;
}
for (j = 0; scripts[j]; j++) {
const scriptTag = scripts[j];
for (let i = 0; scripts[i]; i++) {
const scriptTag = scripts[i];
if (scriptTag.parentNode) { scriptTag.parentNode.removeChild(scriptTag); }
this.evalScript(scripts[j]);
this.evalScript(scripts[i]);
}
// execute any onload people have added
for (j = 0; onLoads[j]; j++) {
onLoads[j]();
for (let i = 0; onLoads[i]; i++) {
onLoads[i]();
}
}
}