@elyndra/vue-core 1.2.0

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@elyndra/vue-core",
+  "version": "1.2.0",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "Elyndra core components for Vue",
+  "keywords": [
+    "elyndra",
+    "ui",
+    "front-end",
+    "framework",
+    "scifi",
+    "sci-fi",
+    "science-fiction",
+    "vue"
+  ],
+  "homepage": "https://elyndra.dev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Gabox301/elyndra.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Gabox301/elyndra/issues"
+  },
+  "funding": "https://github.com/sponsors/romelperez",
+  "license": "MIT",
+  "files": [
+    "src"
+  ],
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "types": "./src/index.ts",
+  "module": "./src/index.ts",
+  "main": "./src/index.ts",
+  "peerDependencies": {
+    "vue": "3"
+  },
+  "dependencies": {
+    "@elyndra/animated": "^1.2.0",
+    "@elyndra/animator": "^1.2.0",
+    "@elyndra/bleeps": "^1.2.0",
+    "@elyndra/vue-animated": "^1.2.0",
+    "@elyndra/vue-animator": "^1.2.0",
+    "@elyndra/vue-bleeps": "^1.2.0",
+    "@elyndra/vue-tools": "^1.2.0",
+    "tslib": "2.8.1"
+  },
+  "scripts": {
+    "build": "tsc --noEmit -p tsconfig.json && vue-tsc --noEmit -p tsconfig.json"
+  }
+}

package/src/BleepsOnAnimator/BleepsOnAnimator.test.ts

@@ -0,0 +1,15 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import { expect, test } from 'vitest';
+import { BleepsOnAnimator } from './index.js';
+
+test('Should render nothing without animator and bleeps providers', async () => {
+  const wrapper = mount(BleepsOnAnimator, {
+    props: { transitions: {} },
+  });
+  await flushPromises();
+
+  // A renderless bridge leaves a comment placeholder behind, no elements.
+  expect(wrapper.element.nodeType).toBe(8);
+  expect(wrapper.find('*').exists()).toBe(false);
+  wrapper.unmount();
+});

package/src/BleepsOnAnimator/BleepsOnAnimator.ts

@@ -0,0 +1,73 @@
+import { type Bleep } from '@elyndra/bleeps';
+import { useAnimator } from '@elyndra/vue-animator';
+import { useBleeps } from '@elyndra/vue-bleeps';
+import { defineComponent, type PropType, watch } from 'vue';
+import type { Transitions } from '../types.js';
+
+let bleepsOnAnimatorIdCounter = 0;
+
+/**
+ * Renderless bridge: plays bleeps on animator state transitions. It is a
+ * `.ts` `defineComponent` (not an SFC) on purpose — there is no DOM output
+ * at all (`() => null`, same as the Solid adapter's `return null`), so an
+ * SFC template would only add a comment node and compiler overhead.
+ *
+ * Mechanical Vue port of the React/Preact/Solid `BleepsOnAnimator` bridge.
+ * Differences are Vue idiom only: a module counter replaces `useId` /
+ * `createUniqueId`, `watch` + `watch` cleanup replace `useEffect` /
+ * `createEffect` + `onCleanup`, and the animator is read through the
+ * `useAnimator` accessor.
+ */
+const BleepsOnAnimator = defineComponent({
+  name: 'BleepsOnAnimator',
+  props: {
+    id: { type: String, required: false, default: undefined },
+    transitions: { type: Object as PropType<Transitions<string>>, required: true },
+    continuous: { type: Boolean, required: false, default: undefined },
+  },
+  setup(props) {
+    const internalId = `bleeps-on-animator-${bleepsOnAnimatorIdCounter++}`;
+    const getAnimator = useAnimator();
+    const bleeps = useBleeps<string>();
+
+    watch(
+      // Tracked so the subscription follows prop updates.
+      () => [props.id ?? internalId, getAnimator?.()] as const,
+      ([id, animator], _previous, onCleanup) => {
+        if (!animator) {
+          return;
+        }
+
+        let currentBleep: Bleep | null = null;
+
+        const cancelSubscription = animator.node.subscribe((node) => {
+          const bleepName = props.transitions[node.state];
+
+          if (!props.continuous) {
+            currentBleep?.stop(id);
+          }
+
+          if (bleepName) {
+            const newBleep = (bleeps as Record<string, Bleep>)[bleepName];
+
+            if (newBleep) {
+              currentBleep?.stop(id);
+              currentBleep = newBleep;
+              currentBleep.play(id);
+            }
+          }
+        });
+
+        onCleanup(() => {
+          cancelSubscription();
+          currentBleep?.stop(id);
+        });
+      },
+      { immediate: true, flush: 'post' },
+    );
+
+    return () => null;
+  },
+});
+
+export { BleepsOnAnimator };

package/src/BleepsOnAnimator/index.ts

@@ -0,0 +1 @@
+export * from './BleepsOnAnimator.js';

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './BleepsOnAnimator/index.js';
+export type * from './types.js';

package/src/types.ts

@@ -0,0 +1,13 @@
+import type { AnimatorState } from '@elyndra/animator';
+
+type Transitions<BleepsNames extends string> = {
+  [p in AnimatorState]?: BleepsNames;
+};
+
+interface BleepsOnAnimatorProps<BleepsNames extends string = string> {
+  id?: string;
+  transitions: Transitions<BleepsNames>;
+  continuous?: boolean;
+}
+
+export type { BleepsOnAnimatorProps, Transitions };

package/src/vue.d.ts

@@ -0,0 +1,10 @@
+// In-repo ambient types for `.vue` imports (tests only). The published
+// package ships the `.vue` sources and consumers get full prop inference
+// from their own Vue setup. This package holds no `.vue` files itself, but
+// its type program reaches other packages' `.vue` sources through their
+// indexes, so the ambient is needed for plain `tsc` as well.
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const Component: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
+  export default Component;
+}