タグ付きテンプレートでコーディングしてみるテスト

簡単なページを作る時にwikiのように書けたらと思い

test.js

$(e=>{

	var vote = `
		Across the Universe
		Baby It's You
		Carol
		Dear Prudence
		Every Little Thing
	`.trim().split(/\s*\n+\s*/)
	
	var episode = Object.entries({
		EVENT_A:'All You Need Is Love',
		EVENT_B:'Bad Boy',
		EVENT_C:'Come Together',
		EVENT_D:'Dig a Pony',
	})
	
	$('body').append(_html`
		ul.Tab(
			li,data-index=0,tab
			li,data-index=1,tab
			li,data-index=2,tab
		),${e=>console.log(e.target.dataset)}
		.Contents(
			.pane,data-tab=Content1(
				.cover,image=hero.png,text
				.header,Content1 | header-1
				.row(span,Ain't She Sweet)
				.row(b,Baby It's You)
				//.row(img,src=Telop.png)
			)
			.pane,data-tab=Content2(
				.header,Content2 | header-1
				ul.rows,${vote.map(s=>_html('li',s))}
				.header,Content2 | header-2
				ul.rows,${vote.map((s,i)=>
					_html('li',s,{index:i,value:s})
				)},${e=>{
					console.log(e.target.dataset)
				}}
			)
			.pane,data-tab=Content3(
				.header,Content3 | header-1
				ul.rows,${episode.map(a=>
					_html('li,name:',a[1],{type:a[0],value:a[1]})
				)},${e=>{
					console.log(e.target.dataset)
				}}
			)
		)
	`)
})

function _html(...a){
	if(typeof a[0]==='string')		return _html.static.create(a)
	if(a[0] instanceof jQuery)		return _html.static.append(a.shift(),a)
	if(_html.template.isTagged(a))	return _html.template.parse(a)
	return $('<div>')
}

_html.static = new class{

	video(){return $('<video loop autoplay muted>')}
	image(q,s){q.css('background-image',`url(${s})`)}
	data(q,data){$.each(data,(k,v)=>{q[0].dataset[k]=v})}
	
	create(a){
		var q,m
		var text = a.shift().trim().replace(/\s*(,|=)\s*/g,'$1')
		switch(m = text.match(/^\w+/)){
			case 'video':	q = this.video();	break;
			case null:		q = $('<div>');		break;
			default:		q = $('<'+m+'>')
		}
		text.replace(/,([\w-]+)=([^,]+)/g,(m,k,v)=>{
			switch(k.toLowerCase()){
				case 'image':		this.image(q,v);	break;
				case 'background':	this.image(q,v);	break;
				default: 			q.attr(k,v)
			}
			return ''
		}).replace(/,([^,]+)/g,(m,s)=>{
			q.append(s)
			return ''
		}).replace(/([#\.])([\w-]+)/g,(m,s,t)=>{
			switch(s){
				case '#':	q.attr('id',t);	break;
				case '.':	q.addClass(t);	break;
			}
			return ''
		})
		return this.append(q,a)
	}
	append(q,a){
		a.forEach(v=>{
			if(v instanceof jQuery){
				q.append(v)
			}else{
				switch(Object.prototype.toString.call(v)){
					case '[object Function]':	q.click(v);		break;
					case '[object Object]':		this.data(q,v);	break;
					default:q.append(v);
				}
			}
		})
		return q
	}
}

_html.template = new class{
	isTagged(a){
		if(Array.isArray(a[0])==false)			return false
		if(a[0].length!=a.length)				return false
		if(a[0].hasOwnProperty('raw')==false)	return false
		return true
	}
	parse(a){
		var text = a[0].map((s,i)=>{
			if(i==0) return s
			if(typeof a[i]==='string') return a[i]+s 
			return '<!--'+i+'-->'+s
		}).join('').trim()
		var _check = text
		while (/\(([^()]+)\)/.test(text)){
			text = text.replace(/\(([^()]*)\)/g,(m,s)=>{
				a.push(this.rows(s.trim(),a))
				return '<!--'+(a.length-1)+'-->'
			})
		}
		var v = this.rows(text,a)
		if(v.length==1) return v[0]
		return _html('',v)
	}
	rows(text,vars){
		var rows = text.trim().split(/\s*\n\s*/).map(row=>{
			if(/<!--\d+-->/.test(row)) return this.row(row,vars)
			return [row]
		}).filter(a=>/^\/\//.test(a[0])==false)
		return rows.map(args=>_html(...args))
	}
	row(row,vars){
		var args = []
		row.replace(/(<!--|-->)/g,m=>{
			if(m=='<!--')	return "\n"+m
			if(m=='-->')	return m+"\n"
			return r
		}).split("\n").forEach((s,i)=>{
			var m = s.match(/^<!--(\d+)-->$/)
			switch(true){
				case(m!=null):	args.push(vars[m[1]]);			break
				case(i==0):		args.push(s.replace(/,+$/,''));	break
				default: 		args = args.concat(s.split(','));
			}
		})
		args = args.filter(s=>s!='')
		if(typeof args[0] ==='string') return args
		if(args[0] instanceof jQuery) return args
		args.unshift('div')
		return args
	}
}