fluth-vue

Fluth-based Streaming Programming Library for Vue

official website

English | 简体中文

🎯 Introduction

fluth-vue is a streaming programming library based on fluth. It provides a series of practical stream methods and composable functions, deeply integrating the streaming programming paradigm with Vue's reactive system, fully enjoying the smooth development experience brought by streaming programming.

🚀 Features

• 🌀 Perfect Ecosystem Integration: Seamlessly integrates with Vue's reactivity, sharing Vue's ecosystem and development tools
• 🌊 Stream-based Programming: Leverages fluth's powerful streaming programming capabilities to implement reactive programming for logic
• 🌈 Stream Rendering: More fine-grained stream rendering capabilities, giving you control over rendering timing and frequency
• 🤖 Development Experience: Achieves ultimate debugging experience through plugins, enjoying the development experience brought by streaming programming

📦 Applicable Versions

• Vue 3.2.0 and above:
  • ✅ All stream subscription behaviors in Vue setup will automatically cancel subscriptions when components are destroyed
  • ✅ Stream data has reactive capabilities and can seamlessly integrate with Vue's reactive system
• Vue 2.7.0 ~ 3.1.x versions:
  • ❌ Stream subscription behaviors need to be manually canceled, cannot automatically cancel subscriptions
  • ✅ Stream data has reactive capabilities and can seamlessly integrate with Vue's reactive system
• Vue versions below 2.7.0:
  • ❌ Stream subscription behaviors need to be manually canceled, cannot automatically cancel subscriptions
  • ❌ Stream data doesn't have reactive capabilities, need to use toCompt to convert to reactive data

🛠️ Installation

npm install fluth-vue
# or
yarn add fluth-vue
# or
pnpm add fluth-vue

🎥 Usage Example

View

<template>
  <div>{{ stream$ }}</div>
  <div>{{ tips$ }}</div>

  <button @click="updateStream">click</button>
</template>

<script setup lang="ts">
import { $, debounce, filter, map } from "fluth-vue";

const words = [
  "word",
  "i",
  "am",
  "fluth",
  "vue",
  "welcome",
  "everyone",
  "to",
  "try",
  "and",
  "experience",
  "the",
  "amazing",
  "fluth-vue",
  "library",
  "for",
  "reactive",
  "programming",
  "in",
  "vue",
  "applications",
];

const stream$ = $("hello");

const tips$ = stream$.pipe(
  debounce(300),
  map((value) => `debounce: ${value}`),
  filter((value) => value.includes("welcome")),
  map((value) => `filter: ${value}`),
);

const updateStream = () => {
  if (words.length > 0) {
    stream$.next(`${stream$.value} ${words.shift()}`);
  }
};
</script>