From f62c78cf3d8501068adaf01b709ea8e78caad70b Mon Sep 17 00:00:00 2001
From: Raymond Rutjes <raymond.rutjes@gmail.com>
Date: Tue, 4 Apr 2017 14:25:38 +0200
Subject: [PATCH] feat(snippet): add a Snippet component

Closes: #52
---
 packages/vue-instantsearch-snippet/README.md  | 35 +++++++++++++++
 .../vue-instantsearch-snippet/package.json    | 25 +++++++++++
 .../vue-instantsearch-snippet/src/Snippet.vue | 43 +++++++++++++++++++
 .../vue-instantsearch-snippet/src/index.js    |  1 +
 4 files changed, 104 insertions(+)
 create mode 100644 packages/vue-instantsearch-snippet/README.md
 create mode 100644 packages/vue-instantsearch-snippet/package.json
 create mode 100644 packages/vue-instantsearch-snippet/src/Snippet.vue
 create mode 100644 packages/vue-instantsearch-snippet/src/index.js

diff --git a/packages/vue-instantsearch-snippet/README.md b/packages/vue-instantsearch-snippet/README.md
new file mode 100644
index 000000000..b1093ce9a
--- /dev/null
+++ b/packages/vue-instantsearch-snippet/README.md
@@ -0,0 +1,35 @@
+Vue InstantSearch Snippet
+---
+
+A functional component that helps you safely display snippeted attributes of your search results.
+
+This component leverages the [snippeting feature of Algolia](https://www.algolia.com/doc/faq/searching/what-is-attributes-to-snippet-how-does-it-work/#faq-section)
+but adds some sugar on top of it to prevent XSS attacks.
+
+This component will override the following settings of your index at query time:
+- highlightPreTag
+- highlightPostTag
+
+You will then be able to choose your custom highlighting tag on a per component basis for a given snippet.
+
+## Usage
+
+Basic usage:
+
+```html
+<ais-snippet :result="result" attribute-name="description"></ais-snippet>
+```
+
+Changing the highlighting tag:
+
+ ```html
+<ais-snippet :result="result" attribute-name="description" tag-name="mark"></ais-snippet>
+ ```
+
+**Note that the tag name has to be passed without carets.**
+
+## CSS Classes
+
+| ClassName             | Description       |
+|-----------------------|-------------------|
+| ais-snippet           | Container class   |
diff --git a/packages/vue-instantsearch-snippet/package.json b/packages/vue-instantsearch-snippet/package.json
new file mode 100644
index 000000000..318394bb9
--- /dev/null
+++ b/packages/vue-instantsearch-snippet/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "vue-instantsearch-snippet",
+  "version": "0.0.0",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/vue-instantsearch-snippet.common.js",
+  "module": "dist/vue-instantsearch-snippet.esm.js",
+  "jsnext:main": "dist/vue-instantsearch-snippet.esm.js",
+  "unpkg": "dist/vue-instantsearch-snippet.js",
+  "scripts": {
+    "build": "yarn build:umd && yarn build:es && yarn build:cjs",
+    "build:umd": "rollup -c ../../build/rollup.umd.config.js",
+    "build:es": "rollup -c ../../build/rollup.es.config.js",
+    "build:cjs": "rollup -c ../../build/rollup.cjs.config.js"
+  },
+  "dependencies": {
+    "escape-html": "^1.0.3",
+    "instantsearch-store": "*",
+    "vue-instantsearch-component": "*"
+  },
+  "peerDependencies": {
+    "vue": "^2.2.2"
+  }
+}
diff --git a/packages/vue-instantsearch-snippet/src/Snippet.vue b/packages/vue-instantsearch-snippet/src/Snippet.vue
new file mode 100644
index 000000000..a48cc660f
--- /dev/null
+++ b/packages/vue-instantsearch-snippet/src/Snippet.vue
@@ -0,0 +1,43 @@
+<script>
+  import {HIGHLIGHT_PRE_TAG, HIGHLIGHT_POST_TAG} from 'instantsearch-store'
+  import escapeHtml from 'escape-html'
+
+  export default {
+    functional: true,
+    props: {
+      result: {
+        type: Object,
+        required: true
+      },
+      attributeName: {
+        type: String,
+        required: true
+      },
+      tagName: {
+        type: String,
+        default: 'em'
+      }
+    },
+    render (h, ctx) {
+      const result = ctx.props.result
+      const attributeName = ctx.props.attributeName
+      const tagName = ctx.props.tagName
+
+      if (!result._snippetResult || !result._snippetResult[attributeName]) {
+        throw new Error(`Attribute ${attributeName} has no snippet.`)
+      }
+
+      return h('span', {
+          'class': {
+            'ais-snippet': true
+          },
+          domProps: {
+            innerHTML: escapeHtml(result._snippetResult[attributeName].value)
+            .replace(HIGHLIGHT_PRE_TAG, `<${tagName}>`)
+            .replace(HIGHLIGHT_POST_TAG, `</${tagName}>`)
+          }
+        }
+      )
+    }
+  }
+</script>
diff --git a/packages/vue-instantsearch-snippet/src/index.js b/packages/vue-instantsearch-snippet/src/index.js
new file mode 100644
index 000000000..1b566ebc0
--- /dev/null
+++ b/packages/vue-instantsearch-snippet/src/index.js
@@ -0,0 +1 @@
+export {default} from './Snippet.vue'