New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

js-html-renderer

Package Overview
Dependencies
Maintainers
0
Versions
5
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

js-html-renderer - npm Package Compare versions

Comparing version 0.0.3 to 0.1.0

dist/tags.d.ts
dist/tags.js

2

dist/errors.js

@@ -7,5 +7,5 @@ "use strict";

super(message);
this.name = "NotImplementedError";
this.name = 'NotImplementedError';
}
}
exports.NotImplementedError = NotImplementedError;

3

dist/index.d.ts

@@ -1,2 +0,3 @@

export * from "./template";
export * from './sigil';
export * from './tags';
export * from './template';

3

dist/index.js

@@ -17,3 +17,4 @@ "use strict";

Object.defineProperty(exports, "__esModule", { value: true });
__exportStar(require("./sigil"), exports);
__exportStar(require("./tags"), exports);
__exportStar(require("./template"), exports);
__exportStar(require("./sigil"), exports);

118

dist/sigil.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.hr = exports.hgroup = exports.header = exports.head = exports.h6 = exports.h5 = exports.h4 = exports.h3 = exports.h2 = exports.h1 = exports.form = exports.footer = exports.figure = exports.figcaption = exports.fieldset = exports.embed = exports.em = exports.dt = exports.dl = exports.div = exports.dialog = exports.dfn = exports.details = exports.del = exports.dd = exports.datalist = exports.data = exports.colgroup = exports.col = exports.code = exports.cite = exports.caption = exports.canvas = exports.button = exports.br = exports.body = exports.blockquote = exports.bdo = exports.bdi = exports.base = exports.b = exports.audio = exports.aside = exports.article = exports.area = exports.address = exports.abbr = exports.a = exports.doctype = exports.$ = void 0;
exports.td = exports.tbody = exports.table = exports.sup = exports.summary = exports.sub = exports.style = exports.strong = exports.span = exports.source = exports.small = exports.slot = exports.select = exports.section = exports.search = exports.script = exports.samp = exports.s = exports.ruby = exports.rt = exports.rp = exports.q = exports.progress = exports.pre = exports.picture = exports.p = exports.output = exports.option = exports.optgroup = exports.ol = exports.object = exports.noscript = exports.nav = exports.meter = exports.meta = exports.menu = exports.mark = exports.map = exports.main = exports.link = exports.li = exports.legend = exports.label = exports.kbd = exports.ins = exports.input = exports.img = exports.iframe = exports.i = exports.html = void 0;
exports.wbr = exports.video = exports.VAR = exports.ul = exports.u = exports.track = exports.tr = exports.title = exports.time = exports.thead = exports.th = exports.tfoot = exports.textarea = exports.template = void 0;
exports.$ = $;
const template_1 = require("./template");

