Skip to content

Commit 55da5c7

Browse files
matz3matz3
committed
[INTERNAL] Refactoring
- Convert Promises to async/await - Use template literals
1 parent 89eda2a commit 55da5c7

File tree

2 files changed

+122
-131
lines changed

2 files changed

+122
-131
lines changed

‎lib/index.js

Lines changed: 114 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ Builder.prototype.cacheTheme = function(result) {
104104
};
105105

106106
/**
107-
* Creates a themebuild
107+
* Runs a theme build
108108
* @param {object} options
109109
* @param {object} options.compiler compiler object as passed to less
110110
* @param {boolean} options.cssVariables whether or not to enable css variables output
@@ -178,7 +178,7 @@ Builder.prototype.build = function(options) {
178178
});
179179
}
180180

181-
function compile(config) {
181+
async function compile(config) {
182182
const parserOptions = clone(options.parser);
183183
let rootpath;
184184

@@ -208,151 +208,138 @@ Builder.prototype.build = function(options) {
208208

209209
const parser = createParser(parserOptions, fnFileHandler);
210210

211-
return new Promise(function(resolve, reject) {
212-
parser.parse(config.content, function(err, tree) {
213-
if (err) {
214-
reject(err);
215-
} else {
216-
resolve(tree);
217-
}
211+
function parseContent(content) {
212+
return new Promise(function(resolve, reject) {
213+
parser.parse(content, function(err, tree) {
214+
if (err) {
215+
reject(err);
216+
} else {
217+
resolve(tree);
218+
}
219+
});
218220
});
219-
}).then(async function(tree) {
220-
const result = {};
221-
222-
result.tree = tree;
221+
}
223222

224-
// plugins to collect imported files and variable values
225-
const oImportCollector = new ImportCollectorPlugin({
226-
importMappings: mFileMappings[filename]
227-
});
228-
const oVariableCollector = new VariableCollectorPlugin(options.compiler);
229-
const oUrlCollector = new UrlCollector();
223+
const tree = await parseContent(config.content);
224+
const result = {tree};
230225

231-
// render to css
232-
result.css = tree.toCSS(Object.assign({}, options.compiler, {
233-
plugins: [oImportCollector, oVariableCollector, oUrlCollector]
234-
}));
226+
// plugins to collect imported files and variable values
227+
const oImportCollector = new ImportCollectorPlugin({
228+
importMappings: mFileMappings[filename]
229+
});
230+
const oVariableCollector = new VariableCollectorPlugin(options.compiler);
231+
const oUrlCollector = new UrlCollector();
232+
233+
// render to css
234+
result.css = tree.toCSS(Object.assign({}, options.compiler, {
235+
plugins: [oImportCollector, oVariableCollector, oUrlCollector]
236+
}));
237+
238+
// retrieve imported files
239+
result.imports = oImportCollector.getImports();
240+
241+
// retrieve reduced set of variables
242+
result.variables = oVariableCollector.getVariables(Object.keys(mFileMappings[filename] || {}));
243+
244+
// retrieve all variables
245+
result.allVariables = oVariableCollector.getAllVariables();
246+
247+
// also compile rtl-version if requested
248+
let oRTL;
249+
if (options.rtl) {
250+
const RTLPlugin = require("./plugin/rtl");
251+
oRTL = new RTLPlugin();
252+
253+
const urls = oUrlCollector.getUrls();
254+
255+
const existingImgRtlUrls = (await Promise.all(
256+
urls.map(async ({currentDirectory, relativeUrl}) => {
257+
const relativeImgRtlUrl = RTLPlugin.getRtlImgUrl(relativeUrl);
258+
if (relativeImgRtlUrl) {
259+
const resolvedImgRtlUrl = path.posix.join(currentDirectory, relativeImgRtlUrl);
260+
if (await that.fileUtils.findFile(resolvedImgRtlUrl, options.rootPaths)) {
261+
return resolvedImgRtlUrl;
262+
}
263+
}
264+
})
265+
)).filter(Boolean);
235266

236-
// retrieve imported files
237-
result.imports = oImportCollector.getImports();
267+
oRTL.setExistingImgRtlPaths(existingImgRtlUrls);
268+
}
238269

239-
// retrieve reduced set of variables
240-
result.variables = oVariableCollector.getVariables(Object.keys(mFileMappings[filename] || {}));
270+
if (oRTL) {
271+
result.cssRtl = tree.toCSS(Object.assign({}, options.compiler, {
272+
plugins: [oRTL]
273+
}));
274+
}
241275

242-
// retrieve all variables
243-
result.allVariables = oVariableCollector.getAllVariables();
276+
if (rootpath) {
277+
result.imports.unshift(rootpath);
278+
}
244279

245-
// also compile rtl-version if requested
246-
let oRTL;
247-
if (options.rtl) {
248-
const RTLPlugin = require("./plugin/rtl");
249-
oRTL = new RTLPlugin();
250-
251-
const urls = oUrlCollector.getUrls();
252-
253-
const existingImgRtlUrls = (await Promise.all(
254-
urls.map(async ({currentDirectory, relativeUrl}) => {
255-
const relativeImgRtlUrl = RTLPlugin.getRtlImgUrl(relativeUrl);
256-
if (relativeImgRtlUrl) {
257-
const resolvedImgRtlUrl = path.posix.join(currentDirectory, relativeImgRtlUrl);
258-
if (await that.fileUtils.findFile(resolvedImgRtlUrl, options.rootPaths)) {
259-
return resolvedImgRtlUrl;
260-
}
261-
}
262-
})
263-
)).filter(Boolean);
280+
// also compile css-variables version if requested
281+
if (options.cssVariables) {
282+
// parse the content again to have a clean tree
283+
const cssVariablesSkeletonTree = await parseContent(config.content);
264284

265-
oRTL.setExistingImgRtlPaths(existingImgRtlUrls);
266-
}
285+
// generate the skeleton-css and the less-variables
286+
const CSSVariablesCollectorPlugin = require("./plugin/css-variables-collector");
287+
const oCSSVariablesCollector = new CSSVariablesCollectorPlugin(config);
288+
const oVariableCollector = new VariableCollectorPlugin(options.compiler);
289+
result.cssSkeleton = cssVariablesSkeletonTree.toCSS(Object.assign({}, options.compiler, {
290+
plugins: [oCSSVariablesCollector, oVariableCollector]
291+
}));
292+
const varsOverride = oVariableCollector.getAllVariables();
293+
result.cssVariablesSource = oCSSVariablesCollector.toLessVariables(varsOverride);
267294

268295
if (oRTL) {
269-
result.cssRtl = tree.toCSS(Object.assign({}, options.compiler, {
270-
plugins: [oRTL]
296+
const oCSSVariablesCollectorRTL = new CSSVariablesCollectorPlugin(config);
297+
result.cssSkeletonRtl = cssVariablesSkeletonTree.toCSS(Object.assign({}, options.compiler, {
298+
plugins: [oCSSVariablesCollectorRTL, oRTL]
271299
}));
272300
}
273301

274-
if (rootpath) {
275-
result.imports.unshift(rootpath);
276-
}
302+
// generate the css-variables content out of the less-variables
303+
const cssVariablesTree = await parseContent(result.cssVariablesSource);
304+
const CSSVariablesPointerPlugin = require("./plugin/css-variables-pointer");
305+
result.cssVariables = cssVariablesTree.toCSS(Object.assign({}, options.compiler, {
306+
plugins: [new CSSVariablesPointerPlugin()]
307+
}));
308+
}
277309

278-
// also compile css-variables version if requested
279-
if (options.cssVariables) {
280-
return new Promise(function(resolve, reject) {
281-
// parse the content again to have a clean tree
282-
parser.parse(config.content, function(err, tree) {
283-
if (err) {
284-
reject(err);
285-
} else {
286-
resolve(tree);
287-
}
288-
});
289-
}).then(function(tree) {
290-
// generate the skeleton-css and the less-variables
291-
const CSSVariablesCollectorPlugin = require("./plugin/css-variables-collector");
292-
const oCSSVariablesCollector = new CSSVariablesCollectorPlugin(config);
293-
const oVariableCollector = new VariableCollectorPlugin(options.compiler);
294-
result.cssSkeleton = tree.toCSS(Object.assign({}, options.compiler, {
295-
plugins: [oCSSVariablesCollector, oVariableCollector]
296-
}));
297-
const varsOverride = oVariableCollector.getAllVariables();
298-
result.cssVariablesSource = oCSSVariablesCollector.toLessVariables(varsOverride);
299-
if (oRTL) {
300-
const oCSSVariablesCollectorRTL = new CSSVariablesCollectorPlugin(config);
301-
result.cssSkeletonRtl = tree.toCSS(Object.assign({}, options.compiler, {
302-
plugins: [oCSSVariablesCollectorRTL, oRTL]
303-
}));
304-
}
305-
return tree;
306-
}).then(function(tree) {
307-
// generate the css-variables content out of the less-variables
308-
return new Promise(function(resolve, reject) {
309-
parser.parse(result.cssVariablesSource, function(err, tree) {
310-
if (err) {
311-
reject(err);
312-
} else {
313-
const CSSVariablesPointerPlugin = require("./plugin/css-variables-pointer");
314-
result.cssVariables = tree.toCSS(Object.assign({}, options.compiler, {
315-
plugins: [new CSSVariablesPointerPlugin()]
316-
}));
317-
resolve(result);
318-
}
319-
});
320-
});
321-
});
322-
}
310+
return result;
311+
}
323312

313+
async function addInlineParameters(result) {
314+
// Inline parameters can only be added when the library name is known
315+
if (typeof options.library !== "object" || typeof options.library.name !== "string") {
324316
return result;
325-
});
326-
}
317+
}
327318

328-
function addInlineParameters(result) {
329-
return new Promise(function(resolve, reject) {
330-
if (typeof options.library === "object" && typeof options.library.name === "string") {
331-
const parameters = JSON.stringify(result.variables);
319+
const parameters = JSON.stringify(result.variables);
332320

333-
// properly escape the parameters to be part of a data-uri
334-
// + escaping single quote (') as it is used to surround the data-uri: url('...')
335-
const escapedParameters = encodeURIComponent(parameters).replace(/'/g, function(char) {
336-
return escape(char);
337-
});
321+
// properly escape the parameters to be part of a data-uri
322+
// + escaping single quote (') as it is used to surround the data-uri: url('...')
323+
const escapedParameters = encodeURIComponent(parameters).replace(/'/g, function(char) {
324+
return escape(char);
325+
});
338326

339-
// embed parameter variables as plain-text string into css
340-
const parameterStyleRule = "\n/* Inline theming parameters */\n#sap-ui-theme-" +
341-
options.library.name.replace(/\./g, "\\.") +
342-
"{background-image:url('data:text/plain;utf-8," + escapedParameters + "')}\n";
327+
// embed parameter variables as plain-text string into css
328+
const parameterStyleRule = "\n/* Inline theming parameters */\n#sap-ui-theme-" +
329+
options.library.name.replace(/\./g, "\\.") +
330+
"{background-image:url('data:text/plain;utf-8," + escapedParameters + "')}\n";
343331

