Release the Kraken! 🐙

.github/workflows/publish.yml

@@ -0,0 +1,14 @@
+name: Publish
+on:
+  push:
+    branches:
+      - main
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      id-token: write
+    steps:
+      - uses: actions/checkout@v4
+      - run: npx jsr publish

.gitignore

@@ -0,0 +1 @@
+.DS_Store

.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+  "recommendations": [
+    "denoland.vscode-deno"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "deno.enable": true,
+  "deno.lint": true,
+  "editor.defaultFormatter": "denoland.vscode-deno",
+  "editor.formatOnSave": true
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Rafael Bardini
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,39 @@
+# @rbardini/html
+
+[![JSR](https://jsr.io/badges/@rbardini/html)](https://jsr.io/@rbardini/html)
+[![JSR Score](https://jsr.io/badges/@rbardini/html/score)](https://jsr.io/@rbardini/html)
+
+Tiny tagged template literal for no-build JSX-like syntax, compatible with all
+modern browsers and runtimes.
+
+```ts
+import { html } from '@rbardini/html'
+
+const heading = ({ level = 1, children }) =>
+  html`<h${level}>${children}</h${level}>`
+
+const list = ({ title, items }) =>
+  html`
+    ${title && heading(title)}
+    <ul>
+      ${items.map((item) => html`<li>${item}</li>`)}
+    </ul>
+  `
+```
+
+Inspired by [jimniels/html](https://github.com/jimniels/html).
+
+## Usage
+
+```sh
+# Deno
+deno add @rbardini/html
+
+# npm (one of the below, depending on your package manager)
+npx jsr add @rbardini/html
+yarn dlx jsr add @rbardini/html
+pnpm dlx jsr add @rbardini/html
+bunx jsr add @rbardini/html
+```
+
+Or copy-paste the contents of [`mod.ts`](./mod.ts).

deno.json

@@ -0,0 +1,19 @@
+{
+  "name": "@rbardini/html",
+  "version": "1.0.0",
+  "exports": "./mod.ts",
+  "imports": {
+    "@std/assert": "jsr:@std/assert@1"
+  },
+  "publish": {
+    "include": [
+      "LICENSE",
+      "README.md",
+      "mod.ts"
+    ]
+  },
+  "fmt": {
+    "semiColons": false,
+    "singleQuote": true
+  }
+}

mod.ts

@@ -0,0 +1,11 @@
+export function html(
+  strings: TemplateStringsArray,
+  ...values: unknown[]
+): string {
+  return strings.reduce((acc, string, i) => {
+    const value = values[i]
+    if (Array.isArray(value)) return acc + string + value.join('')
+    if (value != null && !!value !== value) return acc + string + value
+    return acc + string
+  }, '')
+}

mod_test.ts

@@ -0,0 +1,32 @@
+import { assertEquals } from '@std/assert'
+import { html } from './mod.ts'
+
+Deno.test(function arrayTest() {
+  const value = [1, 2, 3]
+  assertEquals(html`<div>${value}</div>`, `<div>${value.join('')}</div>`)
+})
+
+Deno.test(function objectTest() {
+  const value = { a: 1 }
+  assertEquals(html`<div>${value}</div>`, `<div>${value}</div>`)
+})
+
+Deno.test(function stringTest() {
+  const value = 'string'
+  assertEquals(html`<div>${value}</div>`, `<div>${value}</div>`)
+})
+
+Deno.test(function numberTest() {
+  const value = 0
+  assertEquals(html`<div>${value}</div>`, `<div>${value}</div>`)
+})
+
+Deno.test(function nullTest() {
+  const value = null
+  assertEquals(html`<div>${value}</div>`, `<div></div>`)
+})
+
+Deno.test(function undefinedTest() {
+  const value = undefined
+  assertEquals(html`<div>${value}</div>`, `<div></div>`)
+})