feat: Add basics of vue

Author: ntucker

eslint.config.mjs

@@ -47,4 +47,14 @@ export default [
       'no-console': 'off',
     },
   },
+  // Disable React-specific rules for Vue package
+  {
+    files: ['packages/vue/**/*.?(m|c)ts?(x)', 'packages/vue/**/*.?(m|c)js?(x)'],
+    rules: {
+      'react-hooks/rules-of-hooks': 'off',
+      'react-hooks/exhaustive-deps': 'off',
+      'react/react-in-jsx-scope': 'off',
+      'react/jsx-uses-react': 'off',
+    },
+  },
 ];

packages/vue/src/__tests__/useSuspense.test.ts

@@ -0,0 +1,66 @@
+import { resource, Entity } from '@data-client/rest';
+import { describe, it, expect } from '@jest/globals';
+import { mount } from '@vue/test-utils';
+import { defineComponent, h, Suspense, nextTick } from 'vue';
+
+import useSuspense from '../composables/useSuspense.js';
+import { DataProvider, useController } from '../index.js';
+
+class Article extends Entity {
+  id = 0;
+  title = '';
+  static key = 'Article';
+}
+
+const ArticleResource = resource({
+  path: '/articles/:id',
+  schema: Article,
+});
+
+function delay<T>(v: T, ms = 1) {
+  return new Promise<T>(resolve => setTimeout(() => resolve(v), ms));
+}
+
+describe('useSuspense (vue)', () => {
+  it('renders data when preset via controller', async () => {
+    // Combined component ensures preset happens before the child ArticleView's async setup runs
+    const Combined = defineComponent({
+      name: 'Combined',
+      setup() {
+        const ctrl = useController();
+        ctrl.setResponse(
+          ArticleResource.get,
+          { id: 5 },
+          { id: 5, title: 'Hello Vue' },
+        );
+        return () => h(ArticleView);
+      },
+    });
+
+    // Component that awaits data via useSuspense
+    const ArticleView = defineComponent({
+      name: 'ArticleView',
+      async setup() {
+        const data = await useSuspense(ArticleResource.get, { id: 5 });
+        return () => h('div', data.value.title);
+      },
+    });
+
+    const App = defineComponent({
+      name: 'App',
+      setup() {
+        return () =>
+          h(
+            DataProvider as any,
+            {},
+            { default: () => h(Suspense, {}, { default: () => h(Combined) }) },
+          );
+      },
+    });
+
+    const wrapper = mount(App);
+    await nextTick();
+    await delay(0);
+    expect(wrapper.html()).toContain('Hello Vue');
+  });
+});

packages/vue/src/components/DataProvider.ts

@@ -0,0 +1,57 @@
+import {
+  initialState as defaultState,
+  Controller as DataController,
+  applyManager,
+  initManager,
+} from '@data-client/core';
+import type { State, Manager, GCInterface } from '@data-client/core';
+import { defineComponent, h, shallowRef } from 'vue';
+
+import DataStore from './DataStore.js';
+import { getDefaultManagers } from './getDefaultManagers';
+
+export interface ProviderProps {
+  managers?: Manager[];
+  initialState?: State<unknown>;
+  Controller?: typeof DataController;
+  gcPolicy?: GCInterface;
+}
+
+export default defineComponent<ProviderProps>({
+  name: 'DataProvider',
+  props: ['managers', 'initialState', 'Controller', 'gcPolicy'] as any,
+  setup(props, { slots }) {
+    const ControllerCtor = props.Controller ?? DataController;
+
+    // refs to keep identity stable
+    const controllerRef = shallowRef<any>(
+      new ControllerCtor({ gcPolicy: props.gcPolicy }),
+    );
+    const managersRef = shallowRef<Manager[]>(
+      props.managers ?? getDefaultManagers(),
+    );
+    const initial = props.initialState ?? (defaultState as State<unknown>);
+
+    // prepare init/cleanup runner (invoked in DataStore onMounted)
+    const mgrEffect = initManager(
+      managersRef.value,
+      controllerRef.value,
+      initial,
+    );
+
+    // build middleware
+    const middlewares = applyManager(managersRef.value, controllerRef.value);
+
+    return () =>
+      h(
+        DataStore as any,
+        {
+          mgrEffect,
+          middlewares,
+          initialState: initial,
+          controller: controllerRef.value,
+        },
+        slots.default ? { default: () => slots.default!() } : undefined,
+      );
+  },
+});

packages/vue/src/components/DataStore.ts

