diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000..a3834e3
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,19 @@
+# Changelog
+
+## [1.1.0] - 2021-11-03
+
+### Added
+
+- Re-added Laika component. It can now use the context as well.
+- Added this changelog
+
+## [1.0.0] - 2021-11-02
+
+### Changed
+
+- This release is a complete rewrite in TypeScript which replaces the Laika component with a hook that can also optionally read its values from a context.
+
+### Added
+
+- Context
+- `useLaika` hook
diff --git a/README.md b/README.md
index 908ded9..b31c8fa 100644
--- a/README.md
+++ b/README.md
@@ -74,7 +74,35 @@ function SomeComponent() {
}
```
-### getFeatureStatus
+### Component
+
+```tsx
+import React from 'react'
+import { useLaika, Config, LaikaContext, Laika } from 'laika-react'
+/* ... import your components ... */
+
+const uri = 'https://laika.example.com'
+const env = 'prod'
+
+function SomeComponent() {
+ return (
+
+ )
+}
+```
+
+
+
+### Promise (getFeatureStatus)
```ts
import { getFeatureStatus } from 'laika-react'
@@ -131,6 +159,22 @@ Parameter | Function
`cacheTimeout` | The time how long a requested flag should be cached (default: 1.5 minutes).
The flags and cache timestamps are saved in localstorage.
***Return values*** | Returns an array with 2 entries:
1. `state`: The current state of the flag (`true` or `false`, defaults to `false` while the request is still resolving)
2. `isLoading`: The second entry is true if it's still requesting the flag from the server and false if it's finished loading (useful for displaying loading indicators for example)
+### `Laika` component
+
+```tsx
+interface LaikaProps {
+ feature: string
+ env?: string
+ uri?: string
+ cacheTimeout?: number,
+ onTrue: React.ReactElement | false
+ onFalse: React.ReactElement | false
+}
+```
+
+Works analog to the `useLaika` hook, except that it's a component.
+It will not render any children while the request is still loading the feature flag from Laika.
+
### `getFeatureStatus` utility function
Retrieves the feature flag from the API and returns a promise that can be `await`ed.
diff --git a/package.json b/package.json
index bd2cfb2..7d70ea1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "laika-react",
- "version": "1.0.0",
+ "version": "1.1.0",
"description": "React Laika client",
"homepage": "https://github.com/MEDIGO",
"keywords": [
diff --git a/src/component.test.tsx b/src/component.test.tsx
new file mode 100644
index 0000000..85039a4
--- /dev/null
+++ b/src/component.test.tsx
@@ -0,0 +1,60 @@
+import { mount } from '@cypress/react'
+import { Laika } from 'lib/component'
+import { Config, LaikaContext } from 'lib/config'
+import { mockRequest } from 'lib/mock/mockRequest'
+import { cy, describe, it } from 'local-cypress'
+import React from 'react'
+
+describe('component', () => {
+ const uri = 'https://laika.example.com'
+
+ it('with-parameters', () => {
+ mockRequest('component-test', uri, 'test', true)
+
+ mount(
+ Enabled}
+ onFalse={Disabled
}
+ />,
+ )
+ cy.get('div').contains('Enabled')
+ })
+
+ it('with-parameters-disabled', () => {
+ mockRequest('component-test', uri, 'test', false)
+
+ mount(
+ Enabled}
+ onFalse={Disabled
}
+ />,
+ )
+ cy.get('div').contains('Disabled')
+ })
+
+ it('with-context', () => {
+ mockRequest('component-test', uri, 'test', true)
+
+ const ctx: Config = {
+ env: 'test',
+ uri,
+ }
+
+ mount(
+
+ Enabled}
+ onFalse={Disabled
}
+ />
+ ,
+ )
+ cy.get('div').contains('Enabled')
+ })
+})
diff --git a/src/component.tsx b/src/component.tsx
new file mode 100644
index 0000000..bd381ff
--- /dev/null
+++ b/src/component.tsx
@@ -0,0 +1,34 @@
+import { bool, node, number, oneOfType, string } from 'prop-types'
+import React from 'react'
+import { useLaika } from 'lib/hook'
+
+export interface LaikaProps {
+ feature: string
+ env?: string
+ uri?: string
+ cacheTimeout?: number
+ onTrue: React.ReactElement | false
+ onFalse: React.ReactElement | false
+}
+
+export function Laika(props: LaikaProps) {
+ const [featureEnabled, featureIsLoading] = useLaika(
+ props.feature,
+ props.uri,
+ props.env,
+ props.cacheTimeout,
+ )
+
+ const children = featureEnabled ? props.onTrue : props.onFalse
+ return <>{!featureIsLoading && children}>
+}
+
+// For using it with JavaScript
+Laika.propTypes = {
+ feature: string.isRequired,
+ uri: string,
+ env: string,
+ cacheTimeout: number,
+ onTrue: oneOfType([node, bool]).isRequired,
+ onFalse: oneOfType([node, bool]).isRequired,
+}
diff --git a/src/hook.test.tsx b/src/hook.test.tsx
index 68dde35..b5099fd 100644
--- a/src/hook.test.tsx
+++ b/src/hook.test.tsx
@@ -1,14 +1,14 @@
import { mount } from '@cypress/react'
+import { Config, LaikaContext } from 'lib/config'
+import { useLaika } from 'lib/hook'
+import { mockRequest } from 'lib/mock/mockRequest'
import { cy, describe, it } from 'local-cypress'
import React from 'react'
-import { useLaika } from './hook'
-import { mockRequest } from './mock/mockRequest'
-import { Config, LaikaContext } from './config'
describe('useLaika', () => {
const uri = 'https://laika.example.com'
- it('with parameters', () => {
+ it('with-parameters', () => {
mockRequest('useLaika-test', uri, 'test', true)
function TestComp() {
@@ -21,7 +21,20 @@ describe('useLaika', () => {
cy.get('div').contains('Enabled')
})
- it('with context', () => {
+ it('with-parameters-disabled', () => {
+ mockRequest('useLaika-test', uri, 'test', false)
+
+ function TestComp() {
+ const [flag] = useLaika('useLaika-test', uri, 'test')
+
+ return {flag ? 'Enabled' : 'Disabled'}
+ }
+
+ mount()
+ cy.get('div').contains('Disabled')
+ })
+
+ it('with-context', () => {
mockRequest('useLaika-test', uri, 'test', true)
function TestComp() {
diff --git a/src/index.ts b/src/index.ts
index 1e2b92b..c17b60a 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,3 +1,4 @@
-export { getFeatureStatus } from './utils'
-export { useLaika } from './hook'
-export { Config, LaikaContext } from './config'
+export { getFeatureStatus } from 'lib/utils'
+export { useLaika } from 'lib/hook'
+export { Config, LaikaContext } from 'lib/config'
+export { Laika } from 'lib/component'
diff --git a/src/mock/mockRequest.ts b/src/mock/mockRequest.ts
index 02a7e87..7d233bf 100644
--- a/src/mock/mockRequest.ts
+++ b/src/mock/mockRequest.ts
@@ -12,5 +12,6 @@ export function mockRequest(
headers: {
'content-type': 'application/json',
},
+ delay: 500,
})
}
diff --git a/src/utils.test.ts b/src/utils.test.ts
index 1e7a767..3a8f154 100644
--- a/src/utils.test.ts
+++ b/src/utils.test.ts
@@ -1,22 +1,22 @@
import { cy, describe, it } from 'local-cypress'
-import { mockRequest } from './mock/mockRequest'
-import { getFeatureStatus } from './utils'
+import { mockRequest } from 'lib/mock/mockRequest'
+import { getFeatureStatus } from 'lib/utils'
describe('Utilities', () => {
describe('getFeatureStatus', () => {
- it('acts on false', () => {
+ it('acts-on-false', () => {
mockRequest('cache-test', '', 'test', false)
.then(() => getFeatureStatus('cache-test', '', 'test'))
.should('eq', false)
})
- it('acts on true', () => {
+ it('acts-on-true', () => {
mockRequest('cache-test', '', 'test', true)
.then(() => getFeatureStatus('cache-test', '', 'test'))
.should('eq', true)
})
- it('caches the flag', () => {
+ it('caches-the-flag', () => {
cy.clock()
mockRequest('cache-test', '', 'test', true)
.then(() => getFeatureStatus('cache-test', '', 'test'))