344-
// embed parameter variables as plain-text string into css
345-
result.css += parameterStyleRule;
346-
if (options.rtl) {
347-
result.cssRtl += parameterStyleRule;
348-
}
349-
if (options.cssVariables) {
350-
// for the css variables build we just add it to the variables
351-
result.cssVariables += parameterStyleRule;
352-
}
353-
}
354-
resolve(result);
355-
});
332+
// embed parameter variables as plain-text string into css
333+
result.css += parameterStyleRule;
334+
if (options.rtl) {
335+
result.cssRtl += parameterStyleRule;
336+
}
337+
if (options.cssVariables) {
338+
// for the css variables build we just add it to the variables
339+
result.cssVariables += parameterStyleRule;
340+
}
341+
342+
return result;
356343
}
357344

358345
function getScopeVariables(options) {

‎lib/plugin/css-variables-collector.js

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -58,20 +58,24 @@ CSSVariablesCollectorPlugin.prototype = {
5858
});
5959
let lessVariables = "";
6060
Object.keys(vars).forEach((value, index) => {
61-
lessVariables += "@" + value + ": " + vars[value].css + ";\n";
61+
const variableName = value;
62+
const variableValue = vars[value].css;
63+
lessVariables += `@${variableName}: ${variableValue};\n`;
6264
});
6365
Object.keys(this.calcVars).forEach((value, index) => {
64-
lessVariables += "@" + value + ": " + this.calcVars[value].css + ";\n";
66+
const variableName = value;
67+
const variableValue = this.calcVars[value].css;
68+
lessVariables += `@${variableName}: ${variableValue};\n`;
6569
});
6670
lessVariables += "\n:root {\n";
6771
Object.keys(vars).forEach((value, index) => {
6872
if (vars[value].export) {
69-
lessVariables += "--" + value + ": @" + value + ";\n";
73+
lessVariables += `--${value}: @${value};\n`;
7074
}
7175
});
7276
Object.keys(this.calcVars).forEach((value, index) => {
7377
if (this.calcVars[value].export) {
74-
lessVariables += "--" + value + ": @" + value + ";\n";
78+
lessVariables += `--${value}: @${value};\n`;
7579
}
7680
});
7781
lessVariables += "}\n";

0 commit comments

Comments
 (0)