Как лучше создать дерево через Proxy?

Question

Ui3 @Ui3

Как лучше создать дерево через Proxy?

Есть код, но он не учитывает вложенность.

const builder = (cb) => {
  let res = [];
  let cur;

  let prox = new Proxy(() => {}, {
    apply(target, _, ...args) {
      if (!cur.attrs) {
        cur.attrs = args;
      } else {
        cur.inner = args;
      }
      return prox;
    },
    get(target, name) {
      if (name === "__build") {
        return () => res;
      }
      cur = { name };
      res.push(cur);
      return prox;
    },
  });

  return cb(prox);
};

В таком случае не учитывает:

const res = builder((b) =>
  b.div(`id="div"`)("Hello").input.button(`id="btn"`)(
    "before span",
    b.span(`id="span"`)("inner span"),
    "after span"
  )
);
console.log(res.__build());

А вот так норм:

const res = builder((b) =>
  b.div(`id="div"`)("Hello").input.button(`id="btn"`)(
    "before span",
    "after span"
  )
);
console.log(res.__build());

Подскажите плиз как сделать поддержку вложенности.
Так же интересует можно ли как то красивее сделать, именно без колбеков с таким синтаксисом. Нужно создать кусок html максимально коротким синтаксисом.

Вопрос задан более года назад
164 просмотра

Комментировать

Подписаться 1 Средний Комментировать

Answer 1 · 2023-06-16 17:18:49

const $ = new Proxy(
  {},
  {
    get(_, n) {
      return (children, attrs) => {
        const _ = document.createElement(n);
        [children]
          .flat()
          .forEach(v => v && _.appendChild(typeof v !== "object" ? document.createTextNode(v) : v));
        Object.entries(attrs || {})?.forEach(([k, v]) => _.setAttribute(k, v));
        return _;
      };
    },
  }
);

const DOM = $.div(
  [
    $.span("first child span"),
    $.span([
      "second child span",
      $.button("button inside second span", { type: "button", id: "nicebutton" }),
    ]),
  ],
  { id: "root" }
);

console.log(DOM);

Как лучше создать дерево через Proxy?

Войдите на сайт