html-table-patcher4.1.0

Visual helper to place templating code around table tags into correct places

Quick Take

import { strict as assert } from "assert";
import { patcher } from "html-table-patcher";

assert.equal(
  patcher(
    `<table>
{% if customer.details.hasAccount %}
<tr>
  <td>
    variation #1
  </td>
</tr>
{% else %}
<tr>
  <td>
    variation #2
  </td>
</tr>
{% endif %}
</table>`
  ).result,
  `<table>

<tr>
  <td>
    {% if customer.details.hasAccount %}
  </td>
</tr>

<tr>
  <td>
    variation #1
  </td>
</tr>

<tr>
  <td>
    {% else %}
  </td>
</tr>

<tr>
  <td>
    variation #2
  </td>
</tr>

<tr>
  <td>
    {% endif %}
  </td>
</tr>

</table>`
);

Idea

ESP template tags (anything, from Mailchimp to Salesforce) or templating languages (like Nunjucks), when previewed in browser, appear at wrong places. It's because templating tags are often placed between table, tr or td tags.

This program patches table structures, so you can visually check them easier:

patching HTML tables

API

When you import { patcher, defaults, version } from "html-table-patcher", you get three things:

  • patcher is the main function.
  • defaults is the plain object, default options.
  • version is string, coming straight from package.json

patcher() API - Input

patcher(str, [opts])
Input argument Key value's type Obligatory? Description
str String yes The input string of zero or more characters
opts Plain object no An Optional Options Object. See below for its API.

patcher() API - Output

It returns a plain object:

Key's name Key value's type Description
result String Result string containing patched code

For example,

{
result: `<table>
<tr>
<td>
foo
</td>
</tr>
<tr>
<td>
bar
</td>
</tr>
</table>
`

}

patcher() API - Options

Put options under function's second input argument, in a plain object, as per defaults:

import { patcher, defaults, version } from "html-table-patcher";
const result = patcher("<table>1<tr><td>zzz</td></tr></table>", {
// <---- options object
cssStylesContent: "",
alwaysCenter: false,
});

Here's the options object's API:

Options Object's key Value's type Default value Description
cssStylesContent string "" (empty string) Whatever you put here, will end up on every newly-added TD's inline style tag's value
alwaysCenter boolean false Every newly-added TD should have its contents centered (via an inline align="center" HTML attribute)

The algorithm

We parse using codsen-parser then traverse using ast-monkey-traverse-with-lookahead and record what needs to be amended using ranges-push and finally, apply all changes in one go using ranges-apply.

Using the GUI tap

Git clone the repo to your SSD.

Then, cd into the root of this package (where its pacakge.json is).

Then, serve opens in a new tab the folder to localhost server.

If you open the folder /tap/ in browser, you'll get mini GUI application which is driven by Vue (local copy, no Internet needed) and also by local code of the pacher.

Don't serve from inside /tap/ folder because virtual server won't "see" the source code at the level above its root, ../dist/*. serve from the root.

Changelog

See it in the monorepo opens in a new tab, on GitHub.

Contributing

To report bugs or request features or assistance, raise an issue on GitHub opens in a new tab.

Any code contributions welcome! All Pull Requests will be dealt promptly.

Licence

MIT opens in a new tab

Copyright © 2010–2021 Roy Revelt and other contributors

Related packages:

📦 emlint 4.7.0
Pluggable email template code linter
📦 html-crush 4.2.0
Minifies HTML/CSS: valid or broken, pure or mixed with other languages
📦 stristri 3.2.0
Extracts or deletes HTML, CSS, text and/or templating tags from string
📦 string-strip-html 8.3.0
Strips HTML tags from strings. No parser, accepts mixed sources
📦 detect-is-it-html-or-xhtml 4.1.0
Answers, is the string input string more an HTML or XHTML (or neither)
📦 detect-templating-language 2.1.0
Detects various templating languages present in string
📦 is-html-tag-opening 2.1.0
Does an HTML tag start at given position?