vevet 3.13.0 → 3.14.0

package/src/components/SplitText/index.ts

@@ -2,12 +2,17 @@ import { selectOne } from 'vevet-dom';
 import { Component as ComponentClass } from '@/base/Component';
 import { NSplitText } from './types';
 import { onResize } from '@/utils/listeners/onResize';
+import { splitBase } from './utils/splitBase';
+import { wrapLines } from './utils/wrapLines';
+import { getApp } from '@/utils/internal/getApp';
 
 export type { NSplitText };
 
 /**
  * Split text into letters, words & lines.
  * Usually used for text animation.
+ *
+ * Apply `fontKerning: none` to your container to prevent large layout shifts
  */
 export class SplitText<
   StaticProps extends NSplitText.IStaticProps = NSplitText.IStaticProps,
@@ -20,26 +25,37 @@ export class SplitText<
     return {
       ...super._getDefaultProps(),
       container: `#${this.prefix}`,
-      textSource: 'innerText',
       hasLetters: true,
       hasLines: false,
+      letterTag: 'span',
+      wordTag: 'span',
+      lineTag: 'span',
       viewportTarget: 'any',
       resizeDebounce: 0,
     };
   }
 
   get prefix() {
-    return `${this.app.prefix}split-text`;
+    return `${getApp().prefix}split-text`;
   }
 
-  /** Initial text */
-  protected _initialText: string;
+  get letterClassName() {
+    return this.className('__letter');
+  }
+
+  get wordClassName() {
+    return this.className('__word');
+  }
+
+  get lineClassName() {
+    return this.className('__line');
+  }
 
   /** Initial HTML content */
   protected _initialHTML: string;
 
-  /** If the text is already split into letters and words */
-  protected _isBaseSplit: boolean;
+  /** If the text is already split into words & letters */
+  protected _isBaseSplit = false;
 
   /** Text container */
   protected _container: HTMLElement;
@@ -73,31 +89,23 @@ export class SplitText<
     return this._lines;
   }
 
