fresh start

.editorconfig

@@ -0,0 +1,16 @@
+# This file is for unifying the coding style for different editors and IDEs.
+# More information at http://EditorConfig.org
+
+# No .editorconfig files above the root directory
+root = true
+
+[*]
+charset = utf-8
+indent_size = 2
+end_of_line = lf
+indent_style = space
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,2 @@
+.DS_Store
+node_modules

.npmignore

@@ -0,0 +1,2 @@
+test/
+.editorconfig

LICENSE

@@ -0,0 +1,21 @@
+MIT License (MIT)
+
+Copyright (c) 2016 Jeff Escalante
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,47 @@
+# Reshape Custom Elements
+
+[![npm](https://img.shields.io/npm/v/reshape-custom-elements.svg?style=flat-square)](https://npmjs.com/package/reshape-custom-elements)
+[![tests](https://img.shields.io/travis/reshape/custom-elements.svg?style=flat-square)](https://travis-ci.org/reshape/custom-elements?branch=master)
+[![dependencies](https://img.shields.io/david/reshape/custom-elements.svg?style=flat-square)](https://david-dm.org/reshape/custom-elements)
+[![coverage](https://img.shields.io/coveralls/reshape/custom-elements.svg?style=flat-square)](https://coveralls.io/r/reshape/custom-elements?branch=master)
+
+Transform custom element names into class names.
+
+## Installation
+
+```sh
+npm i reshape-custom-elements --save
+```
+
+## Usage
+
+```js
+const reshape = require('reshape')
+const customElements = require('reshape-custom-elements')
+
+const html = `<my-component>
+                <my-tex class="text">Text</my-text>
+              </my-component>`
+
+reshape({ plugins: custom({ defaultTag: 'span' }))
+  .process(component)
+  .then((res) => console.log(result.output()))
+```
+
+```html
+<span class="my-component">
+  <span class="my-text text">Text</span>
+</span>
+```
+
+## Options
+
+| Name | Description | Default |
+| ---- | ----------- | ------- |
+| **defaultTag** | Tag used to replace the custom element tag name | `div` |
+| **skipTags** | Array of tags to be processed despite being a normal html tag | `[]`
+
+## License
+
+- Licensed under [MIT](LICENCE.md)
+- See our [contributing guidelines](contributing.md)

contributing.md

@@ -0,0 +1,30 @@
+# Contributing to reshape-custom-elements
+
+Hello there! First of all, thanks for being interested in reshape-custom-elements and helping out. We all think you are awesome, and by contributing to open source projects, you are making the world a better place. That being said, there are a few ways to make the process of contributing code to reshape-custom-elements smoother, detailed below:
+
+### Filing Issues
+
+If you are opening an issue about a bug, make sure that you include clear steps for how we can reproduce the problem. _If we can't reproduce it, we can't fix it_. If you are suggesting a feature, make sure your explanation is clear and detailed.
+
+### Getting Set Up
+
+- Clone the project down
+- Make sure [nodejs](http://nodejs.org) has been installed and is above version `6.x`
+- Run `npm install`
+- Put in work
+
+### Testing
+
+This project is constantly evolving, and to ensure that things are secure and working for everyone, we need to have tests. If you are adding a new feature, please make sure to add a test for it. The test suite for this project uses [ava](https://github.com/sindresorhus/ava).
+
+To run the test suite just use `npm test` or install ava globally and use the `ava` command to run the tests.
+
+### Code Style
+
+This project uses ES6, interpreted directly by node.js. To keep a consistent coding style in the project, we are using [standard js](http://standardjs.com/). In order for tests to pass, all code must pass standard js linting. This project also uses an [editorconfig](http://editorconfig.org/). It will make life much easier if you have the [editorconfig plugin](http://editorconfig.org/#download) for your text editor. For any inline documentation in the code, we're using [JSDoc](http://usejsdoc.org/).
+
+### Commit Cleanliness
+
+It's ok if you start out with a bunch of experimentation and your commit log isn't totally clean, but before any pull requests are accepted, we like to have a nice clean commit log. That means [well-written and clear commit messages](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html) and commits that each do something significant, rather than being typo or bug fixes.
+
+If you submit a pull request that doesn't have a clean commit log, we will ask you to clean it up before we accept. This means being familiar with rebasing - if you are not, [this guide](https://help.github.com/articles/interactive-rebase) by github should help you to get started. And if you are still confused, feel free to ask!

lib/index.js

@@ -0,0 +1,44 @@
+const {modifyNodes} = require('reshape-plugin-util')
+
+module.exports = function reshapeCustomElements (options = {}) {
+  const defaultTag = options.defaultTag || 'div'
+  const skipTags = options.skipTags || []
+
+  return function (tree) {
+    return modifyNodes(tree, (node) => {
+      return (node.type === 'tag' && (htmlTags.indexOf(node.name) < 0 || skipTags.indexOf(node.name) > -1))
+    }, (node) => {
+      // look for a class attribute
+      if (!node.attrs) { node.attrs = {} }
+      if (!node.attrs.class) { node.attrs.class = [] }
+
+      // if there's already the same class, return
+      if (node.attrs.class.find((n) => n.content === node.name)) {
+        node.name = defaultTag
+        return node
+      }
+
+      // if there is already a class, add a space
+      if (node.attrs.class.length > 0) {
+        node.attrs.class.push({
+          type: 'text',
+          content: ' ',
+          location: node.location
+        })
+      }
+
+      // push the new class name
+      node.attrs.class.push({
+        type: 'text',
+        content: node.name,
+        location: node.location
+      })
+
+      // set the name to the default and return
+      node.name = defaultTag
+      return node
+    })
+  }
+}
+
+const htmlTags = ['a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base', 'bdi', 'bdo', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'cite', 'code', 'col', 'colgroup', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hr', 'html', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'keygen', 'label', 'legend', 'li', 'link', 'main', 'map', 'mark', 'menu', 'menuitem', 'meta', 'meter', 'nav', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'section', 'select', 'small', 'source', 'span', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var', 'video', 'wbr']

package.json

@@ -0,0 +1,33 @@
+{
+  "name": "reshape-custom-elements",
+  "description": "transform custom element names into class names",
+  "version": "0.0.0",
+  "author": "Jeff Escalante",
+  "ava": {
+    "verbose": "true"
+  },
+  "bugs": "https://github.com/reshape/custom-elements/issues",
+  "devDependencies": {
+    "ava": "^0.15.2",
+    "reshape": "reshape/reshape",
+    "snazzy": "^4.0.0",
+    "standard": "^7.1.2"
+  },
+  "homepage": "https://github.com/reshape/custom-elements",
+  "keywords": [
+    "custom-elements",
+    "html",
+    "reshape-plugin"
+  ],
+  "license": "MIT",
+  "main": "lib",
+  "repository": "https://github.com/reshape/custom-elements",
+  "scripts": {
+    "lint": "standard | snazzy",
+    "mocha": "node_modules/.bin/_mocha",
+    "test": "npm run lint && npm run mocha"
+  },
+  "dependencies": {
+    "reshape-plugin-util": "^0.1.0"
+  }
+}

test/test.js

@@ -0,0 +1,51 @@
+const reshape = require('reshape')
+const test = require('ava')
+const customElements = require('..')
+
+test('basic', (t) => {
+  const html = '<custom>Test</custom>'
+  const expected = '<div class="custom">Test</div>'
+  return compare(t, html, expected)
+})
+
+test('add to existing class', (t) => {
+  const html = '<custom class="test">Test</custom>'
+  const expected = '<div class="test custom">Test</div>'
+  return compare(t, html, expected)
+})
+
+test('class already exists', (t) => {
+  const html = '<custom class="custom">Test</custom>'
+  const expected = '<div class="custom">Test</div>'
+  return compare(t, html, expected)
+})
+
+test('html tag match', (t) => {
+  const html = '<header class="custom">Test</header>'
+  const expected = '<header class="custom">Test</header>'
+  return compare(t, html, expected)
+})
+
+test('undefined options', (t) => {
+  const html = '<div>Test</div>'
+  const expected = '<div>Test</div>'
+  return compare(t, html, expected, undefined)
+})
+
+test('defaultTag', (t) => {
+  const html = '<custom class="custom">Test</custom>'
+  const expected = '<span class="custom">Test</span>'
+  return compare(t, html, expected, { defaultTag: 'span' })
+})
+
+test('skip tags option', (t) => {
+  const html = '<header class="custom">Test</header>'
+  const expected = '<div class="custom header">Test</div>'
+  return compare(t, html, expected, { skipTags: ['header'] })
+})
+
+function compare (t, html, expected, options = {}) {
+  return reshape({ plugins: [customElements(options)] })
+    .process(html)
+    .then((res) => { t.is(res.output(), expected) })
+}