@@ -11,115 +9,1 @@ function $(name, attr) {

}
exports.$ = $;
exports.doctype = $.bind(null, '!DOCTYPE html');
exports.a = $.bind(null, 'a');
exports.abbr = $.bind(null, 'abbr');
exports.address = $.bind(null, 'address');
exports.area = $.bind(null, 'area');
exports.article = $.bind(null, 'article');
exports.aside = $.bind(null, 'aside');
exports.audio = $.bind(null, 'audio');
exports.b = $.bind(null, 'b');
exports.base = $.bind(null, 'base');
exports.bdi = $.bind(null, 'bdi');
exports.bdo = $.bind(null, 'bdo');
exports.blockquote = $.bind(null, 'blockquote');
exports.body = $.bind(null, 'body');
exports.br = $.bind(null, 'br');
exports.button = $.bind(null, 'button');
exports.canvas = $.bind(null, 'canvas');
exports.caption = $.bind(null, 'caption');
exports.cite = $.bind(null, 'cite');
exports.code = $.bind(null, 'code');
exports.col = $.bind(null, 'col');
exports.colgroup = $.bind(null, 'colgroup');
exports.data = $.bind(null, 'data');
exports.datalist = $.bind(null, 'datalist');
exports.dd = $.bind(null, 'dd');
exports.del = $.bind(null, 'del');
exports.details = $.bind(null, 'details');
exports.dfn = $.bind(null, 'dfn');
exports.dialog = $.bind(null, 'dialog');
exports.div = $.bind(null, 'div');
exports.dl = $.bind(null, 'dl');
exports.dt = $.bind(null, 'dt');
exports.em = $.bind(null, 'em');
exports.embed = $.bind(null, 'embed');
exports.fieldset = $.bind(null, 'fieldset');
exports.figcaption = $.bind(null, 'figcaption');
exports.figure = $.bind(null, 'figure');
exports.footer = $.bind(null, 'footer');
exports.form = $.bind(null, 'form');
exports.h1 = $.bind(null, 'h1');
exports.h2 = $.bind(null, 'h2');
exports.h3 = $.bind(null, 'h3');
exports.h4 = $.bind(null, 'h4');
exports.h5 = $.bind(null, 'h5');
exports.h6 = $.bind(null, 'h6');
exports.head = $.bind(null, 'head');
exports.header = $.bind(null, 'header');
exports.hgroup = $.bind(null, 'hgroup');
exports.hr = $.bind(null, 'hr');
exports.html = $.bind(null, 'html');
exports.i = $.bind(null, 'i');
exports.iframe = $.bind(null, 'iframe');
exports.img = $.bind(null, 'img');
exports.input = $.bind(null, 'input');
exports.ins = $.bind(null, 'ins');
exports.kbd = $.bind(null, 'kbd');
exports.label = $.bind(null, 'label');
exports.legend = $.bind(null, 'legend');
exports.li = $.bind(null, 'li');
exports.link = $.bind(null, 'link');
exports.main = $.bind(null, 'main');
exports.map = $.bind(null, 'map');
exports.mark = $.bind(null, 'mark');
exports.menu = $.bind(null, 'menu');
exports.meta = $.bind(null, 'meta');
exports.meter = $.bind(null, 'meter');
exports.nav = $.bind(null, 'nav');
exports.noscript = $.bind(null, 'noscript');
exports.object = $.bind(null, 'object');
exports.ol = $.bind(null, 'ol');
exports.optgroup = $.bind(null, 'optgroup');
exports.option = $.bind(null, 'option');
exports.output = $.bind(null, 'output');
exports.p = $.bind(null, 'p');
exports.picture = $.bind(null, 'picture');
exports.pre = $.bind(null, 'pre');
exports.progress = $.bind(null, 'progress');
exports.q = $.bind(null, 'q');
exports.rp = $.bind(null, 'rp');
exports.rt = $.bind(null, 'rt');
exports.ruby = $.bind(null, 'ruby');
exports.s = $.bind(null, 's');
exports.samp = $.bind(null, 'samp');
exports.script = $.bind(null, 'script');
exports.search = $.bind(null, 'search');
exports.section = $.bind(null, 'section');
exports.select = $.bind(null, 'select');
exports.slot = $.bind(null, 'slot');
exports.small = $.bind(null, 'small');
exports.source = $.bind(null, 'source');
exports.span = $.bind(null, 'span');
exports.strong = $.bind(null, 'strong');
exports.style = $.bind(null, 'style');
exports.sub = $.bind(null, 'sub');
exports.summary = $.bind(null, 'summary');
exports.sup = $.bind(null, 'sup');
exports.table = $.bind(null, 'table');
exports.tbody = $.bind(null, 'tbody');
exports.td = $.bind(null, 'td');
exports.template = $.bind(null, 'template');
exports.textarea = $.bind(null, 'textarea');
exports.tfoot = $.bind(null, 'tfoot');
exports.th = $.bind(null, 'th');
exports.thead = $.bind(null, 'thead');
exports.time = $.bind(null, 'time');
exports.title = $.bind(null, 'title');
exports.tr = $.bind(null, 'tr');
exports.track = $.bind(null, 'track');
exports.u = $.bind(null, 'u');
exports.ul = $.bind(null, 'ul');
exports.VAR = $.bind(null, 'var');
exports.video = $.bind(null, 'video');
exports.wbr = $.bind(null, 'wbr');

24

