Interface NodeText

Текстовый узел в AST.

Узел может представлять:

• статическое значение (value),
• динамическое значение (один или несколько путей в data),
• смешанное выражение (динамика + статический текст, в expr).

Структура

• type — всегда "text"
• value — строка, если узел статический
• data — строка или массив строк, если узел динамический
• expr — строка-шаблон с индексами ${_[i]}, если текст смешанный

Примеры

Статический

({ html }) => html`Static text`
Copy

[{ type: "text", value: "Static text" }]
Copy

Динамический

({ html, context }) => html`<p>${context.dynamic}</p>`
Copy

[
  {
    tag: "p",
    type: "el",
    child: [{ type: "text", data: "/context/dynamic" }],
  },
]
Copy

Смешанный

({ html, context }) => html`<p>Hello, ${context.family} ${context.name}!</p>`
Copy

[
  {
    tag: "p",
    type: "el",
    child: [
      {
        type: "text",
        data: ["/context/family", "/context/name"],
        expr: "Hello, ${_[0]} ${_[1]}!",
      },
    ],
  },
]
Copy

Методы

({ html, context }) => html`<p>${context.name.toUpperCase()} - ${context.email.toLowerCase()}</p>`
Copy

[
  {
    tag: "p",
    type: "el",
    child: [
      {
        type: "text",
        data: ["/context/name", "/context/email"],
        expr: "${_[0].toUpperCase()} - ${_[1].toLowerCase()}",
      },
    ],
  },
]
Copy

Математический

({ html, context }) => html`<p>${context.a + context.b * 2}</p>`
Copy

[
  {
    tag: "p",
    type: "el",
    child: [
      {
        type: "text",
        data: ["/context/a", "/context/b"],
        expr: "${_[0] + _[1] * 2}",
      },
    ],
  },
]
Copy

Логический

({ html, context }) => html`<p class=${context.isOpen && "open"}>${context.isOpen && "Open"}</p>`
Copy

[
  {
    tag: "p",
    type: "el",
    string: {
      class: {
        data: "/context/isOpen",
        expr: '${_[0] && "open"}',
      },
    },
    child: [
      {
        type: "text",
        data: "/context/isOpen",
        expr: '${_[0] && "Open"}',
      },
    ],
  },
]
Copy

Логический литерал

({ html, context }) => html` <p>${context.last && `last: ${context.last}`}</p>`
Copy

[
  {
    tag: "p",
    type: "el",
    child: [
      {
        type: "text",
        data: "/context/last",
        expr: "${_[0] && `last: ${_[0]}`}",
      },
    ],
  },
]
Copy

Тернарный

({ html, context }) => html`<p>${context.flag ? "Yes" : "No"}</p>`
Copy

[
  {
    tag: "p",
    type: "el",
    child: [
      {
        type: "text",
        data: "/context/flag",
        expr: '${_[0] ? "Yes" : "No"}',
      },
    ],
  },
]
Copy

Тернарный литерал

({ html, context }) => html`<p>${context.name ? `Hi, ${context.name}!` : ""}</p>`
Copy

[
  {
    tag: "p",
    type: "el",
    child: [
      {
        type: "text",
        data: "/context/name",
        expr: '${_[0] ? `Hi, ${_[0]}!` : ""}',
      },
    ],
  },
]
Copy