Babel-compile library, add core-js

2025-06-05 21:29:12 +02:00 · 2023-09-27 00:49:37 +02:00
parent 343140af34
commit b375a33397
5 changed files with 84 additions and 97 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,3 @@
+*.tmp
+Build/*
+node_modules/*
--- a/Spacc.Web.js
+++ b/Spacc.Web.js
@@ -3,15 +3,17 @@ const SpaccDotWeb = ((args) => { //////////////////////////////////////////////

 let windowObject, documentObject;
 let Lib = {};
-let isDomVirtual = false;
+//let isDomVirtual = false;
+let isBuildingApp = false;

 const platformIsNode = (typeof module === 'object' && typeof module.exports === 'object');
 const platformIsBrowser = (typeof window !== 'undefined' && typeof window.document !== 'undefined');

 if (platformIsNode) {
 	Lib.fs = require('fs');
+	Lib.childProcess = require('child_process');
 	Lib.jsdom = require('jsdom');
-	isDomVirtual = true;
+	//isDomVirtual = true;
 	windowObject = new Lib.jsdom.JSDOM().window;
 };

@@ -27,93 +29,67 @@ const SpaccDotWeb = ((args) => { //////////////////////////////////////////////

 let SpaccDotWeb = {};

-SpaccDotWeb.AppBuildStandalone = (fileIndex) => {
-	fileIndex ||= 'index.html';
+if (platformIsNode) {
+	SpaccDotWeb.AppBuildStandalone = (fileIndex) => {
+		isBuildingApp = true;
+		fileIndex ||= 'index.html';

-	isDomVirtual = true;
+		//isDomVirtual = true;

-	let htmlIndex = Lib.fs.readFileSync(fileIndex, 'utf8');
-	//let domIndex = new Lib.jsdom.JSDOM(htmlIndex);
+		Lib.fs.mkdirSync(`${__dirname}/Build/${fileIndex}.tmp`, { recursive: true });
+		let htmlIndex = Lib.fs.readFileSync(fileIndex, 'utf8');

-	//let htmlFinal = DomMakeBase(AppMetaGet(domIndex));
-	//let domFinal = new Lib.jsdom.JSDOM(htmlFinal);
+		windowObject = new Lib.jsdom.JSDOM(htmlIndex).window;
+		documentObject = windowObject.document;

-	//for (const script of domIndex.window.document.querySelectorAll('script[module]')) {
-	//	domFinal.window.document.head.innerHTML += script.outerHTML;
-	//};
+		DomSetup();//SpaccDotWeb.AppInit();

-	//return domFinal.window.document.documentElement.outerHTML;
-
-	/*windowDomIndex*/windowObject = new Lib.jsdom.JSDOM(htmlIndex).window;
-	documentObject = windowObject.document;
-
-	//windowObject.document.documentElement = windowDomIndex.document.documentElement;
-	
-	//console.log(documentObject.documentElement.outerHTML);
-
-	DomSetup();//SpaccDotWeb.AppInit();
-
-	return `<!DOCTYPE html>${documentObject.documentElement.outerHTML}`;
+		isBuildingApp = false;
+		Lib.fs.writeFileSync(`${__dirname}/Build/${fileIndex}`, `<!DOCTYPE html>${documentObject.documentElement.outerHTML}`);
+	};
 };

