to typescript, add comment tag

developit · wongchichong · Mar 1, 2023 · Mar 1, 2023 · Mar 1, 2023 · Mar 13, 2023
commit a66f7bb7c46f7105445f5e63c256935d612aaf20
diff --git a/.esbuildrc.js b/.esbuildrc.js
@@ -0,0 +1,10 @@
+const { build } = require('esbuild')
+
+const options = {
+	jsxFactory: 'h'
+}
+
+build(options).catch(err => {
+	process.stderr.write(err.stderr)
+	process.exit(1)
+})
diff --git a/README.md b/README.md
@@ -101,3 +101,17 @@ The above outputs the following HTML:
   </ul>
 </div>
 ```
+
+### To generate comment in h
+
+```js
+h('!', null)
+h('!', null, <p>foo</p>, <em>bar</em>, <div class="qqqqqq">baz</div>)
+```
+
+The above outputs the following HTML:
+
+```html
+<!--  -->
+<!-- <p>foo</p><em>bar</em><div class="qqqqqq">baz</div> -->
+````
diff --git a/package.json b/package.json
@@ -7,29 +7,13 @@
   "minified:main": "dist/vhtml.min.js",
   "jsnext:main": "src/vhtml.js",
   "scripts": {
-    "build": "npm-run-all transpile minify size",
-    "transpile": "rollup -c rollup.config.js",
-    "minify": "uglifyjs $npm_package_main -cm -o $npm_package_minified_main -p relative --in-source-map ${npm_package_main}.map --source-map ${npm_package_minified_main}.map",
+    "build": "vite build && tsc --declaration && pnpm size",
+    "tsc": "tsc",
     "size": "echo \"gzip size: $(gzip-size $npm_package_minified_main | pretty-bytes)\"",
-    "test": "eslint {src,test} && mocha --compilers js:babel-register test/**/*.js",
-    "prepublish": "npm-run-all build test",
+    "test": "mocha --require esbuild-register test/**/*.ts*",
+    "prepublish": "pnpm build && pnpm test",
     "release": "npm run -s build && git commit -am $npm_package_version && git tag $npm_package_version && git push && git push --tags && npm publish"
   },
-  "babel": {
-    "presets": [
-      "es2015",
-      "stage-0"
-    ],
-    "plugins": [
-      "transform-object-rest-spread",
-      [
-        "transform-react-jsx",
-        {
-          "pragma": "h"
-        }
-      ]
-    ]
-  },
   "files": [
     "src",
     "dist"
@@ -51,23 +35,19 @@
   },
   "homepage": "https://github.com/developit/vhtml",
   "devDependencies": {
-    "babel-core": "^6.6.4",
-    "babel-eslint": "^7.0.0",
-    "babel-plugin-transform-object-rest-spread": "^6.6.4",
-    "babel-plugin-transform-react-jsx": "^6.6.5",
-    "babel-preset-es2015": "^6.9.0",
-    "babel-preset-stage-0": "^6.5.0",
-    "babel-register": "^6.7.2",
     "chai": "^3.5.0",
+    "esbuild-register": "^3.4.2",
     "eslint": "^3.1.0",
     "gzip-size-cli": "^1.0.0",
     "mkdirp": "^0.5.1",
-    "mocha": "^3.1.2",
+    "mocha": "^3.5.3",
     "npm-run-all": "^2.3.0",
     "pretty-bytes-cli": "^1.0.0",
-    "rollup": "^0.36.3",
-    "rollup-plugin-babel": "^2.4.0",
-    "rollup-plugin-es3": "^1.0.3",
-    "uglify-js": "^2.6.2"
+    "uglify-js": "^2.6.2",
+    "vite": "^4.1.4"
+  },
+  "dependencies": {
+    "@types/mocha": "^10.0.1",
+    "@types/react": "^18.0.28"
   }
-}
+}
diff --git a/rollup.config.js b/rollup.config.js
diff --git a/src/empty-tags.js → src/empty-tags.ts b/src/empty-tags.js → src/empty-tags.ts
@@ -14,5 +14,5 @@ export default [
 	'param',
 	'source',
 	'track',
-	'wbr'
-];
+	'wbr',
+]
diff --git a/src/vhtml.js b/src/vhtml.js
diff --git a/src/vhtml.ts b/src/vhtml.ts
@@ -0,0 +1,76 @@
+import emptyTags from './empty-tags'
+
+// escape an attribute
+let esc = (str: string) => String(str).replace(/[&<>"']/g, (s) => `&${map[s as keyof typeof map]};`)
+let map = { '&': 'amp', '<': 'lt', '>': 'gt', '"': 'quot', "'": 'apos' }
+let setInnerHTMLAttr = 'dangerouslySetInnerHTML'
+let DOMAttributeNames = {
+	className: 'class',
+	htmlFor: 'for'
+}
+
+let sanitized: Record<string, any> = {}
+
+/** Hyperscript reviver that constructs a sanitized HTML string. */
+export default function h(name: string | Function | null, attrs: any, ..._args: any[]) {
+	let stack: string[] = [], s = ''
+	attrs = attrs || {}
+	for (let i = arguments.length; i-- > 2;) {
+		stack.push(arguments[i])
+	}
+
+	// Sortof component support!
+	if (typeof name === 'function') {
+		attrs.children = stack.reverse()
+		return name(attrs)
+		// return name(attrs, stack.reverse());
+	}
+
+	if (name) {
+		if (name === '!') {
+			s += '<!-- '
+			if (attrs) for (let i in attrs) {
+				if (attrs[i] !== false && attrs[i] != null && i !== setInnerHTMLAttr) {
+					//@ts-ignore
+					s += ` ${DOMAttributeNames[i] ? DOMAttributeNames[i] : esc(i)}="${esc(attrs[i])}"`
+				}
+			}
+		}
+		else {
+			s += '<' + name
+			if (attrs) for (let i in attrs) {
+				if (attrs[i] !== false && attrs[i] != null && i !== setInnerHTMLAttr) {
+					//@ts-ignore
+					s += ` ${DOMAttributeNames[i] ? DOMAttributeNames[i] : esc(i)}="${esc(attrs[i])}"`
+				}
+			}
+			s += '>'
+		}
+	}
+
+	if (emptyTags.indexOf(name as any) === -1) {
+
+		if (attrs[setInnerHTMLAttr]) {
+			s += attrs[setInnerHTMLAttr].__html
+		}
+		else while (stack.length) {
+			let child = stack.pop()
+			if (child) {
+				if ((child as any).pop) {
+					for (let i = child.length; i--;) stack.push(child[i])
+				}
+				else {
+					s += sanitized[child] === true ? child : esc(child)
+				}
+			}
+		}
+
+		if (name === '!')
+			s += ' -->'
+		else
+			s += name ? `</${name}>` : ''
+	}
+
+	sanitized[s] = true
+	return s
+}