pharpend/fewd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

getting started with typescript

Browse Source
This commit is contained in:
Peter Harpending 2025-10-24 13:57:37 -07:00
parent 138c8eaaeb
commit 4bd279798c
11 changed files with 332 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
Makefile Normal file
View File

@ -0,0 +1,7 @@
tsc:
cd priv/static/js &&\
tsc
watch:
cd priv/static/js &&\
tsc --watch

111
priv/static/index.html
View File

@ -24,115 +24,6 @@
</div>
</div>
<script>
let ielt = document.getElementById('wfc-input');
let oelt = document.getElementById('wfc-output');
let MAX_OELT_HEIGHT = 300;
function auto_resize_output() {
// if the user has manually resized their output, we do nothing
if (document.getElementById('auto-resize-output').checked) {
// resize it automagically up to 500px
if (oelt.scrollHeight < MAX_OELT_HEIGHT) {
oelt.style.height = String(oelt.scrollHeight) + 'px';
}
else {
oelt.style.height = String(MAX_OELT_HEIGHT) + 'px';
}
}
}
function auto_scroll_to_bottom() {
if (document.getElementById('auto-scroll').checked) {
// scroll to bottom
oelt.scrollTop = oelt.scrollHeight;
}
}
async function on_server_return(response) {
console.log('on_server_return:', response);
if (response.ok) {
let jsbs = await response.json();
console.log('jsbs', jsbs);
// jsbs: {ok: true, result: string} | {ok: false, error: string}
if (jsbs.ok) {
// this means got a result back from server
// put it in
oelt.value += jsbs.result;
oelt.value += '\n';
}
else {
// this is an error at the WFC level
oelt.value += jsbs.error;
oelt.value += '\n';
}
}
// this means we sent an invalid request
else {
oelt.value += 'HTTP ERROR, SEE BROWSER CONSOLE\n'
}
}
function on_some_bullshit(x) {
console.log('on_some_bullshit:', x);
oelt.value += 'NETWORK ERROR, SEE BROWSER CONSOLE\n'
}
function fetch_wfcin(user_line) {
let req_body_obj = {wfcin: user_line};
// let req_body_str = JSON.stringify(req_body_obj, undefined, 4);
let req_body_str = JSON.stringify(req_body_obj);
let req_options = {method: 'POST',
headers: {'content-type': 'application/json'},
body: req_body_str};
let response_promise = fetch('/wfcin', req_options);
response_promise.then(on_server_return, on_some_bullshit);
// this is a promise for a response
//console.log(response_promise);
}
// when user hits any key
function on_input_key(evt) {
if (evt.key === 'Enter') {
// don't do default thing
evt.preventDefault();
// grab contents
let contents = ielt.value;
// if contents are nonempty
let nonempty_contents = contents.trim().length > 0;
if (nonempty_contents) {
// put in output
// // if it's nonempty add a newline
// if (oelt.value.length > 0) {
// oelt.value += '\n';
// }
oelt.value += '> ' + contents + '\n';
oelt.hidden = false;
// query backend for result
fetch_wfcin(contents.trim());
// clear input
ielt.value = '';
// auto-resize
auto_resize_output();
auto_scroll_to_bottom();
}
}
}
function main() {
ielt.addEventListener('keydown', on_input_key);
}
main();
</script>
<script type="module" src="./js/dist/index.js"></script>
</body>
</html>

22
priv/static/js/dist/index.d.ts vendored Normal file
View File

@ -0,0 +1,22 @@
/**
* Home page ts/js
*
* @module
*/
declare function main(): void;
declare function on_input_key(evt: KeyboardEvent, ielt: HTMLInputElement, oelt: HTMLTextAreaElement, cb_resize: HTMLInputElement, cb_scroll: HTMLInputElement, max_height: number): Promise<void>;
declare function auto_resize_output(checkbox_element: HTMLInputElement, target_element: HTMLTextAreaElement, max_height: number): void;
declare function auto_scroll_to_bottom(checkbox_element: HTMLInputElement, target_element: HTMLTextAreaElement): void;
type ok_err<t> = {
ok: true;
result: t;
} | {
ok: false;
error: string;
};
type wfcin = {
wfcin: string;
};
type wfcout = ok_err<string>;
declare function assert(condition: boolean, fail_msg: string): void;
declare function fetch_wfcin(user_line: string): Promise<wfcout>;

