Ripple - एक सुंदर TypeScript UI फ्रेमवर्क

• React·Solid·Svelte की खूबियों को एक साथ लाकर JS/TS-first डिज़ाइन और अपनी .ripple मॉड्यूल भाषा के साथ कंपोनेंट बनाने वाला type-safe UI framework
• $ prefix का उपयोग करने वाले reactive variables/properties, JSX-जैसे टेम्पलेट, और fine-grained rendering के जरिए उच्च performance और memory efficiency का लक्ष्य
• VS Code extension, Prettier, TypeScript integration प्रदान करता है, और reactive array·map·set, effect-आधारित side effects, decorators(@use) जैसी आधुनिक DX सुविधाएँ शामिल हैं
• फिलहाल शुरुआती alpha अवस्था में है, इसलिए SSR unsupported और types अधूरे होने जैसी सीमाएँ हैं; इसे आइडिया प्रयोग और feedback साझा करने के उद्देश्य से खोला गया है
• Svelte 5 के signal-based runtime जैसी सोच पर आधारित यह framework, JS/TS-first approach और LLM-friendly syntax के प्रयोग के कारण frontend framework evolution की दिशा समझने में मदद करता है

---

What is Ripple?

• Ripple, React·Solid·Svelte से प्रेरित एक TypeScript-first UI framework है, जो अपनी .ripple extension वाली superset language पर बना है
  • JSX के साथ अच्छी तरह मेल खाने वाली syntax के जरिए template केवल component body के अंदर उपयोग होता है, और JSX return expression की जगह statement-style template अपनाया गया है
  • लेखक ने Inferno·React Hooks·Lexical·Svelte 5 आदि के अनुभव के आधार पर इन विचारों को experimental form में लागू किया है
• यह अभी शुरुआती development stage में है, इसलिए इसमें bug और TODO बहुत हैं, और production उपयोग की सिफारिश नहीं की जाती
  • इसका उद्देश्य ideas साझा करना और incubation, तथा दूसरे frameworks में इन अवधारणाओं के वापस जाने की संभावना तलाशना है
  • यह इस hypothesis को परखने का प्रयास है कि JS/TS-first डिज़ाइन इंसानों और LLMs दोनों के लिए बेहतर DX दे सकता है

Features

• Reactive State Management: $ prefix के साथ variables और object properties में reactivity, और derived values को भी $ variables के रूप में स्वाभाविक ढंग से लिखा जा सकता है
• Component-Based Architecture: component keyword से explicit component declaration, props/children support, और JSX-like template का संयोजन
• Performance: fine-grained rendering के जरिए industry-leading performance और memory efficiency का लक्ष्य
• Tooling: TypeScript integration, VS Code IntelliSense/diagnostics/highlighting, और Prettier formatting support
• DX enhancement: JS/TS-first philosophy, LLM-friendly syntax, और SPA-first structure

Missing Features

• SSR का अभाव: फिलहाल यह केवल SPA के लिए है, SSR पर अभी काम नहीं हुआ है
• types अधूरे: codebase में type definitions सीमित हैं, जिन्हें आगे बेहतर किया जाएगा

Getting Started / Try Ripple

• बेसिक template को StackBlitz में खोलकर या degit से clone करके Vite development server पर चलाया जा सकता है
  • कमांड उदाहरण: npx degit trueadm/ripple/templates/basic my-app → npm i → npm run dev
• ऑनलाइन playground बाद में जोड़ा जाएगा, और फिलहाल repo के playground folder से local experiment किया जा सकता है

VSCode Extension

• Ripple for VS Code extension उपलब्ध है, जो .ripple files के लिए syntax highlighting, real-time diagnostics, TS integration, और autocomplete (IntelliSense) देता है
• Marketplace release और manual install के लिए .vsix package link भी दिया गया है

Mounting your app

• entry point में mount(App, { props, target }) के रूप में root component mount करने का support
  • target में DOM node देकर और props से शुरुआती attributes inject करने वाला संक्षिप्त API प्रदान किया गया है

Key Concepts

• Components
  • component keyword से function-जैसी signature वाले declarative components परिभाषित किए जाते हैं, और body के अंदर सीधे JSX-like template लिखा जाता है
  • property shorthand ({onClick}), spread ({...props}) जैसी परिचित syntax का support
