@uibit/text-typing 0.1.1 → 0.2.0

package/dist/frameworks/angular/index.ts

@@ -1,68 +1,82 @@
 import { Component, ChangeDetectionStrategy, ElementRef, input, effect, output, booleanAttribute, numberAttribute } from '@angular/core';
 import '@uibit/text-typing';
 import type { TextTyping as HTMLElementClass } from '@uibit/text-typing';
-
 @Component({
-  selector: 'uibit-text-typing',
-  template: '<ng-content></ng-content>',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-  host: {
-    '(phrase-change)': 'phraseChange.emit($event)'
-  }
+    selector: 'uibit-text-typing',
+    template: '<ng-content></ng-content>',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    host: {
+        '(phrase-change)': 'phraseChange.emit($event)'
+    }
 })
 export class NgxTextTyping {
-  constructor(private el: ElementRef<HTMLElementClass>) {
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.typeSpeed = this.typeSpeed();
-      }
+    constructor(private el: ElementRef<HTMLElementClass>){
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.typeSpeed = this.typeSpeed();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.deleteSpeed = this.deleteSpeed();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.pauseAfter = this.pauseAfter();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.pauseBefore = this.pauseBefore();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.typoRate = this.typoRate();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.showCursor = this.showCursor();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.loop = this.loop();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.locale = this.locale();
+            }
+        });
+    }
+    readonly typeSpeed = input<number, any>(80, {
+        transform: numberAttribute
     });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.deleteSpeed = this.deleteSpeed();
-      }
+    readonly deleteSpeed = input<number, any>(40, {
+        transform: numberAttribute
     });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.pauseAfter = this.pauseAfter();
-      }
+    readonly pauseAfter = input<number, any>(1800, {
+        transform: numberAttribute
     });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.pauseBefore = this.pauseBefore();
-      }
+    readonly pauseBefore = input<number, any>(400, {
+        transform: numberAttribute
     });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.typoRate = this.typoRate();
-      }
+    readonly typoRate = input<number, any>(0.04, {
+        transform: numberAttribute
     });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.showCursor = this.showCursor();
-      }
+    readonly showCursor = input<boolean, any>(true, {
+        transform: booleanAttribute
     });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.loop = this.loop();
-      }
+    readonly loop = input<boolean, any>(true, {
+        transform: booleanAttribute
     });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.locale = this.locale();
-      }
-    });
-  }
-
-  readonly typeSpeed = input<number, any>(80, { transform: numberAttribute });
-  readonly deleteSpeed = input<number, any>(40, { transform: numberAttribute });
-  readonly pauseAfter = input<number, any>(1800, { transform: numberAttribute });
-  readonly pauseBefore = input<number, any>(400, { transform: numberAttribute });
-  readonly typoRate = input<number, any>(0.04, { transform: numberAttribute });
-  readonly showCursor = input<boolean, any>(true, { transform: booleanAttribute });
-  readonly loop = input<boolean, any>(true, { transform: booleanAttribute });
-  readonly locale = input<string, any>('');
-
-  readonly phraseChange = output<CustomEvent<{ phrase: string, index: number }>>();
+    readonly locale = input<string>('');
+    readonly phraseChange = output<CustomEvent<{
+        phrase: string;
+        index: number;
+    }>>();
 }

package/dist/frameworks/astro/index.d.ts

@@ -4,7 +4,17 @@ import '@uibit/text-typing';
 declare global {
   namespace astroHTML.JSX {
     interface IntrinsicElements {
-      'uibit-text-typing': Partial<HTMLElementClass> & astroHTML.JSX.HTMLAttributes;
+      'uibit-text-typing': Partial<HTMLElementClass> & astroHTML.JSX.HTMLAttributes & {
+      typeSpeed?: number;
+      deleteSpeed?: number;
+      pauseAfter?: number;
+      pauseBefore?: number;
+      typoRate?: number;
+      showCursor?: boolean;
+      loop?: boolean;
+      locale?: string;
+      "on:phrase-change"?: (event: CustomEvent<{ phrase: string, index: number }>) => void;
+      };
     }
   }
 }