96
priv/static/js/dist/index.js vendored Normal file
View File

@ -0,0 +1,96 @@
"use strict";
/**
* Home page ts/js
*
* @module
*/
//------------------------------------------------------------------
// page element stuff
//------------------------------------------------------------------
main();
function main() {
let ielt = document.getElementById('wfc-input');
let oelt = document.getElementById('wfc-output');
let cb_resize = document.getElementById('auto-resize-output');
let cb_scroll = document.getElementById('auto-scroll');
let MAX_OELT_HEIGHT = 300;
ielt.addEventListener('keydown', function (e) {
on_input_key(e, ielt, oelt, cb_resize, cb_scroll, MAX_OELT_HEIGHT);
});
}
// when user hits any key
async function on_input_key(evt, ielt, oelt, cb_resize, cb_scroll, max_height) {
if (evt.key === 'Enter') {
// don't do default thing
evt.preventDefault();
// grab contents
let contents = ielt.value;
let trimmed = contents.trim();
let nonempty = trimmed.length > 0;
// if contents are nonempty
if (nonempty) {
// clear input
ielt.value = '';
// put in output
oelt.value += '> ' + trimmed + '\n';
oelt.hidden = false;
// query backend for result
let result = await fetch_wfcin(trimmed);
if (result.ok)
oelt.value += result.result;
else
oelt.value += result.error;
oelt.value += '\n';
// auto-resize
auto_resize_output(cb_resize, oelt, max_height);
auto_scroll_to_bottom(cb_scroll, oelt);
}
}
}
function auto_resize_output(checkbox_element, target_element, max_height) {
// if the user has manually resized their output, we do nothing
if (checkbox_element.checked) {
let target_height = target_element.scrollHeight;
// resize it automagically up to 500px
if (target_height < max_height)
target_element.style.height = String(target_height) + 'px';
else
target_element.style.height = String(max_height) + 'px';
}
}
function auto_scroll_to_bottom(checkbox_element, target_element) {
if (checkbox_element.checked) {
// scroll to bottom
target_element.scrollTop = target_element.scrollHeight;
}
}
function assert(condition, fail_msg) {
if (!condition)
throw new Error(fail_msg);
}
async function fetch_wfcin(user_line) {
let req_body_obj = { wfcin: user_line };
let req_body_str = JSON.stringify(req_body_obj);
let req_options = { method: 'POST',
headers: { 'content-type': 'application/json' },
body: req_body_str };
// default result = somehow neither branch of code below was run(?)
// putting this here so ts doesn't chimp out
let result = { ok: false,
error: 'IT DO BE LIKE THAT MISTA STANCIL' };
try {
let response = await fetch('/wfcin', req_options);
if (response.ok)
result = await response.json();
else {
console.log('bad http response:', response);
result = { ok: false, error: 'BAD HTTP RESPONSE' };
}
}
catch (x) {
console.log('network error:', x);
result = { ok: false, error: 'NETWORK ERROR' };
}
return result;
}
//# sourceMappingURL=index.js.map

1
priv/static/js/dist/index.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"index.js","sourceRoot":"","sources":["../ts/index.ts"],"names":[],"mappings":"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"}

6
priv/static/js/dist/libfewd.d.ts vendored Normal file
View File

@ -0,0 +1,6 @@
/**
* FEWD common js lib functions
*
* @module
*/
export {};

7
priv/static/js/dist/libfewd.js vendored Normal file
View File

@ -0,0 +1,7 @@
/**
* FEWD common js lib functions
*
* @module
*/
export {};
//# sourceMappingURL=libfewd.js.map

1
priv/static/js/dist/libfewd.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"libfewd.js","sourceRoot":"","sources":["../ts/libfewd.ts"],"names":[],"mappings":"AAAA;;;;GAIG"}

165
priv/static/js/ts/index.ts Normal file
View File

