tangentstorm · April 21, 2024 12:16 · tangentstorm · Mar 21, 2024 · tangentstorm · Mar 21, 2024
diff --git a/sh.mjs b/sh.mjs
 // sh.mjs: javascript shorthand

 // array helpers (apl/j/k)
 export const id=x=>x
 export const af=(n,x)=>Array(n).fill(x) // TODO: make this 'afl' or 'fil' (aa?)
 export const ii=(n,f)=>{for(let i=0;i<n;i++)f(i)}
 export const im=(n,f)=>af(n,0).map((_,i)=>f(i))
 export const ia=(n,f)=>im(n,id)
 export const at=(a,ixs)=>ixs.map(i=>a[i])
 export const io=(xs,ys)=>ys.map([].indexOf.bind(xs))
 export const a0=a=>a[0]
 export const a1=a=>a[1]

 export const odom=(x,y)=>{
  let r=[];
  for(let j=0;j<y;j++) for(let i=0;i<x;i++) r.push([i,j]); return r }

 // -- misc js shorthand
 export const {min,max,sin,tan,cos}=Math
 export const ran=Math.random
 export const flo=Math.floor
 export const cei=Math.ceil
 export const rou=Math.round
 export const int=parseInt
 export const srt=(a,f)=>a.toSorted(f)
 export const len=x=>x.length
 export const doc=document
 export const und=x=>x===undefined
 export const arf=Array.from  // TODO: make this 'af'
 export const oks=Object.keys
 export const oas=Object.assign
 export const log=console.log.bind(console)
 export const raf=window.requestAnimationFrame
 export const chr=String.fromCodePoint
 export const ord=s=>s.length==1?s.codePointAt(0):arf(s).map(ord)
 export const ftx=(u,cb)=>fetch(u).then(r=>r.text()).then(cb)
 export const fjs=(u,m,d)=>{
  let f = (und(m)||m==='GET') ? fetch(u)
      : fetch(u,{method:m,headers:{'Content-type':'application/json'},
                 body:jss(d)})
  return f.then(r=>r.json())}
 export const jsp=JSON.parse
 export const jss=JSON.stringify

 export const ce=(t,a,es)=>app(ats(doc.createElement(t),a),...es||[])
 export const cen=(n,t,a,es)=>app(ats(doc.createElementNS(n,t),a),...es)
 export const svg=(t,a,es)=>(es||=[],cen(svg.ns,t,a,es))
 svg.ns='http://www.w3.org/2000/svg'
 export const ani=(a)=>new Animation(a)
 export const kfe=(e,ks,o)=>new KeyframeEffect(e,ks,o)
 export const akf=(e,ks,o)=>ani(kfe(e,ks,o))
 export const S=(a,es)=> svg('svg',oas({
  width:640,height:480,viewBox:'-320 -240 640 480'},a),es)
 export const C=(a)=>svg('circle',oas({cx:0,cy:0,r:0},a))
 export const R=(a)=>svg('rect',oas({x:-5,y:-5,width:10,height:10},a))
 export const G=(a,es)=>svg('g',a,es)

 // -- dom shorthand
 export const att=(e,a,v)=>und(v)?e.getAttribute(a):(e.setAttribute(a,v),e)
 export function ats(e,kv) {
  if (kv) for (let k in kv) e.setAttribute(k,kv[k]); return e}
 export const sty=(e,a,v)=>und(v) ? e.style[a] : (e.style[a]=v,e)
 export const hat=(e,a)=>e.hasAttribute(a)
 export const app=(x,...ys)=>((x.append||x.push).bind(x)(...ys),x)
 export const iht=(e,h)=>und(h)?e.innerHTML:(e.innerHTML=h,e)
 export const itx=(e,t)=>und(t)?e.innerText:(e.innerText=t,e)
 export const cla=(c,e)=>(e.classList.add(c),e)
 export const clr=(c,e)=>(e.classList.remove(c),e)
 export const gbc=(e)=>e.getBoundingClientRect()

 function ei0(x,y) {
  let [base, id] = (y===undefined) ? [doc,x] : [x,y]
  return base.getElementById(id)}
 export const ei=new Proxy(ei0, {
  get:(ei,v)=>ei(v),
  apply:(ei,th,args)=>ei.apply(th,args)})

 export function qs(x,y) {
  let [base, id] = und(y) ? [doc,x] : [x,y]
  return base.querySelector(id)}

 export function qsa(x,y) {
  let [base, id] = und(y) ? [doc,x] : [x,y]
  return arf(base.querySelectorAll(id))}

 export function ael(x,y,z) {
  let [base, ev, cb] = und(z) ? [doc,x,y] : [x,y,z]
  return base.addEventListener(ev, cb)}

 export const onl=(f)=>ael('DOMContentLoaded',f) // 'on load'
 export const onc=(e,f)=>ael(e,'click',f) // 'on click'

 export function mob(cb,e,c){
  let res = new MutationObserver(cb)
  if (e) res.observe(e,c)
  return res}


 // -- tool to install everything in a namespace

 import * as sh from './sh.mjs'
 export function glosh(ctx0,quiet) {
  let ctx = ctx0??globalThis
  if (!quiet) {
    log(`installing sh.* on ${ctx}:`)
    log(`[${oks(sh).join(' ')}]`)}
  oks(sh).forEach(k=>(ctx[k]=sh[k])) }

 globalThis.$sh=glosh // $sh() will make all global
 glosh(glosh,1) // register $sh.xxx globally
	// sh.mjs: javascript shorthand

	// array helpers (apl/j/k)
	export const id=x=>x
	export const af=(n,x)=>Array(n).fill(x) // TODO: make this 'afl' or 'fil' (aa?)
	export const ii=(n,f)=>{for(let i=0;i<n;i++)f(i)}
	export const im=(n,f)=>af(n,0).map((_,i)=>f(i))
	export const ia=(n,f)=>im(n,id)
	export const at=(a,ixs)=>ixs.map(i=>a[i])
	export const io=(xs,ys)=>ys.map([].indexOf.bind(xs))
	export const a0=a=>a[0]
	export const a1=a=>a[1]

	export const odom=(x,y)=>{
	let r=[];
	for(let j=0;j<y;j++) for(let i=0;i<x;i++) r.push([i,j]); return r }

	// -- misc js shorthand
	export const {min,max,sin,tan,cos}=Math
	export const ran=Math.random
	export const flo=Math.floor
	export const cei=Math.ceil
	export const rou=Math.round
	export const int=parseInt
	export const srt=(a,f)=>a.toSorted(f)
	export const len=x=>x.length
	export const doc=document
	export const und=x=>x===undefined
	export const arf=Array.from // TODO: make this 'af'
	export const oks=Object.keys
	export const oas=Object.assign
	export const log=console.log.bind(console)
	export const raf=window.requestAnimationFrame
	export const chr=String.fromCodePoint
	export const ord=s=>s.length==1?s.codePointAt(0):arf(s).map(ord)
	export const ftx=(u,cb)=>fetch(u).then(r=>r.text()).then(cb)
	export const fjs=(u,m,d)=>{
	let f = (und(m)\|\|m==='GET') ? fetch(u)
	: fetch(u,{method:m,headers:{'Content-type':'application/json'},
	body:jss(d)})
	return f.then(r=>r.json())}
	export const jsp=JSON.parse
	export const jss=JSON.stringify

	export const ce=(t,a,es)=>app(ats(doc.createElement(t),a),...es\|\|[])
	export const cen=(n,t,a,es)=>app(ats(doc.createElementNS(n,t),a),...es)
	export const svg=(t,a,es)=>(es\|\|=[],cen(svg.ns,t,a,es))
	svg.ns='http://www.w3.org/2000/svg'
	export const ani=(a)=>new Animation(a)
	export const kfe=(e,ks,o)=>new KeyframeEffect(e,ks,o)
	export const akf=(e,ks,o)=>ani(kfe(e,ks,o))
	export const S=(a,es)=> svg('svg',oas({
	width:640,height:480,viewBox:'-320 -240 640 480'},a),es)
	export const C=(a)=>svg('circle',oas({cx:0,cy:0,r:0},a))
	export const R=(a)=>svg('rect',oas({x:-5,y:-5,width:10,height:10},a))
	export const G=(a,es)=>svg('g',a,es)

	// -- dom shorthand
	export const att=(e,a,v)=>und(v)?e.getAttribute(a):(e.setAttribute(a,v),e)
	export function ats(e,kv) {
	if (kv) for (let k in kv) e.setAttribute(k,kv[k]); return e}
	export const sty=(e,a,v)=>und(v) ? e.style[a] : (e.style[a]=v,e)
	export const hat=(e,a)=>e.hasAttribute(a)
	export const app=(x,...ys)=>((x.append\|\|x.push).bind(x)(...ys),x)
	export const iht=(e,h)=>und(h)?e.innerHTML:(e.innerHTML=h,e)
	export const itx=(e,t)=>und(t)?e.innerText:(e.innerText=t,e)
	export const cla=(c,e)=>(e.classList.add(c),e)
	export const clr=(c,e)=>(e.classList.remove(c),e)
	export const gbc=(e)=>e.getBoundingClientRect()

	function ei0(x,y) {
	let [base, id] = (y===undefined) ? [doc,x] : [x,y]
	return base.getElementById(id)}
	export const ei=new Proxy(ei0, {
	get:(ei,v)=>ei(v),
	apply:(ei,th,args)=>ei.apply(th,args)})

	export function qs(x,y) {
	let [base, id] = und(y) ? [doc,x] : [x,y]
	return base.querySelector(id)}

	export function qsa(x,y) {
	let [base, id] = und(y) ? [doc,x] : [x,y]
	return arf(base.querySelectorAll(id))}

	export function ael(x,y,z) {
	let [base, ev, cb] = und(z) ? [doc,x,y] : [x,y,z]
	return base.addEventListener(ev, cb)}

	export const onl=(f)=>ael('DOMContentLoaded',f) // 'on load'
	export const onc=(e,f)=>ael(e,'click',f) // 'on click'

	export function mob(cb,e,c){
	let res = new MutationObserver(cb)
	if (e) res.observe(e,c)
	return res}


	// -- tool to install everything in a namespace

	import * as sh from './sh.mjs'
	export function glosh(ctx0,quiet) {
	let ctx = ctx0??globalThis
	if (!quiet) {
	log(`installing sh.* on ${ctx}:`)
	log(`[${oks(sh).join(' ')}]`)}
	oks(sh).forEach(k=>(ctx[k]=sh[k])) }

	globalThis.$sh=glosh // $sh() will make all global
	glosh(glosh,1) // register $sh.xxx globally