@featurevisor/vue 0.33.0

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@featurevisor/vue",
+  "version": "0.33.0",
+  "description": "Vue.js package for Featurevisor",
+  "main": "dist/index.js",
+  "module": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "scripts": {
+    "lint": "echo 'not linting in this package yet'",
+    "transpile": "rimraf lib && tsc --project tsconfig.esm.json",
+    "dist": "webpack --config ./webpack.config.js",
+    "build": "npm run transpile && npm run dist",
+    "test": "jest --config jest.config.js --verbose --coverage ./src/*.spec.ts"
+  },
+  "author": {
+    "name": "Fahad Heylaal",
+    "url": "https://fahad19.com"
+  },
+  "homepage": "https://featurevisor.com",
+  "keywords": [
+    "featurevisor",
+    "feature",
+    "features",
+    "flags",
+    "feature flags",
+    "feature toggles",
+    "feature management",
+    "experimentation",
+    "experiment",
+    "experiments",
+    "vue"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/fahad19/featurevisor.git"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "bugs": {
+    "url": "https://github.com/fahad19/featurevisor/issues"
+  },
+  "dependencies": {
+    "@featurevisor/sdk": "^0.33.0",
+    "@featurevisor/types": "^0.33.0",
+    "vue": "^3.3.4"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@vue/cli-plugin-unit-jest": "^5.0.8",
+    "@vue/test-utils": "^2.4.0"
+  },
+  "gitHead": "a03246983110e5e83432b0a90849aece2fae1512"
+}

package/src/activateFeature.ts

@@ -0,0 +1,12 @@
+import { Attributes, FeatureKey, VariationValue } from "@featurevisor/types";
+
+import { useSdk } from "./useSdk";
+
+export function activateFeature(
+  featureKey: FeatureKey,
+  attributes: Attributes = {},
+): VariationValue | undefined {
+  const sdk = useSdk();
+
+  return sdk.activate(featureKey, attributes);
+}

package/src/index.spec.ts

@@ -0,0 +1,75 @@
+import { createApp } from "vue";
+import { createInstance } from "@featurevisor/sdk";
+import { mount } from "@vue/test-utils";
+
+import { setupApp, PROVIDER_NAME } from "./setupApp";
+import { useSdk } from "./useSdk";
+
+describe("vue: index", function () {
+  it("can set up sdk in app and then inject the sdk instance", async function () {
+    const sdk = createInstance({
+      datafile: {
+        schemaVersion: "1",
+        revision: "1.0",
+        features: [
+          {
+            key: "test",
+            defaultVariation: false,
+            bucketBy: "userId",
+            variations: [{ value: true }, { value: false }],
+            traffic: [
+              {
+                key: "1",
+                segments: "*",
+                percentage: 100000,
+                allocation: [
+                  { variation: true, range: [0, 100000] },
+                  { variation: false, range: [0, 0] },
+                ],
+              },
+            ],
+          },
+        ],
+        attributes: [],
+        segments: [],
+      },
+    });
+
+    const TestComponent = {
+      inject: [PROVIDER_NAME],
+      data: function () {
+        const revision = this[PROVIDER_NAME].getRevision();
+
+        return {
+          revision,
+        };
+      },
+      template: `<div>
+        <p data-test="p">TestComponent here</p>
+        <p data-test="revision">{{ revision }}</p>
+      </div>`,
+    };
+
+    const App = {
+      components: { TestComponent },
+      template: `<div><TestComponent /></div>`,
+      provide: {
+        [PROVIDER_NAME]: sdk,
+      },
+    };
+
+    const app = createApp(App);
+    setupApp(app, sdk);
+
+    const wrapper = mount(App);
+    expect(wrapper.exists()).toEqual(true);
+
+    const pText = await wrapper.get(`[data-test="p"]`).text();
+    expect(pText).toEqual("TestComponent here");
+
+    const revisionText = await wrapper.get(`[data-test="revision"]`).text();
+    expect(revisionText).toEqual("1.0");
+  });
+
+  // @TODO: add more tests that utilizes Composition API
+});

package/src/index.ts

@@ -0,0 +1,7 @@
+export * from "./setupApp";
+
+export * from "./activateFeature";
+export * from "./useSdk";
+export * from "./useStatus";
+export * from "./useVariable";
+export * from "./useVariation";