-SpaccDotWeb.AppInit = () => {
+SpaccDotWeb.AppInit = function AppInit(){
 	try {
-		DomSetup(AppMetaGet());
+		DomSetup();
 	} catch(err) { console.log(err) }
-	//if (!isDomVirtual) {
-	//	DomSetup();
-	//};
 };

-//SpaccDotWeb.DownloadFile = () => {
-//	
-//};
-
 //SpaccDotWeb.Make = () => {};

 SpaccDotWeb.Create = (tag, attrs) => {
 	let elem = documentObject.createElement(tag);
-	// ...
+	for (const key in attrs) {
+		elem[key] = attrs[key];
+	};
 	return elem;
 };

-SpaccDotWeb.Select = (query, dom) => {
-	//dom &&= dom.window.document;
-	//dom ||= document;
-	//return dom.querySelector(query);
+SpaccDotWeb.Select = (query) => {
 	let elem = documentObject.querySelector(query);
 	elem && (elem.Insert = elem.appendChild);
 	return elem;
 };

-AppMetaGet = (/*dom*/) => JSON.parse(SpaccDotWeb.Select('#Meta'/*, dom*/).innerHTML);
+const AppMetaGet = () => JSON.parse(SpaccDotWeb.Select('#Meta').innerHTML);

-DomMakeBase = (/*meta*/) => {
+const DomMakeBase = () => {
 	const meta = AppMetaGet();
+
 	const htmlFrags = {
 		Title: (meta.Name ? `<title>${meta.Name}</title><meta property="og:title" content="${meta.Name}"/>` : ''),
 		Description: (meta.Description ? `<meta name="description" content="${meta.Description}"/><meta property="og:description" content="${meta.Description}"/>` : ''),
 		Uri: (meta.Uri ? `<link rel="canonical" href="${meta.Uri}"/><meta property="og:url" content="${meta.Uri}"/>` : '')
 	};
-	//return `<!DOCTYPE html>
-	//<html>
-	//	<head>
-	//		<meta charset="utf-8"/>
-	//		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-	//		${htmlFrags.Title}
-	//		${htmlFrags.Description}
-	//		${htmlFrags.Uri}
-	//		<!--<scr ipt src="https://example.com/index.js"></scr ipt>-->
-	//	</head>
-	//	<body>
-	//		<div id="App"></div>
-	//	</body>
-	//</html>`;

 	let scripts = '';

-	if (isDomVirtual) {
-		scripts += `<scr`+`ipt>${Lib.fs.readFileSync(__filename, 'utf8')}</scr`+`ipt>`;
+	if (isBuildingApp/*isDomVirtual*/) {
+		const SpaccMinified = Lib.childProcess.execSync(`cat "${__filename}" | npx babel -f "${__filename.split('/').slice(-1)[0]}"`);
+		scripts += `<scr`+`ipt src="https://cdn.jsdelivr.net/npm/core-js-bundle/minified.min.js"></scr`+`ipt>`;
+		scripts += `<scr`+`ipt>${SpaccMinified}</scr`+`ipt>`;
+		//scripts += `<scr`+`ipt src="https://example.com/Spacc.Web.min.js"></scr`+`ipt>`;
+		//scripts += `<scr`+`ipt>${Lib.fs.readFileSync(__filename, 'utf8')}</scr`+`ipt>`;
 		for (const elem of documentObject.querySelectorAll('script[module]')) {
 			scripts += elem.outerHTML;
 		};
@@ -121,47 +97,35 @@ DomMakeBase = (/*meta*/) => {

 	return {
 		head: `
-		<meta charset="utf-8"/>
-		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-		${htmlFrags.Title}
-		${htmlFrags.Description}
-		${htmlFrags.Uri}
+			<meta charset="utf-8"/>
+			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+			${htmlFrags.Title}
+			${htmlFrags.Description}
+			${htmlFrags.Uri}
+			<!--<scr ipt src="https://example.com/index.js"></scr ipt>-->
 		`,
 		body: `<div id="App"></div>${scripts}`,
 	};
 };

-DomSetup = (/*meta*/) => {
+const DomSetup = () => {
 	const doctypeNew = documentObject.implementation.createHTMLDocument().doctype;
 	windowObject.document.doctype
 		? documentObject.replaceChild(doctypeNew, documentObject.doctype)
 		: documentObject.insertBefore(doctypeNew, documentObject.childNodes[0]);
-	//documentObject.documentElement.setHTML(DomMakeBase(data));
-	//documentObject.documentElement.setHTML(`<html></html>`);
-	//documentObject.write('');
-	//documentObject.write(DomMakeBase(data));
-	//for (el of documentObject.documentElement.childNodes) {
-	//	el.remove();
-	//};
-	//for (el of documentObject.documentElement.childNodes) {
-	//	el.remove();
-	//};
-	//documentObject.documentElement.setHTML('');
-	//documentObject.documentElement.innerHTML = '';
-	//documentObject.write('');
-	const domBase = DomMakeBase(/*meta*/);
+	const domBase = DomMakeBase();
 	documentObject.write(domBase.head + domBase.body);
 	documentObject.head.innerHTML = domBase.head;
 	documentObject.body.innerHTML = domBase.body;
 };

-platformIsBrowser && (window.SpaccDotWeb = SpaccDotWeb);
 return SpaccDotWeb;


 })(); /////////////////////////////////////////////////////////////////////////


+platformIsBrowser && (window.SpaccDotWeb = SpaccDotWeb);
 platformIsNode && (console.log(eval(process.argv.slice(-1)[0])));

 return SpaccDotWeb;
--- a/SpaccDotWeb.html
+++ b/SpaccDotWeb.html
@@ -7,29 +7,21 @@
 }</script>

 <script module="Main">
-//import { SpaccDotWeb as Spacc } from "./Spacc.Web.js";
+	const Spacc = SpaccDotWeb;
+	Spacc.AppInit();

-const Spacc = SpaccDotWeb;
-Spacc.AppInit();
+	Spacc.Select('#App').innerHTML = `
+		<p>1234</p>
+		<button >Log</button>
+	`;

-//Spacc.AppSetup({
-//	Name: "The Testing",
-//	Description: "Useful for doing The Testing",
-//	Uri: "https://example.com/Testing",
-//});
-
-Spacc.Select('#App').innerHTML = `
-<p>1234</p>
-<button >Log</button>
-`;
-
-Spacc.Select('#App button').onclick = () => {
-	Spacc.Select('#App').innerHTML += `<xmp>${document.documentElement.outerHTML}</xmp>`;
-	/*console.log(document.documentElement.outerHTML)*/
-};
+	Spacc.Select('#App button').onclick = () => {
+		Spacc.Select('#App').innerHTML += `<xmp style="text-wrap: unset;">
+			${JSON.stringify(document.documentElement.outerHTML)}
+		</xmp>`;
+	};
 </script>

 <script module="Testing">
-//Spacc.Select('#App').innerHTML += `<p><b>Testing is complete.</b></p>`;
-Spacc.Select('#App').Insert(Spacc.Create('p', { innerHTML: `<b>Testing is complete.</b>` }));
+	Spacc.Select('#App').Insert(Spacc.Create('p', { innerHTML: `<b>Testing is complete.</b>` }));
 </script>
--- a/babel.config.json
+++ b/babel.config.json
@@ -0,0 +1,16 @@
+{
+	"presets": [
+		[
+			"@babel/preset-env",
+			{
+				"targets": {
+					"chrome": "4",
+					"edge": "12",
+					"firefox": "2",
+					"ie": "6",
+					"safari": "3.1"
+				}
+			}
+		]
+	]
+}
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
 				"@babel/core": "^7.23.0",
 				"@babel/preset-env": "^7.22.20",
 				"@xmldom/xmldom": "^0.8.10",
+				"core-js": "^3.32.2",
 				"jsdom": "^22.1.0"
 			}
 		},
@@ -2038,6 +2039,17 @@
 			"integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
 			"dev": true
 		},
+		"node_modules/core-js": {
+			"version": "3.32.2",
+			"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.32.2.tgz",
+			"integrity": "sha512-pxXSw1mYZPDGvTQqEc5vgIb83jGQKFGYWY76z4a7weZXUolw3G+OvpZqSRcfYOoOVUQJYEPsWeQK8pKEnUtWxQ==",
+			"dev": true,
+			"hasInstallScript": true,
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/core-js"
+			}
+		},
 		"node_modules/core-js-compat": {
 			"version": "3.32.2",
 			"resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.32.2.tgz",