package/dist/frameworks/preact/index.d.ts

@@ -14,6 +14,8 @@ declare module 'preact' {
       showCursor?: boolean;
       loop?: boolean;
       locale?: string;
+      onPhraseChange?: (event: CustomEvent<{ phrase: string, index: number }>) => void;
+      "on:phrase-change"?: (event: CustomEvent<{ phrase: string, index: number }>) => void;
       };
     }
   }

package/dist/frameworks/react/index.ts

@@ -0,0 +1,149 @@
+import React, { useRef, useEffect, useLayoutEffect, useImperativeHandle } from 'react';
+import type { TextTyping as HTMLElementClass } from '@uibit/text-typing';
+import '@uibit/text-typing';
+const useTypeOfLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+export interface TextTypingProps extends Omit<React.HTMLAttributes<HTMLElementClass>, 'typeSpeed' | 'deleteSpeed' | 'pauseAfter' | 'pauseBefore' | 'typoRate' | 'showCursor' | 'loop' | 'locale' | 'onPhraseChange'> {
+    children?: React.ReactNode;
+    typeSpeed?: number;
+    deleteSpeed?: number;
+    pauseAfter?: number;
+    pauseBefore?: number;
+    typoRate?: number;
+    showCursor?: boolean;
+    loop?: boolean;
+    locale?: string;
+    onPhraseChange?: (event: CustomEvent<{
+        phrase: string;
+        index: number;
+    }>) => void;
+}
+export const TextTyping = ({ ref, children, ...props }: TextTypingProps & {
+    ref?: React.Ref<HTMLElementClass>;
+})=>{
+    const innerRef = useRef<HTMLElementClass>(null);
+    const propsRef = useRef(props);
+    propsRef.current = props;
+    useImperativeHandle(ref, ()=>innerRef.current!);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.typeSpeed !== undefined) {
+            (element as any).typeSpeed = props.typeSpeed;
+        }
+    }, [
+        props.typeSpeed
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.deleteSpeed !== undefined) {
+            (element as any).deleteSpeed = props.deleteSpeed;
+        }
+    }, [
+        props.deleteSpeed
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.pauseAfter !== undefined) {
+            (element as any).pauseAfter = props.pauseAfter;
+        }
+    }, [
+        props.pauseAfter
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.pauseBefore !== undefined) {
+            (element as any).pauseBefore = props.pauseBefore;
+        }
+    }, [
+        props.pauseBefore
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.typoRate !== undefined) {
+            (element as any).typoRate = props.typoRate;
+        }
+    }, [
+        props.typoRate
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.showCursor !== undefined) {
+            (element as any).showCursor = props.showCursor;
+        }
+    }, [
+        props.showCursor
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.loop !== undefined) {
+            (element as any).loop = props.loop;
+        }
+    }, [
+        props.loop
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.locale !== undefined) {
+            (element as any).locale = props.locale;
+        }
+    }, [
+        props.locale
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (!element) return;
+        const handleEvent = (event: Event)=>{
+            if (propsRef.current.onPhraseChange) {
+                propsRef.current.onPhraseChange(event as any);
+            }
+        };
+        element.addEventListener('phrase-change', handleEvent);
+        return ()=>{
+            element.removeEventListener('phrase-change', handleEvent);
+        };
+    }, []);
+    const domProps = {
+        ...props
+    };
+    const customPropNames = [
+        'typeSpeed',
+        'deleteSpeed',
+        'pauseAfter',
+        'pauseBefore',
+        'typoRate',
+        'showCursor',
+        'loop',
+        'locale',
+        'onPhraseChange'
+    ];
+    for (const key of customPropNames){
+        delete (domProps as any)[key];
+    }
+    return React.createElement('uibit-text-typing', {
+        ref: innerRef,
+        ...domProps
+    }, children);
+};
+declare global {
+    namespace React {
+        namespace JSX {
+            interface IntrinsicElements {
+                'uibit-text-typing': React.ClassAttributes<HTMLElementClass> & React.HTMLAttributes<HTMLElementClass> & {
+                    children?: React.ReactNode;
+                    class?: string;
+                    typeSpeed?: number;
+                    deleteSpeed?: number;
+                    pauseAfter?: number;
+                    pauseBefore?: number;
+                    typoRate?: number;
+                    showCursor?: boolean;
+                    loop?: boolean;
+                    locale?: string;
+                    onPhraseChange?: (event: CustomEvent<{
+                        phrase: string;
+                        index: number;
+                    }>) => void;
+                };
+            }
+        }
+    }
+}

