Add build-in yn support (#47)

* [FEATURE] Add yn support

* [FIX] Transpile for browser

* [FIX] Improve docs

* [FIX] Handle queryString: true

* [FEATURE] Use a renderless component (transparent wrapper)

Co-authored-by: Sébastien LeBlanc <sebastien.leblanc@libeo.com>

Author: mrleblanc101

Readme.md

@@ -31,7 +31,16 @@
 
 ## Usage
 
-### 1. Add module to nuxt.config.js along with the feature toggle options.
+### 1. Install the plugin
+
+```sh
+npm install nuxt-feature-toggle
+# or
+yarn add nuxt-feature-toggle
+```
+
+
+### 2. Add module to nuxt.config.js along with the feature toggle options.
 
 The toggles can be defined as a function or just as an object.
 
@@ -72,8 +81,8 @@ module.exports = {
 ```
 
 ## RuntimeConfig support
-If using Nuxt >= 2.13, you can use the new `publicRuntimeConfig` setting in `nuxt.config.js` to **configure 
-feature toggles on-the-fly without having to rebuild** (only need to restart Nuxt using `nuxt start`).  
+If using Nuxt >= 2.13, you can use the new `publicRuntimeConfig` setting in `nuxt.config.js` to **configure
+feature toggles on-the-fly without having to rebuild** (only need to restart Nuxt using `nuxt start`).
 
 ```javascript
 module.exports = {
@@ -87,24 +96,23 @@ module.exports = {
   }
 }
 ```
-Note 1: `FEATURE_ENABLE_SOME_PREVIEW_FEATURE` is an arbitrary name, the package doesn't depend on it.  
-You can use "Feature Flag" names eg. `FF_PREVIEW_FEATURE` or whatever suits you. 
+> Note 1: `FEATURE_ENABLE_SOME_PREVIEW_FEATURE` is an arbitrary name, the package doesn't depend on it.
+You can use "Feature Flag" names eg. `FF_PREVIEW_FEATURE` or whatever suits you.
 
-Note 2: If you want to use `0/1` or `"true/false"` strings to enable/disable your features, 
-[check out this great package which makes it much easier.](https://github.com/sindresorhus/yn) 
+> Note 2: This package has built-in [yn](https://github.com/sindresorhus/yn) support which mean you don't have to do anything to get your env variable as Boolean value. You can also use `0/1`, `y/n` or any other value supported by the package. This will also work when `queryString` is set to `true`.
 
 Now you just need to change your environment variables an restart Nuxt to toggle your features!
 
-### Important note on `publicRuntimeConfig` and Promise / function based toggles 
+### Important note on `publicRuntimeConfig` and Promise / function based toggles
 **If you're using function/promise based toggles resolution, you should not use `publicRuntimeConfig`:**
-while it's technically *possible* to use a function in `runtimeConfig`, [it is not recommended](https://nuxtjs.org/guide/runtime-config/).  
+while it's technically *possible* to use a function in `runtimeConfig`, [it is not recommended](https://nuxtjs.org/guide/runtime-config/).
+
+**A function/promise based toggles resolution will NOT be resolved in the plugin, only on build.**
 
-**A function/promise based toggles resolution will NOT be resolved in the plugin, only on build.**  
+Instead you should either:
+* Use a Promise/Function in `featureToggle.toggles` like you did before
+* Switch to object mode in `publicRuntimeConfig.featureToggle.toggles`.
 
-Instead you should either:  
-* Use a Promise/Function in `featureToggle.toggles` like you did before  
-* Switch to object mode in `publicRuntimeConfig.featureToggle.toggles`.  
-  
 As now you can use environment variables and just restart the server, many people can get rid of Promises returning toggles depending on the environment.
 
 

lib/feature-toggle.vue

@@ -1,9 +1,3 @@
-<template>
-  <div v-if="canShow">
-    <slot/>
-  </div>
-</template>
-
 <script>
 export default {
   name: 'feature-toggle',
@@ -64,6 +58,9 @@ export default {
         (!isQueryStringAllowed || isQueryStringAllowed(this.$props))
       )
     }
+  },
+  render() {
+    return this.canShow ? this.$slots.default : null;
   }
 }
-</script>
+</script>

lib/module.js

@@ -6,6 +6,8 @@ const defaultOptions = {
 }
 
 async function featureToggleModule (moduleOptions) {
+  const { nuxt } = this
+
   const options = {
     ...defaultOptions,
     ...this.options['feature-toggle'],
@@ -14,6 +16,9 @@ async function featureToggleModule (moduleOptions) {
     ...(this.publicRuntimeConfig && this.publicRuntimeConfig.featureToggle) || {}
   }
 
+  // Transpile yn
+  nuxt.options.build.transpile.push('yn')
+
   // It's not recommended to use functions for runtimeConfig
   // so it's best to allow resolving a Promise only in module
   // but not in plugin.

lib/plugin.js

@@ -1,4 +1,5 @@
 import Vue from 'vue'
+import yn from 'yn'
 
 const parseQueryToggles = (queryObject = {}, queryStringPrefix = '') => Object.entries(queryObject)
   .filter(([key]) => key.startsWith(`${queryStringPrefix}_`))
@@ -7,6 +8,8 @@ const parseQueryToggles = (queryObject = {}, queryStringPrefix = '') => Object.e
     [key.replace(`${queryStringPrefix}_`, '')]: value
   }), {})
 
+const parseYn = (t) => Object.entries(t).reduce((acc, [key, value]) => { acc[key] = yn(value) ?? value; return acc }, {})
+
 export default (ctx, inject) => {
   const { $config, route, app: { router } } = ctx
   const { toggles: _toggles, queryString: _queryString, queryStringPrefix } = JSON.parse(`<%= JSON.stringify(options) %>`)
@@ -18,23 +21,25 @@ export default (ctx, inject) => {
     if (router && route) {
       queryToggles = parseQueryToggles(route.query, queryStringPrefix)
       router.afterEach((to) => {
-        featureToggle.toggles = {
+        featureToggle.toggles = parseYn({
           ..._toggles,
           ...(runtimeConfig.toggles || {}),
           ...parseQueryToggles(to.query, queryStringPrefix)
-        }
+        })
       })
     }
   }
+
   const toggles = {
     ..._toggles,
     ...(runtimeConfig.toggles || {}),
     ...queryToggles
   }
+
   Vue.component('feature-toggle', () => import('./feature-toggle.vue'))
 
   const featureToggle = {
-    toggles,
+    toggles: parseYn(toggles),
     queryString,
     queryStringPrefix,
     isQueryStringAllowed: (fn) => {

package.json

@@ -42,7 +42,8 @@
     }
   },
   "dependencies": {
-    "vue": "^2.6.10"
+    "vue": "^2.6.10",
+    "yn": "^5.0.0"
   },
   "devDependencies": {
     "@babel/core": "npm:@babel/core",

yarn.lock

@@ -6457,3 +6457,8 @@ yargs@^15.3.1:
     which-module "^2.0.0"
     y18n "^4.0.0"
     yargs-parser "^18.1.2"
+
+yn@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/yn/-/yn-5.0.0.tgz#63fc2e2e0056cf294397eed6ad4a3fbdf707f26f"
+  integrity sha512-+l37+9TyGEsyxGLaTg6QgYy5KnOp74ZZl4dPFLQpBWSkO99uBC5jnS0pOGwXFViPbiaEtWbParH2KrgWWF2duQ==