Optional Dependencies

Character Length Limit

TL;DR: Solution.

TimeredCounter works by treating strings as numbers in a certain base and then converting them to decimal numbers. This approach is convenient for sampling numbers to create scrolling lists.

This method works in most cases, but problems arise when the numbers are too large or too small.

According to the ECMA specification, when number < 10^-5 || number > 10^21, numbers are represented in scientific notation^[1][2].

This causes a problem as numbers represented in scientific notation lose some precision.

    1234567891012131415161
=>  1.2345678910121315e+21 // lost precision for the last 6 digits

Due to the implementation, this issue is more likely to occur with timered-counter-string. The base is essentially the number of unique characters in the string, which can easily result in a number exceeding 10^21.

Similarly, when using timered-counter-number, if the value is less than 10^-5, the number will also be represented in scientific notation.

How to Remove Character Length Limit

To solve this problem, we need to use a third-party high-precision calculation library like decimal.js. TimeredCounter provides two adapters:

1. BuildInNumberAdapter (default): Uses Number.

2. DecimalJsAdapter: Uses decimal.js, requires installing decimal.js.

3. Of course, you can implement your own adapter by implementing the NumberAdapter interface.

In the example below, you can switch adapters to see the effect.

9007199254740991 is the largest integer that can be accurately represented in JavaScript. When the value exceeds this, precision is lost. You can try inputting:

1. 9007199254740992: 9007199254740991 + 1
2. 9007199254741001: 9007199254740991 + 10
3. 9007199254741091: 9007199254740991 + 100

Observe the precision loss.

Number Adapter

---

---

9007199254740991BuildInNumberAdapterDecimalJsAdapter

---

Click to view code

NumberAdapterDemo.vue

<script setup>
import { ref, watch } from "vue";
import { setNumberAdapter } from "timered-counter";

const number = ref(Number.MAX_SAFE_INTEGER.toString(10));

const adapters = [
  { label: "BuildInNumberAdapter", value: "number" },
  // { label: "BuildInBigintAdapter", adapter: BuildInBigintAdapter() },
  { label: "DecimalJsAdapter", value: "decimal.js" },
];
const adapterIndex = ref(0);
watch(adapterIndex, (index) => setNumberAdapter(adapters[index].value));

const realRenderNumber = ref();
watch([number, adapterIndex], () => (realRenderNumber.value = number.value), {
  immediate: true,
});
const counterRef = ref();
function handleAnimationEnd() {
  realRenderNumber.value = counterRef.value?.getAttribute("aria-label");
}

function handleInput(e) {
  number.value = e.target.value
    .split("")
    .filter((c) => (c >= "0" && c <= "9") || c === "-" || c === ".")
    .join("");
}
</script>

<template>
  <div class="text-center">
    <timered-counter-number
      ref="counterRef"
      :key="adapters[adapterIndex].value"
      :value="number"
      @timered-counter-animation-end="handleAnimationEnd"
    />
  </div>
  <div
    v-if="realRenderNumber !== number"
    class="bg-[var(--vp-c-danger-soft)] p-2 rounded mt-4"
  >
    Mismatch: should be
    <span class="text-[var(--vp-c-danger-1)]">{{ number }}</span> but rendered
    as <span class="text-[var(--vp-c-danger-1)]">{{ realRenderNumber }}</span>
  </div>
  <hr />
  <div class="flex gap-4">
    <textarea
      class="flex-auto border border-solid p-1"
      @input="handleInput"
      :value="number"
    />
    <select
      v-model="adapterIndex"
      class="self-start border border-solid p-1 appearance-auto"
    >
      <option v-for="(adapter, index) in adapters" :key="index" :value="index">
        {{ adapter.label }}
      </option>
    </select>
  </div>
</template>

<style scoped></style>

Support Emoji Segmentation

For general emoji, we can use the default configuration, but for some special emoji, like 👨‍👩‍👧‍👦, which are called Emoji ZWJ Sequence and are composed of multiple emoji.

In this case, it is difficult to correctly recognize strings containing such emoji. We can use Intl.Segmenter or third-party libraries like grapheme-splitter. TimeredCounter provides three adapters:

1. BuildInStringAdapter (default): Uses String.split("") to split strings.
2. IntlSegmenterAdapter: Uses Intl.Segmenter, requires browser support.
3. GraphemeSplitterAdapter: Uses grapheme-splitter, requires installing grapheme-splitter.

In the example below, you can switch adapters to see the effect.

You can try inputting the following characters to see the effect.

• ⌚: Basic emoji
• ↔️: Text character rendered as emoji
• 👩: Modifiable basic emoji
• 👩🏿: Modifiable basic emoji + emoji modifier
• 🧑‍💻: Emoji combination sequence

String Adapter

---

---

emoji 🎉 🧑‍💻BuildInStringAdapterBuildInIntlSegmenterAdapterGraphemeSplitterAdapter

---

Click to view code

StringAdapterDemo.vue

<script setup>
import { onMounted, ref, watch } from "vue";
import { setStringAdapter } from "timered-counter";

const string = ref("emoji 🎉 🧑‍💻");

const adapters = [
  { label: "BuildInStringAdapter", value: "string" },
  {
    label: "BuildInIntlSegmenterAdapter",
    value: "intl-segmenter",
  },
  { label: "GraphemeSplitterAdapter", value: "grapheme-splitter" },
];
const adapterIndex = ref(0);
watch(adapterIndex, (index) => setStringAdapter(adapters[index].value));

const realRenderString = ref();
watch([string, adapterIndex], () => (realRenderString.value = string.value), {
  immediate: true,
});
const counterRef = ref();
function handleAnimationEnd() {
  realRenderString.value = counterRef.value?.getAttribute("aria-label");
}
onMounted(() => setTimeout(() => handleAnimationEnd(), 1000));
</script>

<template>
  <div class="text-center">
    <timered-counter-string
      ref="counterRef"
      :value="string"
      :key="adapters[adapterIndex].value"
      @timered-counter-animation-end="handleAnimationEnd"
    />
  </div>
  <div
    v-if="realRenderString !== string"
    class="bg-[var(--vp-c-danger-soft)] p-2 rounded mt-4"
  >
    Mismatch: should be
    <span class="text-[var(--vp-c-danger-1)]">{{ string }}</span> but rendered
    as <span class="text-[var(--vp-c-danger-1)]">{{ realRenderString }}</span>
  </div>
  <hr />
  <div class="flex gap-4">
    <textarea class="flex-auto border border-solid p-1" v-model="string" />
    <select
      v-model="adapterIndex"
      class="self-start border border-solid p-1 appearance-auto"
    >
      <option v-for="(adapter, index) in adapters" :key="index" :value="index">
        {{ adapter.label }}
      </option>
    </select>
  </div>
</template>

<style scoped></style>

---

1. https://tc39.es/ecma262/multipage/ecmascript-data-types-and-values.html#sec-numeric-types-number-tostring ↩︎

2. https://medium.com/@anna7/large-numbers-in-js-4feb6269d29b ↩︎