package/dist/frameworks/solid/index.d.ts

@@ -14,7 +14,7 @@ declare module 'solid-js' {
       showCursor?: boolean;
       loop?: boolean;
       locale?: string;
-      "on:phrase-change"?: (event: CustomEvent) => void;
+      "on:phrase-change"?: (event: CustomEvent<{ phrase: string, index: number }>) => void;
       };
     }
   }

package/dist/frameworks/stencil/index.d.ts

@@ -13,6 +13,8 @@ declare module '@stencil/core' {
     showCursor?: boolean;
     loop?: boolean;
     locale?: string;
+    onPhraseChange?: (event: CustomEvent<{ phrase: string, index: number }>) => void;
+    "on:phrase-change"?: (event: CustomEvent<{ phrase: string, index: number }>) => void;
       };
     }
   }

package/dist/frameworks/svelte/index.svelte

@@ -1,19 +1,20 @@
 <script lang="ts">
   import '@uibit/text-typing';
   import type { TextTyping as HTMLElementClass } from '@uibit/text-typing';
-  
-  let {
-    typeSpeed = undefined,
-      deleteSpeed = undefined,
-      pauseAfter = undefined,
-      pauseBefore = undefined,
-      typoRate = undefined,
-      showCursor = undefined,
-      loop = undefined,
-      locale = undefined,
-      children
+
+let {
+    typeSpeed = $bindable(),
+    deleteSpeed = $bindable(),
+    pauseAfter = $bindable(),
+    pauseBefore = $bindable(),
+    typoRate = $bindable(),
+    showCursor = $bindable(),
+    loop = $bindable(),
+    locale = $bindable(),
+    children,
+    ...restProps
   } = $props<{
-    children?: any;
+    children?: import('svelte').Snippet;
     typeSpeed?: number;
     deleteSpeed?: number;
     pauseAfter?: number;
@@ -22,41 +23,84 @@
     showCursor?: boolean;
     loop?: boolean;
     locale?: string;
-  
+
+    [key: string]: any;
   }>();
-  
-  let elementRef: HTMLElementClass | null = $state(null);
-  
-  $effect(() => {
-    if (elementRef && typeSpeed !== undefined) {
+
+let elementRef: HTMLElementClass | null = $state(null);
+
+$effect(() => {
+    if (elementRef && typeSpeed !== undefined && elementRef.typeSpeed !== typeSpeed) {
       elementRef.typeSpeed = typeSpeed;
     }
-    if (elementRef && deleteSpeed !== undefined) {
+    if (elementRef && deleteSpeed !== undefined && elementRef.deleteSpeed !== deleteSpeed) {
       elementRef.deleteSpeed = deleteSpeed;
     }
-    if (elementRef && pauseAfter !== undefined) {
+    if (elementRef && pauseAfter !== undefined && elementRef.pauseAfter !== pauseAfter) {
       elementRef.pauseAfter = pauseAfter;
     }
-    if (elementRef && pauseBefore !== undefined) {
+    if (elementRef && pauseBefore !== undefined && elementRef.pauseBefore !== pauseBefore) {
       elementRef.pauseBefore = pauseBefore;
     }
-    if (elementRef && typoRate !== undefined) {
+    if (elementRef && typoRate !== undefined && elementRef.typoRate !== typoRate) {
       elementRef.typoRate = typoRate;
     }
-    if (elementRef && showCursor !== undefined) {
+    if (elementRef && showCursor !== undefined && elementRef.showCursor !== showCursor) {
       elementRef.showCursor = showCursor;
     }
-    if (elementRef && loop !== undefined) {
+    if (elementRef && loop !== undefined && elementRef.loop !== loop) {
       elementRef.loop = loop;
     }
-    if (elementRef && locale !== undefined) {
+    if (elementRef && locale !== undefined && elementRef.locale !== locale) {
       elementRef.locale = locale;
     }
   });
-  
+
+$effect(() => {
+    const element = elementRef;
+    if (!element) return;
+
+    const handleEvent = () => {
+      if (typeSpeed !== element.typeSpeed) {
+        typeSpeed = element.typeSpeed as any;
+      }
+      if (deleteSpeed !== element.deleteSpeed) {
+        deleteSpeed = element.deleteSpeed as any;
+      }
+      if (pauseAfter !== element.pauseAfter) {
+        pauseAfter = element.pauseAfter as any;
+      }
+      if (pauseBefore !== element.pauseBefore) {
+        pauseBefore = element.pauseBefore as any;
+      }
+      if (typoRate !== element.typoRate) {
+        typoRate = element.typoRate as any;
+      }
+      if (showCursor !== element.showCursor) {
+        showCursor = element.showCursor as any;
+      }
+      if (loop !== element.loop) {
+        loop = element.loop as any;
+      }
+      if (locale !== element.locale) {
+        locale = element.locale as any;
+      }
+    };
+
+    const events = ['change', 'input', 'phrase-change'];
+    for (const event of events) {
+      element.addEventListener(event, handleEvent);
+    }
+    return () => {
+      for (const event of events) {
+        element.removeEventListener(event, handleEvent);
+      }
+    };
+  });
+
 </script>
 
-<uibit-text-typing bind:this={elementRef} {...$$restProps}>
+<uibit-text-typing bind:this={elementRef} {...restProps}>
 
   {#if children}
     {@render children()}

package/dist/frameworks/vue/index.ts

@@ -1,31 +1,153 @@
-import { defineComponent, h } from 'vue';
+import { defineComponent, h, ref, watch } from 'vue';
 import type { TextTyping as HTMLElementClass } from '@uibit/text-typing';
 import '@uibit/text-typing';
-
 export const TextTyping = defineComponent({
-  name: 'TextTyping',
-  props: {
-    typeSpeed: { type: [String, Number, Boolean, Array, Object] as any },
-    deleteSpeed: { type: [String, Number, Boolean, Array, Object] as any },
-    pauseAfter: { type: [String, Number, Boolean, Array, Object] as any },
-    pauseBefore: { type: [String, Number, Boolean, Array, Object] as any },
-    typoRate: { type: [String, Number, Boolean, Array, Object] as any },
-    showCursor: { type: [String, Number, Boolean, Array, Object] as any },
-    loop: { type: [String, Number, Boolean, Array, Object] as any },
-    locale: { type: [String, Number, Boolean, Array, Object] as any }
-  },
-  emits: ['phrase-change'],
-  setup(props, { slots, emit }) {
-    return () => {
-      const eventListeners: Record<string, any> = {};
-      eventListeners['onPhrase-change'] = (event: Event) => {
-        emit('phrase-change', event);
-      };
-
-      return h('uibit-text-typing', {
-        ...props,
-        ...eventListeners
-      }, slots.default?.());
-    };
-  }
+    name: 'TextTyping',
+    props: {
+        typeSpeed: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        deleteSpeed: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        pauseAfter: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        pauseBefore: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        typoRate: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        showCursor: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        loop: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        locale: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        }
+    },
+    emits: [
+        'phrase-change'
+    ],
+    setup (props, { slots, emit }) {
+        const elementRef = ref<HTMLElementClass | null>(null);
+        if (false) {
+            watch(()=>props.modelValue, (newVal)=>{
+                if (elementRef.value && newVal !== undefined && elementRef.value.value !== newVal) {
+                    elementRef.value.value = newVal;
+                }
+            });
+            watch(()=>props.value, (newVal)=>{
+                if (elementRef.value && newVal !== undefined && elementRef.value.value !== newVal) {
+                    elementRef.value.value = newVal;
+                }
+            });
+        }
+        watch(()=>props.typeSpeed, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).typeSpeed = newVal;
+            }
+        });
+        watch(()=>props.deleteSpeed, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).deleteSpeed = newVal;
+            }
+        });
+        watch(()=>props.pauseAfter, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).pauseAfter = newVal;
+            }
+        });
+        watch(()=>props.pauseBefore, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).pauseBefore = newVal;
+            }
+        });
+        watch(()=>props.typoRate, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).typoRate = newVal;
+            }
+        });
+        watch(()=>props.showCursor, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).showCursor = newVal;
+            }
+        });
+        watch(()=>props.loop, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).loop = newVal;
+            }
+        });
+        watch(()=>props.locale, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).locale = newVal;
+            }
+        });
+        return ()=>{
+            const eventListeners: Record<string, any> = {};
+            eventListeners['onPhrase-change'] = (event: Event)=>{
+                emit('phrase-change', event);
+            };
+            const mergedProps = {
+                ...props,
+                ...eventListeners,
+                ref: elementRef
+            };
+            if (false && props.modelValue !== undefined) {
+                (mergedProps as any).value = props.modelValue;
+            }
+            return h('uibit-text-typing', mergedProps, slots.default?.());
+        };
+    }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uibit/text-typing",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Headline text block that cycles through marketing phrases with a realistic typing and deleting animation. Includes speed variance, simulated auto-correcting typos, and a blinking cursor.",
   "type": "module",
   "main": "./dist/index.js",