• Reactive Variables
  • $ prefix वाले variables और properties में automatic reactivity होती है, और increment/assignment भर से re-render ट्रिगर हो जाता है
  • derived state को $double = $count * 2 जैसी सहज syntax में घोषित किया जा सकता है, और chained derivation भी संभव है
  • untrack से initialization जैसे खास हिस्सों में reactivity propagation रोकी जा सकती है
  • global/module top-level पर reactive variables allowed नहीं हैं; इन्हें active component context के भीतर ही बनाना होगा
• Transporting Reactivity
  • array और object wrapping के जरिए reactivity को boundaries के पार ले जाकर composition और coexistence संभव किया जाता है
  • recommended pattern यह है कि factory function $ values लेकर अंदर derivation/effect बनाए और फिर $ values वापस return करे
• Reactive Arrays / Set / Map
  • RippleArray/Set/Map standard collections को extend करने वाले reactive collections हैं; length/size को reactive तरीके से पाने के लिए $length/$size का उपयोग करना चाहिए
  • method results को सीधे उपयोग किया जा सकता है या $has जैसी reactive variable assignment के रूप में template में इस्तेमाल किया जा सकता है
• Effects
  • effect(() => { ... }) से ऐसे side effects घोषित किए जाते हैं जो निर्भर $ values बदलने पर चलते हैं, और इसमें automatic tracking मिलता है
• Control flow
  • templates केवल component body के अंदर मान्य हैं; सामान्य function या variable assignment expressions में JSX return नहीं किया जाता
  • template के अंदर variable declaration/function call/debugger का उपयोग किया जा सकता है, और statement-centric control flow दिया गया है
  • string literals को { "…" } के रूप में स्पष्ट लिखकर code से अलग दिखाने का नियम अपनाया गया है
• If / For / Try statements
  • if/else को template block के अंदर उपयोग करके उच्च पठनीयता वाला control flow बनाया जा सकता है
  • for...of के जरिए collection rendering, और key prop की जरूरत बिना सरल iteration support
  • try/catch block से error boundary (fallback UI) बनाई जा सकती है; catch में logging/reporting के बाद alternative UI render किया जा सकता है
• Props
  • reactive props के लिए $ prefix आवश्यक है; DOM attributes भी $class, $id की तरह prefix के साथ ही reactive updates पाते हैं
• Children
  • implicit $children component slot दिया गया है, और <$children /> से composition लागू किया जा सकता है
  • explicit slot components भी घोषित किए जा सकते हैं, जिससे readability और control बेहतर होते हैं
• Events
  • React-जैसा event API (onClick, onKeyDown, …Capture) supported है, और कुछ events में delegation optimization भी है
• Decorators
  • decorator syntax {@use fn} से real DOM node reference लिया जा सकता है, और mount/unmount hooks लौटाए जा सकते हैं
  • inline function/factory के जरिए reactive value passing pattern और composed components तक forwarding supported है
• Styling
  • component के locally scoped CSS को top-level <style> block में लिखकर encapsulated styling दी जाती है
• Context
  • createContext से ऊपर-नीचे की tree में shared values सेट किए जाते हैं, और get/set केवल component के अंदर allowed होने से predictability बनी रहती है

Playground

• repo clone करने के बाद pnpm i && cd playground && pnpm dev से local playground चलाया जा सकता है
  • Vite plugin का उपयोग करके playground/src में .ripple syntax पर आसानी से experiment किया जा सकता है

Why it matters

• JS/TS-first·statement-style template·$-prefixed reactivity जैसी बातें LLM-friendly code structure और readability/static analysis की सहजता को एक साथ खोजने वाला प्रयोग हैं
• fine-grained rendering·collection reactivity·decorators के जरिए DOM hooking जैसी संयोजन-शैली, micro-optimization और DX को साथ लाने की कोशिश है
• यह अभी alpha stage में है, लेकिन Svelte 5 के signal-based flow और React ecosystem के developer experience को मिलाकर next-generation framework design के लिए उपयोगी संदर्भ देता है

[aabb2467]

अच्छा भी लग रहा है और नहीं भी लग रहा है

[ng0301]

काफ़ी हद तक Svelte-जैसा फील आ रहा है।
घूम-फिरकर बाद में कहीं ReactLike की तरफ़ न चला जाए lol

[click]

लगता है कि AI में सीखाई गई सामग्री कम होने की वजह से सब लोग नए framework अपनाने से हिचकने लगे हैं।
मुझे लगता है Svelte ने आख़िरी मौका पकड़ लिया। Svelte में भी अगर prompt ठीक से न लिखें, तो वह बार-बार rune का इस्तेमाल किए बिना $ syntax ही इस्तेमाल करने लगता है, जिससे दिक्कत होती है.