octospacc
/
SpaccDotWeb
mirror of https://gitlab.com/SpaccInc/SpaccDotWeb.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Babel-compile library, add core-js

This commit is contained in:
octospacc 2023-09-27 00:49:37 +02:00
parent 343140af34
commit b375a33397
5 changed files with 84 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored Normal file
View File

@ -0,0 +1,3 @@
*.tmp
Build/*
node_modules/*

118
Spacc.Web.js
View File

@ -3,15 +3,17 @@ const SpaccDotWeb = ((args) => { //////////////////////////////////////////////
let windowObject, documentObject; let windowObject, documentObject;
let Lib = {}; let Lib = {};
let isDomVirtual = false; //let isDomVirtual = false;
let isBuildingApp = false;
const platformIsNode = (typeof module === 'object' && typeof module.exports === 'object'); const platformIsNode = (typeof module === 'object' && typeof module.exports === 'object');
const platformIsBrowser = (typeof window !== 'undefined' && typeof window.document !== 'undefined'); const platformIsBrowser = (typeof window !== 'undefined' && typeof window.document !== 'undefined');
if (platformIsNode) { if (platformIsNode) {
Lib.fs = require('fs'); Lib.fs = require('fs');
Lib.childProcess = require('child_process');
Lib.jsdom = require('jsdom'); Lib.jsdom = require('jsdom');
isDomVirtual = true; //isDomVirtual = true;
windowObject = new Lib.jsdom.JSDOM().window; windowObject = new Lib.jsdom.JSDOM().window;
}; };
@ -27,93 +29,67 @@ const SpaccDotWeb = ((args) => { //////////////////////////////////////////////
let SpaccDotWeb = {}; let SpaccDotWeb = {};
SpaccDotWeb.AppBuildStandalone = (fileIndex) => { if (platformIsNode) {
fileIndex ||= 'index.html'; SpaccDotWeb.AppBuildStandalone = (fileIndex) => {
isBuildingApp = true;
fileIndex ||= 'index.html';
isDomVirtual = true; //isDomVirtual = true;
let htmlIndex = Lib.fs.readFileSync(fileIndex, 'utf8'); Lib.fs.mkdirSync(`${__dirname}/Build/${fileIndex}.tmp`, { recursive: true });
//let domIndex = new Lib.jsdom.JSDOM(htmlIndex); let htmlIndex = Lib.fs.readFileSync(fileIndex, 'utf8');
//let htmlFinal = DomMakeBase(AppMetaGet(domIndex)); windowObject = new Lib.jsdom.JSDOM(htmlIndex).window;
//let domFinal = new Lib.jsdom.JSDOM(htmlFinal); documentObject = windowObject.document;
//for (const script of domIndex.window.document.querySelectorAll('script[module]')) { DomSetup();//SpaccDotWeb.AppInit();
// domFinal.window.document.head.innerHTML += script.outerHTML;
//};
//return domFinal.window.document.documentElement.outerHTML; isBuildingApp = false;
Lib.fs.writeFileSync(`${__dirname}/Build/${fileIndex}`, `<!DOCTYPE html>${documentObject.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}`;
}; };
SpaccDotWeb.AppInit = () => { SpaccDotWeb.AppInit = function AppInit(){
try { try {
DomSetup(AppMetaGet()); DomSetup();
} catch(err) { console.log(err) } } catch(err) { console.log(err) }
//if (!isDomVirtual) {
// DomSetup();
//};
}; };
//SpaccDotWeb.DownloadFile = () => {
//
//};
//SpaccDotWeb.Make = () => {}; //SpaccDotWeb.Make = () => {};
SpaccDotWeb.Create = (tag, attrs) => { SpaccDotWeb.Create = (tag, attrs) => {
let elem = documentObject.createElement(tag); let elem = documentObject.createElement(tag);
// ... for (const key in attrs) {
elem[key] = attrs[key];
};
return elem; return elem;
}; };
SpaccDotWeb.Select = (query, dom) => { SpaccDotWeb.Select = (query) => {
//dom &&= dom.window.document;
//dom ||= document;
//return dom.querySelector(query);
let elem = documentObject.querySelector(query); let elem = documentObject.querySelector(query);
elem && (elem.Insert = elem.appendChild); elem && (elem.Insert = elem.appendChild);
return elem; 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 meta = AppMetaGet();
const htmlFrags = { const htmlFrags = {
Title: (meta.Name ? `<title>${meta.Name}</title><meta property="og:title" content="${meta.Name}"/>` : ''), 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}"/>` : ''), 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}"/>` : '') 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 = ''; let scripts = '';
if (isDomVirtual) { if (isBuildingApp/*isDomVirtual*/) {
scripts += `<scr`+`ipt>${Lib.fs.readFileSync(__filename, 'utf8')}</scr`+`ipt>`; 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]')) { for (const elem of documentObject.querySelectorAll('script[module]')) {
scripts += elem.outerHTML; scripts += elem.outerHTML;
}; };
@ -121,47 +97,35 @@ DomMakeBase = (/*meta*/) => {
return { return {
head: ` head: `
<meta charset="utf-8"/> <meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
${htmlFrags.Title} ${htmlFrags.Title}
${htmlFrags.Description} ${htmlFrags.Description}
${htmlFrags.Uri} ${htmlFrags.Uri}
<!--<scr ipt src="https://example.com/index.js"></scr ipt>-->
`, `,
body: `<div id="App"></div>${scripts}`, body: `<div id="App"></div>${scripts}`,
}; };
}; };
DomSetup = (/*meta*/) => { const DomSetup = () => {
const doctypeNew = documentObject.implementation.createHTMLDocument().doctype; const doctypeNew = documentObject.implementation.createHTMLDocument().doctype;
windowObject.document.doctype windowObject.document.doctype
? documentObject.replaceChild(doctypeNew, documentObject.doctype) ? documentObject.replaceChild(doctypeNew, documentObject.doctype)
: documentObject.insertBefore(doctypeNew, documentObject.childNodes[0]); : documentObject.insertBefore(doctypeNew, documentObject.childNodes[0]);
//documentObject.documentElement.setHTML(DomMakeBase(data)); const domBase = DomMakeBase();
//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*/);
documentObject.write(domBase.head + domBase.body); documentObject.write(domBase.head + domBase.body);
documentObject.head.innerHTML = domBase.head; documentObject.head.innerHTML = domBase.head;
documentObject.body.innerHTML = domBase.body; documentObject.body.innerHTML = domBase.body;
}; };
platformIsBrowser && (window.SpaccDotWeb = SpaccDotWeb);
return SpaccDotWeb; return SpaccDotWeb;
})(); ///////////////////////////////////////////////////////////////////////// })(); /////////////////////////////////////////////////////////////////////////
platformIsBrowser && (window.SpaccDotWeb = SpaccDotWeb);
platformIsNode && (console.log(eval(process.argv.slice(-1)[0]))); platformIsNode && (console.log(eval(process.argv.slice(-1)[0])));
return SpaccDotWeb; return SpaccDotWeb;

