[Alt] Fix errors, add element creation to $(); [Build] Updates and example

This commit is contained in:
2025-03-12 00:50:58 +01:00
parent 21fb956b46
commit 8b47ef18b0
8 changed files with 1269 additions and 304 deletions

View File

@ -34,35 +34,49 @@ const babelConfig = {
],
};
const findPath = (path, folder) => {
for (const prefix of [folder, __dirname]) {
path = Lib.path.join(prefix, path);
if (Lib.fs.existsSync(path)) {
const findPath = (path, folder, files) => {
for (const prefix of [folder, (typeof __dirname !== 'undefined' ? __dirname : '')]) {
path = (Lib.path?.join(prefix, path) || `${prefix}/${path}`);
if ((files && (path in files)) || (!files && Lib.fs?.existsSync(path))) {
return path;
}
}
};
const readFile = (path, folder, files) => {
path = (findPath(path, folder, files) || path);
return (files ? files[path] : Lib.fs?.readFileSync(path, 'utf8'));
}
const fileToBase64 = (path, content) => `data:${Lib.mime.lookup(path)};base64,${content || Lib.fs.readFileSync(findPath(path)).toString('base64')}`;
const fileToBase64 = (path, content) => `data:${Lib.mime.lookup(path)};base64,${content || Lib.fs?.readFileSync(findPath(path))?.toString('base64')}`;
const isUrlAbsolute = (url) => (url && ['http:', 'https:', ''].includes(url.split('/')[0]));
const BuildScript = (scriptText, options) => {
options = {
minify: true,
...options };
options ||= {};
options.minify ??= true;
const compiled = (Lib.babel.transformSync || Lib.babel.transform)(scriptText, babelConfig).code;
const minified = (options.minify && Lib.uglify.minify(compiled).code);
return { compiled, minified };
}
};
const BuildHtml = async (html, options) => {
options = {
compileScripts: true,
minifyScripts: true,
compileStyles: true,
inputFolder: '.',
...options };
const BuildStyle = async (styleText, stylePath, options) => {
options ||= {};
options.minify ??= true;
const plugins = [
Lib.postcssImport(),
Lib.postcssUrl({ url: 'inline' }),
...(options.minify ? [Lib.postcssMinify()] : []),
];
return (await Lib.postcss(plugins).process(styleText, { from: stylePath })).css;
};
const BuildHtml = async (html, options, files) => {
options ||= {};
options.compileScripts ??= true;
options.minifyScripts ??= true;
options.compileStyles ??= true;
options.inputFolder ??= '.';
const dom = makeHtmlDom(html);
for (const element of dom.querySelectorAll('script, [src], link[rel=stylesheet][href]')) {
if (isUrlAbsolute(element.src || element.href)) {
@ -72,21 +86,20 @@ const BuildHtml = async (html, options) => {
const scriptOptions = JSON.parse(element.dataset.spaccdotweb || '{}');
const minifyScripts = (scriptOptions.minify ?? options.minifyScripts);
let scriptText = (element.src
? Lib.fs.readFileSync(findPath(element.src, options.inputFolder), 'utf8')
? readFile(element.src, options.inputFolder, files) //Lib.fs.readFileSync(findPath(element.src, options.inputFolder), 'utf8')
: element.textContent);
if (scriptOptions.compile ?? options.compileScripts) {
scriptText = BuildScript(scriptText, { minify: minifyScripts })[minifyScripts ? 'minified' : 'compiled'];
}
element.removeAttribute('src');
element.textContent = scriptText;
if (scriptText) {
element.removeAttribute('src');
element.textContent = scriptText;
}
} else if (element.tagName === 'LINK') {
const stylePath = findPath(element.href, options.inputFolder);
let styleText = Lib.fs.readFileSync(stylePath, 'utf8');
if (options.compileStyles) {
styleText = (await Lib.postcss([
Lib.postcssImport(),
Lib.postcssUrl({ url: 'inline' }),
]).process(styleText, { from: stylePath })).css;
let styleText = readFile(stylePath, options.inputFolder, files); //Lib.fs.readFileSync(stylePath, 'utf8');
if (options.compileStyles && !envIsBrowser) {
styleText = await BuildStyle(styleText, stylePath, { minify: options.minifyStyles });
}
element.parentElement.insertBefore(Object.assign(dom.createElement('style'), { textContent: styleText }), element);
element.remove();
@ -95,7 +108,7 @@ const BuildHtml = async (html, options) => {
}
}
return `<!DOCTYPE html>\n${dom.documentElement.outerHTML}`;
}
};
return { BuildScript, BuildHtml, fileToBase64 };