@elyndra/vue-effects 1.2.0

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@elyndra/vue-effects",
+  "version": "1.2.0",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "Elyndra effects 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/effects": "^1.2.0",
+    "@elyndra/frames": "^1.2.0",
+    "@elyndra/tools": "^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/Illuminator/Illuminator.test.ts

@@ -0,0 +1,15 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import { expect, test } from 'vitest';
+import { Illuminator } from './index.js';
+
+test('Should render div element with elyndra class', async () => {
+  const wrapper = mount(Illuminator, {
+    props: { color: 'cyan', size: 300 },
+  });
+  await flushPromises();
+
+  const element = wrapper.element as HTMLElement;
+  expect(element.tagName).toBe('DIV');
+  expect(element.classList.contains('elyndra-frames-illuminator')).toBe(true);
+  wrapper.unmount();
+});

package/src/Illuminator/Illuminator.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { createEffectIlluminator } from '@elyndra/effects';
+import { cx } from '@elyndra/tools';
+import { mergeRefs } from '@elyndra/vue-tools';
+import { ref, watch } from 'vue';
+import type { IlluminatorProps } from '../types.js';
+
+const props = defineProps<IlluminatorProps>();
+
+const container = ref<HTMLDivElement | null>(null);
+
+// Vue types element ref callbacks with the full
+// `Element | ComponentPublicInstance | null` union; `unknown` keeps the
+// callback assignable and the cast narrows to this component's element.
+const setContainerRef = (value: unknown): void => {
+  const element = value as HTMLDivElement | null;
+  container.value = element;
+  mergeRefs(props.elementRef)(element);
+};
+
+watch(
+  () => [container.value, props.color, props.size] as const,
+  ([currentContainer, color, size], _previous, onCleanup) => {
+    if (!currentContainer) {
+      return;
+    }
+
+    const illuminator = createEffectIlluminator({ container: currentContainer, color, size });
+
+    onCleanup(() => illuminator.cancel());
+  },
+  { immediate: true, flush: 'post' },
+);
+</script>
+
+<template>
+  <div
+    :ref="setContainerRef"
+    role="presentation"
+    :class="cx('elyndra-frames-illuminator', props.className)"
+    :style="{
+      position: 'absolute',
+      inset: 0,
+      overflow: 'hidden',
+      width: '100%',
+      height: '100%',
+      ...props.style,
+    }"
+  >
+    <slot />
+  </div>
+</template>

package/src/Illuminator/index.ts

@@ -0,0 +1 @@
+export { default as Illuminator } from './Illuminator.vue';

package/src/IlluminatorSVG/IlluminatorSVG.test.ts

@@ -0,0 +1,30 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import { defineComponent, h, ref } from 'vue';
+import { expect, test } from 'vitest';
+import { IlluminatorSVG } from './index.js';
+
+test('Should render g element with elyndra class inside svg', async () => {
+  const svgRef = { current: null as SVGSVGElement | null };
+
+  const Harness = defineComponent({
+    setup() {
+      const svg = ref<SVGSVGElement | null>(null);
+      return () =>
+        h('svg', {
+          ref: (value: unknown) => {
+            const element = value as SVGSVGElement | null;
+            svg.value = element;
+            svgRef.current = element;
+          },
+        }, [h(IlluminatorSVG, { svgRef })]);
+    },
+  });
+
+  const wrapper = mount(Harness);
+  await flushPromises();
+
+  const element = wrapper.find('g');
+  expect(element.exists()).toBe(true);
+  expect((element.element as SVGElement).classList.contains('elyndra-frames-illuminatorsvg')).toBe(true);
+  wrapper.unmount();
+});

package/src/IlluminatorSVG/IlluminatorSVG.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { createEffectIlluminatorSVG } from '@elyndra/effects';
+import { cx } from '@elyndra/tools';
+import { mergeRefs } from '@elyndra/vue-tools';
+import { ref, watch } from 'vue';
+import type { IlluminatorSVGProps } from '../types.js';
+
+const props = defineProps<IlluminatorSVGProps>();
+
+const container = ref<SVGGElement | null>(null);
+
+// Vue types element ref callbacks with the full
+// `Element | ComponentPublicInstance | null` union; `unknown` keeps the
+// callback assignable and the cast narrows to this component's element.
+const setContainerRef = (value: unknown): void => {
+  const element = value as SVGGElement | null;
+  container.value = element;
+  mergeRefs(props.elementRef)(element);
+};
+
+watch(
+  () => [container.value, props.svgRef.current, props.color, props.size] as const,
+  ([currentContainer, svg, color, size], _previous, onCleanup) => {
+    if (!svg || !currentContainer) {
+      return;
+    }
+
+    const effect = createEffectIlluminatorSVG({ svg, container: currentContainer, size, color });
+
+    onCleanup(() => effect.cancel());
+  },
+  { immediate: true, flush: 'post' },
+);
+</script>
+
+<template>
+  <g
+    :ref="setContainerRef"
+    :class="cx('elyndra-frames-illuminatorsvg', props.className)"
+    :style="{
+      'pointer-events': 'none',
+      ...props.style,
+    }"
+  >
+    <slot />
+  </g>
+</template>

package/src/IlluminatorSVG/index.ts

@@ -0,0 +1 @@
+export { default as IlluminatorSVG } from './IlluminatorSVG.vue';

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './Illuminator/index.js';
+export * from './IlluminatorSVG/index.js';
+export type * from './types.js';

package/src/types.ts

@@ -0,0 +1,23 @@
+import type { CSSProperties } from 'vue';
+import type { CreateEffectIlluminatorProps, CreateEffectIlluminatorSVGProps } from '@elyndra/effects';
+import type { ElementRef } from '@elyndra/vue-tools';
+
+interface IlluminatorProps extends Omit<CreateEffectIlluminatorProps, 'container' | 'className' | 'style'> {
+  elementRef?: ElementRef<HTMLDivElement>;
+  className?: string;
+  style?: CSSProperties;
+}
+
+interface IlluminatorSVGProps extends Omit<
+  CreateEffectIlluminatorSVGProps,
+  'svg' | 'container' | 'className' | 'style'
+> {
+  elementRef?: ElementRef<SVGGElement>;
+  svgRef: { current: SVGSVGElement | null };
+  className?: string;
+  style?: CSSProperties;
+  color?: string;
+  size?: number;
+}
+
+export type { ElementRef, IlluminatorProps, IlluminatorSVGProps };

package/src/vue.d.ts

@@ -0,0 +1,8 @@
+// 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.
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const Component: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
+  export default Component;
+}