Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add IfEnabled helper #704

Merged
merged 4 commits into from
Jan 25, 2024
Merged

feat: add IfEnabled helper #704

merged 4 commits into from
Jan 25, 2024

Conversation

ajwootto
Copy link
Contributor

Add a helper for dynamically importing components into the client bundle depending on feature flag values.

It's used like this:

'use client'
import {
    ifEnabled,
} from '@devcycle/nextjs-sdk'

const ConditionalComponent = ifEnabled(
    'enabled-feature',
    () => import('./ConditionalClientComponent'),
)

export const ClientComponent = () => {
    return (
        <div>
            <ConditionalComponent />
        </div>
    )
}

The result is that if the flag evaluates to false, the component code is never sent to the client.

If it evaluates to true, the initial rendered content is send by the server and the component is "progressively enhanced" with the interactive JS after the page loads (lazy loaded)

Copy link

vercel bot commented Jan 24, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
js-sdks-web-elements ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jan 24, 2024 9:26pm
js-sdks-with-provider ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jan 24, 2024 9:26pm
1 Ignored Deployment
Name Status Preview Comments Updated (UTC)
js-sdks-next-js-page-router ⬜️ Ignored (Inspect) Visit Preview Jan 24, 2024 9:26pm

import useVariableValue from './useVariableValue'

// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
export const ifEnabled = <T extends { default: ComponentType<any> }>(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is there a better name than ifEnabled, maybe renderIfEnabled?

@@ -6,6 +6,7 @@ import { getUserAgent } from './userAgent'
import { getAllVariables } from './getAllVariables'
import { getAllFeatures } from './allFeatures'
import { DevCycleNextOptions } from '../common/types'
import { ComponentProps, ComponentType, lazy } from 'react'
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

are these used? can they be cleaned up?

@ajwootto ajwootto changed the title add IfEnabled helper feat: add IfEnabled helper Jan 25, 2024
@ajwootto ajwootto enabled auto-merge (squash) January 25, 2024 14:42
@ajwootto ajwootto merged commit 57ab969 into main Jan 25, 2024
14 of 15 checks passed
@ajwootto ajwootto deleted the if-enabled branch January 25, 2024 14:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

Successfully merging this pull request may close these issues.

3 participants