Updated to use webpack dynamic imports (#605)
* Use webpack dynamic loading of editor
This commit is contained in:
Mikael Svenson
GitHub
parent
b3a87a7672
commit
b5ab9513fe
|
|
@ -3,7 +3,7 @@
|
|||
"solution": {
|
||||
"name": "Modern Script Editor web part by Puzzlepart",
|
||||
"id": "1425175f-3ed8-44d2-8fc4-dd1497191294",
|
||||
"version": "1.0.0.8",
|
||||
"version": "1.0.0.9",
|
||||
"includeClientSideAssets": true,
|
||||
"skipFeatureDeployment": false
|
||||
},
|
||||
|
|
|
|||
|
|
@ -22,13 +22,4 @@ build.configureWebpack.mergeConfig({
|
|||
}
|
||||
});
|
||||
|
||||
let copyDynamic = build.subTask('copy-dynamic-load-files', function (gulp, buildOptions, done) {
|
||||
gulp.src('./node_modules/sharepoint-modern-script-editor-propertypane/bundles/editor-pop-up.min.js')
|
||||
.pipe(gulp.dest('./temp/deploy'))
|
||||
.pipe(gulp.dest('./dist'));
|
||||
|
||||
done();
|
||||
});
|
||||
build.rig.addPostBuildTask(copyDynamic);
|
||||
|
||||
build.initialize(gulp);
|
||||
|
|
@ -688,8 +688,7 @@
|
|||
"@microsoft/load-themed-styles": {
|
||||
"version": "1.7.53",
|
||||
"resolved": "https://registry.npmjs.org/@microsoft/load-themed-styles/-/load-themed-styles-1.7.53.tgz",
|
||||
"integrity": "sha1-J7KoW8wJdoyOwrZS/9mIBCeah8U=",
|
||||
"dev": true
|
||||
"integrity": "sha1-J7KoW8wJdoyOwrZS/9mIBCeah8U="
|
||||
},
|
||||
"@microsoft/loader-cased-file": {
|
||||
"version": "1.5.1",
|
||||
|
|
@ -2284,15 +2283,6 @@
|
|||
"@types/q": "0.0.32"
|
||||
}
|
||||
},
|
||||
"@types/prop-types": {
|
||||
"version": "15.5.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.5.5.tgz",
|
||||
"integrity": "sha512-mOrlCEdwX3seT3n0AXNt4KNPAZZxcsABUHwBgFXOt+nvFUXkxCAO6UBJHPrDxWEa2KDMil86355fjo8jbZ+K0Q==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/react": "15.6.6"
|
||||
}
|
||||
},
|
||||
"@types/q": {
|
||||
"version": "0.0.32",
|
||||
"resolved": "https://registry.npmjs.org/@types/q/-/q-0.0.32.tgz",
|
||||
|
|
@ -2466,7 +2456,6 @@
|
|||
"version": "5.17.1",
|
||||
"resolved": "https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.17.1.tgz",
|
||||
"integrity": "sha512-4/EtO6Ns7kNtKxC+6InShwVQeNQEDT5H8Ex7m/i4OrT9i7csje4YwBQPkkpm31qJwEZEyD7bbAwyLezI63sLhg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"tslib": "1.8.1"
|
||||
}
|
||||
|
|
@ -2475,7 +2464,6 @@
|
|||
"version": "5.31.2",
|
||||
"resolved": "https://registry.npmjs.org/@uifabric/styling/-/styling-5.31.2.tgz",
|
||||
"integrity": "sha512-G7grRENxdB4NcUEtQmSisRDnIeQHQmAfcpIe5AWmVQxnB/e8U/jT+SzYqK6V12SnLf4ufN5nepZkdOjgbtuA1Q==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@microsoft/load-themed-styles": "1.7.53",
|
||||
"@uifabric/merge-styles": "5.17.1",
|
||||
|
|
@ -2487,7 +2475,6 @@
|
|||
"version": "5.34.1",
|
||||
"resolved": "https://registry.npmjs.org/@uifabric/utilities/-/utilities-5.34.1.tgz",
|
||||
"integrity": "sha512-xUZ+KlCxmA9PCEOtutfeyYnPmySkEVA/ak3fb8Uj54684GlbrnlqrfNEencVG5YgQDcNEaztTwxW3I7jSCrYJQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@uifabric/merge-styles": "5.17.1",
|
||||
"prop-types": "15.6.0",
|
||||
|
|
@ -13661,7 +13648,7 @@
|
|||
"resolved": "https://registry.npmjs.org/office-ui-fabric-react/-/office-ui-fabric-react-5.118.3.tgz",
|
||||
"integrity": "sha512-MYRah+boLs75UXkTjh1gYORitjtt7ixrfl5BFtFWkX8AGSau2ulZT4XQ0gOyKumvPfCqLzlNKXv//84tptUm0g==",
|
||||
"requires": {
|
||||
"@microsoft/load-themed-styles": "1.7.74",
|
||||
"@microsoft/load-themed-styles": "1.7.53",
|
||||
"@uifabric/icons": "5.8.0",
|
||||
"@uifabric/merge-styles": "5.17.1",
|
||||
"@uifabric/styling": "5.31.2",
|
||||
|
|
@ -13670,11 +13657,6 @@
|
|||
"tslib": "1.8.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@microsoft/load-themed-styles": {
|
||||
"version": "1.7.74",
|
||||
"resolved": "https://registry.npmjs.org/@microsoft/load-themed-styles/-/load-themed-styles-1.7.74.tgz",
|
||||
"integrity": "sha512-zBCIhD3ETnNpPQuLRVFjCUoiLZp7H4BVXR9GDnFwkCP+Q0tBlGya1Q0Gw4iG5ngBUE8+cs3r3zZGDYvezJqJUg=="
|
||||
},
|
||||
"@uifabric/icons": {
|
||||
"version": "5.8.0",
|
||||
"resolved": "https://registry.npmjs.org/@uifabric/icons/-/icons-5.8.0.tgz",
|
||||
|
|
@ -13683,35 +13665,6 @@
|
|||
"@uifabric/styling": "5.31.2",
|
||||
"tslib": "1.8.1"
|
||||
}
|
||||
},
|
||||
"@uifabric/merge-styles": {
|
||||
"version": "5.17.1",
|
||||
"resolved": "https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.17.1.tgz",
|
||||
"integrity": "sha512-4/EtO6Ns7kNtKxC+6InShwVQeNQEDT5H8Ex7m/i4OrT9i7csje4YwBQPkkpm31qJwEZEyD7bbAwyLezI63sLhg==",
|
||||
"requires": {
|
||||
"tslib": "1.8.1"
|
||||
}
|
||||
},
|
||||
"@uifabric/styling": {
|
||||
"version": "5.31.2",
|
||||
"resolved": "https://registry.npmjs.org/@uifabric/styling/-/styling-5.31.2.tgz",
|
||||
"integrity": "sha512-G7grRENxdB4NcUEtQmSisRDnIeQHQmAfcpIe5AWmVQxnB/e8U/jT+SzYqK6V12SnLf4ufN5nepZkdOjgbtuA1Q==",
|
||||
"requires": {
|
||||
"@microsoft/load-themed-styles": "1.7.74",
|
||||
"@uifabric/merge-styles": "5.17.1",
|
||||
"@uifabric/utilities": "5.34.1",
|
||||
"tslib": "1.8.1"
|
||||
}
|
||||
},
|
||||
"@uifabric/utilities": {
|
||||
"version": "5.34.1",
|
||||
"resolved": "https://registry.npmjs.org/@uifabric/utilities/-/utilities-5.34.1.tgz",
|
||||
"integrity": "sha512-xUZ+KlCxmA9PCEOtutfeyYnPmySkEVA/ak3fb8Uj54684GlbrnlqrfNEencVG5YgQDcNEaztTwxW3I7jSCrYJQ==",
|
||||
"requires": {
|
||||
"@uifabric/merge-styles": "5.17.1",
|
||||
"prop-types": "15.6.0",
|
||||
"tslib": "1.8.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -16556,20 +16509,6 @@
|
|||
"safe-buffer": "5.1.1"
|
||||
}
|
||||
},
|
||||
"sharepoint-modern-script-editor-propertypane": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/sharepoint-modern-script-editor-propertypane/-/sharepoint-modern-script-editor-propertypane-1.0.5.tgz",
|
||||
"integrity": "sha512-CcLKJSHaf5hyCHB6O2bloahgfN9WZVp7CH/ROFhZ3d19KxhuoTS91HzPsn8bIB+qaKdimfva+f9ucxhF6AuMvg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/prop-types": "15.5.5",
|
||||
"@types/react": "15.6.6",
|
||||
"@types/react-dom": "15.5.6",
|
||||
"office-ui-fabric-react": "5.118.3",
|
||||
"react": "15.6.2",
|
||||
"react-dom": "15.6.2"
|
||||
}
|
||||
},
|
||||
"shebang-command": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
|
||||
|
|
|
|||
|
|
@ -8,12 +8,13 @@
|
|||
"dependencies": {
|
||||
"@microsoft/sp-core-library": "1.5.1",
|
||||
"@microsoft/sp-webpart-base": "1.5.1",
|
||||
"@types/es6-promise": "0.0.33",
|
||||
"@types/react": "15.6.6",
|
||||
"@types/react-dom": "15.5.6",
|
||||
"@types/webpack-env": "1.13.1",
|
||||
"office-ui-fabric-react": "^5.118.3",
|
||||
"react": "15.6.2",
|
||||
"react-dom": "15.6.2",
|
||||
"@types/es6-promise": "0.0.33"
|
||||
"react-dom": "15.6.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@microsoft/sp-build-web": "1.5.1",
|
||||
|
|
@ -23,7 +24,6 @@
|
|||
"@types/mocha": "2.2.38",
|
||||
"ajv": "~5.2.2",
|
||||
"gulp": "~3.9.1",
|
||||
"sharepoint-modern-script-editor-propertypane": "^1.0.5",
|
||||
"webpack-bundle-analyzer": "^2.13.1"
|
||||
},
|
||||
"scripts": {
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 156 B |
|
|
@ -35,8 +35,11 @@ export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEd
|
|||
this.domElement.innerHTML = this.properties.script;
|
||||
this.executeScript(this.domElement);
|
||||
} else {
|
||||
// Dynamically load the editor pane to reduce overall bundle size
|
||||
const editorPopUp: any = await SPComponentLoader.loadScript(this.getScriptRoot() + '/editor-pop-up.min.js', { globalExportsName: "EditorPopUp" });
|
||||
// Dynamically load the editor pane to reduce overall bundle size
|
||||
const editorPopUp = await import(
|
||||
/* webpackChunkName: 'scripteditor' */
|
||||
'./components/ScriptEditor'
|
||||
);
|
||||
const element: React.ReactElement<IScriptEditorProps> = React.createElement(
|
||||
editorPopUp.default,
|
||||
{
|
||||
|
|
@ -49,15 +52,6 @@ export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEd
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Use a dummy bundled image to get the path from where the bundle is served.
|
||||
*/
|
||||
private getScriptRoot(): string {
|
||||
const runtimePath: string = require('./1x1.png');
|
||||
const scriptRoot = runtimePath.substr(0, runtimePath.lastIndexOf("/"));
|
||||
return scriptRoot;
|
||||
}
|
||||
|
||||
protected get dataVersion(): Version {
|
||||
return Version.parse('1.0');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
@import '~office-ui-fabric-react/dist/sass/References.scss';
|
||||
|
||||
.scriptEditor {
|
||||
.container {
|
||||
max-width: 700px;
|
||||
margin: 0px auto;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.row {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
import * as React from 'react';
|
||||
import styles from './ScriptEditor.module.scss';
|
||||
import { IScriptEditorProps } from './IScriptEditorProps';
|
||||
import { Dialog, DialogType, DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
|
||||
import { DefaultButton, PrimaryButton } from 'office-ui-fabric-react/lib/Button';
|
||||
import { TextField } from 'office-ui-fabric-react/lib/TextField';
|
||||
import { loadStyles } from '@microsoft/load-themed-styles';
|
||||
require('./overrides.css');
|
||||
|
||||
export default class ScriptEditor extends React.Component<IScriptEditorProps, any> {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
this._showDialog = this._showDialog.bind(this);
|
||||
this._closeDialog = this._closeDialog.bind(this);
|
||||
this._cancelDialog = this._cancelDialog.bind(this);
|
||||
this._onScriptEditorTextChanged = this._onScriptEditorTextChanged.bind(this);
|
||||
|
||||
const uiFabricCSS: string = `
|
||||
.pzl-bgColor-themeDark, .pzl-bgColor-themeDark--hover:hover {
|
||||
background-color: "[theme:themeDark, default:#005a9e]";
|
||||
}
|
||||
`;
|
||||
loadStyles(uiFabricCSS);
|
||||
this.state = {
|
||||
showDialog: false
|
||||
};
|
||||
}
|
||||
|
||||
public componentDidMount(): void {
|
||||
this.setState({ script: this.props.script, loaded: this.props.script });
|
||||
}
|
||||
private _showDialog() {
|
||||
this.setState({ showDialog: true });
|
||||
}
|
||||
|
||||
private _closeDialog() {
|
||||
this.setState({ showDialog: false });
|
||||
this.props.save(this.state.script);
|
||||
}
|
||||
|
||||
private _cancelDialog() {
|
||||
this.props.save(this.state.loaded);
|
||||
this.setState({ showDialog: false, script: this.state.loaded });
|
||||
}
|
||||
|
||||
private _onScriptEditorTextChanged(text: string) {
|
||||
this.setState({ script: text });
|
||||
}
|
||||
|
||||
public render(): React.ReactElement<IScriptEditorProps> {
|
||||
const viewMode = <span dangerouslySetInnerHTML={{ __html: this.state.script }}></span>;
|
||||
|
||||
return (
|
||||
<div >
|
||||
<div className={styles.scriptEditor}>
|
||||
<div className={styles.container}>
|
||||
<div className={`ms-Grid-row pzl-bgColor-themeDark ms-fontColor-white ${styles.row}`}>
|
||||
<div className="ms-Grid-col ms-lg10 ms-xl8 ms-xlPush2 ms-lgPush1">
|
||||
<span className="ms-font-xl ms-fontColor-white">{this.props.title}</span>
|
||||
<p className="ms-font-l ms-fontColor-white"></p>
|
||||
<DefaultButton description='Opens the snippet dialog' onClick={this._showDialog}>Edit snippet</DefaultButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Dialog
|
||||
isOpen={this.state.showDialog}
|
||||
type={DialogType.normal}
|
||||
onDismiss={this._closeDialog}
|
||||
title='Embed'
|
||||
subText='Paste your script, markup or embed code below. Note that scripts will only run in view mode.'
|
||||
isBlocking={true}
|
||||
className={'ScriptPart'}
|
||||
>
|
||||
<TextField multiline rows={15} onChanged={this._onScriptEditorTextChanged} value={this.state.script} />
|
||||
<DialogFooter>
|
||||
<PrimaryButton onClick={this._closeDialog}>Save</PrimaryButton>
|
||||
<DefaultButton onClick={this._cancelDialog}>Cancel</DefaultButton>
|
||||
</DialogFooter>
|
||||
{viewMode}
|
||||
</Dialog>
|
||||
</div >);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
.ScriptPart .ms-Dialog-main {
|
||||
width: 65%;
|
||||
max-width: 65%;
|
||||
}
|
||||
Loading…
Reference in New Issue