Revert "revert: this reverts commit b248723."

This reverts commit 71285b4.

README.md

@@ -1,7 +1,7 @@
 <p align="center"><a href="https://vue-hubble.crishell.co/" target="_blank" rel="noopener noreferrer"><img src="docs/src/.vuepress/public/assets/img/logo.png"></a><br></p>
 
 <p align="center">
-  <img src="https://github.com/crishellco/vue-hubble/workflows/Build/badge.svg" alt="Build">
+  <img src="https://github.com/crishellco/vue-hubble/actions/workflows/node-ci.yml/badge.svg?branch=master" alt="Build">
   <a href="https://codecov.io/gh/crishellco/vue-hubble"><img src="https://codecov.io/gh/crishellco/vue-hubble/branch/master/graph/badge.svg?token=IKcXpNL84k" alt="codecov"></a>
   <a href="https://codeclimate.com/github/crishellco/vue-hubble/maintainability"><img src="https://api.codeclimate.com/v1/badges/e1f2536b9be3c32e6fef/maintainability" alt="Maintainability"></a>
   <br>
@@ -17,15 +17,6 @@ about collisions, extraneous classes, etc.
 
 Check out the [demo](http://vue-hubble-demo.crishell.co)
 
-***
-
-__NOTE__
-
-This version works with __Vue 3.x and options API__ only.
-Vue 3.x composition API support coming soon.
-
-***
-
 ## Table of Contents
 
 * [Documentation](#documentation)

demo/.nvmrc

@@ -0,0 +1 @@
+18

demo/src/App.vue

@@ -1,11 +1,14 @@
 <template>
   <div id="app">
     <img v-hubble="'image'" alt="Vue logo" src="./assets/logo.png" />
-    <hello-world />
+    <hello-world v-hubble="'hello-world'">
+      <buttons v-hubble="'buttons'" />
+    </hello-world>
   </div>
 </template>
 
 <script>
+import Buttons from './components/Buttons.vue';
 import HelloWorld from './components/HelloWorld.vue';
 
 export default {
@@ -14,6 +17,7 @@ export default {
   hubble: 'parent',
 
   components: {
+    Buttons,
     HelloWorld,
   },
 };

demo/src/components/Buttons.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <button v-hubble="'submit'">Submit</button>
+    <button v-hubble="'cancel'">Cancel</button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Buttons',
+
+  setup() {
+    const hubble = 'buttons';
+
+    return {
+      hubble,
+    };
+  },
+};
+</script>
+
+<style scoped>
+button {
+  margin: 10px;
+}
+</style>

demo/src/components/HelloWorld.vue

@@ -2,21 +2,13 @@
   <div class="hello">
     <h1 v-hubble="'header'">Hover over elements to see and copy selectors</h1>
     <code v-hubble="'command'">$ yarn serve --mode test</code>
-    <div style="position: fixed; bottom: 0; right: 0; padding: 1rem">
-      <button v-hubble="'submit'">Submit</button>
-    </div>
-    <div style="position: fixed; bottom: 0; left: 0; padding: 1rem">
-      <button v-hubble="'cancel'">Cancel</button>
-    </div>
+
+    <slot />
   </div>
 </template>
 
-<script>
-export default {
-  name: 'DemoHelloWorld',
-
-  hubble: 'child',
-};
+<script setup>
+const hubble = 'child';
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

demo/src/main.js

@@ -1,4 +1,3 @@
-// import Vue from 'vue';
 import { createApp, h } from 'vue';
 
 import App from './App.vue';

docs/.nvmrc

@@ -1 +1 @@
-16
+18

docs/package.json

@@ -10,10 +10,11 @@
   },
   "scripts": {
     "dev": "vuepress dev src",
-    "build": "vuepress build src -d dist"
+    "build": "cross-env NODE_OPTIONS=--openssl-legacy-provider vuepress build src -d dist"
   },
   "license": "MIT",
   "devDependencies": {
+    "cross-env": "^7.0.3",
     "vuepress": "1.9.10"
   },
   "dependencies": {

docs/src/guide/namespacing.md

@@ -15,38 +15,57 @@ ancestral namespaces.
 
 ### Example
 
+#### Options API
+
 ```html
 <!-- Form Component (child) -->
 <template>
   <div v-hubble="'attribute-selector'"></div>
 </template>
 
 <script>
-  export default {
-    hubble: {
-      namespace: 'form'
-    }
-  };
+export default {
+  hubble: 'login'
+};
 </script>
 
 <!-- Login Component (parent) -->
 <template>
-  <form />
+  <Form />
 </template>
 
 <script>
-  export default {
-    components: {
-      Form
-    },
-    hubble: {
-      namespace: 'login'
-    }
-    /**
-     * Or shorthand...
-     * hubble: 'login'
-     **/
-  };
+export default {
+  hubble: 'login',
+  components: {
+    Form
+  }
+};
+</script>
+
+<div vue-hubble-selector="[vue-hubble][login--form--attribute-selector]" vue-hubble login--form--attribute-selector></div>
+```
+
+#### Composition API
+
+```html
+<!-- Form Component (child) -->
+<template>
+  <div v-hubble="'attribute-selector'"></div>
+</template>
+
+<script setup>
+const hubble = 'form';
+</script>
+
+
+<!-- Login Component (parent) -->
+<template>
+  <Form />
+</template>
+
+<script setup>
+const hubble = 'login';
 </script>
 
 <div vue-hubble-selector="[vue-hubble][login--form--attribute-selector]" vue-hubble login--form--attribute-selector></div>
@@ -60,38 +79,55 @@ component by using only it's own component namespace.
 
 ### Example
 
+#### Options API
+
 ```html
 <!-- Form Component (child) -->
 <template>
   <div v-hubble="'attribute-selector'"></div>
 </template>
 
 <script>
-  export default {
-    hubble: {
-      namespace: 'form'
-    }
-  };
+export default {
+  hubble: 'login'
+};
 </script>
 
 <!-- Login Component (parent) -->
 <template>
-  <form />
+  <Form />
 </template>
 
 <script>
-  export default {
-    components: {
-      Form
-    },
-    hubble: {
-      namespace: 'login'
-    }
-    /**
-     * Or shorthand...
-     * hubble: 'login'
-     **/
-  };
+export default {
+  hubble: 'login',
+  components: {
+    Form
+  }
+};
+</script>
+
+<div vue-hubble-selector="[vue-hubble][form--attribute-selector]" vue-hubble form--attribute-selector></div>
+```
+
+#### Composition API
+```html
+<!-- Form Component (child) -->
+<template>
+  <div v-hubble="'attribute-selector'"></div>
+</template>
+
+<script setup>
+const hubble = 'form';
+</script>
+
+<!-- Login Component (parent) -->
+<template>
+  <Form />
+</template>
+
+<script setup>
+const hubble = 'login';
 </script>
 
 <div vue-hubble-selector="[vue-hubble][form--attribute-selector]" vue-hubble form--attribute-selector></div>

docs/src/guide/plugin-options.md

@@ -1,11 +1,11 @@
 # Plugin Options
 
 | Name                     | Type              | Default | Description                                                                                                                           |
-| ------------------------ | ----------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+|--------------------------|-------------------|---------|---------------------------------------------------------------------------------------------------------------------------------------|
 | `defaultSelectorType`    | `string`          | `attr`  | Defines the selector type if not passed into the directive `v-hubble:attr`                                                            |
 | `enableComments`         | `boolean`         | `false` | Enables or disables comments around elements with hubble selectors                                                                    |
 | `enableDeepNamespacing`  | `boolean`         | `true`  | Enables or disables auto recursive namespacing                                                                                        |
 | `enableSelectorPicker`   | `boolean`         | `false` | Enables or disables the selector picker feature                                                                                       |
-| `environment`            | `string or array` | `test`  | Defines the environment(s) in which these selectors are added                                                                         |
+| `environment`            | `string or array` | `test`  | Defines the environment(s) in which these selectors are added.<br /><br />**Note:** Use `*` for all environments.                     |
 | `enableGroupedSelectors` | `boolean`         | `true`  | Enables or disables grouping the `vue-hubble-selector` attribute value with `[vue-hubble]`                                            |
 | `prefix`                 | `string`          | `''`    | Prefixes all selectors with the value and `--`, if value exists. For example, if `prefix = 'qa'`, all selectors well begin with`qa--` |

docs/src/guide/usage.md

@@ -38,7 +38,7 @@ Use the directive to add test selectors to elements you wish to test.
 
 ## Writing Tests
 
-[Examples](https://github.com/crishellco/vue-hubble/blob/master/src/directive.spec.js)
+[Examples](https://github.com/crishellco/vue-hubble/blob/master/plugin/src/directive.spec.js)
 
 ```javascript
 describe('directive.js', () => {

docs/src/index.md

@@ -7,7 +7,7 @@ footer: MIT Licensed | Copyright © 2020-present Chris Mitchell
 ---
 
 <p align="center">
-  <img src="https://github.com/crishellco/vue-hubble/workflows/Build/badge.svg" alt="Build">
+  <img src="https://github.com/crishellco/vue-hubble/actions/workflows/node-ci.yml/badge.svg?branch=master" alt="Build">
   <a href="https://codecov.io/gh/crishellco/vue-hubble"><img src="https://codecov.io/gh/crishellco/vue-hubble/branch/master/graph/badge.svg?token=IKcXpNL84k" alt="codecov"></a>
   <a href="https://codeclimate.com/github/crishellco/vue-hubble/maintainability"><img src="https://api.codeclimate.com/v1/badges/e1f2536b9be3c32e6fef/maintainability" alt="Maintainability"></a>
   <br>