@@ -0,0 +1,95 @@
+import { createReducer } from '@data-client/core';
+import type { State } from '@data-client/core';
+import type { Middleware as GenericMiddleware } from '@data-client/use-enhanced-reducer';
+import {
+  defineComponent,
+  h,
+  onMounted,
+  onUnmounted,
+  provide,
+  shallowRef,
+} from 'vue';
+
+import { ControllerKey, StateKey } from '../context.js';
+
+export interface StoreProps {
+  mgrEffect: () => void;
+  middlewares: GenericMiddleware[];
+  initialState: State<unknown>;
+  controller: any; // Controller
+}
+
+/**
+ * Vue counterpart to React DataStore: owns reducer state and exposes it via provide/inject.
+ * Expects props to be referentially stable after mount.
+ */
+export default defineComponent<StoreProps>({
+  name: 'DataStore',
+  props: ['mgrEffect', 'middlewares', 'initialState', 'controller'] as any,
+  setup(props, { slots }) {
+    // Create reducer bound to controller
+    const masterReducer = createReducer(props.controller);
+
+    // state ref holds current committed state; updates trigger reactive recompute
+    const stateRef = shallowRef<State<unknown>>(props.initialState);
+
+    // Build a redux-like dispatch chain with middlewares using controller.bindMiddleware
+    // We emulate the use-enhanced-reducer behavior: dispatch returns a Promise that resolves when committed
+    let resolveNext: (() => void) | null = null;
+    const waitForCommit = () =>
+      new Promise<void>(resolve => {
+        resolveNext = resolve;
+      });
+
+    const realDispatch = async (action: any) => {
+      // compute next state synchronously via reducer
+      const next = masterReducer(stateRef.value, action);
+      stateRef.value = next;
+      // resolve pending promise after state commit microtask
+      if (resolveNext) {
+        const r = resolveNext;
+        resolveNext = null;
+        r();
+      }
+      return Promise.resolve();
+    };
+
+    const getState = () => stateRef.value;
+
+    // compose middlewares
+    const chain = props.middlewares.map(mw =>
+      mw({
+        getState,
+        dispatch: (a: any) => outerDispatch(a),
+      } as any),
+    );
+    const compose = (fns: ((arg: any) => any)[]) => (initial: any) =>
+      fns.reduceRight((v, f) => f(v), initial);
+    const outerDispatch = compose(chain)(async (action: any) => {
+      const promise = waitForCommit();
+      await realDispatch(action);
+      return promise;
+    });
+
+    // Bind controller with middleware API
+    props.controller.bindMiddleware({
+      getState,
+      dispatch: (a: any) => outerDispatch(a),
+    } as any);
+
+    // provide state and controller
+    provide(StateKey, stateRef);
+    provide(ControllerKey, props.controller);
+
+    // run managers' init/cleanup after mount via mgrEffect()
+    let cleanup: void | (() => void);
+    onMounted(() => {
+      cleanup = props.mgrEffect();
+    });
+    onUnmounted(() => {
+      if (cleanup) cleanup();
+    });
+
+    return () => (slots.default ? slots.default() : h('div'));
+  },
+});

packages/vue/src/components/getDefaultManagers.ts

@@ -0,0 +1,80 @@
+import type { DevToolsConfig, Manager } from '@data-client/core';
+import {
+  NetworkManager,
+  SubscriptionManager,
+  PollingSubscription,
+  DevToolsManager,
+} from '@data-client/core';
+
+/* istanbul ignore next */
+/** Returns the default Managers used by DataProvider. */
+let getDefaultManagers: (options?: GetManagersOptions) => Manager[] = (
+  options = {},
+) => {
+  const { networkManager, subscriptionManager = PollingSubscription } = options;
+  if (subscriptionManager === null) {
+    return [constructManager(NetworkManager, networkManager ?? ({} as any))];
+  }
+  return [
+    constructManager(NetworkManager, networkManager ?? ({} as any)),
+    constructManager(SubscriptionManager, subscriptionManager),
+  ];
+};
+/* istanbul ignore else */
+if (process.env.NODE_ENV !== 'production') {
+  getDefaultManagers = (options: GetManagersOptions = {}): Manager[] => {
+    const {
+      devToolsManager,
+      networkManager,
+      subscriptionManager = PollingSubscription,
+    } = options;
+    if (networkManager === null) {
+      console.error('Disabling NetworkManager is not allowed.');
+      // fall back to default options
+    }
+    const nm = constructManager(NetworkManager, networkManager ?? ({} as any));
+    const managers: Manager[] = [nm];
+    if (subscriptionManager !== null) {
+      managers.push(constructManager(SubscriptionManager, subscriptionManager));
+    }
+    if (devToolsManager !== null) {
+      let dtm: DevToolsManager;
+      if (devToolsManager instanceof DevToolsManager) {
+        dtm = devToolsManager;
+      } else {
+        dtm = new DevToolsManager(
+          devToolsManager as any,
+          nm.skipLogging.bind(nm),
+        );
+      }
+      managers.unshift(dtm);
+    }
+    return managers;
+  };
+}
+export { getDefaultManagers };
+
+function constructManager<M extends { new (...args: any): Manager }>(
+  Mgr: M,
+  optionOrInstance: InstanceType<M> | ConstructorArgs<M>,
+): InstanceType<M> {
+  if (optionOrInstance instanceof Mgr) {
+    return optionOrInstance as InstanceType<M>;
+  }
+  return new Mgr(optionOrInstance as any) as InstanceType<M>;
+}
+
+export type GetManagersOptions = {
+  devToolsManager?: DevToolsManager | DevToolsConfig | null;
+  networkManager?:
+    | NetworkManager
+    | ConstructorArgs<typeof NetworkManager>
+    | null;
+  subscriptionManager?:
+    | SubscriptionManager
+    | ConstructorArgs<typeof SubscriptionManager>
+    | null;
+};
+
+export type ConstructorArgs<T extends { new (...args: any): any }> =
+  T extends new (options: infer O) => any ? O : never;

packages/vue/src/components/index.ts

@@ -0,0 +1,2 @@
+export { default as DataProvider } from './DataProvider.js';
+export { getDefaultManagers } from './getDefaultManagers.js';

packages/vue/src/composables/index.ts

@@ -0,0 +1,5 @@
+export { default as useSuspense } from './useSuspense.js';
+export {
+  injectController as useController,
+  injectState as useStateRef,
+} from '../context.js';

packages/vue/src/composables/useInjects.ts

@@ -0,0 +1,12 @@
+import type { State } from '@data-client/core';
+import type { ShallowRef } from 'vue';
+
+import { injectController, injectState } from '../context.js';
+
+export function useController() {
+  return injectController();
+}
+
+export function useStateRef(): ShallowRef<State<unknown>> {
+  return injectState();
+}