@@ -11,7 +11,7 @@
       "import": "./dist/index.js"
     },
     "./custom-elements.json": "./custom-elements.json",
-    "./react": "./dist/frameworks/react/index.d.ts",
+    "./react": "./dist/frameworks/react/index.ts",
     "./vue": "./dist/frameworks/vue/index.ts",
     "./svelte": "./dist/frameworks/svelte/index.svelte",
     "./angular": "./dist/frameworks/angular/index.ts",
@@ -52,7 +52,7 @@
     "@types/node": "^20.19.43",
     "lit": "^3.3.3",
     "typescript": "7.0.2",
-    "@uibit/codegen": "0.1.0"
+    "@uibit/codegen": "0.2.0"
   },
   "peerDependencies": {
     "lit": "^3.0.0",

package/dist/frameworks/react/index.d.ts

@@ -1,25 +0,0 @@
-import type { HTMLAttributes, ClassAttributes } from 'react';
-import type { TextTyping as HTMLElementClass } from '@uibit/text-typing';
-import '@uibit/text-typing';
-
-declare global {
-  namespace React {
-    namespace JSX {
-      interface IntrinsicElements {
-        'uibit-text-typing': ClassAttributes<HTMLElementClass> & HTMLAttributes<HTMLElementClass> & {
-          children?: React.ReactNode;
-          class?: string;
-      typeSpeed?: number;
-      deleteSpeed?: number;
-      pauseAfter?: number;
-      pauseBefore?: number;
-      typoRate?: number;
-      showCursor?: boolean;
-      loop?: boolean;
-      locale?: string;
-      onPhraseChange?: (event: any) => void;
-        };
-      }
-    }
-  }
-}