refactor: change separate tools by category

web/vue/src/composables/useContextFactory/index.test.ts

@@ -0,0 +1,81 @@
+import { describe, it, expect } from 'vitest';
+import { defineComponent } from 'vue';
+import { useContextFactory } from '.';
+import { mount } from '@vue/test-utils';
+import { VueToolsError } from '../../utils';
+
+function testFactory<Data>(
+  data: Data,
+  context: ReturnType<typeof useContextFactory<Data>>,
+  fallback?: Data,
+) {
+  const { inject, provide } = context;
+
+  const Child = defineComponent({
+    setup() {
+      const value = inject(fallback);
+      return { value };
+    },
+    template: `{{ value }}`,
+  });
+
+  const Parent = defineComponent({
+    components: { Child },
+    setup() {
+      provide(data);
+    },
+    template: `<Child />`,
+  });
+
+  return {
+    Parent,
+    Child,
+  };
+}
+
+// TODO: maybe replace template with passing mock functions to setup
+
+describe('useContextFactory', () => {
+  it('provide and inject context correctly', () => {
+    const { Parent } = testFactory('test', useContextFactory('TestContext'));
+
+    const component = mount(Parent);
+
+    expect(component.text()).toBe('test');
+  });
+
+  it('throw an error when context is not provided', () => {
+    const { Child } = testFactory('test', useContextFactory('TestContext'));
+
+    expect(() => mount(Child)).toThrow(VueToolsError);
+  });
+
+  it('inject a fallback value when context is not provided', () => {
+    const { Child } = testFactory('test', useContextFactory('TestContext'), 'fallback');
+
+    const component = mount(Child);
+
+    expect(component.text()).toBe('fallback');
+  });
+
+  it('correctly handle null values', () => {
+    const { Parent } = testFactory(null, useContextFactory('TestContext'));
+
+    const component = mount(Parent);
+
+    expect(component.text()).toBe('');
+  });
+
+  it('provide context globally with app', () => {
+    const context = useContextFactory('TestContext');
+    const { Child } = testFactory(null, context);
+
+    const childComponent = mount(Child, {
+      global: {
+        plugins: [app => context.appProvide(app)('test')],
+      },
+    });
+
+    expect(childComponent.text()).toBe('test');
+  });
+});

web/vue/src/composables/useContextFactory/index.ts

@@ -0,0 +1,62 @@
+import { inject, provide, type InjectionKey, type App } from 'vue';
+import { VueToolsError } from '../..';
+
+/**
+ * @name useContextFactory
+ * @category State
+ * @description A composable that provides a factory for creating context with unique key
+ * 
+ * @param {string} name The name of the context
+ * @returns {Object} An object with `inject`, `provide`, `appProvide` and `key` properties
+ * @throws {VueToolsError} when the context is not provided
+ * 
+ * @example
+ * const { inject, provide } = useContextFactory('MyContext');
+ *
+ * provide('Hello World');
+ * const value = inject();
+ *
+ * @example
+ * const { inject: injectContext, appProvide } = useContextFactory('MyContext');
+ *
+ * // In a plugin
+ * {
+ *   install(app) {
+ *      appProvide(app)('Hello World');
+ *   }
+ * }
+ *
+ * // In a component
+ * const value = injectContext();
+ *
+ * @since 0.0.1
+ */
+export function useContextFactory<ContextValue>(name: string) {
+    const injectionKey: InjectionKey<ContextValue> = Symbol(name);
+
+    const injectContext = <Fallback extends ContextValue = ContextValue>(fallback?: Fallback) => {
+        const context = inject(injectionKey, fallback);
+
+        if (context !== undefined)
+            return context;
+
+        throw new VueToolsError(`useContextFactory: '${name}' context is not provided`);
+    };
+
+    const provideContext = (context: ContextValue) => {
+        provide(injectionKey, context);
+        return context;
+    };
+
+    const appProvide = (app: App) => (context: ContextValue) => {
+        app.provide(injectionKey, context);
+        return context;
+    };
+
+    return {
+        inject: injectContext,
+        provide: provideContext,
+        appProvide,
+        key: injectionKey,
+    }
+}