Update deps, add MVP Server variant, + Example
This commit is contained in:
parent
5487921ecb
commit
618842883d
|
|
@ -0,0 +1,16 @@
|
||||||
|
<!DOCTYPE html><html><head><!--
|
||||||
|
--><meta charset="utf-8"/><!--
|
||||||
|
--><meta name="viewport" content="width=device-width, initial-scale=1.0"/><!--
|
||||||
|
--><link rel="stylesheet" href="/static/Example.css"/><!--
|
||||||
|
--></head><body><!--
|
||||||
|
--><div id="transition"></div><!--
|
||||||
|
--><div id="app">
|
||||||
|
<script>
|
||||||
|
window.process = null;
|
||||||
|
window.require = () => window.SpaccDotWebServer;
|
||||||
|
window.resFilesData = { "Example.css": "data:text/css;base64,Ym9keSB7CgliYWNrZ3JvdW5kLWNvbG9yOiBsaWdodGdyYXk7Cgljb2xvcjogYmxhY2s7Cn0KCmgyIHsKCXBvc2l0aW9uOiByZWxhdGl2ZTsKCXRvcDogM2VtOwoJcm90YXRlOiAxNWRlZzsKCWNvbG9yOiBwdXJwbGU7Cn0K" };
|
||||||
|
</script>
|
||||||
|
<script src="./SpaccDotWeb.Server.js"></script>
|
||||||
|
<script src="./Example.Server.js"></script>
|
||||||
|
</div><!--
|
||||||
|
--></body></html>
|
||||||
|
|
@ -0,0 +1,49 @@
|
||||||
|
const SpaccDotWebServer = require('./SpaccDotWeb.Server.js')({
|
||||||
|
appName: 'Example',
|
||||||
|
// staticPrefix: '/static/',
|
||||||
|
// staticFiles: [],
|
||||||
|
linkStyles: [ 'Example.css' ],
|
||||||
|
// linkScripts: [],
|
||||||
|
// htmlPager: htmlPager(content) => `...`,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (process && process.argv[2] === 'html') {
|
||||||
|
SpaccDotWebServer.writeStaticHtml(__filename);
|
||||||
|
} else {
|
||||||
|
SpaccDotWebServer.initServer({
|
||||||
|
// defaultResponse: { code: 500, headers: {} },
|
||||||
|
// endpointsFalltrough: false,
|
||||||
|
// port: 3000,
|
||||||
|
// address: '127.0.0.1',
|
||||||
|
// maxBodyUploadSize: null,
|
||||||
|
// appElement: 'div#app',
|
||||||
|
// transitionElement: 'div#transition',
|
||||||
|
endpoints: [
|
||||||
|
[ (ctx) => (['GET', 'POST'].includes(ctx.request.method) && ctx.request.url.toLowerCase().startsWith('/main/')), (ctx) => {
|
||||||
|
if (ctx.request.method === 'POST') {
|
||||||
|
if (ctx.bodyParameters?.add) {
|
||||||
|
ctx.setCookie(`count=${parseInt(ctx.getCookie('count') || 0) + 1}`);
|
||||||
|
} else if (ctx.bodyParameters?.reset) {
|
||||||
|
ctx.setCookie(`count=`);
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const content = `
|
||||||
|
<h2>Test</h2>
|
||||||
|
${ctx.request.method === 'POST' ? `<p>POST body parameters:</p><pre>${JSON.stringify(ctx.bodyParameters)}</pre>` : ''}
|
||||||
|
<p>This page was rendered at ${Date()}.</p>
|
||||||
|
<p>These were your cookies at time of request:</p>
|
||||||
|
<pre>${ctx.getCookie()}</pre>
|
||||||
|
<form method="POST">
|
||||||
|
<input type="submit" name="add" value="Add 1 to cookie"/>
|
||||||
|
<input type="submit" name="reset" value="Reset cookies"/>
|
||||||
|
</form>
|
||||||
|
`;
|
||||||
|
ctx.renderPage(content);
|
||||||
|
// return { code: 200, headers: { 'content-type': 'text/html; charset=utf-8' }, body: content }
|
||||||
|
} ],
|
||||||
|
|
||||||
|
[ (ctx) => (ctx.request.method === 'GET'), (ctx) => ctx.redirectTo('/main/') ],
|
||||||
|
// [ (ctx) => (ctx.request.method === 'GET'), (ctx) => ({ code: 302, headers: { location: '/main/' } }) ],
|
||||||
|
],
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
body {
|
||||||
|
background-color: lightgray;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
position: relative;
|
||||||
|
top: 3em;
|
||||||
|
rotate: 15deg;
|
||||||
|
color: purple;
|
||||||
|
}
|
||||||
|
|
@ -21,6 +21,7 @@
|
||||||
document.body.appendChild(scriptElem);
|
document.body.appendChild(scriptElem);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
// .RequireScripts = (...) => {}
|
||||||
|
|
||||||
SpaccDotWeb.ShowModal = async (params) => {
|
SpaccDotWeb.ShowModal = async (params) => {
|
||||||
// TODO: delete dialogs from DOM after use (garbage collect)?
|
// TODO: delete dialogs from DOM after use (garbage collect)?
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,266 @@
|
||||||
|
(() => {
|
||||||
|
const envIsNode = (typeof module === 'object' && typeof module.exports === 'object');
|
||||||
|
const envIsBrowser = (typeof window !== 'undefined' && typeof window.document !== 'undefined');
|
||||||
|
let fs, path, mime, multipart;
|
||||||
|
const allOpts = {};
|
||||||
|
|
||||||
|
const main = (globalOptions={}) => {
|
||||||
|
allOpts.global = globalOptions;
|
||||||
|
allOpts.global.staticPrefix ||= '/static/';
|
||||||
|
allOpts.global.staticFiles ||= [];
|
||||||
|
allOpts.global.linkStyles ||= [];
|
||||||
|
allOpts.global.linkScripts ||= [];
|
||||||
|
for (const item of [...allOpts.global.linkStyles, ...allOpts.global.linkScripts]) {
|
||||||
|
const itemLow = item.toLowerCase();
|
||||||
|
if (!(itemLow.startsWith('http://') || itemLow.startsWith('https://') || itemLow.startsWith('/'))) {
|
||||||
|
allOpts.global.staticFiles.push(item);
|
||||||
|
};
|
||||||
|
};
|
||||||
|
allOpts.global.htmlPager ||= (content) => `<!DOCTYPE html><html><head><!--
|
||||||
|
--><meta charset="utf-8"/><!--
|
||||||
|
--><meta name="viewport" content="width=device-width, initial-scale=1.0"/><!--
|
||||||
|
-->${allOpts.global.linkStyles.map((item) => {
|
||||||
|
return `<link rel="stylesheet" href="${allOpts.global.staticFiles.includes(item) ? (allOpts.global.staticPrefix + item) : item}"/>`;
|
||||||
|
}).join('')}<!--
|
||||||
|
--></head><body><!--
|
||||||
|
--><div id="transition"></div><!--
|
||||||
|
--><div id="app">${content}</div><!--
|
||||||
|
--></body></html>`;
|
||||||
|
const result = {};
|
||||||
|
result.initServer = (serverOptions={}) => initServer(serverOptions);
|
||||||
|
if (envIsNode) {
|
||||||
|
result.writeStaticHtml = (mainScriptPath) => writeStaticHtml(mainScriptPath);
|
||||||
|
};
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
|
||||||
|
const initServer = (serverOptions) => {
|
||||||
|
allOpts.server = serverOptions;
|
||||||
|
allOpts.server.defaultResponse ||= { code: 500, headers: {} };
|
||||||
|
allOpts.server.endpointsFalltrough ||= false;
|
||||||
|
if (envIsNode) {
|
||||||
|
allOpts.server.port ||= 3000;
|
||||||
|
allOpts.server.address ||= '127.0.0.1';
|
||||||
|
allOpts.server.maxBodyUploadSize = (parseInt(allOpts.server.maxBodyUploadSize) || undefined);
|
||||||
|
require('http').createServer(handleRequest).listen(allOpts.server.port, allOpts.server.address);
|
||||||
|
};
|
||||||
|
if (envIsBrowser) {
|
||||||
|
allOpts.server.appElement ||= 'div#app';
|
||||||
|
allOpts.server.transitionElement ||= 'div#transition';
|
||||||
|
const navigatePage = () => handleRequest({ url: window.location.hash.slice(1), method: 'GET' });
|
||||||
|
window.addEventListener('hashchange', () => {
|
||||||
|
window.location.hash ||= '/';
|
||||||
|
navigatePage();
|
||||||
|
});
|
||||||
|
navigatePage();
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const writeStaticHtml = (mainScriptPath) => {
|
||||||
|
fs.writeFileSync((mainScriptPath.split('.').slice(0, -1).join('.') + '.html'), allOpts.global.htmlPager(`
|
||||||
|
<script>
|
||||||
|
window.process = null;
|
||||||
|
window.require = () => window.SpaccDotWebServer;
|
||||||
|
window.resFilesData = { ${allOpts.global.staticFiles.map((file) => {
|
||||||
|
const filePath = (mainScriptPath.split(path.sep).slice(0, -1).join(path.sep) + path.sep + file);
|
||||||
|
return `"${file}": "data:${mime.lookup(filePath)};base64,${fs.readFileSync(filePath).toString('base64')}"`;
|
||||||
|
})} };
|
||||||
|
</script>
|
||||||
|
<script src="./${path.basename(__filename)}"></script>
|
||||||
|
<script src="./${path.basename(mainScriptPath)}"></script>
|
||||||
|
`));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRequest = async (request, response={}) => {
|
||||||
|
// build request context and handle special tasks
|
||||||
|
let result = allOpts.server.defaultResponse;
|
||||||
|
const context = {
|
||||||
|
request,
|
||||||
|
response,
|
||||||
|
urlParameters: (new URLSearchParams(request.url.split('?')[1]?.join('?'))),
|
||||||
|
bodyParameters: (request.method === 'POST' && await parseBodyParams(request)), // TODO which other methods need body?
|
||||||
|
getCookie: (cookie) => getCookie(request, cookie),
|
||||||
|
setCookie: (cookie) => setCookie(response, cookie),
|
||||||
|
renderPage: (content) => renderPage(response, content),
|
||||||
|
redirectTo: (url) => redirectTo(response, url),
|
||||||
|
};
|
||||||
|
// serve static files
|
||||||
|
if (envIsNode && request.method === 'GET' && request.url.toLowerCase().startsWith(allOpts.global.staticPrefix)) {
|
||||||
|
const resPath = request.url.split(allOpts.global.staticPrefix).slice(1).join(allOpts.global.staticPrefix);
|
||||||
|
const filePath = (__dirname + path.sep + resPath); // TODO i think we need to read this another way if the module is in a different directory from the importing program
|
||||||
|
if (allOpts.global.staticFiles.includes(resPath) && fs.existsSync(filePath)) {
|
||||||
|
result = { code: 200, headers: { 'content-type': mime.lookup(filePath) }, body: fs.readFileSync(filePath) };
|
||||||
|
} else {
|
||||||
|
result = { code: 404 };
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
// handle custom endpoints
|
||||||
|
for (const [check, procedure] of allOpts.server.endpoints) {
|
||||||
|
if (check(context)) {
|
||||||
|
result = await procedure(context);
|
||||||
|
if (!allOpts.server.endpointsFalltrough) {
|
||||||
|
break;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
};
|
||||||
|
};
|
||||||
|
// finalize a normal response
|
||||||
|
if (result) {
|
||||||
|
response.statusCode = result.code;
|
||||||
|
for (const name in result.headers) {
|
||||||
|
response.setHeader(name, result.headers[name]);
|
||||||
|
};
|
||||||
|
response.end(result.body);
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const renderPage = (response, content) => {
|
||||||
|
// TODO titles and things
|
||||||
|
// TODO status code could need to be different in different situations and so should be set accordingly?
|
||||||
|
if (envIsNode) {
|
||||||
|
response.setHeader('content-type', 'text/html; charset=utf-8');
|
||||||
|
response.end(allOpts.global.htmlPager(content));
|
||||||
|
};
|
||||||
|
if (envIsBrowser) {
|
||||||
|
document.querySelector(allOpts.server.appElement).innerHTML = content;
|
||||||
|
for (const srcElem of document.querySelectorAll(`[src^="${allOpts.global.staticPrefix}"]`)) {
|
||||||
|
srcElem.src = resFilesData[srcElem.getAttribute('src')];
|
||||||
|
};
|
||||||
|
for (const linkElem of document.querySelectorAll(`link[rel="stylesheet"][href^="${allOpts.global.staticPrefix}"]`)) {
|
||||||
|
linkElem.href = resFilesData[linkElem.getAttribute('href').slice(allOpts.global.staticPrefix.length)];
|
||||||
|
};
|
||||||
|
for (const aElem of document.querySelectorAll('a[href^="/"]')) {
|
||||||
|
aElem.href = `#${aElem.getAttribute('href')}`;
|
||||||
|
};
|
||||||
|
for (const formElem of document.querySelectorAll('form')) {
|
||||||
|
formElem.onsubmit = (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
const formData = (new FormData(formElem));
|
||||||
|
formData.append(event.submitter.getAttribute('name'), (event.submitter.value || 'Submit'));
|
||||||
|
handleRequest({
|
||||||
|
method: (formElem.getAttribute('method') || 'GET'),
|
||||||
|
url: (formElem.getAttribute('action') || location.hash.slice(1)),
|
||||||
|
headers: { 'content-type': (formElem.getAttribute('enctype') || "application/x-www-form-urlencoded") },
|
||||||
|
body: formData,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
};
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const redirectTo = (response, url) => {
|
||||||
|
if (envIsNode) {
|
||||||
|
response.statusCode = 302;
|
||||||
|
response.setHeader('location', url);
|
||||||
|
response.end();
|
||||||
|
};
|
||||||
|
if (envIsBrowser) {
|
||||||
|
location.hash = url;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const parseBodyParams = async (request) => {
|
||||||
|
try {
|
||||||
|
let params = {};
|
||||||
|
if (envIsNode) {
|
||||||
|
request.body = Buffer.alloc(0);
|
||||||
|
request.on('data', (data) => {
|
||||||
|
request.body = Buffer.concat([request.body, data]);
|
||||||
|
if (request.body.length > allOpts.server.maxBodyUploadSize) {
|
||||||
|
request.connection?.destroy();
|
||||||
|
// TODO handle this more gracefully? maybe an error callback or something?
|
||||||
|
};
|
||||||
|
});
|
||||||
|
await new Promise((resolve) => request.on('end', () => resolve()));
|
||||||
|
};
|
||||||
|
const [contentMime, contentEnc] = request.headers['content-type'].split(';');
|
||||||
|
if (envIsNode && contentMime === 'application/x-www-form-urlencoded') {
|
||||||
|
for (const [key, value] of (new URLSearchParams(request.body.toString())).entries()) {
|
||||||
|
params[key] = value;
|
||||||
|
};
|
||||||
|
} else if (envIsNode && contentMime === 'multipart/form-data') {
|
||||||
|
for (const param of multipart.parse(request.body, contentEnc.split('boundary=')[1])) {
|
||||||
|
params[param.name] = (param.type && param.filename !== undefined ? param : param.data.toString());
|
||||||
|
};
|
||||||
|
} else if (envIsBrowser && ['application/x-www-form-urlencoded', 'multipart/form-data'].includes(contentMime)) {
|
||||||
|
for (const [key, value] of request.body) {
|
||||||
|
params[key] = value;
|
||||||
|
params[key].filename = params[key].name;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
return params;
|
||||||
|
} catch (err) {
|
||||||
|
console.log(err);
|
||||||
|
request.connection?.destroy();
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const getCookie = (request, name) => {
|
||||||
|
let cookies;
|
||||||
|
if (envIsNode) {
|
||||||
|
cookies = request.headers?.cookie;
|
||||||
|
};
|
||||||
|
if (envIsBrowser) {
|
||||||
|
cookies = clientCookieApi();
|
||||||
|
};
|
||||||
|
if (name) {
|
||||||
|
// get a specific cookie
|
||||||
|
for (const cookie of (cookies?.split(';') || [])) {
|
||||||
|
const [key, ...rest] = cookie.split('=');
|
||||||
|
if (key === name) {
|
||||||
|
return rest.join('=');
|
||||||
|
};
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
// get all cookies
|
||||||
|
return cookies;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const setCookie = (response, cookie) => {
|
||||||
|
if (envIsNode) {
|
||||||
|
response.setHeader('Set-Cookie', cookie);
|
||||||
|
// TODO update current cookie list in existing request to reflect new assignment
|
||||||
|
};
|
||||||
|
if (envIsBrowser) {
|
||||||
|
clientCookieApi(cookie);
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
// try to use the built-in cookie API, fallback to a Storage-based wrapper in case it fails (for example on file:///)
|
||||||
|
const clientCookieApi = (envIsBrowser && (document.cookie || (!document.cookie && (document.cookie = '_=_') && document.cookie) ? (set) => (set ? (document.cookie = set) : document.cookie) : (set) => {
|
||||||
|
const gid = allOpts.global.appName; // TODO: introduce a conf field that is specifically a GID for less potential problems?
|
||||||
|
if (set) {
|
||||||
|
let api = sessionStorage;
|
||||||
|
const tokens = set.split(';');
|
||||||
|
const [key, ...rest] = tokens[0].split('=');
|
||||||
|
for (let token of tokens) {
|
||||||
|
token = token.trim();
|
||||||
|
if (['expires', 'max-age'].includes(token.split('=')[0].toLowerCase())) {
|
||||||
|
api = localStorage;
|
||||||
|
break;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
api.setItem(`${gid}/${key}`, rest.join('='));
|
||||||
|
} else /*(get)*/ {
|
||||||
|
let items = '';
|
||||||
|
for (const item of Object.entries({ ...localStorage, ...sessionStorage })) {
|
||||||
|
if (item[0].startsWith(`${gid}/`)) {
|
||||||
|
items += (item.join('=') + ';').slice(gid.length + 1);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return items.slice(0, -1);
|
||||||
|
};
|
||||||
|
}));
|
||||||
|
|
||||||
|
if (envIsNode) {
|
||||||
|
fs = require('fs');
|
||||||
|
path = require('path');
|
||||||
|
mime = require('mime-types');
|
||||||
|
multipart = require('parse-multipart-data');
|
||||||
|
module.exports = main;
|
||||||
|
};
|
||||||
|
if (envIsBrowser) {
|
||||||
|
window.SpaccDotWebServer = main;
|
||||||
|
};
|
||||||
|
})();
|
||||||
|
|
@ -7,6 +7,10 @@
|
||||||
"": {
|
"": {
|
||||||
"name": "SpaccDotWeb",
|
"name": "SpaccDotWeb",
|
||||||
"version": "indev",
|
"version": "indev",
|
||||||
|
"dependencies": {
|
||||||
|
"mime-types": "^2.1.35",
|
||||||
|
"parse-multipart-data": "^1.5.0"
|
||||||
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/cli": "^7.23.0",
|
"@babel/cli": "^7.23.0",
|
||||||
"@babel/core": "^7.23.0",
|
"@babel/core": "^7.23.0",
|
||||||
|
|
@ -2573,7 +2577,6 @@
|
||||||
"version": "1.52.0",
|
"version": "1.52.0",
|
||||||
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
|
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
|
||||||
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
|
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
|
||||||
"dev": true,
|
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">= 0.6"
|
"node": ">= 0.6"
|
||||||
}
|
}
|
||||||
|
|
@ -2582,7 +2585,6 @@
|
||||||
"version": "2.1.35",
|
"version": "2.1.35",
|
||||||
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
|
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
|
||||||
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
|
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
|
||||||
"dev": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"mime-db": "1.52.0"
|
"mime-db": "1.52.0"
|
||||||
},
|
},
|
||||||
|
|
@ -2639,6 +2641,11 @@
|
||||||
"wrappy": "1"
|
"wrappy": "1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/parse-multipart-data": {
|
||||||
|
"version": "1.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/parse-multipart-data/-/parse-multipart-data-1.5.0.tgz",
|
||||||
|
"integrity": "sha512-ck5zaMF0ydjGfejNMnlo5YU2oJ+pT+80Jb1y4ybanT27j+zbVP/jkYmCrUGsEln0Ox/hZmuvgy8Ra7AxbXP2Mw=="
|
||||||
|
},
|
||||||
"node_modules/parse5": {
|
"node_modules/parse5": {
|
||||||
"version": "7.1.2",
|
"version": "7.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
|
||||||
|
|
|
||||||
|
|
@ -13,5 +13,9 @@
|
||||||
"dialog-polyfill": "^0.5.6",
|
"dialog-polyfill": "^0.5.6",
|
||||||
"jsdom": "^22.1.0",
|
"jsdom": "^22.1.0",
|
||||||
"uglify-js": "^3.17.4"
|
"uglify-js": "^3.17.4"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"mime-types": "^2.1.35",
|
||||||
|
"parse-multipart-data": "^1.5.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue