html-table-patcher4.1.0
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:
API
When you import { patcher, defaults, version } from "html-table-patcher", you get three things:
patcheris the main function.defaultsis the plain object, default options.versionis string, coming straight frompackage.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 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 , on GitHub.
Contributing
To report bugs or request features or assistance, raise an issue on GitHub .
Any code contributions welcome! All Pull Requests will be dealt promptly.
Licence
Copyright © 2010–2021 Roy Revelt and other contributors