@ -0,0 +1,165 @@
/**
* Home page ts/js
*
* @module
*/
//------------------------------------------------------------------
// page element stuff
//------------------------------------------------------------------
main();
function
main
()
: void
{
let ielt : HTMLInputElement = document.getElementById('wfc-input') as HTMLInputElement ;
let oelt : HTMLTextAreaElement = document.getElementById('wfc-output') as HTMLTextAreaElement ;
let cb_resize : HTMLInputElement = document.getElementById('auto-resize-output') as HTMLInputElement ;
let cb_scroll : HTMLInputElement = document.getElementById('auto-scroll') as HTMLInputElement ;
let MAX_OELT_HEIGHT : number = 300;
ielt.addEventListener('keydown',
function(e: KeyboardEvent) {
on_input_key(e, ielt, oelt, cb_resize, cb_scroll, MAX_OELT_HEIGHT);
}
);
}
// when user hits any key
async function
on_input_key
(evt : KeyboardEvent,
ielt : HTMLInputElement,
oelt : HTMLTextAreaElement,
cb_resize : HTMLInputElement,
cb_scroll : HTMLInputElement,
max_height : number)
: Promise<void>
{
if (evt.key === 'Enter') {
// don't do default thing
evt.preventDefault();
// grab contents
let contents : string = ielt.value;
let trimmed : string = contents.trim();
let nonempty : boolean = trimmed.length > 0;
// if contents are nonempty
if (nonempty) {
// clear input
ielt.value = '';
// put in output
oelt.value += '> ' + trimmed + '\n';
oelt.hidden = false;
// query backend for result
let result : wfcout = await fetch_wfcin(trimmed);
if (result.ok)
oelt.value += result.result;
else
oelt.value += result.error;
oelt.value += '\n';
// auto-resize
auto_resize_output(cb_resize, oelt, max_height);
auto_scroll_to_bottom(cb_scroll, oelt);
}
}
}
function
auto_resize_output
(checkbox_element : HTMLInputElement,
target_element : HTMLTextAreaElement,
max_height : number)
: void
{
// if the user has manually resized their output, we do nothing
if (checkbox_element.checked) {
let target_height: number = target_element.scrollHeight;
// resize it automagically up to 500px
if (target_height < max_height)
target_element.style.height = String(target_height) + 'px';
else
target_element.style.height = String(max_height) + 'px';
}
}
function
auto_scroll_to_bottom
(checkbox_element : HTMLInputElement,
target_element : HTMLTextAreaElement)
: void
{
if (checkbox_element.checked) {
// scroll to bottom
target_element.scrollTop = target_element.scrollHeight;
}
}
//------------------------------------------------------------------
// wfc api
//------------------------------------------------------------------
type ok_err<t> = {ok: true, result: t}
| {ok: false, error: string};
type wfcin = {wfcin: string};
type wfcout = ok_err<string>;
function
assert
(condition : boolean,
fail_msg : string)
: void
{
if(!condition)
throw new Error(fail_msg);
}
async function
fetch_wfcin
(user_line : string)
: Promise<wfcout>
{
let req_body_obj = {wfcin: user_line};
let req_body_str = JSON.stringify(req_body_obj);
let req_options = {method: 'POST',
headers: {'content-type': 'application/json'},
body: req_body_str};
// default result = somehow neither branch of code below was run(?)
// putting this here so ts doesn't chimp out
let result: wfcout = {ok : false,
error : 'IT DO BE LIKE THAT MISTA STANCIL'};
try {
let response : Response = await fetch('/wfcin', req_options);
if (response.ok)
result = await response.json() as wfcout;
else {
console.log('bad http response:', response);
result = {ok: false, error: 'BAD HTTP RESPONSE'};
}
}
catch (x: any) {
console.log('network error:', x);
result = {ok: false, error: 'NETWORK ERROR'};
}
return result;
}

10
priv/static/js/ts/libfewd.ts Normal file
View File

@ -0,0 +1,10 @@
/**
* FEWD common js lib functions
*
* @module
*/
export {
};

16
priv/static/js/tsconfig.json Normal file
View File

@ -0,0 +1,16 @@
{"compilerOptions" : {"target" : "es2022",
"strict" : true,
"esModuleInterop" : true,
"skipLibCheck" : true,
"forceConsistentCasingInFileNames" : true,
"noImplicitAny" : true,
"strictNullChecks" : true,
"strictPropertyInitialization" : true,
"sourceMap" : true,
"outDir" : "dist",
"declaration" : true},
"$schema" : "https://json.schemastore.org/tsconfig",
"display" : "Recommended",
"include" : ["ts/**/*"],
"exclude" : [],
"composite" : true}