Impl FeatureFlagsWebpackPlugin

.config/jest/jest.config.js

@@ -11,4 +11,16 @@ module.exports = {
   preset: 'ts-jest',
   testMatch: ['<rootDir>/**/*.test.{ts,tsx}'],
   collectCoverageFrom: ['**/*.{ts,tsx}', '!**/*.d.ts', '!**/*.test.{ts,tsx}'],
+  transform: {
+    '^.+\\.jsx?$': 'ts-jest',
+  },
+  globals: {
+    'ts-jest': {
+      tsConfig: {
+        noUnusedLocals: false,
+        noUnusedParameters: false,
+        allowJs: true,
+      },
+    },
+  },
 }

.eslintrc

@@ -52,7 +52,7 @@
     "semi": [2, "never"],
     "semi-spacing": [2, { "before": false, "after": true }],
     "wrap-iife": [2, "inside"],
-    "no-use-before-define": [2, { "functions": true, "classes": true, "variables": true }],
+    "no-use-before-define": [2, { "functions": false, "classes": true, "variables": true }],
     "no-caller": 2,
     "no-cond-assign": [2, "except-parens"],
     "no-constant-condition": 2,

package.json

@@ -6,8 +6,9 @@
     "lint": "eslint --ext .js,.ts,.tsx .",
     "postinstall": "npm run bootstrap",
     "publish:next": "lerna publish --canary --preid dev --npm-tag next --no-git-tag-version",
-    "unit:coverage": "npm run unit -- --coverage",
-    "unit": "jest --config .config/jest/jest.config.js"
+    "__unit:coverage": "npm run unit -- --coverage",
+    "__unit": "jest --config .config/jest/jest.config.js",
+    "unit": "lerna run unit"
   },
   "devDependencies": {
     "@commitlint/cli": "7.2.1",

packages/feature-flags-webpack-plugin/.gitignore

@@ -0,0 +1 @@
+lib

packages/feature-flags-webpack-plugin/README.md

@@ -0,0 +1,17 @@
+# @bem-react/feature-flags-webpack-plugin
+
+## Motivation
+
+## ✈️ Install
+
+via npm:
+
+```sh
+npm i -DE @bem-react/feature-flags-webpack-plugin
+```
+
+## ☄️ Usage
+
+```ts
+TODO
+```

packages/feature-flags-webpack-plugin/__tests__/fixtures/component-a.js

@@ -0,0 +1,8 @@
+/* eslint-disable no-console */
+import { FEATURE_A, isFeatureEnabled } from './features'
+
+if (isFeatureEnabled(FEATURE_A)) {
+  console.log('enabled')
+} else {
+  console.log('disabled')
+}

packages/feature-flags-webpack-plugin/__tests__/fixtures/component-b.js

@@ -0,0 +1,10 @@
+/* eslint-disable no-console */
+import { FEATURE_A, FEATURE_B, isFeatureEnabled } from './features'
+
+if (isFeatureEnabled(FEATURE_A)) {
+  console.log('enabled FEATURE_A')
+}
+
+if (isFeatureEnabled(FEATURE_B)) {
+  console.log('enabled FEATURE_B')
+}

packages/feature-flags-webpack-plugin/__tests__/fixtures/component-c.js

@@ -0,0 +1,6 @@
+/* eslint-disable no-console */
+import { FEATURE_A, isEnabled } from './features'
+
+if (isEnabled(FEATURE_A)) {
+  console.log('enabled FEATURE_A')
+}

packages/feature-flags-webpack-plugin/__tests__/fixtures/features.js

@@ -0,0 +1,15 @@
+export const FEATURE_A = {
+  value: true,
+}
+
+export const FEATURE_B = {
+  value: true,
+}
+
+export function isFeatureEnabled(_flag) {
+  return false
+}
+
+export function isEnabled(_flag) {
+  return false
+}

packages/feature-flags-webpack-plugin/__tests__/index.test.ts

@@ -0,0 +1,42 @@
+/* eslint-disable quotes */
+
+import FeatureFlagsWebpackPlugin from '../src/index'
+import { compile } from './internal/compiler'
+import { getResult } from './internal/getResult'
+import { FEATURE_A, FEATURE_B } from './fixtures/features'
+
+describe('FeatureFlagsWebpackPlugin', () => {
+  test('should compile code with disabled feature', async () => {
+    const { compiler } = await compile('./component-a.js')
+    expect(getResult(compiler)).toMatchInlineSnapshot(
+      `"(()=>{\\"use strict\\";console.log(\\"disabled\\")})();"`,
+    )
+  })
+
+  test('should compile code with enabled feature', async () => {
+    const plugin = new FeatureFlagsWebpackPlugin({ flags: { FEATURE_A } })
+    const { compiler } = await compile('./component-a.js', { plugins: [plugin] })
+    expect(getResult(compiler)).toMatchInlineSnapshot(
+      `"(()=>{\\"use strict\\";console.log(\\"enabled\\")})();"`,
+    )
+  })
+
+  test('should compile code with two enabled features', async () => {
+    const plugin = new FeatureFlagsWebpackPlugin({ flags: { FEATURE_A, FEATURE_B } })
+    const { compiler } = await compile('./component-b.js', { plugins: [plugin] })
+    expect(getResult(compiler)).toMatchInlineSnapshot(
+      `"(()=>{\\"use strict\\";console.log(\\"enabled FEATURE_A\\"),console.log(\\"enabled FEATURE_B\\")})();"`,
+    )
+  })
+
+  test('should compile code with enabled feature and custom feature name', async () => {
+    const plugin = new FeatureFlagsWebpackPlugin({
+      isFeatureEnabledFnName: 'isEnabled',
+      flags: { FEATURE_A },
+    })
+    const { compiler } = await compile('./component-c.js', { plugins: [plugin] })
+    expect(getResult(compiler)).toMatchInlineSnapshot(
+      `"(()=>{\\"use strict\\";console.log(\\"enabled FEATURE_A\\")})();"`,
+    )
+  })
+})

packages/feature-flags-webpack-plugin/__tests__/internal/compiler.ts

@@ -0,0 +1,32 @@
+import path from 'path'
+import webpack, { WebpackPluginInstance } from 'webpack'
+import { createFsFromVolume, Volume } from 'memfs'
+
+type Options = {
+  plugins?: WebpackPluginInstance[]
+}
+
+export function compile(fixture: string, options: Options = {}): Promise<any> {
+  const compiler = webpack({
+    context: path.resolve(__dirname, '../fixtures'),
+    mode: 'production',
+    entry: fixture,
+    output: {
+      path: path.resolve(__dirname, '../fixtures'),
+      filename: 'bundle.js',
+    },
+    plugins: options.plugins,
+  })
+
+  // @ts-ignore
+  compiler.outputFileSystem = createFsFromVolume(new Volume())
+
+  return new Promise((resolve, reject) => {
+    compiler.run((err, stats) => {
+      if (err) reject(err)
+      if (stats && stats.hasErrors()) reject(new Error(stats.toJson().errors))
+
+      resolve({ compiler, stats })
+    })
+  })
+}

packages/feature-flags-webpack-plugin/__tests__/internal/getResult.ts

@@ -0,0 +1,10 @@
+import fs from 'fs'
+import { resolve } from 'path'
+import { Compiler } from 'webpack'
+
+export function getResult(compiler: Compiler): string {
+  return (compiler.outputFileSystem as typeof fs).readFileSync(
+    resolve(__dirname, '../fixtures/bundle.js'),
+    'utf-8',
+  )
+}