easyDOMgenerator

ESModulesから使える

code:script.d.ts

interface Id {id: string}

interface ClassName {className: string;}

export function h(tag: string, values?: Attributes | CSS | string | HTMLElement, ...children?: (string | HTMLElement)[]): HTMLElement;

export function fragment(...children: (string | HTMLElement)[]): DocumentFragment;

code:script.js

export const html = (...param) => h('html', ...param);

export const head = (...param) => h('head', ...param);

export const body = (...param) => h('body', ...param);

export const meta = (...param) => h('meta', ...param);

export const base = (...param) => h('base', ...param);

export const title = (...param) => h('title', ...param);

export const link = (...param) => h('link', ...param);

export const script = (...param) => h('script', ...param);

export const style = (...param) => h('style', ...param);

export const section = (...param) => h('section', ...param);

export const nav = (...param) => h('nav', ...param);

export const article = (...param) => h('article', ...param);

export const aside = (...param) => h('aside', ...param);

export const h1 = (...param) => h('h1', ...param);

export const h2 = (...param) => h('h2', ...param);

export const h3 = (...param) => h('h3', ...param);

export const h4 = (...param) => h('h4', ...param);

export const h5 = (...param) => h('h5', ...param);

export const h6 = (...param) => h('h6', ...param);

export const header = (...param) => h('header', ...param);

export const footer = (...param) => h('footer', ...param);

export const address = (...param) => h('address', ...param);

export const p = (...param) => h('p', ...param);

export const hr = (...param) => h('hr', ...param);

export const pre = (...param) => h('pre', ...param);

export const blockquote = (...param) => h('blockquote', ...param);

export const ol = (...param) => h('ol', ...param);

export const ul = (...param) => h('ul', ...param);

export const li = (...param) => h('li', ...param);

export const dl = (...param) => h('dl', ...param);

export const dt = (...param) => h('dt', ...param);

export const dd = (...param) => h('dd', ...param);

export const figure = (...param) => h('figure', ...param);

export const figcaption = (...param) => h('figcaption', ...param);

export const div = (...param) => h('div', ...param);

export const main = (...param) => h('main', ...param);

export const a = (...param) => h('a', ...param);

export const em = (...param) => h('em', ...param);

export const strong = (...param) => h('strong', ...param);

export const small = (...param) => h('small', ...param);

export const s = (...param) => h('s', ...param);

export const cite = (...param) => h('cite', ...param);

export const q = (...param) => h('q', ...param);

export const dfn = (...param) => h('dfn', ...param);

export const abbr = (...param) => h('abbr', ...param);

export const time = (...param) => h('time', ...param);

export const code = (...param) => h('code', ...param);

export const varTag = (...param) => h('var', ...param);

export const samp = (...param) => h('samp', ...param);

export const kbd = (...param) => h('kbd', ...param);

export const sub = (...param) => h('sub', ...param);

export const sup = (...param) => h('sup', ...param);

export const i = (...param) => h('i', ...param);

export const b = (...param) => h('b', ...param);

export const mark = (...param) => h('mark', ...param);

export const ruby = (...param) => h('ruby', ...param);

export const rt = (...param) => h('rt', ...param);

export const rp = (...param) => h('rp', ...param);

export const bdo = (...param) => h('bdo', ...param);

export const span = (...param) => h('span', ...param);

export const br = (...param) => h('br', ...param);

export const wbr = (...param) => h('wbr', ...param);

export const ins = (...param) => h('ins', ...param);

export const del = (...param) => h('del', ...param);

export const img = (...param) => h('img', ...param);

export const iframe = (...param) => h('iframe', ...param);

export const embed = (...param) => h('embed', ...param);

export const object = (...param) => h('object', ...param);

export const param = (...param) => h('param', ...param);

export const video = (...param) => h('video', ...param);

export const audio = (...param) => h('audio', ...param);

export const source = (...param) => h('source', ...param);

export const canvas = (...param) => h('canvas', ...param);

export const map = (...param) => h('map', ...param);

export const area = (...param) => h('area', ...param);

export const table = (...param) => h('table', ...param);

export const caption = (...param) => h('caption', ...param);

export const colgroup = (...param) => h('colgroup', ...param);

export const col = (...param) => h('col', ...param);

export const tbody = (...param) => h('tbody', ...param);

export const thead = (...param) => h('thead', ...param);

export const tfoot = (...param) => h('tfoot', ...param);

export const tr = (...param) => h('tr', ...param);

export const td = (...param) => h('td', ...param);

export const th = (...param) => h('th', ...param);

export const form = (...param) => h('form', ...param);

export const fieldset = (...param) => h('fieldset', ...param);

export const legend = (...param) => h('legend', ...param);

export const label = (...param) => h('label', ...param);

export const input = (...param) => h('input', ...param);

export const button = (...param) => h('button', ...param);

export const select = (...param) => h('select', ...param);

export const datalist = (...param) => h('datalist', ...param);

export const optgroup = (...param) => h('optgroup', ...param);

export const option = (...param) => h('option', ...param);

export const textarea = (...param) => h('textarea', ...param);

export const keygen = (...param) => h('keygen', ...param);

export const output = (...param) => h('output', ...param);

export const progress = (...param) => h('progress', ...param);

export const meter = (...param) => h('meter', ...param);

export const detail = (...param) => h('detail', ...param);

export const summary = (...param) => h('summary', ...param);

export const command = (...param) => h('command', ...param);

export const menu = (...param) => h('menu', ...param);

export const slot = (...param) => h('slot', ...param);

code:script.js

export function fragment(...children) {

const element = document.createDocumentFragment();

element.append(...children);

return element;

}

export function h(tag, ...params) {

const element = document.createElement(tag);

// <>の中身を入れる

let children = params;

if (!isNode(attributes) && !attributes.length && typeof attributes === 'object') {

const {id, className, css, ...rest} = attributes;

if (id) element.id = id;

if (className) element.className = className;

if (key.startsWith('on')) {

element.addEventListener(key.slice(2), value);

continue;

}

element.setAttribute(key, value);

}

children = params.slice(1);

}

// 子要素を入れる

if (typeof children === 'string') {

element.textContent = children;

return element;

}

if (isNode(children)) {

element.append(children);

return element;

}

element.append(...children.flatMap(child =>

isNode(child) ? child : document.createTextNode(child)

));

return element;

}

function isNode(element) {

return element && element.nodeName && element.nodeType;

}

test code

code:js

import('/api/code/programming-notes/easyDOMgenerator/test1.js');

code:test1.js

import {div, ul ,li, a} from './script.js';

console.log(div(ul(li('one'), li('two'), li('three'))).outerHTML);

console.log(

li({className: 'page-list-item grid-style-itme'},

div({className: 'hover'}),

div({className: 'content'},

div({className: 'header'},

div({className: 'title'}, scrapbox.Page.title)

),

'content',

),

),

).outerHTML

);