@financial-times/dotcom-ui-flags 7.3.1 → 7.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/dotcom-ui-flags",
-  "version": "7.3.1",
+  "version": "7.3.3",
   "description": "",
   "main": "component.js",
   "browser": "browser.js",
@@ -25,13 +25,17 @@
     "npm": "7.x || 8.x"
   },
   "dependencies": {
-    "@financial-times/dotcom-ui-data-embed": "file:../dotcom-ui-data-embed"
+    "@financial-times/dotcom-ui-data-embed": "^7.3.3"
   },
   "peerDependencies": {
     "react": "16.x || 17.x"
   },
   "files": [
-    "dist/"
+    "dist/",
+    "src/",
+    "browser.js",
+    "component.js",
+    "server.js"
   ],
   "repository": {
     "type": "git",
@@ -46,4 +50,4 @@
     "check-engine": "^1.10.1",
     "react": "^16.8.6"
   }
-}
+}

package/server.js

@@ -0,0 +1 @@
+module.exports = require('./dist/node/server/index')

package/src/__test__/client/Flags.spec.ts

@@ -0,0 +1,32 @@
+import Subject from '../../client/Flags'
+
+const fixture = { foo: 1, bar: true }
+
+describe('dotcom-ui-flags/src/client/Flags', () => {
+  let instance
+
+  beforeEach(() => {
+    instance = new Subject(fixture)
+  })
+
+  describe('.get()', () => {
+    it('returns the value of a flag which exists', () => {
+      expect(instance.get('foo')).toBe(1)
+      expect(instance.get('bar')).toBe(true)
+    })
+
+    it('returns undefined for flags which do not exist', () => {
+      expect(instance.get('baz')).toBeUndefined()
+    })
+  })
+
+  describe('.getAll()', () => {
+    it('returns all flags data', () => {
+      expect(instance.getAll()).toEqual(fixture)
+    })
+
+    it('freezes the flags data', () => {
+      expect(Object.isFrozen(instance.getAll())).toBe(true)
+    })
+  })
+})

package/src/__test__/client/loadFlags.spec.ts

@@ -0,0 +1,36 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import subject from '../../client/loadFlags'
+import { SCRIPT_ELEMENT_ID } from '../../constants'
+
+describe('dotcom-ui-flags/src/client/loadFlags', () => {
+  describe('when there is a configuration object', () => {
+    beforeEach(() => {
+      document.body.innerHTML = `
+        <script id="${SCRIPT_ELEMENT_ID}">{"foo":1,"bar":true,"baz":"qux"}</script>
+      `
+    })
+
+    it('returns a frozen object', () => {
+      const result = subject()
+
+      expect(result).toEqual({ foo: 1, bar: true, baz: 'qux' })
+      expect(Object.isFrozen(result)).toBe(true)
+    })
+  })
+
+  describe('when there is no a configuration object', () => {
+    beforeEach(() => {
+      document.body.innerHTML = ''
+    })
+
+    it('returns a frozen empty object', () => {
+      const result = subject()
+
+      expect(result).toEqual({})
+      expect(Object.isFrozen(result)).toBe(true)
+    })
+  })
+})

package/src/__test__/components/FlagsEmbed.spec.ts

@@ -0,0 +1,14 @@
+import renderer from 'react-test-renderer'
+import { FlagsEmbed as subject } from '../../components/FlagsEmbed'
+
+const flags = {
+  foo: 1,
+  baz: 'qux'
+}
+
+describe('dotcom-ui-flags/src/components/FlagsEmbed', () => {
+  it('renders a script element containing flags', () => {
+    const tree = renderer.create(subject({ flags }))
+    expect(tree).toMatchSnapshot()
+  })
+})

package/src/__test__/components/__snapshots__/FlagsEmbed.spec.ts.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`dotcom-ui-flags/src/components/FlagsEmbed renders a script element containing flags 1`] = `
+<script
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "{\\"foo\\":1,\\"baz\\":\\"qux\\"}",
+    }
+  }
+  id="page-kit-flags-embed"
+  type="application/json"
+/>
+`;

package/src/__test__/server/formatFlagsJSON.spec.ts

@@ -0,0 +1,10 @@
+import subject from '../../server/formatFlagsJSON'
+
+const fixture = Object.freeze({ foo: 1, bar: false, baz: 'qux' })
+
+describe('dotcom-ui-flags/src/server/formatFlagsJSON', () => {
+  it('filters out properties with falsey values', () => {
+    const result = subject(fixture)
+    expect(result).toStrictEqual({ foo: 1, baz: 'qux' })
+  })
+})

package/src/client/Flags.ts

@@ -0,0 +1,16 @@
+import { TFlagsData, TFlag } from '../types'
+
+export default class Flags {
+  private flags: TFlagsData
+  constructor(flags: TFlagsData) {
+    this.flags = Object.freeze(flags)
+  }
+
+  get(flag: string): TFlag | undefined {
+    return this.flags.hasOwnProperty(flag) ? this.flags[flag] : undefined
+  }
+
+  getAll(): TFlagsData {
+    return this.flags
+  }
+}

package/src/client/index.ts

@@ -0,0 +1,9 @@
+import loadFlags from './loadFlags'
+import Flags from './Flags'
+
+const init = () => {
+  const flagsData = loadFlags()
+  return new Flags(flagsData)
+}
+
+export { loadFlags, Flags, init }

package/src/client/loadFlags.ts

@@ -0,0 +1,7 @@
+import { loadDataEmbed } from '@financial-times/dotcom-ui-data-embed'
+import { TFlagsData } from '../types'
+import { SCRIPT_ELEMENT_ID } from '../constants'
+
+export default function loadFlags(): TFlagsData {
+  return loadDataEmbed(SCRIPT_ELEMENT_ID)
+}

package/src/components/FlagsEmbed.ts

@@ -0,0 +1,19 @@
+import { DataEmbed } from '@financial-times/dotcom-ui-data-embed'
+import { formatFlagsJSON } from '../server'
+import { TFlagsData } from '../types'
+import { SCRIPT_ELEMENT_ID } from '../constants'
+
+type TFlagsEmbedProps = {
+  flags?: TFlagsData
+}
+
+function FlagsEmbed({ flags }: TFlagsEmbedProps) {
+  return DataEmbed({ id: SCRIPT_ELEMENT_ID, data: formatFlagsJSON(flags) })
+}
+
+FlagsEmbed.defaultProps = {
+  flags: {}
+}
+
+export { FlagsEmbed }
+export type { TFlagsEmbedProps }

package/src/constants.ts

@@ -0,0 +1 @@
+export const SCRIPT_ELEMENT_ID = 'page-kit-flags-embed'

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './components/FlagsEmbed'
+export * from './constants'

package/src/server/formatFlagsJSON.ts

@@ -0,0 +1,15 @@
+import { TFlagsData } from '../types'
+
+export default function formatFlagsJSON(flags: TFlagsData = {}): TFlagsData {
+  const output = {}
+
+  Object.keys(flags).forEach((key) => {
+    const value = flags[key]
+
+    if (value) {
+      output[key] = value
+    }
+  })
+
+  return output
+}

package/src/server/index.ts

@@ -0,0 +1,2 @@
+import formatFlagsJSON from './formatFlagsJSON'
+export { formatFlagsJSON }

package/src/types.d.ts

@@ -0,0 +1,5 @@
+export type TFlag = string | boolean | number
+
+export interface TFlagsData {
+  [key: string]: TFlag
+}