/programming-notes/easyDOMgenerator

generated at 2/14/2025, 12:24:33 AM
easyDOMgenerator
hyperscriptっぽいやつ
ESModulesから使える
便利そう！
便利ですよー
JSXの使えない環境でJSXっぽいことをするときに便利
2021-05-08 19:32:57 htmをUserScriptから使えるようにしたので、このscriptは役目を終えました

2021-03-31 18:20:08  css にobject形式でstyleを渡せるようにした
inspired by /discordjs-japan/Aiueokashi#6052a45a3760e9000079a10a

型定義ファイルを作る
SVGElementにも対応したい

script.d.tsinterface Id {id: string}
interface ClassName {className: string;}
type Attributes = {[key: string]: string;};
type CSS = {css: {[key: string]: string;};};

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

予め tag を埋めたやつ
 <var> だけ要素名と違うので注意
script.jsexport 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);

script.jsexport function fragment(...children) {
  const element = document.createDocumentFragment();
  element.append(...children);
  return element;
}
export function h(tag, ...params) {
  const element = document.createElement(tag);
  if (!params[0]) return element;
  
  // <>の中身を入れる
  const attributes = params[0];
  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 (css) Object.entries(css).forEach(([key, value]) => element.style.setProperty(key, value));
    for (const [key, value] of Object.entries(rest)) {
      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
jsimport('/api/code/programming-notes/easyDOMgenerator/test1.js');
test1.jsimport {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'},
    a({href: `/${scrapbox.Project.name}/${encodeURIComponent(scrapbox.Page.title)}`, rel: 'route'}, 
      div({className: 'hover'}),
      div({className: 'content'}, 
        div({className: 'header'},
          div({className: 'title'}, scrapbox.Page.title)
        ),
        'content',
      ),
    ),
  ).outerHTML
);

#2021-03-18 02:37:14 