@aerogel/core 0.1.0 → 0.1.1-next.1a964fb10cbea49d0eed8de0623c9b71ce8442f4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@aerogel/core",
-    "version": "0.1.0",
+    "version": "0.1.1-next.1a964fb10cbea49d0eed8de0623c9b71ce8442f4",
     "type": "module",
     "sideEffects": false,
     "exports": {

package/src/components/ui/Form.vue

@@ -1,5 +1,5 @@
 <template>
-    <form @submit.prevent="form?.submit()">
+    <form @submit.prevent="form ? form.submit() : $emit('submit')">
         <slot />
     </form>
 </template>

package/src/directives/index.ts

@@ -3,22 +3,26 @@ import type { Directive } from 'vue';
 import { definePlugin } from '@aerogel/core/plugins';
 
 import measure from './measure';
+import safeHtml from './safe-html';
 
-const builtInDirectives: Record<string, Directive> = {
-    measure: measure,
-};
+export const aerogelDirectives = {
+    'measure': measure,
+    'safe-html': safeHtml,
+} as const satisfies Record<string, Directive>;
+
+export type AerogelDirectives = typeof aerogelDirectives;
 
 export * from './measure';
 
 export default definePlugin({
     install(app, options) {
         const directives = {
-            ...builtInDirectives,
+            ...aerogelDirectives,
             ...options.directives,
         };
 
         for (const [name, directive] of Object.entries(directives)) {
-            app.directive(name, directive);
+            app.directive(name, directive as Directive);
         }
     },
 });
@@ -30,7 +34,5 @@ declare module '@aerogel/core/bootstrap/options' {
 }
 
 declare module 'vue' {
-    interface ComponentCustomDirectives {
-        measure: Directive<string, string>;
-    }
+    interface ComponentCustomDirectives extends AerogelDirectives {}
 }

package/src/directives/safe-html.ts

@@ -0,0 +1,10 @@
+import { safeHtml } from '@aerogel/core/utils';
+import { defineDirective } from '@aerogel/core/utils/vue';
+
+export type SafeHTMLDirectiveValue = string;
+
+export default defineDirective<SafeHTMLDirectiveValue>({
+    mounted(element: HTMLElement, { value }) {
+        element.innerHTML = safeHtml(value);
+    },
+});

package/src/utils/composition/reactiveSet.test.ts

@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'vitest';
+import { nextTick, watchEffect } from 'vue';
+
+import { reactiveSet } from './reactiveSet';
+
+describe('Vue reactiveSet', () => {
+
+    it('watches updates', async () => {
+        // Arrange
+        const set = reactiveSet();
+        let updates = 0;
+
+        watchEffect(() => (set.has('foo'), updates++));
+
+        // Act
+        set.add('foo');
+        await nextTick();
+
+        set.add('bar');
+        await nextTick();
+
+        set.add('baz');
+        await nextTick();
+
+        set.reset();
+        await nextTick();
+
+        // Assert
+        expect(updates).toEqual(5);
+    });
+
+});

package/src/utils/composition/reactiveSet.ts

@@ -0,0 +1,53 @@
+import { fail } from '@noeldemartin/utils';
+import { customRef } from 'vue';
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export function reactiveSet<T>(initial?: T[] | Set<T>) {
+    let set: Set<T> = new Set(initial);
+    let trigger: () => void;
+    let track: () => void;
+    const ref = customRef((_track, _trigger) => {
+        track = _track;
+        trigger = _trigger;
+
+        return {
+            get: () => set,
+            set: () => fail('Attempted to write read-only reactive set'),
+        };
+    });
+
+    return {
+        values() {
+            track();
+
+            return Array.from(ref.value.values());
+        },
+        has(item: T) {
+            track();
+
+            return ref.value.has(item);
+        },
+        add(item: T) {
+            trigger();
+
+            ref.value.add(item);
+        },
+        delete(item: T) {
+            trigger();
+
+            ref.value.delete(item);
+        },
+        clear() {
+            trigger();
+
+            ref.value.clear();
+        },
+        reset(items?: T[] | Set<T>) {
+            trigger();
+
+            set = new Set(items);
+        },
+    };
+}
+
+export type ReactiveSet<T = unknown> = ReturnType<typeof reactiveSet<T>>;

package/src/utils/index.ts

@@ -4,6 +4,7 @@ export * from './composition/events';
 export * from './composition/forms';
 export * from './composition/hooks';
 export * from './composition/persistent';
+export * from './composition/reactiveSet';
 export * from './composition/state';
 export * from './markdown';
 export * from './types';