package/src/setupApp.ts

@@ -0,0 +1,8 @@
+import { App } from "vue";
+import { FeaturevisorInstance } from "@featurevisor/sdk";
+
+export const PROVIDER_NAME = "featurevisor";
+
+export function setupApp(app: App, sdk: FeaturevisorInstance) {
+  app.provide(PROVIDER_NAME, sdk);
+}

package/src/useSdk.ts

@@ -0,0 +1,10 @@
+import { inject } from "vue";
+import { FeaturevisorInstance } from "@featurevisor/sdk";
+
+import { PROVIDER_NAME } from "./setupApp";
+
+export function useSdk(): FeaturevisorInstance {
+  const sdk = inject(PROVIDER_NAME) as FeaturevisorInstance;
+
+  return sdk;
+}

package/src/useStatus.ts

@@ -0,0 +1,26 @@
+import { Ref, readonly, ref } from "vue";
+
+import { useSdk } from "./useSdk";
+
+export interface Status {
+  isReady: boolean;
+}
+
+export function useStatus(): Ref<Status> {
+  const sdk = useSdk();
+  const initialStatus = sdk.isReady();
+
+  const result = ref({
+    isReady: initialStatus,
+  });
+
+  if (initialStatus) {
+    return result;
+  }
+
+  sdk.on("ready", () => {
+    result.value.isReady = true;
+  });
+
+  return readonly(result);
+}

package/src/useVariable.ts

@@ -0,0 +1,13 @@
+import { Attributes, FeatureKey, VariableKey, VariableValue } from "@featurevisor/types";
+
+import { useSdk } from "./useSdk";
+
+export function useVariable(
+  featureKey: FeatureKey,
+  variableKey: VariableKey,
+  attributes: Attributes = {},
+): VariableValue | undefined {
+  const sdk = useSdk();
+
+  return sdk.getVariable(featureKey, variableKey, attributes);
+}

package/src/useVariation.ts

@@ -0,0 +1,12 @@
+import { Attributes, FeatureKey, VariationValue } from "@featurevisor/types";
+
+import { useSdk } from "./useSdk";
+
+export function useVariation(
+  featureKey: FeatureKey,
+  attributes: Attributes = {},
+): VariationValue | undefined {
+  const sdk = useSdk();
+
+  return sdk.getVariation(featureKey, attributes);
+}

package/stub/types__react/index.d.ts

@@ -0,0 +1 @@
+export {};

package/tsconfig.cjs.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.cjs.json",
+  "compilerOptions": {
+    "outDir": "./lib",
+    "jsx": "preserve",
+    "types": ["jest"],
+    "paths": {
+      "react": ["./stub/types__react"]
+    }
+  },
+  "include": ["./src/**/*.ts"]
+}

package/tsconfig.esm.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../../tsconfig.esm.json",
+  "compilerOptions": {
+    "outDir": "./lib",
+    "lib": ["es2015", "dom"],
+    "jsx": "preserve",
+    "types": ["jest"],
+    "paths": {
+      "react": ["./stub/types__react"]
+    }
+  },
+  "include": ["./src/**/*.ts"],
+  "exclude": []
+}

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.esm.json",
+  "compilerOptions": {
+    "outDir": "./lib",
+    "lib": ["es2015", "dom"],
+    "jsx": "preserve",
+    "types": ["jest"],
+    "paths": {
+      "react": ["./stub/types__react"]
+    }
+  },
+  "include": ["./src/**/*.ts"]
+}

package/webpack.config.js

@@ -0,0 +1,21 @@
+const path = require("path");
+
+const getWebpackConfig = require("../../tools/getWebpackConfig");
+
+const wepbackConfig = getWebpackConfig({
+  entryFilePath: path.join(__dirname, "src", "index.ts"),
+  entryKey: "index",
+  outputDirectoryPath: path.join(__dirname, "dist"),
+  outputLibrary: "FeaturevisorVue",
+  tsConfigFilePath: path.join(__dirname, "tsconfig.cjs.json"),
+  externals: {
+    vue: {
+      commonjs: "vue",
+      commonjs2: "vue",
+      amd: "vue",
+      root: "Vue",
+    },
+  },
+});
+
+module.exports = wepbackConfig;