32
SpaccDotWeb.html
View File

@ -7,29 +7,21 @@
}</script> }</script>
<script module="Main"> <script module="Main">
//import { SpaccDotWeb as Spacc } from "./Spacc.Web.js"; const Spacc = SpaccDotWeb;
Spacc.AppInit();
const Spacc = SpaccDotWeb; Spacc.Select('#App').innerHTML = `
Spacc.AppInit(); <p>1234</p>
<button >Log</button>
`;
//Spacc.AppSetup({ Spacc.Select('#App button').onclick = () => {
// Name: "The Testing", Spacc.Select('#App').innerHTML += `<xmp style="text-wrap: unset;">
// Description: "Useful for doing The Testing", ${JSON.stringify(document.documentElement.outerHTML)}
// Uri: "https://example.com/Testing", </xmp>`;
//}); };
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)*/
};
</script> </script>
<script module="Testing"> <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> </script>

16
babel.config.json Normal file
View File

@ -0,0 +1,16 @@
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"chrome": "4",
"edge": "12",
"firefox": "2",
"ie": "6",
"safari": "3.1"
}
}
]
]
}

12
package-lock.json generated
View File

@ -12,6 +12,7 @@
"@babel/core": "^7.23.0", "@babel/core": "^7.23.0",
"@babel/preset-env": "^7.22.20", "@babel/preset-env": "^7.22.20",
"@xmldom/xmldom": "^0.8.10", "@xmldom/xmldom": "^0.8.10",
"core-js": "^3.32.2",
"jsdom": "^22.1.0" "jsdom": "^22.1.0"
} }
}, },
@ -2038,6 +2039,17 @@
"integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==", "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
"dev": true "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": { "node_modules/core-js-compat": {
"version": "3.32.2", "version": "3.32.2",
"resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.32.2.tgz", "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.32.2.tgz",