1.0

.github/workflows/publish.yml

@@ -0,0 +1,26 @@
+name: Publish
+
+on:
+  workflow_dispatch: {}
+  release:
+    types: [published]
+
+permissions:
+  id-token: write
+  contents: read
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+      - uses: pnpm/action-setup@v5
+        with:
+          version: 10
+      - uses: actions/setup-node@v6
+        with:
+          node-version: 24
+          cache: pnpm
+      - run: pnpm install
+      - run: pnpm run test
+      - run: npm publish

.github/workflows/test.yml

@@ -0,0 +1,23 @@
+name: Test
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+      - uses: pnpm/action-setup@v5
+        with:
+          version: 10
+      - uses: actions/setup-node@v6
+        with:
+          node-version: 24
+          cache: pnpm
+      - run: pnpm install
+      - run: pnpm run test
+      - run: pnpm run lint

.prettierignore

@@ -0,0 +1,2 @@
+src/index.ts
+test/snapshots.test.js

LICENSE

@@ -1,4 +1,4 @@
-Copyright 2019-2021 Observable, Inc.
+Copyright 2019-2026 Observable, Inc.
 
 Permission to use, copy, modify, and/or distribute this software for any purpose
 with or without fee is hereby granted, provided that the above copyright notice

README.md

@@ -2,7 +2,7 @@
 
 Hypertext Literal is a tagged template literal for HTML which interpolates values *based on context*, allowing automatic escaping and the interpolation of non-serializable values, such as event listeners, style objects, and other DOM nodes. It is inspired by [lit-html](https://lit-html.polymer-project.org/) and [HTM](https://github.com/developit/htm), and references the fantastically precise [HTML5 spec](https://html.spec.whatwg.org/multipage/parsing.html#tokenization).
 
-Hypertext Literal is open-sourced under the permissive ISC license, small (2KB), has no dependencies, and is available [on npm](https://www.npmjs.com/package/htl). To install:
+Hypertext Literal is open-sourced under the permissive ISC license, is small, has no dependencies, and is available [on npm](https://www.npmjs.com/package/htl). To install:
 
 ```
 npm install htl
@@ -78,7 +78,7 @@ html`<font color=${"red"}>This text has color.</font>`
 In cases where it is not possible to interpolate safely, namely with script and style elements where the interpolated value contains the corresponding end tag, an error is thrown.
 
 ```js
-html`<script>${"</script>"}</script>` // Error: unsafe raw text
+html`<script>${"</script>"}</script>` // Error: cannot interpolate </script> into <script>
 ```
 
 ### Styles
@@ -141,6 +141,17 @@ html`<span ${{
 }}>hover me</span>`
 ```
 
+### Attribute strings
+
+As an alternative to the above, you can interpolate one or more attributes as a string into a tag:
+
+```js
+html`<button ${"disabled"}>Can’t click me</button>`
+```
+```js
+html`<input ${"required type=email"}>`
+```
+
 ### Node values
 
 If an interpolated data value is a node, it is inserted into the result at the corresponding location. So if you have a function that generates a node (say itself using hypertext literal), you can embed the result into another hypertext literal.
@@ -172,6 +183,14 @@ html`<table style="width: 180px;">
 html`It’s as easy as ${new Set([1, 2, 3])}.`
 ```
 
+### Dynamic tags
+
+The tag name can be specified dynamically:
+
+```js
+html`<${"button"}>Click me</${"button"}>`
+```
+
 ### SVG
 
 You can create contextual SVG fragments using hypertext literals, too.
@@ -184,10 +203,16 @@ svg`<svg width=60 height=60>
 
 ### Errors on invalid bindings
 
-Hypertext literal tolerates malformed input—per the HTML5 specification—but it still tries to be helpful by throwing an error if you interpolate a value into an unexpected place. For instance, it doesn’t allow dynamic tag names.
+Hypertext literal tolerates malformed input—per the HTML5 specification—but it still tries to be helpful by throwing an error if you interpolate a value into an unexpected place.
 
 ```js
-html`<${"button"}>Does this work?</>` // Error: invalid binding
+html`<${"input checked"}>` // Error: invalid tag name: input checked
+```
+```js
+html`<script>${"</script>"}</script>` // Error: cannot interpolate </script> into <script>
+```
+```js
+html`<but${"ton"}>Does this work?</button>` // Error: cannot interpolate in state 4
 ```
 
 ### Use with DOM API

eslint.config.js

@@ -0,0 +1,11 @@
+import js from "@eslint/js";
+import globals from "globals";
+import tseslint from "typescript-eslint";
+import {defineConfig} from "eslint/config";
+
+export default defineConfig([
+  {files: ["**/*.{js,ts,jsx,tsx}"], plugins: {js}, extends: ["js/recommended"]},
+  {files: ["**/*.{js,ts,jsx,tsx}"], languageOptions: {globals: globals.browser}},
+  tseslint.configs.recommended,
+  {rules: {"@typescript-eslint/no-unused-expressions": "off"}}
+]);

package.json

@@ -1,41 +1,34 @@
 {
   "name": "htl",
-  "version": "0.3.1",
   "description": "Hypertext Literal",
-  "type": "module",
-  "main": "src/index.js",
-  "module": "src/index.js",
-  "jsdelivr": "dist/htl.min.js",
-  "unpkg": "dist/htl.min.js",
-  "exports": {
-    "umd": "./dist/htl.min.js",
-    "default": "./src/index.js"
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/observablehq/htl.git"
   },
-  "author": {
-    "name": "Mike Bostock",
-    "url": "https://bost.ocks.org/mike"
+  "version": "1.0.0",
+  "type": "module",
+  "sideEffects": false,
+  "scripts": {
+    "lint": "tsc --noEmit && eslint src",
+    "test": "vitest",
+    "prepublishOnly": "rm -rf dist && tsc"
   },
-  "homepage": "https://github.com/observablehq/htl",
-  "license": "ISC",
   "files": [
-    "dist/**/*.js",
-    "src/**/*.js"
+    "dist"
   ],
-  "sideEffects": false,
-  "scripts": {
-    "test": "mocha 'test/**/*-test.js' && eslint src test",
-    "prepublishOnly": "rm -rf dist && rollup -c && git push",
-    "postpublish": "git push --tags"
+  "exports": {
+    "types": "./dist/src/index.d.ts",
+    "import": "./dist/src/index.js"
   },
   "devDependencies": {
-    "@rollup/plugin-json": "4",
-    "eslint": "7",
-    "he": "1",
-    "js-beautify": "1",
-    "jsdom": "17",
-    "mocha": "9",
-    "rollup": "2",
-    "rollup-plugin-terser": "7"
+    "@eslint/js": "^10.0.1",
+    "eslint": "^10.4.0",
+    "globals": "^17.6.0",
+    "jsdom": "^29.0.1",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.35.0",
+    "vitest": "^4.1.7"
   },
   "engines": {
     "node": ">=12"