html-table-patcher^4.0.16

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

Install via npm

npm i html-table-patcher

Consume via a require():

const { patcher, defaults, version } = require("html-table-patcher");

or as an ES Module:

import { patcher, defaults, version } from "html-table-patcher";

Install as a script, via CDN

Put this in your HTML:

<script src="https://cdn.jsdelivr.net/npm/html-table-patcher/dist/html-table-patcher.umd.js"></script>

Then, you’ll get a global variable htmlTablePatcher in your Global object and you consume it like this:

const { patcher, defaults, version } = htmlTablePatcher;

Trivia

This program has 32 assertions in its unit tests. That's less than all unit test assertions' median (44) and less than geometric mean (72).

§ 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>`
);

⬆ back to top

§ 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:

⬆ back to top

§ 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

⬆ back to top

§ `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.

⬆ back to top

§ `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>`
}

⬆ back to top

§ `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)

⬆ back to top

§ 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.

⬆ back to top

§ 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 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.

⬆ back to top