ts-to-html
Version:
TS and SASS compiler for a HTML with live preview
98 lines (97 loc) • 4.23 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
const node_fs_1 = require("node:fs");
const node_path_1 = require("node:path");
const jsdom_1 = require("jsdom");
const compiler_1 = require("./utils/compiler");
const log_1 = require("./utils/log");
const webpack_1 = __importStar(require("./config/webpack"));
const { minify } = require('html-minifier');
// Resolve snippet
const resolve = (...paths) => (0, node_path_1.resolve)(process.cwd(), "build", ...paths);
const PUBLIC_URL = process.env.PUBLIC_URL || "";
// Start building
(0, log_1.clearAndLog)("Building project...");
const dir = (0, node_fs_1.readdirSync)((0, node_path_1.resolve)(process.cwd(), "public"));
// Remove last build and create a new one
if ((0, node_fs_1.existsSync)(resolve())) {
const rmDir = (path) => {
if (!(0, node_fs_1.existsSync)(path))
return;
const files = (0, node_fs_1.readdirSync)(path);
for (const file of files) {
const filePath = (0, node_path_1.join)(path, file);
const fileStat = (0, node_fs_1.statSync)(filePath);
(fileStat.isDirectory() ? rmDir : node_fs_1.unlinkSync)(filePath);
}
(0, node_fs_1.rmdirSync)(path);
};
rmDir(resolve());
}
(0, node_fs_1.mkdirSync)(resolve());
(0, node_fs_1.mkdirSync)(resolve("assets"));
// Compile TS in production mode
const webpackConfig = {
...webpack_1.default,
mode: webpack_1.Modes.production,
output: {
path: resolve("assets"),
filename: "app.js",
}
};
(async () => await (0, compiler_1.compileTS)(webpackConfig))();
// HTML file content into DOMElement
const dom = new jsdom_1.JSDOM((0, node_fs_1.readFileSync)(resolve("../public/index.html")));
const { document } = dom.window;
// Add the script tag
const script = document.createElement('script');
script.type = "text/javascript";
script.src = PUBLIC_URL + "/assets/app.js";
document.head.appendChild(script);
// Update CSS location
document.querySelectorAll('link').forEach(e => (e.href && /\.css$/.test(e.href) && (e.href = PUBLIC_URL + "/assets"
+ e.href.replace(/%PUBLIC_URL%/g, ""))));
// Update HTML file
(0, node_fs_1.writeFileSync)(resolve("index.html"), minify(dom.serialize(), {
collapseWhitespace: true,
removeComments: true,
removeRedundantAttributes: true,
removeEmptyAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
minifyJS: true,
minifyCSS: true,
}).replace(/%PUBLIC_URL%/g, PUBLIC_URL));
// Copy .env file into build dir
(0, node_fs_1.writeFileSync)(resolve(".env"), (0, node_fs_1.readFileSync)(resolve("../.env")));
// Compile SASS files
const sassFiles = dir.filter(e => e.endsWith(".scss")).map(e => ((0, node_path_1.join)((0, node_path_1.resolve)(process.cwd(), "public"), e)));
sassFiles.forEach(async (cssFile) => {
const css = await (0, compiler_1.compileSassFile)(cssFile, true);
(0, node_fs_1.writeFileSync)(resolve("assets", (0, node_path_1.basename)(cssFile, "scss") + "css"), css);
});
// Build ended
(0, log_1.clearAndLog)("Project build.".green);