add Meta suffix to meta getters (#84)

stimulus-use · Dec 10, 2020 · 07701c3 · 07701c3
1 parent 7f79a38
commit 07701c3
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 17 deletions.
diff --git a/docs/assets/use-meta.png b/docs/assets/use-meta.png
diff --git a/docs/use-meta.md b/docs/use-meta.md
@@ -5,8 +5,19 @@ Adds getters to easily retrieve <head> meta value.
 Simply list at the top of your controller the list of meta name you need (static metaNames = [])
 
 Getters are then automatically defined by the mixin.
-- Getter name is a camelized converstion of the meta name. `user_id`  becomes `userId`
-- Values are automaticaly cast so getters return : String, Number, Boolean or Object
+- Getter name is a camelized conversion of the meta name with an optional `Meta` suffix. `user_id`  becomes `userIdMeta`
+- Values are automatically cast so getters return: String, Number, Boolean or Object
+
+**Options:**
+
+| Option| Description | Default value |
+|-----------------------|-------------|---------------------|
+| `suffix` | prepend or not `Meta` to the getter name. Default is true to remain consistent with `Value` and `Class` API |true|
+
+**Example**
+```js
+useMeta(this, { suffix: false })
+```
 
 ## Usage
 
@@ -36,10 +47,10 @@ export default class extends Controller {
     useMeta(this)
 
     // individual getters
-    this.userId         // 123456
-    this.admin          // true
-    this.email          // "joe@doe.com"
-    this.snakeCaseName  // "are camelized"
+    this.userIdMeta         // 123456 -> Number
+    this.adminMeta          // true -> Boolean
+    this.emailMeta          // "joe@doe.com" -> String
+    this.snakeCaseNameMeta  // "are camelized"
 
     // get all metas in one object
     this.metas

diff --git a/spec/use-meta/use-meta_spec.js b/spec/use-meta/use-meta_spec.js
@@ -28,11 +28,11 @@ describe(`useMeta tests`, function () {
       document.head.innerHTML += '<meta name="true" content="true">'
       document.head.innerHTML += '<meta name="false" content="false">'
       document.head.innerHTML += '<meta name="email" content="joe@doe.com">'
-      expect(application.controllers[0].userId).to.equal(12345678)
-      expect(application.controllers[0].true).to.equal(true)
-      expect(application.controllers[0].false).to.equal(false)
-      expect(application.controllers[0].ko).to.equal(null)
-      expect(application.controllers[0].email).to.equal('joe@doe.com')
+      expect(application.controllers[0].userIdMeta).to.equal(12345678)
+      expect(application.controllers[0].trueMeta).to.equal(true)
+      expect(application.controllers[0].falseMeta).to.equal(false)
+      expect(application.controllers[0].koMeta).to.equal(null)
+      expect(application.controllers[0].emailMeta).to.equal('joe@doe.com')
       document.head.innerHTML = initalHead
     })
   })
@@ -43,8 +43,8 @@ describe(`useMeta tests`, function () {
       document.head.innerHTML += '<meta name="some_id" content="12345678">'
       document.head.innerHTML += '<meta name="kebab-id" content="12345678">'
 
-      expect(application.controllers[0].someId).to.equal(12345678)
-      expect(application.controllers[0].kebabId).to.equal(12345678)
+      expect(application.controllers[0].someIdMeta).to.equal(12345678)
+      expect(application.controllers[0].kebabIdMeta).to.equal(12345678)
       document.head.innerHTML = initalHead
     })
   })

diff --git a/src/use-meta/use-meta.ts b/src/use-meta/use-meta.ts
@@ -1,7 +1,13 @@
 import { Controller } from 'stimulus'
 
-const defineMetaGetter = (controller: Controller, metaName: string) => {
-  Object.defineProperty(controller, camelize(metaName), {
+export interface MetaOptions {
+  suffix: boolean
+}
+
+const defineMetaGetter = (controller: Controller, metaName: string, suffix: boolean) => {
+  const getterName = suffix ? `${camelize(metaName)}Meta` : camelize(metaName)
+
+  Object.defineProperty(controller, getterName, {
     get(): any {
       return typeCast(metaValue(metaName))
     },
@@ -25,12 +31,13 @@ function camelize(value: string) {
   return value.replace(/(?:[_-])([a-z0-9])/g, (_, char) => char.toUpperCase())
 }
 
-export const useMeta = (controller: Controller) => {
+export const useMeta = (controller: Controller, options: MetaOptions = { suffix: true }) => {
   const metaNames = (controller.constructor as any).metaNames
+  const suffix = options.suffix
 
   // defines the individual meta getters
   metaNames?.forEach((metaName: string) => {
-    defineMetaGetter(controller, metaName)
+    defineMetaGetter(controller, metaName, suffix)
   })
 
   // define the metas getter to retreive an object with all metas