feat: new pattern for local-first development

[roncohen]

You define a plain typescript file called bucket.features.ts. This is the file you edit when you want to add/remove features:

import { defineFeatures } from "@bucket/core";

export default defineFeatures([
  "huddles",
  "voiceMessages",
  // optionally, set a config type
  {
    key: "optIn",
    config: { optInCopy: "string" },
  },
]);

If you're using the react-sdk, you also need this bucket.d.ts file. This file stays the way it is and you don't deal with it in the day-to-day.

import { FeaturesType } from "@bucketco/react";
import features from "./bucket.features";

declare module "@bucketco/react" {
  interface Features extends FeaturesType<typeof features> {}
}

Set up your provider and pass the features into the provider:

import { BucketProvider } from "@bucketco/react-sdk"
import bucketFeatures from "./bucket.features";

export function App() {
  return (
    <BucketProvider
      publishableKey={publishableKey}
      features={bucketFeatures}
    >
      <AppRoutes />
    </BucketProvider>
  );
}

You can now use features and configs with type safety:

function OptIn() {
  const { isEnabled, config } = useFeature("optIn");

  if (!isEnabled) return null;

  return (
    <div>
      <h2>Feature opt-in</h2>
      <div>
        {config.payload?.optInCopy ?? "Opt in below"} // strongly typed
      </div>
      <FeatureOptIn featureKey={"huddles"} featureName={"Huddles"} />
    </div>
  );
}

Next PR will be a minimalistic CLI which reads the bucket.features.ts file and sync/checks against what's on the Bucket servers.

[pavkam]

Missing config key?

[pavkam]

Will installing this module auto-generate the files in the proiect or will that be the cli?