Skip to content

Commit

Permalink
⚡ Improve workflow for creating new theme, generalize theme-related c…
Browse files Browse the repository at this point in the history
…ode as a node-require module "themes".
  • Loading branch information
CosmoMyzrailGorynych committed Oct 7, 2020
1 parent 86623b8 commit b57b0ae
Show file tree
Hide file tree
Showing 17 changed files with 311 additions and 100 deletions.
2 changes: 1 addition & 1 deletion app/data/i18n/English.json
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,7 @@
"theme": "Theme",
"themeDay": "Light",
"themeNight": "Dark",
"themeSpringSream": "Spring Stream",
"themeSpringStream": "Spring Stream",
"themeLucasDracula": "Lucas Dracula",
"types": "Types",
"zipExport": "Export for web",
Expand Down
25 changes: 20 additions & 5 deletions gulpfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@
/* eslint no-console: 0 */
const path = require('path'),
gulp = require('gulp'),
changed = require('gulp-changed'),
concat = require('gulp-concat'),
replace = require('gulp-replace'),
sourcemaps = require('gulp-sourcemaps'),
minimist = require('minimist'),
ts = require('gulp-typescript'),
stylus = require('gulp-stylus'),
riot = require('gulp-riot'),
pug = require('gulp-pug'),
Expand Down Expand Up @@ -149,14 +149,29 @@ const concatScripts = () =>
console.error('[scripts error]', err);
})
.on('change', fileChangeNotifier);

const copyRequires = () =>
gulp.src('./src/node_requires/**/*')
gulp.src([
'./src/node_requires/**/*',
'!./src/node_requires/**/*.ts'
])
.pipe(sourcemaps.init())
// ¯\_(ツ)_/¯
.pipe(sourcemaps.mapSources((sourcePath) => '../../src/' + sourcePath))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./app/data/node_requires'));

const tsProject = ts.createProject('tsconfig.json');

const processRequiresTS = () =>
gulp.src('./src/node_requires/**/*.ts')
.pipe(sourcemaps.init())
.pipe(tsProject())
.pipe(sourcemaps.write())
.pipe(gulp.dest('./app/data/node_requires'));

const processRequires = gulp.series(copyRequires, processRequiresTS);

