html-table-patcher2.0.14

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

§ Quick Take

import { strict as assert } from "assert";
import { patcher } from "dist/html-table-patcher.esm";

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

When we make email templates, sooner or later, we have to add conditional logic around table tags. If this, show that row, if that, show another column, and so on. As a result, when we try to preview HTML in the browser, all the logic is placed at the wrong place, at the top, making it hard to visually QA.

This program patches table structures, creating cells as needed and placing the code in those cells so that when you preview, templating literals are in the correct places.

It is another helper tool to QA email campaigns.

§ API

This package exports a plain object with three keys: { patcher, defaults, version }.

The first-one has a value which is the main function. The second one is the defaults (plain) object. The third one is the version taken straight from package.json

§ patcher() API - Input

{ patcher, defaults, version }(str, [opts])
Input argumentKey value's typeObligatory?Description
strStringyesThe input string of zero or more characters
optsPlain objectnoAn Optional Options Object. See below for its API.

§ patcher() API - Output

It returns a plain object:

Key's nameKey value's typeDescription
resultStringResult 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 keyValue's typeDefault valueDescription
cssStylesContentstring"" (empty string)Whatever you put here, will end up on every newly-added TD's inline style tag's value
alwaysCenterbooleanfalseEvery 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.

§ Licence

MIT opens in a new tab

Copyright © 2010–2020 Roy Revelt and other contributors

Related packages:

📦 emlint 2.19.2
Pluggable email template code linter
📦 html-crush 2.0.9
Minifies HTML/CSS: valid or broken, pure or mixed with other languages
📦 string-strip-html 6.2.0
Strips HTML tags from strings. No parser, accepts mixed sources
📦 detect-is-it-html-or-xhtml 3.10.0
Answers, is the string input string more an HTML or XHTML (or neither)
📦 is-html-tag-opening 1.8.3
Is given opening bracket a beginning of a tag?
📦 is-html-attribute-closing 1.3.0
Is a character on a given index a closing of an HTML attribute?
📦 is-language-code 1.0.12
Is given string a language code (as per IANA)