+  /** What `wrapLines` returns */
+  protected _lineWrapper?: ReturnType<typeof wrapLines>;
+
   constructor(initialProps: StaticProps & ChangeableProps, canInit = true) {
     super(initialProps, false);
 
     // get text container
     this._container = selectOne(this.props.container) as HTMLElement;
     this.toggleClassName(this._container, this.className(''), true);
+
+    // attributes
     this._container.translate = false;
 
-    // initial html
+    // save initial html
     this._initialHTML = this._container.innerHTML;
 
-    // get initial text
-    const innerText = this._container[this.props.textSource]!.trim();
-    this._initialText = innerText || 'no rendered text';
-    this._initialText = this._initialText.replace(/\s+\n/gm, '\n');
-    this._initialText = this._initialText.replace(
-      /<br( ?)(\/?)>/gm,
-      String.fromCharCode(10),
-    );
-
-    // a11y
-    this._container.ariaLabel = this._initialText;
-
     // set default vars
-    this._isBaseSplit = false;
     this._letters = [];
     this._words = [];
     this._lines = [];
@@ -137,16 +145,7 @@ export class SplitText<
 
   /** Split the text */
   public splitText() {
-    // split into words & letters
-    if (!this._isBaseSplit) {
-      this.container.innerHTML = '';
-
-      this._splitIntoWords();
-      this._splitIntoLetters();
-      this._appendWords();
-
-      this._isBaseSplit = true;
-    }
+    this._splitBase();
 
     // split text into lines
     if (this.props.hasLines) {
@@ -157,227 +156,58 @@ export class SplitText<
     this.callbacks.tbt('split', undefined);
   }
 
-  /** Split the text into words */
-  protected _splitIntoWords() {
-    const chars = this._initialText.split('');
-
-    // create words
-    let wordIndex = 0;
-    chars.forEach((char) => {
-      const element = document.createElement('span');
-      element.classList.add(this.className('__word'));
-      element.setAttribute('aria-hidden', 'true');
-      element.style.display = 'inline-block';
-
-      // get an existing word or create a base for a new one
-      const currentWord: NSplitText.IWord = this._words[wordIndex] ?? {
-        element,
-        textContent: '',
-        hasNewLine: false,
-        letters: [],
-      };
-      this._words[wordIndex] = currentWord;
-
-      // get type of the char
-      const charCode = char.charCodeAt(0);
-      const isWhitespace = charCode === 32 || charCode === 160;
-      const isSeparator = [45, 8208, 8211, 8212, 8722].includes(charCode);
-      const isNewLine = charCode === 10;
-
-      // add whitespace
-      if (isWhitespace) {
-        currentWord.whitespace = document.createTextNode(' ');
-      }
-
-      // add newline
-      if (isNewLine) {
-        currentWord.br = document.createElement('br');
-      }
-
-      // update word states
-      currentWord.hasNewLine = isNewLine;
-
-      // go to next word if needed
-      if (isWhitespace || isNewLine) {
-        wordIndex += 1;
-
-        return;
-      }
-
-      // update contents
-      currentWord.textContent += char;
-      if (!this.props.hasLetters) {
-        currentWord.element.innerHTML = currentWord.textContent;
-      }
-
-      // go to next word if needed
-      if (isSeparator) {
-        wordIndex += 1;
-      }
-    });
-
-    // only filled words
-    this._words = this._words.filter((word, index) => {
-      if (word.textContent.length === 0) {
-        if (index > 0) {
-          this._words[index - 1].whitespace = word.whitespace;
-          this._words[index - 1].br = word.br;
-        }
-
-        return false;
-      }
-
-      return true;
-    });
-
-    // add classnames
-    let prevWord: NSplitText.IWord | undefined;
-    this._words.forEach((word) => {
-      if (prevWord && !!prevWord.whitespace) {
-        word.element.classList.add(this.className('pre-whitespace'));
-      }
+  /** Split base */
+  private _splitBase() {
+    if (this._isBaseSplit) {
+      return;
+    }
 
-      if (word.whitespace) {
-        word.element.classList.add(this.className('has-whitespace'));
-      }
+    const { container, letterClassName, wordClassName } = this;
+    const { letterTag, wordTag } = this.props;
 
-      prevWord = word;
-    });
-  }
+    this._isBaseSplit = true;
 
-  /** Split the text into letters */
-  protected _splitIntoLetters() {
-    // check if need to have letters
-    if (!this.props.hasLetters) {
-      return;
-    }
+    // split text
 
-    // create letters
-    this._words.forEach((word) => {
-      const chars = word.textContent.split('');
-      const wordLetters: NSplitText.ILetter[] = [];
-
-      chars.forEach((char) => {
-        const element = document.createElement('span');
-        element.classList.add(this.className('__letter'));
-        element.setAttribute('aria-hidden', 'true');
-        element.innerHTML = char;
-        element.style.display = 'inline-block';
-
-        const letter: NSplitText.ILetter = {
-          element,
-          textContent: char,
-          word,
-        };
-
-        this._letters.push(letter);
-        wordLetters.push(letter);
-      });
-
-      // eslint-disable-next-line no-param-reassign
-      word.letters = wordLetters;
+    const { helper, words, letters } = splitBase({
+      container,
+      letterClassName,
+      wordClassName,
+      hasLetters: this.props.hasLetters,
+      letterTag,
+      wordTag,
     });
 
-    // append letters
-    this._letters.forEach(({ element, word }) => {
-      word.element.appendChild(element);
-    });
-  }
+    // append nodes
 
-  /** Append split words to the container */
-  protected _appendWords() {
-    this._words.forEach((word) => {
-      this.container.appendChild(word.element);
+    while (container.childNodes[0]) {
+      container.childNodes[0].remove();
+    }
 
-      if (word.whitespace) {
-        this.container.appendChild(word.whitespace);
-      }
+    while (helper.childNodes[0]) {
+      container.appendChild(helper.childNodes[0]);
+    }
 
-      if (word.br) {
-        this.container.appendChild(word.br);
-      }
-    });
+    // update elements
+    this._words = words;
+    this._letters = letters;
   }
 
   /** Split the text into lines */
   protected _splitIntoLines() {
-    // first of all, remove all previous lines
-    this._removeLines();
-
-    // create lines
-    let currentLine: NSplitText.ILine | undefined;
-    let prevOffsetTop = Infinity;
-    let prevWord: NSplitText.IWord | undefined;
-
-    this.words.forEach((word) => {
-      // check if need to create a new line
-      let isNewLine = false;
-      const top = word.element.offsetTop;
-
-      // check if the previous word contains BR
-      if (!!prevWord && !!prevWord.br) {
-        isNewLine = true;
-      } else {
-        // otherwise check offset
-        isNewLine = top !== prevOffsetTop;
-      }
-
-      // update vars
-      prevWord = word;
-      prevOffsetTop = top;
-
-      // create new line
-      if (isNewLine) {
-        const element = document.createElement('span');
-        element.classList.add(this.className('__line'));
-        element.setAttribute('aria-hidden', 'true');
-        element.style.display = 'block';
-
-        currentLine = {
-          element,
-          textContent: '',
-          words: [],
-        };
-
-        this._lines.push(currentLine);
-      }
-
-      // append words
-      if (currentLine) {
-        currentLine.words.push(word);
-      }
-    });
-
-    // update lines content
-    this._lines.forEach((line) => {
-      // eslint-disable-next-line no-param-reassign
-      line.textContent = line.words.map((word) => word.textContent).join(' ');
-    });
-
-    // append lines
-    this._lines.forEach((line) => {
-      line.words.forEach((word) => {
-        line.element.appendChild(word.element);
+    const { container, words, lineClassName } = this;
+    const { lineTag } = this.props;
 
-        if (word.br) {
-          word.br.remove();
-        }
+    this._lineWrapper?.destroy();
 
-        if (word.whitespace) {
-          line.element.appendChild(word.whitespace);
-        }
-      });
-
-      this.container.appendChild(line.element);
+    this._lineWrapper = wrapLines({
+      container,
+      words,
+      className: lineClassName,
+      tagName: lineTag,
     });
-  }
-
-  /** Remove all lines */
-  protected _removeLines() {
-    this._lines.forEach(({ element }) => element.remove());
-    this._lines = [];
 
-    this._appendWords();
+    this._lines = this._lineWrapper.lines;
   }
 
   /** Destroy the module */

package/src/components/SplitText/stories/index.stories.tsx

@@ -7,7 +7,7 @@ const meta: Meta<TComponent> = {
   title: 'Components/SplitText',
   component: Component,
   args: {
-    text: 'Lorem‐ipsum-dolor- sit - amet consectetur adipisicing elit. <br>Recusandae totam-<br /> ipsum unde -quaerat magni maiores voluptate quidem laboriosam repellendus libero dolore ut est perferendis dignissimos laborum, quis ad veniam?<br/>Incidunt?',
+    text: ' <b>Lorem</b>ipsum dolor <b style="color: red;">sit</b> amet,&nbsp;consectetur adipiscing elit, <span style="color: blue;">sed <b><i>d</i>o</b></span> eius<b>m<i>od</i></b> tempor <i>incididunt ut</i> labore et dolore magna aliqua. <br /> <br /> <button type="button" style="font: inherit; background-color: #ccc;">Ut enim</button> ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ',
   },
 };
 
@@ -15,14 +15,23 @@ export default meta;
 
 export const Default: StoryObj<TComponent> = {};
 
-export const WithLines: StoryObj<TComponent> = {
+export const WithLetters: StoryObj<TComponent> = {
   args: {
-    hasLines: true,
+    hasLetters: true,
+    hasLines: false,
   },
 };
 
-export const WithoutLetter: StoryObj<TComponent> = {
+export const WithWords: StoryObj<TComponent> = {
   args: {
     hasLetters: false,
+    hasLines: false,
+  },
+};
+
+export const WithLines: StoryObj<TComponent> = {
+  args: {
+    hasLetters: false,
+    hasLines: true,
   },
 };

package/src/components/SplitText/stories/index.tsx

@@ -1,26 +1,44 @@
+/* eslint-disable react/no-danger */
 import React, { FC, useEffect, useRef } from 'react';
-import { SplitText, NSplitText } from '..';
+import { NSplitText } from '../types';
+import { SplitText } from '..';
 
 interface IProps extends Omit<NSplitText.IStaticProps, 'parent' | 'container'> {
   text: string;
 }
 
-export const Component: FC<IProps> = ({ text, ...props }) => {
+export const Component: FC<IProps> = ({ text, hasLetters, hasLines }) => {
   const ref = useRef<HTMLHeadingElement>(null);
 
   useEffect(() => {
-    if (!ref.current) {
+    const container = ref.current;
+    if (!container) {
       return undefined;
     }
 
     const instance = new SplitText({
-      ...props,
-      container: ref.current,
+      container,
+      hasLetters,
+      hasLines,
     });
 
     return () => instance.destroy();
-  }, [props]);
+  }, [hasLetters, hasLines]);
 
-  // eslint-disable-next-line react/no-danger
-  return <h1 ref={ref} dangerouslySetInnerHTML={{ __html: text }} />;
+  const style = { fontSize: '30px', fontKerning: 'none' } as any;
+
+  return (
+    <>
+      <h1>Vevet</h1>
+
+      <div ref={ref} style={style} dangerouslySetInnerHTML={{ __html: text }} />
+
+      <br />
+      <br />
+
+      <h1>Reference text</h1>
+
+      <div style={style} dangerouslySetInnerHTML={{ __html: text }} />
+    </>
+  );
 };

package/src/components/SplitText/types.ts

@@ -2,18 +2,11 @@ import { NComponent } from '@/base/Component/types';
 import { TOnResizeTarget } from '@/utils/listeners/onResize';
 
 export namespace NSplitText {
-  export type TTextSource = 'textContent' | 'innerText' | 'innerHTML';
-
   export interface IStaticProps extends NComponent.IStaticProps {
     /**
      * The text container. You may use a CSS selector or the element itself
      */
     container: string | Element;
-    /**
-     * Text content
-     * @default 'innerText'
-     */
-    textSource?: TTextSource;
     /**
      * If need to split text into letters.
      * @default true
@@ -24,6 +17,21 @@ export namespace NSplitText {
      * @default false
      */
     hasLines?: boolean;
+    /**
+     * Letter tagName
+     * @default `span`
+     */
+    letterTag?: keyof HTMLElementTagNameMap;
+    /**
+     * Word tagName
+     * @default `span`
+     */
+    wordTag?: keyof HTMLElementTagNameMap;
+    /**
+     * Line tagName
+     * @default `span`
+     */
+    lineTag?: keyof HTMLElementTagNameMap;
     /**
      * Viewport target
      * @default 'any'
@@ -44,22 +52,17 @@ export namespace NSplitText {
 
   export interface ILine {
     element: HTMLElement;
-    textContent: string;
     words: NSplitText.IWord[];
   }
 
   export interface IWord {
     element: HTMLElement;
-    textContent: string;
-    hasNewLine: boolean;
+    text: string;
     letters: NSplitText.ILetter[];
-    br?: HTMLBRElement;
-    whitespace?: Text;
   }
 
   export interface ILetter {
     element: HTMLElement;
-    textContent: string;
-    word: NSplitText.IWord;
+    text: string;
   }
 }

package/src/components/SplitText/utils/splitBase.ts

@@ -0,0 +1,49 @@
+/* eslint-disable no-param-reassign */
+import { NSplitText } from '../types';
+import { wrapLetters } from './wrapLetters';
+import { wrapWords } from './wrapWords';
+
+interface IProps {
+  container: HTMLElement;
+  letterClassName: string;
+  wordClassName: string;
+  hasLetters: boolean;
+  letterTag: keyof HTMLElementTagNameMap;
+  wordTag: keyof HTMLElementTagNameMap;
+}
+
+/** Split text into letters & words */
+export function splitBase({
+  container,
+  letterClassName,
+  wordClassName,
+  hasLetters,
+  letterTag,
+  wordTag,
+}: IProps) {
+  const helper = container.cloneNode(true) as HTMLElement;
+
+  const words = wrapWords({
+    container: helper,
+    classname: wordClassName,
+    tagName: wordTag,
+  });
+
+  const letters: NSplitText.ILetter[] = [];
+
+  if (hasLetters) {
+    const wrappedLetters = wrapLetters({
+      words,
+      classname: letterClassName,
+      tagName: letterTag,
+    });
+
+    letters.push(...wrappedLetters.letters);
+  }
+
+  return {
+    helper,
+    words,
+    letters,
+  };
+}

package/src/components/SplitText/utils/wrapLetters.ts

@@ -0,0 +1,41 @@
+import { NSplitText } from '../types';
+
+interface IProps {
+  words: NSplitText.IWord[];
+  classname: string;
+  tagName: keyof HTMLElementTagNameMap;
+}
+
+/** Wrap each word inside the container */
+export function wrapLetters({ words, classname, tagName }: IProps) {
+  const letters: NSplitText.ILetter[] = [];
+
+  words.forEach((word) => {
+    const textNode = word.element.childNodes[0];
+    const text = textNode.textContent;
+
+    if (!text) {
+      return;
+    }
+
+    const slitLetters = text.split('');
+
+    slitLetters.forEach((splitLetter) => {
+      const element = document.createElement(tagName);
+      element.style.display = 'inline-block';
+      element.classList.add(classname);
+      element.appendChild(document.createTextNode(splitLetter));
+
+      word.element.appendChild(element);
+
+      const letter: NSplitText.ILetter = { element, text: splitLetter };
+
+      word.letters.push(letter);
+      letters.push(letter);
+    });
+
+    textNode.remove();
+  });
+
+  return { letters };
+}