const copyInEditorDocs = () =>
gulp.src('./docs/docs/ct.*.md')
.pipe(gulp.dest('./app/data/node_requires'));
Expand Down Expand Up @@ -195,15 +210,15 @@ const watchStylus = () => {
.on('change', fileChangeNotifier);
};
const watchPug = () => {
gulp.watch('./src/pug/*.pug', compilePug)
gulp.watch('./src/pug/**/*.pug', compilePug)
.on('change', fileChangeNotifier)
.on('error', err => {
notifier.notify(makeErrorObj('Pug failure', err));
console.error('[pug error]', err);
});
};
const watchRequires = () => {
gulp.watch('./src/node_requires/**/*', copyRequires)
gulp.watch('./src/node_requires/**/*', processRequires)
.on('change', fileChangeNotifier)
.on('error', err => {
notifier.notify(makeErrorObj('Failure of node_requires', err));
Expand Down Expand Up @@ -396,7 +411,7 @@ const build = gulp.parallel([
compilePug,
compileStylus,
compileScripts,
copyRequires,
processRequires,
copyInEditorDocs,
icons,
bakeTypedefs
Expand Down
103 changes: 100 additions & 3 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 4 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
},
"license": "MIT",
"dependencies": {
"@types/node": "^14.11.5",
"filemode": "^3.0.0",
"fs-extra": "^9.0.1",
"globby": "^11.0.1",
Expand All @@ -36,6 +37,7 @@
"gulp-stylint": "^4.0.2",
"gulp-stylus": "^2.7.0",
"gulp-svgstore": "^7.0.1",
"gulp-typescript": "^6.0.0-alpha.1",
"gulp-zip": "^5.0.1",
"jsdoc-x": "^4.1.0",
"minimist": "^1.2.5",
Expand All @@ -47,7 +49,8 @@
"streamqueue": "^1.1.2",
"stylint-stylish": "^2.0.0",
"stylus": "^0.54.7",
"tsd-jsdoc": "^2.5.0"
"tsd-jsdoc": "^2.5.0",
"typescript": "^4.0.3"
},
"devDependencies": {
"eslint-plugin-pug": "^1.2.2",
Expand Down
22 changes: 2 additions & 20 deletions src/js/codeEditorHelpers.js
Original file line number Diff line number Diff line change
Expand Up @@ -222,20 +222,6 @@
}]);
};

const themeMappings = {
Day: 'tomorrow',
Night: 'ambiance',
Horizon: 'horizon',
SpringStream: 'spring',
LucasDracula: 'lucasdracula',
Forest: 'forest',
default: 'tomorrow'
};
const glob = require('./data/node_requires/glob');
glob.codeEditorThemeMappings = themeMappings;
window.signals.on('UIThemeChanged', theme => {
monaco.editor.setTheme(themeMappings[theme] ? themeMappings[theme] : themeMappings.default);
});
window.signals.on('codeFontUpdated', () => {
const editorWrappers = document.querySelectorAll('.aCodeEditor');
for (const editorWrap of editorWrappers) {
Expand All @@ -262,9 +248,7 @@
return localStorage.fontFamily || 'Iosevka, monospace';
},
get theme() {
return themeMappings[localStorage.UItheme] ?
themeMappings[localStorage.UItheme] :
themeMappings.default;
return localStorage.UItheme || 'Day';
},
get fontLigatures() {
return localStorage.codeLigatures !== 'off';
Expand Down Expand Up @@ -301,9 +285,7 @@
textarea.codeEditor = codeEditor;
// eslint-disable-next-line id-blacklist
codeEditor.tag = textarea;
textarea.classList.add(themeMappings[localStorage.UItheme] ?
themeMappings[localStorage.UItheme] :
themeMappings.default);
textarea.classList.add(localStorage.UItheme || 'Day');

codeEditor.getModel()._options.defaultEOL = monaco.editor.DefaultEndOfLine.LF;

Expand Down
81 changes: 81 additions & 0 deletions src/node_requires/themes/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
const path = require('path');

const defaultTheme = 'Day';
const builtInThemes = [
'Day',
'SpringStream',
'Forest',
'Horizon',
'LucasDracula',
'Night'
];
interface ITheme {
name: string;
translated: string;
monacoTheme: object;
css: string;
}

const registeredThemes: ITheme[] = [];
localStorage.UItheme = localStorage.UItheme || 'Day';

const mod = {
registerTheme(name: string): ITheme {
if (mod.getTheme(name)) {
throw new Error(`A theme called ${name} is already registered.`);
}
const monacoTheme = require(path.join('./data/node_requires/monaco-themes', `${name}.json`));
(window as any).monaco.editor.defineTheme(name, monacoTheme);
const css = `./data/theme${name}.css`;
const theme = {
name,
get translated() {
return (window as any).languageJSON.menu[`theme${name}`] || name;
},
monacoTheme,
css
};
registeredThemes.push(theme);
return theme;
},
getTheme(name: string): ITheme | void {
return registeredThemes.find(t => t.name === name);
},
loadBuiltInThemes() {
for (const themeName of builtInThemes) {
if (mod.getTheme(themeName)) {
continue;
}
mod.registerTheme(themeName);
}
},
async switchToTheme(name: string) {
const fs = require('fs-extra');
try {
const theme = mod.getTheme(name);
if (!theme) {
throw new Error(`A theme called ${name} either does not exist or is not loaded.`);
}
await fs.lstat(theme.css);
const link = (document.getElementById('themeCSS') as HTMLLinkElement);
// Avoid flickering on startup theme reloading
if (link.href !== theme.css) {
link.href = theme.css;
}
(window as any).monaco.editor.setTheme(theme.name);
(window as any).signals.trigger('UIThemeChanged', name);
localStorage.UItheme = name;
} catch (o_O) {
(window as any).alertify.error(`Could not load theme ${name}. Rolling back to the default ${defaultTheme}.`);
await mod.switchToTheme(defaultTheme);
}
},
async loadTheme() {
mod.switchToTheme(localStorage.UItheme);
},
getThemeList(): ITheme[] {
return [...registeredThemes];
}
};

module.exports = mod;
21 changes: 18 additions & 3 deletions src/pug/includes/head.pug
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,24 @@ head
meta(charset='utf-8')
meta(name='description', content='IDE')
meta(name='viewport', content='width=device-width, initial-scale=1')

link(href='data/themeDay.css' id="themeCSS" rel='stylesheet')
style.
#loading {
position: fixed;
font-family: sans-serif;
left: 0;
right: 0;
top: 0;
bottom: 0;
line-height: 86vh;
text-align: center;
z-index: 50;
background: #fff;
color: #333;
font-size: 4vw;
font-weight: 300;
}
link(href='./data/themeDay.css' id="themeCSS" rel='stylesheet')
script(type="text/javascript").
localStorage.UItheme = localStorage.UItheme || 'Day';
var theme = localStorage.UItheme;
document.getElementById('themeCSS').href = `data/theme${theme}.css`;
document.getElementById('themeCSS').href = `./data/theme${theme}.css`;
Loading

0 comments on commit b57b0ae

Please sign in to comment.