HTML

staticrypt ---> 为 HTML 提供密码保护

采用 AES-256 加密，解密过程完全在浏览器中完成

$ npm install staticrypt
$ staticrypt test.html

或者直接快速体验在线的工具：https://robinmoisson.github.io/staticrypt/

konva ---> Canvas库

import Konva from 'konva'

const stage = new Konva.Stage({
  width: 500,
  height: 500,
})

snabbdom ---> 虚拟Dom

虚拟 DOM patch，支持 svg

const container = document.getElementById('container')

const vnode = h('div#container.two.classes', { on: { click: someFn } }, [
  h('span', { style: { fontWeight: 'bold' } }, 'This is bold'),
  ' and this is just normal text',
  h('a', { props: { href: '/foo' } }, 'I\'ll take you places!'),
])
// Patch into empty DOM element – this modifies the DOM as a side effect
patch(container, vnode)

const newVnode = h(
  'div#container.two.classes',
  { on: { click: anotherEventHandler } },
  [
    h(
      'span',
      { style: { fontWeight: 'normal', fontStyle: 'italic' } },
      'This is now italic type'
    ),
    ' and this is still just normal text',
    h('a', { props: { href: '/bar' } }, 'I\'ll take you places!'),
  ]
)
// Second `patch` invocation
patch(vnode, newVnode) // Snabbdom efficiently updates the old view to the new state

escape-goat ---> 实体符号转换

将部分符号转化为实体

& to &
< to &lt;
> to &gt;
" to &quot;
' to &#x27;
` to &#x60;

import { htmlEscape, htmlUnescape } from 'escape-goat'

console.log(htmlEscape('Hello <em>World</em>'))
// => 'Hello &lt;em&gt;World&lt;/em&gt'

const url = 'https://sindresorhus.com?x="🦄"'
console.log(htmlEscape`<a href="${url}">Unicorn</a>`)
// => '<a href="https://sindresorhus.com?x=&quot;🦄&quot;">Unicorn</a>'

cheerio ---> 解析和操作 HTML 字符串

import * as cheerio from 'cheerio'

const $ = cheerio.load('<h2 class="title">Hello world</h2>')

$('h2.title').text() // "Hello world"

whyframe ---> 便捷地隔离组件

底层通过 iframe 实现隔离。集成了许多框架，开箱即用

import { defineConfig } from 'vite'
import { whyframe } from '@whyframe/core'
import { whyframeVue } from '@whyframe/vue'

export default defineConfig({
  plugins: [
    // Initialize core plugin
    whyframe(),

    // Or initialize Vue integration plugin
    whyframeVue(),
  ]
})

<iframe data-why>
  Hello world!
</iframe>

HTML 相关

sanitize-html ---> 净化 HTML

设定期望的规则，sanitize-html 可以帮助我们去掉不符合预期的 HTML 标签、属性等等

import sanitizeHtml from 'sanitize-html'

// Allow only a super restricted set of tags and attributes
const clean = sanitizeHtml(dirty, {
  allowedTags: ['b', 'i', 'em', 'strong', 'a'],
  allowedAttributes: {
    a: ['href']
  },
  allowedIframeHostnames: ['www.youtube.com']
})

const html = '<strong>hello world</strong>'
console.log(sanitizeHtml(html))
console.log(sanitizeHtml('<img src=x onerror=alert(\'img\') />'))
console.log(sanitizeHtml('console.log(\'hello world\')'))
console.log(sanitizeHtml('<script>alert(\'hello world\')</script>'))

alpinejs ---> 轻量级 JS 框架

<script src="//unpkg.com/alpinejs" defer></script>

<div x-data="{ open: false }">
    <button @click="open = true">Expand</button>

    <span x-show="open">
        Content...
    </span>
</div>

和 htmx 有点类似：

htmx ---> 使用最新的旧方法开发网页

<script src="https://unpkg.com/htmx.org@1.9.10"></script>

<div x-data="{show_new: false}"
    x-init="$watch('show_new', value => {
        if (show_new) {
            htmx.process(document.querySelector('#new_content'))
        }
    })">
    <button @click = "show_new = !show_new">Toggle New Content</button>
    <template x-if="show_new">
        <div id="new_content">
            <a hx-get="/server/newstuff" href="#">New Clickable</a>
        </div>
    </template>
</div>

html-minifier ---> HTML 压缩

const minify = require('html-minifier').minify
const result = minify('<p title="blah" id="moo">foo</p>', {
  removeAttributeQuotes: true
})
result // '<p title=blah id=moo>foo</p>'

htmlparser2 ---> 轻量快速的 HTML 解析器

htmlparser2 是最快的 HTML 解析器，需要一些快捷方式才能实现。如果您需要严格遵守 HTML 规范，请查看 parse5

import * as htmlparser2 from 'htmlparser2'

const parser = new htmlparser2.Parser({
  onopentag(name, attributes) {
    if (name === 'script' && attributes.type === 'text/javascript')
      console.log('JS! Hooray!')
  },
  ontext(text) {
    console.log('-->', text)
  },
  onclosetag(tagname) {
    if (tagname === 'script')
      console.log('That\'s it?!')
  },
})
parser.write(
  'Xyz <script type=\'text/javascript\'>const foo = \'<<bar>>\';</script>',
)
parser.end()

html5parser ---> html5 Parser

一个超小且快速的 html5 AST 解析器

import { SyntaxKind, parse, walk } from 'html5parser'

const ast = parse('<!DOCTYPE html><head><title>Hello html5parser!</title></head></html>')

walk(ast, {
  enter: (node) => {
    if (node.type === SyntaxKind.Tag && node.name === 'title' && Array.isArray(node.body)) {
      const text = node.body[0]
      if (text.type !== SyntaxKind.Text)
        return

      const div = document.createElement('div')
      div.innerHTML = `The title of the input is <strong>${text.value}</strong>`
      document.body.appendChild(div)
    }
  },
})

parse5 ---> HTML parser

const parse5 = require('parse5')

const document = parse5.parse('<!DOCTYPE html><html><head></head><body>Hi there!</body></html>')

console.log(document.childNodes[1].tagName) // > 'html'