mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-27 16:50:11 +02:00
Code Issues Releases Wiki Activity

load monaco dependencies asyncly

Browse Source
This commit is contained in:
Kushagra Gour
2018-12-09 23:08:51 +05:30
parent b48b6a2910
commit bae1983ca5
2 changed files with 32 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/CodeEditor.jsx
View File

@@ -32,13 +32,12 @@ import 'codemirror/keymap/vim.js';
import 'code-blast-codemirror/code-blast.js'; import 'code-blast-codemirror/code-blast.js';
import emmet from '@emmetio/codemirror-plugin'; import emmet from '@emmetio/codemirror-plugin';
import { prettify } from '../utils'; import { prettify, loadCss } from '../utils';
import { modes } from '../codeModes'; import { modes } from '../codeModes';
import '../lib/monaco/monaco.bundle';
import '../lib/monaco/monaco.css';
emmet(CodeMirror); emmet(CodeMirror);
let isMonacoDepsLoaded = false;
window.MonacoEnvironment = { window.MonacoEnvironment = {
getWorkerUrl(moduleId, label) { getWorkerUrl(moduleId, label) {
switch (label) { switch (label) {
@@ -100,7 +99,6 @@ export default class CodeEditor extends Component {
.querySelector('.monaco-editor, .CodeMirror') .querySelector('.monaco-editor, .CodeMirror')
.remove(); .remove();
} }
console.log('CODEEDITOR SHOULD UPDATE');
return true; return true;
} }
@@ -108,7 +106,6 @@ export default class CodeEditor extends Component {
return false; return false;
} }
componentDidUpdate(prevProps) { componentDidUpdate(prevProps) {
console.log('CODEEDITOR UPDATED');
this.initEditor(); this.initEditor();
} }
setModel(model) { setModel(model) {
@@ -140,7 +137,8 @@ export default class CodeEditor extends Component {
} }
setOption(option, value) {} setOption(option, value) {}
setLanguage(value) { setLanguage(value) {
console.log('setting', this.props.type, modes[value].cmMode); if (!window.monaco) return;
if (this.props.type === 'monaco') { if (this.props.type === 'monaco') {
monaco.editor.setModelLanguage( monaco.editor.setModelLanguage(
this.instance.getModel(), this.instance.getModel(),
@@ -177,9 +175,22 @@ export default class CodeEditor extends Component {
return mode; return mode;
} }
initEditor() { async loadDeps() {
if (this.props.type === 'monaco' && !isMonacoDepsLoaded) {
loadCss('lib/monaco/monaco.css');
return import(/* webpackChunkName: "monaco" */ '../lib/monaco/monaco.bundle.js').then(
() => {
isMonacoDepsLoaded = true;
}
);
}
return Promise.resolve();
}
async initEditor() {
await this.loadDeps();
const { options, prefs } = this.props; const { options, prefs } = this.props;
console.log(this.props.type);
if (this.props.type === 'monaco') { if (this.props.type === 'monaco') {
this.instance = monaco.editor.create(this.node, { this.instance = monaco.editor.create(this.node, {
language: this.getMonacoLanguageFromMode(options.mode), language: this.getMonacoLanguageFromMode(options.mode),

12
src/utils.js
View File

@@ -305,6 +305,18 @@ export function loadJS(src) {
return d.promise; return d.promise;
} }
export function loadCss(src) {
var d = deferred();
var style = window.document.createElement('link');
style.setAttribute('href', src);
style.setAttribute('rel', 'stylesheet');
document.head.appendChild(style);
style.onload = function() {
d.resolve();
};
return d.promise;
}
/* eslint-disable max-params */ /* eslint-disable max-params */
export function getCompleteHtml(html, css, js, item, isForExport) { export function getCompleteHtml(html, css, js, item, isForExport) {
/* eslint-enable max-params */ /* eslint-enable max-params */