@arche-mc2/arche-controls
Version:
We know that there are a ton of react UI library projects to choose from. Our hope with this one is to provide the next generation of react components that you can use to bootstrap your next project, or as a reference for building a UIKit. Read on to get
137 lines (131 loc) • 4.32 kB
JavaScript
/**
* _ _
* ___| | ___ __ _ _ __ _____ ____ _ (_) ___ ___ _ __ ___
* / __| |/ _ \/ _` | '_ \ _____/ __\ \ / / _` |_____| |/ __/ _ \| '_ \/ __|
* | (__| | __/ (_| | | | |_____\__ \\ V / (_| |_____| | (_| (_) | | | \__ \
* \___|_|\___|\__,_|_| |_| |___/ \_/ \__, | |_|\___\___/|_| |_|___/
* |___/
* DESCRIPTION :
* -------------
* - Le script scan tous les SVG se trouvant dans le dossier
* {projet}/src/Common/theming/icons
* - Si une balise USE est détecté dans le corps du SVG, celle-ci est remplacé
* par l'élément auquel elle fait référence.
* les élément de la balise defs plus utilisé sont supprimés.
* - Si le SVG est modifié, une copie est gardée dans le dossier
* {projet}/src/Common/theming/icons/origin
*
* VERSION :
* ---------
* - 2021-09-17 : v1.0.0
*/
const path = require('path');
const fs = require('fs');
const { JSDOM } = require('jsdom');
const { serialize } = require('v8');
const directoryScript = __dirname;
const directoryProject = path.resolve(
path.join(directoryScript, '..')
);
const directoryPath = path.join(
directoryProject,
'src',
'Common',
'theming',
'icons'
);
/**
* @param {string} directoryPath
* @param {(f)=>void} callback
*/
const onDir = (directoryPath, callback) => {
console.log('scan de : ' + directoryPath);
fs.readdir(directoryPath, function (err, files) {
files.forEach(file => {
const filename = path.join(directoryPath, file);
const isDir = fs.statSync(filename).isDirectory();
if (!isDir) {
const ext = filename
.substr(filename.lastIndexOf('.') + 1)
.toLowerCase();
if (ext === 'svg') {
callback(filename);
}
}
});
});
};
/**
* @param {HTMLElement} origin
* @param {HTMLElement} next
*/
const replaceElement = (origin, next) => {
const realNext = next.cloneNode(true);
realNext.removeAttribute('id');
origin.getAttributeNames().forEach(attName => {
if (!['id', 'xlink:href'].includes(attName)) {
realNext.setAttribute(attName, origin.getAttribute(attName));
}
});
origin.parentNode.insertBefore(realNext, origin);
origin.remove();
};
/**
* @param {JSDOM} svg
*/
const cleanDefs = svg => {
const body = svg.window.document.body;
Array.from(body.querySelectorAll('defs')).forEach(defs => {
defs.remove();
});
};
const onFile = filePath => {
fs.readFile(filePath, 'utf8', (err, data) => {
const svg = new JSDOM(data);
const idToRemove = new Set();
const elementsId = Array.from(
svg.window.document.body.querySelectorAll('defs [id]')
);
const elementsUse = Array.from(
svg.window.document.body.querySelectorAll('use')
);
if (elementsUse.length > 0) {
console.log(filePath + ' : ');
console.log('balise <use /> trouvée : ' + elementsUse.length);
elementsUse.forEach(elementUse => {
const attribsName = elementUse.getAttributeNames();
if (attribsName.includes('xlink:href')) {
const id = elementUse
.getAttribute('xlink:href')
.replace(/^#/, '');
/** @var {HtmlElement|undefined} elementRef */
const elementRef = elementsId.find(
element => element.id == id
);
if (elementRef !== undefined) {
idToRemove.add(id);
replaceElement(elementUse, elementRef);
}
}
});
idToRemove.forEach(id => {
svg.window.document.body.querySelector('#' + id).remove();
});
cleanDefs(svg);
if (idToRemove.size > 0) {
const destDir = path.join(path.dirname(filePath), 'origin');
if (!fs.existsSync(destDir)) {
fs.mkdirSync(destDir, 0777);
}
const dest = path.join(destDir, path.basename(filePath));
const contentSvg = svg.window.document.body.innerHTML;
/*
*/
fs.copyFileSync(filePath, dest);
fs.writeFileSync(filePath, contentSvg);
console.log('netoyé ✔');
}
}
});
};
onDir(directoryPath, onFile);