Add support for SVG

Related to wooorm/property-information#6.

Author: wooorm

index.js

@@ -17,16 +17,18 @@ exports.matches = matches
 exports.selectAll = selectAll
 exports.select = select
 
-function matches(selector, node) {
-  return Boolean(any(parse(selector), node, {one: true, shallow: true})[0])
+function matches(selector, node, space) {
+  return Boolean(
+    any(parse(selector), node, {space: space, one: true, shallow: true})[0]
+  )
 }
 
-function select(selector, node) {
-  return any(parse(selector), node, {one: true})[0] || null
+function select(selector, node, space) {
+  return any(parse(selector), node, {space: space, one: true})[0] || null
 }
 
-function selectAll(selector, node) {
-  return any(parse(selector), node, {})
+function selectAll(selector, node, space) {
+  return any(parse(selector), node, {space: space})
 }
 
 function parse(selector) {

lib/any.js

@@ -3,6 +3,8 @@
 module.exports = match
 
 var zwitch = require('zwitch')
+var html = require('property-information/html')
+var svg = require('property-information/svg')
 var needsIndex = require('./pseudo').needsIndex
 var test = require('./test')
 var nest = require('./nest')
@@ -39,7 +41,12 @@ function ruleSet(query, node, state) {
 
 function rule(query, tree, state) {
   var collect = collector(state.one)
-  var opts = {iterator: match, one: state.one, shallow: state.shallow}
+  var opts = {
+    schema: state.space === 'svg' ? svg : html,
+    iterator: match,
+    one: state.one,
+    shallow: state.shallow
+  }
 
   if (state.shallow && query.rule) {
     throw new Error('Expected selector without nesting')

lib/attribute.js

@@ -2,12 +2,11 @@
 
 module.exports = match
 
-var camelcase = require('camelcase')
 var zwitch = require('zwitch')
 var has = require('hast-util-has-property')
-var information = require('property-information')
-var spaceSeparated = require('space-separated-tokens')
-var commaSeparated = require('comma-separated-tokens')
+var find = require('property-information/find')
+var spaceSeparated = require('space-separated-tokens').stringify
+var commaSeparated = require('comma-separated-tokens').stringify
 
 var handle = zwitch('operator')
 var handlers = handle.handlers
@@ -23,7 +22,7 @@ handlers['^='] = begins
 handlers['$='] = ends
 handlers['*='] = contains
 
-function match(query, node) {
+function match(query, node, schema) {
   var attrs = query.attrs
   var length = attrs.length
   var index = -1
@@ -32,8 +31,7 @@ function match(query, node) {
 
   while (++index < length) {
     attr = attrs[index]
-    info = information(attr.name) || {}
-    attr.propertyName = info.propertyName || camelcase(attr.name)
+    info = find(schema, attr.name)
 
     if (!handle(attr, node, info)) {
       return false
@@ -44,30 +42,28 @@ function match(query, node) {
 }
 
 /* [attr] */
-function exists(query, node) {
-  return has(node, query.propertyName)
+function exists(query, node, info) {
+  return has(node, info.property)
 }
 
 /* [attr=value] */
 function exact(query, node, info) {
-  if (!has(node, query.propertyName)) {
+  if (!has(node, info.property)) {
     return false
   }
 
-  return (
-    normalizeValue(node.properties[query.propertyName], info) === query.value
-  )
+  return normalizeValue(node.properties[info.property], info) === query.value
 }
 
 /* [attr~=value] */
 function spaceSeparatedList(query, node, info) {
   var val
 
-  if (!has(node, query.propertyName)) {
+  if (!has(node, info.property)) {
     return false
   }
 
-  val = node.properties[query.propertyName]
+  val = node.properties[info.property]
 
   /* If this is a comma-separated list, and the query is contained in it,
    * return true. */
@@ -88,11 +84,11 @@ function spaceSeparatedList(query, node, info) {
 function exactOrPrefix(query, node, info) {
   var value
 
-  if (!has(node, query.propertyName)) {
+  if (!has(node, info.property)) {
     return false
   }
 
-  value = normalizeValue(node.properties[query.propertyName], info)
+  value = normalizeValue(node.properties[info.property], info)
 
   return Boolean(
     value === query.value ||
@@ -103,39 +99,38 @@ function exactOrPrefix(query, node, info) {
 
 /* [attr^=value] */
 function begins(query, node, info) {
-  if (!has(node, query.propertyName)) {
+  var value
+
+  if (!has(node, info.property)) {
     return false
   }
 
-  return (
-    normalizeValue(node.properties[query.propertyName], info).slice(
-      0,
-      query.value.length
-    ) === query.value
-  )
+  value = normalizeValue(node.properties[info.property], info)
+
+  return value.slice(0, query.value.length) === query.value
 }
 
 /* [attr$=value] */
 function ends(query, node, info) {
-  if (!has(node, query.propertyName)) {
+  if (!has(node, info.property)) {
     return false
   }
 
   return (
-    normalizeValue(node.properties[query.propertyName], info).slice(
+    normalizeValue(node.properties[info.property], info).slice(
       -query.value.length
     ) === query.value
   )
 }
 
 /* [attr*=value] */
 function contains(query, node, info) {
-  if (!has(node, query.propertyName)) {
+  if (!has(node, info.property)) {
     return false
   }
 
   return (
-    normalizeValue(node.properties[query.propertyName], info).indexOf(
+    normalizeValue(node.properties[info.property], info).indexOf(
       query.value
     ) !== -1
   )
@@ -148,19 +143,12 @@ function unknownOperator(query) {
 
 /* Stringify a HAST value back to its HTML form. */
 function normalizeValue(value, info) {
-  if (info.commaSeparated) {
-    value = commaSeparated.stringify(value)
-  } else if (info.spaceSeparated) {
-    value = spaceSeparated.stringify(value)
-  } else if (info.boolean) {
-    /* `false` is ignored by `has()`. */
-    value = info.name
-  } else if (info.overloadedBoolean) {
-    if (value === true) {
-      value = info.name
-    }
-  } else if (info.positiveNumeric || info.numeric) {
+  if (typeof value === 'number') {
     value = String(value)
+  } else if (typeof value === 'boolean') {
+    value = info.attribute
+  } else if (typeof value === 'object' && 'length' in value) {
+    value = (info.commaSeparated ? commaSeparated : spaceSeparated)(value)
   }
 
   return value

lib/nest.js

@@ -1,6 +1,7 @@
 'use strict'
 
 var zwitch = require('zwitch')
+var svg = require('property-information/svg')
 
 module.exports = zwitch('nestingOperator')
 
@@ -27,8 +28,6 @@ function unknownNesting(query) {
 function topScan(query, node, index, parent, state) {
   /* istanbul ignore if - Shouldn’t happen. */
   if (parent) {
-    // We would like to avoid spinning an extra loop through the starting
-    // node's siblings just to count its typeIndex.
     throw new Error('topScan is supposed to be called from the root node')
   }
 
@@ -99,6 +98,15 @@ function walkIterator(query, parent, state) {
   var nodes = parent.children
   var typeIndex = state.index ? createTypeIndex() : null
   var delayed = []
+  var parentSchema = state.schema
+
+  if (
+    parentSchema.space === 'html' &&
+    parent.type === 'element' &&
+    parent.tagName === 'svg'
+  ) {
+    state.schema = svg
+  }
 
   return {
     prefillTypeIndex: rangeDefaults(prefillTypeIndex),
@@ -110,6 +118,8 @@ function walkIterator(query, parent, state) {
     var length = delayed.length
     var index = -1
 
+    state.schema = parentSchema
+
     while (++index < length) {
       delayed[index]()
 

lib/test.js

@@ -15,7 +15,7 @@ function test(query, node, index, parent, state) {
       (!query.tagName || name(query, node)) &&
       (!query.classNames || classNames(query, node)) &&
       (!query.id || id(query, node)) &&
-      (!query.attrs || attributes(query, node)) &&
+      (!query.attrs || attributes(query, node, state.schema)) &&
       (!query.pseudos || pseudos(query, node, index, parent, state))
   )
 }

package.json

@@ -20,15 +20,14 @@
     "Titus Wormer <[email protected]> (http://wooorm.com)"
   ],
   "dependencies": {
-    "camelcase": "^3.0.0",
     "comma-separated-tokens": "^1.0.2",
     "css-selector-parser": "^1.3.0",
     "hast-util-has-property": "^1.0.0",
     "hast-util-is-element": "^1.0.0",
     "hast-util-whitespace": "^1.0.0",
     "not": "^0.1.0",
     "nth-check": "^1.0.1",
-    "property-information": "^3.1.0",
+    "property-information": "^4.0.0",
     "space-separated-tokens": "^1.1.0",
     "zwitch": "^1.0.0"
   },
@@ -39,7 +38,7 @@
   "devDependencies": {
     "browserify": "^16.0.0",
     "esmangle": "^1.0.1",
-    "hastscript": "^3.0.1",
+    "hastscript": "^4.0.0",
     "nyc": "^12.0.0",
     "prettier": "^1.13.5",
     "remark-cli": "^5.0.0",

readme.md

@@ -19,7 +19,7 @@ npm install hast-util-select
 
 ## API
 
-### `select.matches(selector, node)`
+### `select.matches(selector, node[, space])`
 
 This only checks the element itself, not the surrounding tree.  Thus, nesting
 in selectors is not supported (`p b`, `p > b`), neither are selectors like
@@ -44,16 +44,18 @@ matches('[lang|=en]', h('a', {lang: 'en-GB'})) // => true
 
 ##### Parameters
 
-*   `node` (`Node`)
-    — Thing to check, could be anything, but should be an [element][]
 *   `selector` (`string`)
     — CSS selectors (`,` is also supported)
+*   `node` (`Node`)
+    — Thing to check, could be anything, but should be an [element][]
+*   `space` (enum, `'svg'` or `'html'`, default: `'html'`)
+    — Which space the node exists in
 
 ##### Returns
 
 `boolean` — Whether the node matches the selector.
 
-### `select.select(selector, tree)`
+### `select.select(selector, tree[, space])`
 
 ##### Usage
 
@@ -89,14 +91,16 @@ tree itself).
 
 ##### Parameters
 
-*   `tree` (`Node`) — Thing to search.
 *   `selector` (`string`) — CSS selectors (`,` is also supported)
+*   `tree` (`Node`) — Thing to search.
+*   `space` (enum, `'svg'` or `'html'`, default: `'html'`)
+    — Which v the tree exists in
 
 ##### Returns
 
 `Element?` — The found element, if any.
 
-### `select.selectAll(selector, tree)`
+### `select.selectAll(selector, tree[, space])`
 
 Select all nodes matching `selector` in the given `tree` (could include the
 tree itself).
@@ -138,8 +142,10 @@ Yields:
 
 ##### Parameters
 
-*   `tree` (`Node`) — Thing to search.
 *   `selector` (`string`) — CSS selectors (`,` is also supported)
+*   `tree` (`Node`) — Thing to search.
+*   `space` (enum, `'svg'` or `'html'`, default: `'html'`)
+    — Which space the tree exists in
 
 ##### Returns
 

test/index.js

@@ -4,3 +4,4 @@ require('./matches')
 require('./select')
 require('./select-all')
 require('./all')
+require('./svg')

test/svg.js

@@ -0,0 +1,28 @@
+'use strict'
+
+var test = require('tape')
+var u = require('unist-builder')
+var s = require('hastscript/svg')
+var select = require('..').select
+
+test('svg', function(t) {
+  t.deepEqual(
+    select(
+      '[writing-mode]',
+      u('root', [s('svg', [s('text', {writingMode: 'lr-tb'}, '!')])])
+    ),
+    s('text', {writingMode: 'lr-tb'}, '!')
+  )
+
+  t.deepEqual(
+    select('[writing-mode]', s('text', {writingMode: 'lr-tb'}, '!')),
+    null
+  )
+
+  t.deepEqual(
+    select('[writing-mode]', s('text', {writingMode: 'lr-tb'}, '!'), 'svg'),
+    s('text', {writingMode: 'lr-tb'}, '!')
+  )
+
+  t.end()
+})