package.json
{
"name": "js-html-renderer",
"version": "0.0.3",
"version": "0.1.0",
"description": "",
"main": "./dist/index.js",
"scripts": {
"test": "cd ./tests/test && npm install && npm run clean:build && npm start",
"clean": "rm -rf ./dist/*",
"build": "tsc --build .",
"clean:build": "npm run clean && npm run build",
"watch": "tsc --watch"
"watch": "tsc --watch",
"test": "npm update && npm run clean:build && npm update --prefix ./test && npm run clean:build:start --prefix ./test"
},

@@ -28,11 +28,17 @@ "repository": {

"devDependencies": {
"@types/node": "^20.8.4",
"@types/web": "^0.0.139",
"@typescript-eslint/eslint-plugin": "^6.7.5",
"@typescript-eslint/parser": "^6.7.5",
"eslint": "^8.51.0",
"nodemon": "^3.0.1",
"typescript": "^5.2.2"
"@eslint/js": "^9.6.0",
"@types/eslint__js": "^8.42.3",
"@types/node": "^20.11.28",
"eslint": "^8.57.0",
"typescript": "^5.7.2",
"typescript-eslint": "^7.15.0"
},
"keywords": []
"keywords": [
"engine",
"html",
"renderer",
"template"
]
}

516

README.md

@@ -6,4 +6,5 @@ # JS HTML Renderer

## Introduction
The JS HTML Renderer provides a concise and intuitive syntax for writing HTML using JavaScript. You can use the Renderer in order to create a static `Template` and inject dynamic content into it. JS [Symbols](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol) are used in order to designate where dynamic content will be inserted.
The JS HTML Renderer provides a concise and intuitive syntax for writing HTML using JavaScript. You can use the Renderer in order to create a static `Template` and inject dynamic content into it. JS [Symbols](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol) are used in order to designate where dynamic content will be inserted.
The Renderer's syntax is intuitive and concise e.g.,

@@ -13,20 +14,20 @@

const template: Template = doctype()(
html()(
head()(
title()('The Title'),
// ⮴ The element collection may contain text nodes or elements.
script({ src: 'script.js' })()
// ⮴ Attributes are defined using key-value pairs.
),
body()(
main({ id: 'main-content' })(
br(),
// ⮴ Void elements lack parens for a node collection.
p()(
$greetings // 🢤 `$greetings` is a JS Symbol.
// ⮴ Dynamic content may be injected wherever there is a Symbol.
)
)
html()(
head()(
title()("The Title"),
// ⮴ The element collection may contain text nodes or elements.
script({ src: "script.js" })()
// ⮴ Attributes are defined using key-value pairs.
),
body()(
main({ id: "main-content" })(
br(),
// ⮴ Void elements lack parens for a node collection.
p()(
$greetings // 🢤 `$greetings` is a JS Symbol.
// ⮴ Dynamic content may be injected wherever there is a Symbol.
)
)
)
)
);

@@ -36,2 +37,3 @@ ```

### Features
- An intuitive and concise syntax.

@@ -43,2 +45,3 @@ - Create custom HTML tags (i.e., for [Custom Elements](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements)).

## Table of Contents
- [Installation](#installation)

@@ -49,2 +52,3 @@ - [Usage](#usage)

- [Hello, World! Example](#hello-world-example)
- [Support](#support)

@@ -58,65 +62,84 @@ ## Installation

## Usage
In this example you will create an HTML document that contains greetings in Esperanto and English.
### Import typings and relevant tags.
### Instructions
#### Import typings and relevant tags.
```ts
import { Template, doctype, html, head, body, main, ul, li } from "js-html-renderer";
import {
Template,
doctype,
html,
head,
body,
main,
ul,
li,
} from "js-html-renderer";
```
### Create a `Symbol` variable for injection of dynamic content.
#### Create a `Symbol` variable for injection of dynamic content.
```ts
const $greetings = Symbol('greetings');
const $greetings = Symbol("greetings");
```
### Create an HTML `Template`.
#### Create an HTML `Template`.
You will use the `Symbol` created above in order to designate where dynamic content will be inserted.
```ts
const template: Template = doctype()(
html()(
head()(
),
body()(
main({ id: 'main-content' })(
$greetings
// ⮴ You will insert an unordered list of greetings here.
)
)
html()(
head()(),
body()(
main({ id: "main-content" })(
$greetings
// ⮴ You will insert an unordered list of greetings here.
)
)
)
);
```
### Create an HTML list of greetings using JavaScript.
You use JavaScript and the Renderer's HTML elements in order to produce dynamic content. In this example you use `Array.prototype.map` in order to map the elements of `helloWorld` into a list of `li` elements.
#### Create an HTML list of greetings using JavaScript.
You use JavaScript and the Renderer's HTML elements in order to produce dynamic content. In this example you use `Array.prototype.map` in order to map the elements of `helloWorld` into a list of `li` elements.
```ts
const helloWorld = ['Saluton, Mondo!', 'Hello, World!'];
const helloWorld = ["Saluton, Mondo!", "Hello, World!"];
const greetings = ul({ id: 'greetings' })(
helloWorld.map(
(greeting: string, index: number) => li({ id: `greeting-${index}` })(greeting)
// This is an HTML `li` element. ⮵
// Each `li` element will contain its respective `id` attribute.
)
const greetings = ul({ id: "greetings" })(
helloWorld.map(
(greeting: string, index: number) =>
li({ id: `greeting-${index}` })(greeting)
// This is an HTML `li` element. ⮵
// Each `li` element will contain its respective `id` attribute.
)
);
```
#### The `greetings` HTML fragment looks like this when rendered (formatted for clarity):
##### The `greetings` HTML fragment looks like this when rendered (formatted for clarity):
```html
<ul id="greetings">
<li id="greeting-0">Saluton, Mondo!</li>
<li id="greeting-1">Hello, World!</li>
<li id="greeting-0">Saluton, Mondo!</li>
<li id="greeting-1">Hello, World!</li>
</ul>
```
### Inject the dynamic content and render the HTML.
#### Inject the dynamic content and render the HTML.
You use `template.render` in order to inject the unordered HTML list of `greetings` created above into the `Template`.
```ts
const htmlText = template.render(
{
[$greetings]: greetings
}
);
const htmlText = template.render({
[$greetings]: greetings,
});
```
### Log the result to the console.
#### Log the result to the console.
```ts

@@ -126,15 +149,16 @@ console.log(htmlText);

#### The resulting HTML (formatted for clarity).
##### The resulting HTML (formatted for clarity).
```html
<!DOCTYPE html>
<html>
<head></head>
<body>
<head></head>
<body>
<main id="main-content">
<ul id="greetings">
<li id="greeting-0">Saluton, Mondo!</li>
<li id="greeting-1">Hello, World!</li>
</ul>
<ul id="greetings">
<li id="greeting-0">Saluton, Mondo!</li>
<li id="greeting-1">Hello, World!</li>
</ul>
</main>
</body>
</body>
</html>

@@ -146,6 +170,7 @@ ```

### Prerendering
HTML is prerendered at the time the root `Template` object is created. The resulting `Template` object contains an array of prerendered HTML elements and JavaScript Symbols.
For example, in the implementation shown below, all the HTML elements, including the `footer`, are prerendered at the time the `Template` is created. This means that the `Template` may be reused without having to reconstruct the HTML elements that comprise it.
HTML is prerendered at the time the root `Template` object is created. The resulting `Template` object contains an array of prerendered HTML elements and JavaScript Symbols.
For example, in the implementation shown below, all the HTML elements, including the `footer`, are prerendered at the time the `Template` is created. This means that the `Template` may be reused without having to reconstruct the HTML elements that comprise it.
The final render step, invoked using `template.render`, involves a single pass over the elements of the array in order to swap out the Symbols with dynamic content and, finally, a concatenation of the resulting HTML.

@@ -155,12 +180,6 @@

const template: Template = doctype()(
html()(
head()(
),
body()(
main({ id: 'main-content' })(
$greetings
),
footer({id: 'footer'})()
)
)
html()(
head()(),
body()(main({ id: "main-content" })($greetings), footer({ id: "footer" })())
)
);

@@ -170,7 +189,9 @@ ```

## Custom HTML Tags
Custom HTML tags can be created by binding the name of the tag to the first argument of the Renderer's sigil function. The resulting HTML tag can be used as a [Custom Element](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements).
### How to create a custom HTML tag.
Custom HTML tags can be created by binding the name of the tag to the first argument of the Renderer's sigil function. The resulting HTML tag can be used as a [Custom Element](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements).
### How to Create a Custom HTML Tag
#### Import the Renderer's sigil function for creating custom HTML tags.
```ts

@@ -181,11 +202,17 @@ import { $ } from "js-html-renderer";

#### Create a custom HTML tag named `my-custom-element`.
```ts
const my_custom_element = $.bind(null, 'my-custom-element');
const my_custom_element = $.bind(null, "my-custom-element");
```
#### Render the custom element with the class name `custom-element` and content "Hello, World!" and log it to the console.
```ts
console.log(my_custom_element({ class: 'custom-element' })('Hello, World!').render());
console.log(
my_custom_element({ class: "custom-element" })("Hello, World!").render()
);
```
##### Output
```html

@@ -197,93 +224,111 @@ <my-custom-element class="custom-element">Hello, World!</my-custom-element>

In this example you will create a multi-lingual Greeter application. You will create an HTTP server that listens on port 3000 and serves dynamic content that contains greetings from around the world. Please see the [Hello, World!](https://github.com/faranalytics/js-html-renderer/tree/main/examples/hello_world) example for a working implementation.
In this hypothetical example you will create a multi-lingual Greeter application. You will create an HTTP server that listens on port 3000 and serves dynamic content that contains greetings from around the world. Please see the [Hello, World!](https://github.com/faranalytics/js-html-renderer/tree/main/examples/hello_world) example for a working implementation.
### Import Node's native HTTP server, the `Template` type, relevant HTML tags, and a dictionary of "Hello, World!" greetings.
### Instructions
#### Import the dependecies:
- Node's native HTTP server
- The `Template` type
- Relevant HTML tags
- A dictionary of "Hello, World!" greetings
```ts
import * as http from "node:http";
import { Template, doctype, html, head, title, script, link, body, main, section, h1, ul, li, footer } from "js-html-renderer";
import {
Template,
doctype,
html,
head,
title,
script,
link,
body,
main,
section,
h1,
ul,
li,
footer,
} from "js-html-renderer";
import { worlds } from "./hello_worlds.js";
```
### Create the `Symbol` variables and the `Template`.
#### Create the `Symbol` variables and the `Template`.
Dynamic content will be injected into the `Template` at its respective `Symbol` on each request.
```ts
const $main_content = Symbol('main_content');
const $title = Symbol('title');
const $script = Symbol('script');
const $inline_script = Symbol('inline_script');
const $style_sheet = Symbol('style_sheet');
const $main_content = Symbol("main_content");
const $title = Symbol("title");
const $script = Symbol("script");
const $inline_script = Symbol("inline_script");
const $style_sheet = Symbol("style_sheet");
const template: Template = doctype()(
html()(
head()(
$title,
$style_sheet,
$script,
$inline_script
),
body()(
main({ id: 'main-content' })(
$main_content
),
footer({ id: 'footer' })()
)
html()(
head()($title, $style_sheet, $script, $inline_script),
body()(
main({ id: "main-content" })($main_content),
footer({ id: "footer" })()
)
)
);
```
### Create a function to be rendered in an inline script element.
#### Create a function to be rendered in an inline script element.
```ts
function sayHello() {
alert('Hello, World!');
alert("Hello, World!");
}
```
### Create the web application.
#### Create the web application.
```ts
http.createServer((req: http.IncomingMessage, res: http.ServerResponse) => {
if (req.url == '/') {
// Create an unordered list of greetings.
const greetings = ul({ id: 'content' })(
Object.values(worlds).map(
(greeting: string, index: number) => li({ id: `greeting-${index}`, class: 'greetings' })(
greeting
)
)
);
// Create the content for the main section and add an inline `click` handler to the `section` element.
const html_main_content = section({ 'onClick': 'sayHello();' })(
h1()('Greetings from Around the World!'),
greetings
);
// Create a title element.
const html_title = title({ id: 'title' })('The Title');
// Create a script element.
const html_script = script({ src: './script.js' })();
// Create a link element for a stylesheet.
const html_stylesheet = link({ rel: "stylesheet", href: "styles.css" })();
//Create an inline script element.
const inline_script = script()(
sayHello.toString()
);
http
.createServer((req: http.IncomingMessage, res: http.ServerResponse) => {
if (req.url == "/") {
// Create an unordered list of greetings.
const greetings = ul({ id: "content" })(
Object.values(worlds).map((greeting: string, index: number) =>
li({ id: `greeting-${index}`, class: "greetings" })(greeting)
)
);
// Create the content for the main section and add an inline `click` handler to the `section` element.
const html_main_content = section({ onClick: "sayHello();" })(
h1()("Greetings from Around the World!"),
greetings
);
// Create a title element.
const html_title = title({ id: "title" })("The Title");
// Create a script element.
const html_script = script({ src: "./script.js" })();
// Create a link element for a stylesheet.
const html_stylesheet = link({ rel: "stylesheet", href: "styles.css" })();
//Create an inline script element.
const inline_script = script()(sayHello.toString());
// Inject the dynamic materials into the `Template`.
const htmlText = template.render(
{
[$title]: html_title,
[$style_sheet]: html_stylesheet,
[$script]: html_script,
[$inline_script]: inline_script,
[$main_content]: html_main_content
}
);
res.setHeader('Content-Type', 'text/html; charset=utf-8');
res.end(htmlText);
// Inject the dynamic materials into the `Template`.
const htmlText = template.render({
[$title]: html_title,
[$style_sheet]: html_stylesheet,
[$script]: html_script,
[$inline_script]: inline_script,
[$main_content]: html_main_content,
});
res.setHeader("Content-Type", "text/html; charset=utf-8");
res.end(htmlText);
} else {
res.writeHead(404, "").end();
}
else {
res.writeHead(404, '').end();
}
}).listen(3000);
})
.listen(3000);
```
#### Output:
##### Output:
# Greetings from Around the World!
- Saluton, Mondo!

@@ -366,99 +411,108 @@ - Hello Wêreld!

#### The rendered HTML (formatted for clarity):
```html
<!DOCTYPE html>
<html>
<head>
<head>
<title id="title">The Title</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="styles.css" />
<script src="./script.js"></script>
<script>function sayHello() {
alert('Hello, World!');
}</script>
</head>
<body>
<script>
function sayHello() {
alert("Hello, World!");
}
</script>
</head>
<body>
<main id="main-content">
<section onClick="sayHello();">
<h1>Greetings from Around the World!</h1>
<ul id="content">
<li id="greeting-0" class="greetings">Saluton, Mondo!</li>
<li id="greeting-1" class="greetings">Hello Wêreld!</li>
<li id="greeting-2" class="greetings">Përshendetje Botë!</li>
<li id="greeting-3" class="greetings">ሰላም ልዑል!</li>
<li id="greeting-4" class="greetings">مرحبا بالعالم!</li>
<li id="greeting-5" class="greetings">Բարեւ աշխարհ!</li>
<li id="greeting-6" class="greetings">Kaixo Mundua!</li>
<li id="greeting-7" class="greetings">Прывітанне Сусвет!</li>
<li id="greeting-8" class="greetings">ওহে বিশ্ব!</li>
<li id="greeting-9" class="greetings">Здравей свят!</li>
<li id="greeting-10" class="greetings">Hola món!</li>
<li id="greeting-11" class="greetings">Moni Dziko Lapansi!</li>
<li id="greeting-12" class="greetings">你好世界！</li>
<li id="greeting-13" class="greetings">Pozdrav svijete!</li>
<li id="greeting-14" class="greetings">Ahoj světe!</li>
<li id="greeting-15" class="greetings">Hej Verden!</li>
<li id="greeting-16" class="greetings">Hallo Wereld!</li>
<li id="greeting-17" class="greetings">Hello World!</li>
<li id="greeting-18" class="greetings">Tere maailm!</li>
<li id="greeting-19" class="greetings">Hei maailma!</li>
<li id="greeting-20" class="greetings">Bonjour monde!</li>
<li id="greeting-21" class="greetings">Hallo wrâld!</li>
<li id="greeting-22" class="greetings">გამარჯობა მსოფლიო!</li>
<li id="greeting-23" class="greetings">Hallo Welt!</li>
<li id="greeting-24" class="greetings">Γειά σου Κόσμε!</li>
<li id="greeting-25" class="greetings">Sannu Duniya!</li>
<li id="greeting-26" class="greetings">שלום עולם!</li>
<li id="greeting-27" class="greetings">नमस्ते दुनिया!</li>
<li id="greeting-28" class="greetings">Helló Világ!</li>
<li id="greeting-29" class="greetings">Halló heimur!</li>
<li id="greeting-30" class="greetings">Ndewo Ụwa!</li>
<li id="greeting-31" class="greetings">Halo Dunia!</li>
<li id="greeting-32" class="greetings">Ciao mondo!</li>
<li id="greeting-33" class="greetings">こんにちは世界！</li>
<li id="greeting-34" class="greetings">Сәлем Әлем!</li>
<li id="greeting-35" class="greetings">សួស្តី​ពិភពលោក!</li>
<li id="greeting-36" class="greetings">Салам дүйнө!</li>
<li id="greeting-37" class="greetings">ສະ​ບາຍ​ດີ​ຊາວ​ໂລກ!</li>
<li id="greeting-38" class="greetings">Sveika pasaule!</li>
<li id="greeting-39" class="greetings">Labas pasauli!</li>
<li id="greeting-40" class="greetings">Moien Welt!</li>
<li id="greeting-41" class="greetings">Здраво свету!</li>
<li id="greeting-42" class="greetings">Hai dunia!</li>
<li id="greeting-43" class="greetings">ഹലോ വേൾഡ്!</li>
<li id="greeting-44" class="greetings">Сайн уу дэлхий!</li>
<li id="greeting-45" class="greetings">မင်္ဂလာပါကမ္ဘာလောက!</li>
<li id="greeting-46" class="greetings">नमस्कार संसार!</li>
<li id="greeting-47" class="greetings">Hei Verden!</li>
<li id="greeting-48" class="greetings">سلام نړی!</li>
<li id="greeting-49" class="greetings">سلام دنیا!</li>
<li id="greeting-50" class="greetings">Witaj świecie!</li>
<li id="greeting-51" class="greetings">Olá Mundo!</li>
<li id="greeting-52" class="greetings">ਸਤਿ ਸ੍ਰੀ ਅਕਾਲ ਦੁਨਿਆ!</li>
<li id="greeting-53" class="greetings">Salut Lume!</li>
<li id="greeting-54" class="greetings">Привет мир!</li>
<li id="greeting-55" class="greetings">Hàlo a Shaoghail!</li>
<li id="greeting-56" class="greetings">Здраво Свете!</li>
<li id="greeting-57" class="greetings">Lefatše Lumela!</li>
<li id="greeting-58" class="greetings">හෙලෝ වර්ල්ඩ්!</li>
<li id="greeting-59" class="greetings">Pozdravljen svet!</li>
<li id="greeting-60" class="greetings">¡Hola Mundo!</li>
<li id="greeting-61" class="greetings">Halo Dunya!</li>
<li id="greeting-62" class="greetings">Salamu Dunia!</li>
<li id="greeting-63" class="greetings">Hej världen!</li>
<li id="greeting-64" class="greetings">Салом Ҷаҳон!</li>
<li id="greeting-65" class="greetings">สวัสดีชาวโลก!</li>
<li id="greeting-66" class="greetings">Selam Dünya!</li>
<li id="greeting-67" class="greetings">Привіт Світ!</li>
<li id="greeting-68" class="greetings">Salom Dunyo!</li>
<li id="greeting-69" class="greetings">Chào thế giới!</li>
<li id="greeting-70" class="greetings">Helo Byd!</li>
<li id="greeting-71" class="greetings">Molo Lizwe!</li>
<li id="greeting-72" class="greetings">העלא וועלט!</li>
<li id="greeting-73" class="greetings">Mo ki O Ile Aiye!</li>
<li id="greeting-74" class="greetings">Sawubona Mhlaba!</li>
</ul>
</section>
<section onClick="sayHello();">
<h1>Greetings from Around the World!</h1>
<ul id="content">
<li id="greeting-0" class="greetings">Saluton, Mondo!</li>
<li id="greeting-1" class="greetings">Hello Wêreld!</li>
<li id="greeting-2" class="greetings">Përshendetje Botë!</li>
<li id="greeting-3" class="greetings">ሰላም ልዑል!</li>
<li id="greeting-4" class="greetings">مرحبا بالعالم!</li>
<li id="greeting-5" class="greetings">Բարեւ աշխարհ!</li>
<li id="greeting-6" class="greetings">Kaixo Mundua!</li>
<li id="greeting-7" class="greetings">Прывітанне Сусвет!</li>
<li id="greeting-8" class="greetings">ওহে বিশ্ব!</li>
<li id="greeting-9" class="greetings">Здравей свят!</li>
<li id="greeting-10" class="greetings">Hola món!</li>
<li id="greeting-11" class="greetings">Moni Dziko Lapansi!</li>
<li id="greeting-12" class="greetings">你好世界！</li>
<li id="greeting-13" class="greetings">Pozdrav svijete!</li>
<li id="greeting-14" class="greetings">Ahoj světe!</li>
<li id="greeting-15" class="greetings">Hej Verden!</li>
<li id="greeting-16" class="greetings">Hallo Wereld!</li>
<li id="greeting-17" class="greetings">Hello World!</li>
<li id="greeting-18" class="greetings">Tere maailm!</li>
<li id="greeting-19" class="greetings">Hei maailma!</li>
<li id="greeting-20" class="greetings">Bonjour monde!</li>
<li id="greeting-21" class="greetings">Hallo wrâld!</li>
<li id="greeting-22" class="greetings">გამარჯობა მსოფლიო!</li>
<li id="greeting-23" class="greetings">Hallo Welt!</li>
<li id="greeting-24" class="greetings">Γειά σου Κόσμε!</li>
<li id="greeting-25" class="greetings">Sannu Duniya!</li>
<li id="greeting-26" class="greetings">שלום עולם!</li>
<li id="greeting-27" class="greetings">नमस्ते दुनिया!</li>
<li id="greeting-28" class="greetings">Helló Világ!</li>
<li id="greeting-29" class="greetings">Halló heimur!</li>
<li id="greeting-30" class="greetings">Ndewo Ụwa!</li>
<li id="greeting-31" class="greetings">Halo Dunia!</li>
<li id="greeting-32" class="greetings">Ciao mondo!</li>
<li id="greeting-33" class="greetings">こんにちは世界！</li>
<li id="greeting-34" class="greetings">Сәлем Әлем!</li>
<li id="greeting-35" class="greetings">សួស្តី​ពិភពលោក!</li>
<li id="greeting-36" class="greetings">Салам дүйнө!</li>
<li id="greeting-37" class="greetings">ສະ​ບາຍ​ດີ​ຊາວ​ໂລກ!</li>
<li id="greeting-38" class="greetings">Sveika pasaule!</li>
<li id="greeting-39" class="greetings">Labas pasauli!</li>
<li id="greeting-40" class="greetings">Moien Welt!</li>
<li id="greeting-41" class="greetings">Здраво свету!</li>
<li id="greeting-42" class="greetings">Hai dunia!</li>
<li id="greeting-43" class="greetings">ഹലോ വേൾഡ്!</li>
<li id="greeting-44" class="greetings">Сайн уу дэлхий!</li>
<li id="greeting-45" class="greetings">မင်္ဂလာပါကမ္ဘာလောက!</li>
<li id="greeting-46" class="greetings">नमस्कार संसार!</li>
<li id="greeting-47" class="greetings">Hei Verden!</li>
<li id="greeting-48" class="greetings">سلام نړی!</li>
<li id="greeting-49" class="greetings">سلام دنیا!</li>
<li id="greeting-50" class="greetings">Witaj świecie!</li>
<li id="greeting-51" class="greetings">Olá Mundo!</li>
<li id="greeting-52" class="greetings">ਸਤਿ ਸ੍ਰੀ ਅਕਾਲ ਦੁਨਿਆ!</li>
<li id="greeting-53" class="greetings">Salut Lume!</li>
<li id="greeting-54" class="greetings">Привет мир!</li>
<li id="greeting-55" class="greetings">Hàlo a Shaoghail!</li>
<li id="greeting-56" class="greetings">Здраво Свете!</li>
<li id="greeting-57" class="greetings">Lefatše Lumela!</li>
<li id="greeting-58" class="greetings">හෙලෝ වර්ල්ඩ්!</li>
<li id="greeting-59" class="greetings">Pozdravljen svet!</li>
<li id="greeting-60" class="greetings">¡Hola Mundo!</li>
<li id="greeting-61" class="greetings">Halo Dunya!</li>
<li id="greeting-62" class="greetings">Salamu Dunia!</li>
<li id="greeting-63" class="greetings">Hej världen!</li>
<li id="greeting-64" class="greetings">Салом Ҷаҳон!</li>
<li id="greeting-65" class="greetings">สวัสดีชาวโลก!</li>
<li id="greeting-66" class="greetings">Selam Dünya!</li>
<li id="greeting-67" class="greetings">Привіт Світ!</li>
<li id="greeting-68" class="greetings">Salom Dunyo!</li>
<li id="greeting-69" class="greetings">Chào thế giới!</li>
<li id="greeting-70" class="greetings">Helo Byd!</li>
<li id="greeting-71" class="greetings">Molo Lizwe!</li>
<li id="greeting-72" class="greetings">העלא וועלט!</li>
<li id="greeting-73" class="greetings">Mo ki O Ile Aiye!</li>
<li id="greeting-74" class="greetings">Sawubona Mhlaba!</li>
</ul>
</section>
</main>
<footer id="footer"></footer>
</body>
</body>
</html>
```
```
## Support
If you have a feature request or run into any issues, feel free to submit an [issue](https://github.com/faranalytics/js-html-renderer/issues) or start a [discussion](https://github.com/faranalytics/js-html-renderer/discussions). You’re also welcome to reach out directly to one of the authors at any time.
- [Adam Patterson](https://github.com/adamjpatterson)
dist/sigil.d.ts

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc