onomad 2.0.3 → 3.0.0

package/README.md

@@ -2,6 +2,24 @@
 
 TypeScript/JavaScript biblioteka za prikaz vremena u formatu optimizovanom za srpski jezik (npr: "pre 5 minuta"). Radi u browseru i na serveru (node.js / deno / bun).
 
+## Čemu sve ovo?
+
+JavaScript već ima ugrađeni Intl API za formatiranje vremena, ali rezultati nisu u potpunosti prilagođeni srpskom jeziku. Evo poređenja:
+
+| Intl.RelativeTimeFormat | Onomad |
+|-------------------------|--------|
+| pre 30 sekundi | malopre |
+| pre 1 minut | pre minut |
+| pre 5 minuta | pre 5 minuta |
+| pre 30 minuta | pre pola sata |
+| pre 1 sat | pre sat vremena |
+| pre 24 sata | juče |
+| pre 7 dana | pre nedelju dana |
+| pre 30 dana | pre mesec dana |
+| pre 365 dana | pre godinu dana |
+
+Onomad koristi prirodnije izraze koji su uobičajeni u svakodnevnom srpskom jeziku, kao što su `malopre`, `juče`, `pre pola sata` i `pre nedelju dana`, umesto doslovnih brojčanih prikaza.
+
 ## Instalacija
 
 ```bash
@@ -33,14 +51,6 @@ console.log(timeago(lastWeek)); // "pre nedelju dana"
 
 Onomad dolazi sa gotovom Vue komponentom koja automatski ažurira prikaz vremena.
 
-#### Instalacija
-
-```bash
-npm install onomad vue
-```
-
-#### Upotreba komponente
-
 ```vue
 <script setup lang="ts">
 import { TimeAgo } from 'onomad/vue';
@@ -55,12 +65,22 @@ const postDate = new Date(Date.now() - 5 * 60 * 1000);
 </template>
 ```
 
-Komponenta automatski ažurira prikazan tekst svakih 60 sekundi. Možete prilagoditi interval ažuriranja:
+Komponenta automatski ažurira prikazani tekst svakih 60 sekundi (podrazumevano). Možete prilagoditi interval ažuriranja u sekundama:
 
 ```vue
-<TimeAgo :date="postDate" :update-interval="5000" />
+<!-- Ažuriraj na svakih 30 sekundi -->
+<TimeAgo :date="postDate" :update-interval="120" />
 ```
 
+Možete takođe kontrolisati kada se automatsko ažuriranje zaustavlja koristeći `max-age-update` prop. Ako je vreme starije od određenog praga (u sekundama), interval neće biti pokrenut (podrazumevano: bez ograničenja):
+
+```vue
+<!-- Samo ažuriraj ako je vreme mlađe od 1 sat (3600 sekundi) -->
+<TimeAgo :date="postDate" :max-age-update="3600" />
+```
+
+Za server-side rendering (SSR), komponenta će prikazati inicijalno vreme, a zatim će nastaviti sa ažuriranjem na klijentskoj strani.
+
 ## API Referenca
 
 ### `timeago(time: Date): string`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "onomad",
-  "version": "2.0.3",
+  "version": "3.0.0",
   "description": "Time formatting optimized for Serbian language",
   "type": "module",
   "main": "./dist/index.js",
@@ -12,14 +12,17 @@
       "types": "./dist/index.d.ts"
     },
     "./vue": {
-      "import": "./dist/vue/index.js",
-      "types": "./dist/vue/index.d.ts"
+      "import": "./src/vue/index.ts",
+      "types": "./src/vue/index.ts"
     }
   },
+  "files": [
+    "dist",
+    "src/vue"
+  ],
   "scripts": {
-    "build": "bun run build:core && bun run build:vue && bun run build:types",
+    "build": "bun run build:core && bun run build:types",
     "build:core": "bun build src/index.ts --outdir dist --target node --sourcemap=external",
-    "build:vue": "bun build src/vue/index.ts --outdir dist/vue --target node --sourcemap=external --external vue",
     "build:types": "tsc --project tsconfig.build.json",
     "test": "bun test",
     "prepublishOnly": "bun run build"
@@ -47,8 +50,5 @@
     "vue": {
       "optional": true
     }
-  },
-  "dependencies": {
-    "onomad": "^2.0.1"
   }
 }

package/src/vue/TimeAgo.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, watch } from 'vue';
+import { timeago } from 'onomad';
+
+const props = withDefaults(defineProps<{
+  date: Date | string;
+  updateInterval?: number;
+  maxAgeUpdate?: number;
+}>(), {
+  updateInterval: 60,
+  maxAgeUpdate: Infinity
+});
+
+const formattedTime = ref(timeago(new Date(props.date)));
+let intervalId: ReturnType<typeof setInterval> | null = null;
+
+const updateTime = () => {
+  formattedTime.value = timeago(new Date(props.date));
+};
+
+const getAgeInMs = () => {
+  return Date.now() - new Date(props.date).getTime();
+};
+
+onMounted(() => {
+  const ageInMs = getAgeInMs();
+  if (ageInMs <= props.maxAgeUpdate * 1000) {
+    intervalId = setInterval(updateTime, props.updateInterval * 1000);
+  }
+});
+
+onUnmounted(() => {
+  if (intervalId) {
+    clearInterval(intervalId);
+  }
+});
+
+// Update immediately if date prop changes
+watch(() => props.date, updateTime);
+</script>
+
+<template>
+  <span>{{ formattedTime }}</span>
+</template>

package/src/vue/env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

package/src/vue/index.ts

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

package/.github/workflows/ci.yml

@@ -1,48 +0,0 @@
-name: CI
-
-on:
-  push:
-    branches: [main]
-  pull_request:
-    branches: [main]
-
-jobs:
-  test:
-    name: Test
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      
-      - name: Setup Bun
-        uses: oven-sh/setup-bun@v1
-        with:
-          bun-version: latest
-      
-      - name: Install dependencies
-        run: bun install
-      
-      - name: Run tests
-        run: bun test
-      
-      - name: Build
-        run: bun run build
-      
-      - name: Check TypeScript
-        run: bunx tsc --noEmit
-
-  lint:
-    name: Lint
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      
-      - name: Setup Bun
-        uses: oven-sh/setup-bun@v1
-        with:
-          bun-version: latest
-      
-      - name: Install dependencies
-        run: bun install
-      
-      - name: Check formatting
-        run: bunx prettier --check "src/**/*.ts"