Feliz: तेजी से ताज़ा करें

IHMO यदि संभव हो तो हमें Elmish.HMR में इसके लिए समर्थन जोड़ना चाहिए क्योंकि वह वर्तमान पुस्तकालय है जो HMR को संभालने के लिए जिम्मेदार है।

जब एल्मिश के साथ प्रयोग किया जाता है तो फेलिज को आवेदन की स्थिति के बारे में पता नहीं होता है।

यह भी ध्यान रखना महत्वपूर्ण है कि Elmish.HMR हमें किसी भी Elmish एप्लिकेशन का समर्थन करने की अनुमति देगा जैसे कि Pure Fable.React, Pure Feliz, दोनों का मिश्रण या यहां तक ​​कि किसी भी रेंडरर के साथ सिर्फ शुद्ध Elmish।

हाँ, यह मुझे ठीक लगता है, मुझे यकीन नहीं था कि Elmish.Debugger या Elmish.HMR आवश्यक रूप से सही स्थान थे, मैंने यह देखने के लिए नहीं देखा था कि वे सीधे प्रतिक्रिया के साथ युग्मित थे या नहीं।

ओह, यह Elmish.HMR है न कि Elmish.Debugger मैंने अपना पिछला संदेश संपादित किया।

नहीं, यह रिएक्ट के साथ नहीं है, Elmish.HMR एल्मिश की कुछ विशेषताओं को छाया देता है ताकि उन्हें एचएमआर का समर्थन किया जा सके।

उदाहरण के लिए:

• Fable.Elmish . से Program.run
• Fable.Elmish.Browser . से Program.toNavigable
• Fable.Elmish.React . से Program.withReactBatched
• आदि।

@MangelMaxime AFAIK Elmish.HMR रिएक्ट से फ़ंक्शन घटकों को संभालता नहीं है और जब आप उनका उपयोग करते हैं तो राज्य रीसेट हो जाता है। मैं जल्द ही एक रेप्रो बनाने की कोशिश करूंगा

@ ज़ैद-अजाज एचएमआर के दृष्टिकोण से, यह पूरी तरह से सामान्य है।

मुझे स्थिति पर नज़र रखने में पहले से ही एक समस्या है। https://github.com/elmish/hmr/issues/26

आप जो वर्णन कर रहे हैं वह जावास्क्रिप्ट में अच्छी तरह से जाना जाता है और यह एचएमआर की मुख्य समस्याओं में से एक है। यदि आप अपनी परियोजना में एचएमआर रखना चाहते हैं तो आपको अपना कोड इसे समझने की जरूरत है। यह ऐसा कुछ नहीं है जो बॉक्स से बाहर काम करता है।

एल्मिश में, अधिकांश समय आप इसे नहीं देखते हैं क्योंकि राज्य एक ही स्थान पर है और एल्मिश। एचएमआर ने एल्मिश को सीखा कि इसे कैसे संभालना है। यह कार्यों को छायांकित करके किया जाता है।

स्टेटफुल कंपोनेंट के मामले में, आपको कंपोनेंट को इस तरह से लिखना होगा कि वह HMR को समझ सके। आदेश में, इसे स्वतंत्र रूप से प्राप्त करने के लिए सबसे अच्छा यह होगा कि इसे सीधे पुस्तकालय में लागू किया जाए, जो स्टेटफुल कंपोनेंट प्रदान करता है अन्यथा लोगों को मॉड्यूल को सही क्रम में खोलना सुनिश्चित करना होगा।

उदाहरण के लिए, अगर मैं Elmish.HMR में equalsButFunctions छाया करता हूं तो लोगों को यह याद रखना होगा:

open Fable.React
open Elmish.HMR

एचएमआर का समर्थन करने के लिए।

लेकिन अगर एचएमआर के लिए समर्थन सीधे Fable.React कोड में किया जाता है तो वे केवल open Fable.React और बस इतना ही कर सकते हैं।

सामान्य तौर पर, आपको बंडल आकार पर प्रभाव नहीं पड़ना चाहिए क्योंकि आप HMR कोड को #if DEBUG ... #else ... #endif के बीच अलग कर सकते हैं

मुझे कुछ ऐसा लगता है जो शायद उपयोगी हो।
कोशिश करने के लिए मेरा रेपो यहां है।

dotnet fsi build.fsx चलाने के बाद, आउटपुट जेएस src\Client\www\fablejs . के अंतर्गत आ जाएगा
मेरा काउंटर कार्यात्मक घटक इस प्रकार है:
``` च #
[]
चलो काउंटर () =
चलो (गिनती, सेटकाउंट) = React.useState(0)
एचटीएमएल.डिव [
प्रॉप.स्टाइल [स्टाइल.पैडिंग 20]
सहारा बच्चे [
एचटीएमएल.एच1 गिनती
एचटीएमएल.बटन [
प्रॉप.टेक्स्ट "इन्क्रीमेंट"
prop.onClick (मज़ा _ -> सेटकाउंट (गिनती + 2))
]
]
]

It will generate js like below. Under folder `src\Client\www\fablejs\Counter.js` I can edit and trigger `parcel` to update.
I replaced old `reactElement` with `createElement` then save the Counter.js and the `fast refresh` starts to work. And it works together with elmish HMR (wow nice:)).
Alias (`reactElement as createElement`) will not work. Only `import { createElement } from 'react';` seems work.
I also found some thing related to `createElement` in react-refresh: https://github.com/facebook/react/blob/ebf158965f2b437515af0bed2b9e9af280e0ba3c/packages/react-refresh/src/ReactFreshBabelPlugin.js#L192

```js
import { Feliz_React__React_useState_Static_1505 } from "./www/fablejs/.fable/Feliz.1.16.2/React.fs.js";
import { reactApi, reactElement, mkAttr, mkStyle } from "./www/fablejs/.fable/Feliz.1.16.2/Interop.fs.js";
import { ofArray, singleton } from "./.fable/fable-library.3.0.0-nagareyama-rc-007/List.js";
import { createObj } from "./.fable/fable-library.3.0.0-nagareyama-rc-007/Util.js";
import { createElement } from 'react';

export function Counter() {
    let properties, elems, xs;
    const patternInput = Feliz_React__React_useState_Static_1505(0);
    const setCount = patternInput[1];
    const count = patternInput[0] | 0;
    const xs_1 = ofArray([(properties = singleton(mkStyle("padding", 20)), mkAttr("style", createObj(properties))), (elems = [createElement("h1", createObj(singleton(["children", new Int32Array([count])]))), (xs = ofArray([mkAttr("children", "Increment"), mkAttr("onClick", (_arg1) => {
        setCount(count + 10);
    })]), createElement("button", createObj(xs)))], mkAttr("children", reactApi.Children.toArray(Array.from(elems))))]);
    return createElement("div", createObj(xs_1));
}

आशा है कि हम Fast Refresh काम कर सकते हैं !!!

हाय वहाँ @albertwoo ,

क्या आप कृपया फ़ेलिज़ को v1.17.0 पर अपडेट कर सकते हैं और देख सकते हैं कि यह आपके लिए काम करता है या नहीं? क्योंकि फास्ट-रीफ्रेश उस संस्करण के रूप में काम कर रहा है और वेबपैक और दोस्तों की निर्भरता का नवीनतम सेट है। कृपया SAFE देखें। प्रतिक्रिया दें कि आप देख सकते हैं कि यह वहां कैसे काम कर रहा है जैसे कि reactElement को createElement में बदले बिना

मैं यह भी देख रहा हूं कि आप पार्सल का उपयोग कर रहे हैं। वह पार्सल का कौन सा संस्करण है? नवीनतम 2.0-बीटा फास्ट-रीफ्रेश को ठीक से लागू नहीं करता है, रात का संस्करण काम करता है। पार्सल रेपो पर यह चर्चा देखें

लेकिन SAFE.React @pmmmwh/react-refresh-webpack-plugin का उपयोग कर रहा है जो मुझे लगता है कि प्रतिक्रिया रेपो से तेज़ रीफ्रेश के साथ अलग है? शायद मैं गलत हूँ।
लेकिन अगर मैं reactElement को createElement में बदलता हूं तो यह सही काम करता है। क्या जेनरेट कोड को प्रतिक्रिया शैली के जितना संभव हो उतना करीब बनाना बेहतर नहीं है?

मैंने फ़ेलिज़ को 1.17.0.0.1 में अपग्रेड करने का प्रयास किया। और मैं पार्सल 2.0.0-nightly.447 का उपयोग कर रहा था। लेकिन फिर भी डिफ़ॉल्ट रूप से काम नहीं करते।

लेकिन SAFE.React @pmmmwh/react-refresh-webpack-plugin का उपयोग कर रहा है जो मुझे लगता है कि प्रतिक्रिया रेपो से तेज़ रीफ्रेश के साथ अलग है? शायद मैं गलत हूँ।

वेबपैक प्लगइन fast-refresh का उपयोग सहकर्मी निर्भरता v0.9.0 के रूप में कर रहा है, क्या आप कृपया अपने पैकेज-लॉक-जेसन फ़ाइल के अंदर जांच सकते हैं कि फास्ट-रीफ्रेश का कौन सा संस्करण उपयोग किया जा रहा है और क्या यह नवीनतम का उपयोग कर रहा है?

क्या जेनरेट कोड को प्रतिक्रिया शैली के जितना संभव हो उतना करीब बनाना बेहतर नहीं है?

यह है। हालांकि, reactElement केवल createElement के लिए एक उपनाम है, इसलिए यदि फास्ट-रीफ्रेश प्लगइन दोबारा आयात के माध्यम से जा रहा है तो उन्हें बिल्कुल वही होना चाहिए (जो मुझे लगता है कि यह ऐसा कर रहा है क्योंकि यह सुरक्षित में काम करता है प्रतिक्रिया)। मैं देखूंगा कि मैं इसके बारे में क्या कर सकता हूं

मैंने फ़ेलिज़ को 1.17.0.0.1 में अपग्रेड करने का प्रयास किया। और मैं 2.0.0-nightly.447 पार्सल का उपयोग कर रहा था। लेकिन फिर भी डिफ़ॉल्ट रूप से काम नहीं करते।

मुझे पूरा यकीन था कि यह रात के साथ काम करता है। 443 लेकिन मैंने पार्सल को छोड़ दिया क्योंकि यह इस समय कितना अस्थिर है और इसके बजाय वेबपैक के लिए डिफ़ॉल्ट है जो वास्तव में अच्छी तरह से काम कर रहा है

मैं react-refresh के लिए भी 0.9.0 का उपयोग कर रहा हूं।

मैं फिर से कोशिश कर सकता हूं जब पार्सल 2 उत्पादन संस्करण जारी किया जाता है।

@albertwoo क्या आप निम्नलिखित कोशिश कर सकते हैं और देख सकते हैं कि यह समस्या को ठीक करता है या नहीं?

./www/fablejs/.fable/Feliz.1.17.2/Interop.fs reactElement फ़ंक्शन के स्रोत को बदलें

[<RequireQualifiedAccess>]
module Interop =
    let reactElement (name: string) (props: 'a) : ReactElement = import "createElement" "react"

प्रति

[<RequireQualifiedAccess>]
module Interop =
    let inline reactElement (name: string) (props: 'a) : ReactElement = import "createElement" "react"

परिभाषा में inline जोड़ा गया

और देखें कि क्या यह आयात को ठीक करता है और लाइब्रेरी फ़ंक्शन के बजाय सीधे createElement का उपयोग करता है

संपादित करें ./www/fablejs/.fable/Feliz.1.17.2/Interop.fs पुन: संकलित करने के लिए कल्पित को ट्रिगर नहीं करता है। मुझे आगे देखने की आवश्यकता हो सकती है।
एक और अजीब चीज जो मैंने देखी है, वह यह है कि फेलिज नगेट पैककेज के फोल्डर fable के तहत हर .fs फाइलों के लिए .fs.js उत्पन्न होते हैं। क्या यह सही है। क्योंकि मैंने देखा कि अन्य पैकेज में वे नहीं थे।

क्या यह सही है। क्योंकि मैंने देखा कि अन्य पैकेज में वे नहीं थे।

यह सही है, Fable संकुल के स्रोतों को संकलित करता है। मेरे सुझाव के बारे में, ठीक करें, कृपया इसे अनदेखा करें क्योंकि यह काम नहीं करता है। मैंने अभी इसका परीक्षण किया है

तो यह होना है?

तो यह होना है?

मुझे लगता है कि कुछ .fs फ़ाइलों में एक समान .fs.js फ़ाइल नहीं होती है क्योंकि उनका उपयोग नहीं किया जाता है। जो Fable.React के लिए समझ में आता है क्योंकि फ़ेलिज़ केवल वहां से एक प्रकार की परिभाषा के उपनाम का उपयोग करता है: मुस्कान:

ठीक। यह मेरे लिए भ्रमित करने वाला है क्योंकि मैंने सोचा था कि पुस्तकालय लेखक को केवल .fs फ़ाइल को नगेट पैकेज में डालने की आवश्यकता है।

हां, पुस्तकालय के लेखक केवल एफ # स्रोत कोड डालते हैं, फैबल उन्हें जेएस मॉड्यूल में संकलित करता है और उन्हें एफ # स्रोत कोड के सापेक्ष रखता है।

मुझे लगता है कि fable उन फाइलों को हमारे अपने प्रोजेक्ट फ़ोल्डर के तहत संकलित करेगा? मेरे स्क्रीनशॉट से पता चलता है कि नगेट कैश फोल्डर के तहत फेलिज पैकेज में पहले से ही वे .fs.js फाइलें हैं जो वहां नहीं होनी चाहिए। और मैंने देखा कि Feliz.fsproj ने सभी .js फ़ाइलों की प्रतिलिपि बनाई है। मुझे लगता है कि इसे बाहर करना चाहिए *.fs.js :
https://github.com/Zaid-Ajaj/Feliz/blob/30544a5757517f090cac627be264472db2ea9afd/Feliz/Feliz.fsproj#L22

किसी भी तरह से यह बहुत ज्यादा प्रभावित नहीं करता है।

@albertwoo फ़ेलिज़ v1.18 (अब v1.19) के बाद से फ़ेलिज़ का आउटपुट createElement का उपयोग करता है बिना किसी मध्यवर्ती reactElement फ़ंक्शन कॉल के बीच में। क्या आप इसे आज़मा सकते हैं और देख सकते हैं कि क्या यह आपकी समस्या को ठीक करता है?

@ जैद-अजाज ने अभी कोशिश की, यह सही काम करता है

मैं फ़ेलिज़ का उपयोग करके एक प्रयोग पर काम कर रहा हूं और फास्ट रीफ्रेश का परीक्षण करना चाहता था और मैं अपना अनुभव साझा करना चाहता था क्योंकि मैंने कल शाम को बिताया था।

फास्ट रिफ्रेश का समर्थन ज्यादातर बंडलर टूल्स द्वारा किया जाता है जिनके अपने कार्यान्वयन हो सकते हैं।

• वेबपैक प्रतिक्रिया-रीफ्रेश-वेबपैक-प्लगइन के माध्यम से इसका समर्थन कर सकता है। हालाँकि, इस प्लगइन द्वारा इंजेक्ट किया गया केवल एक रिफ्रेश/HMR कॉल को ट्रिगर करेगा (हाँ यह अभी भी वही है जो हुड के तहत उपयोग किया जाता है) यदि वर्तमान मॉड्यूल से सभी निर्यात रिएक्ट घटक हैं।

एल्मिश स्टिल को एप्लिकेशन के लिए उपयोग करते समय यह समस्या का कारण बनता है क्योंकि हम हमेशा कम से कम 2 फ़ंक्शन update और init को उजागर करते हैं। इसके अलावा कल्पित आदि द्वारा उत्पन्न प्रकार प्रतिबिंब/परिभाषा। मैंने दृश्य की गणना नहीं की क्योंकि फ़ंक्शन घटक का उपयोग करना संभव है जो एक प्रतिक्रिया घटक है: पलक:

• दूसरी ओर स्नोपैक यह जाँच नहीं करता है कि मॉड्यूल द्वारा क्या निर्यात किया जाता है और हमेशा HMR को स्वीकार करता है।

• मैंने fast-refresh/runtime पैकेज का उपयोग करके मैन्युअल रूप से कुछ परीक्षण भी किए और यह ऊपर मेरी बात की पुष्टि करता है।

संक्षेप में, यदि आप वेबपैक का उपयोग करते हैं, तो फास्ट रीफ्रेश समर्थन प्राप्त करने के लिए आपको अपनी फ़ाइल में अपने सभी फ़ंक्शन/प्रकार को निजी बनाना होगा। यदि आप स्नोपैक का उपयोग करते हैं, तो आप जैसा चाहें वैसा कर सकते हैं।

हालांकि, स्नोपैक अनुभव के साथ मेरा अनुभव इतना अच्छा नहीं है, मेरे पास अक्सर ब्राउज़र में फ़ाइल मेरी डिस्क पर मौजूद चीज़ों के साथ सिंक से बाहर होती है। और यह भी कि मैं इसे अभी तक उत्पादन में उपयोग करने के लिए पर्याप्त रूप से मजबूत नहीं पाता हूं क्योंकि मैं अक्सर कॉन्फ़िगरेशन को समाप्त करता हूं या स्नोपैक प्रक्रिया को रोकता/पुनरारंभ करता हूं।

अपना परीक्षण जारी रखने के लिए मैं प्रतिक्रिया प्लगइन को फोर्क कर दूंगा और "निर्यात जांच" को हटा दूंगा और देख सकता हूं कि यह कैसा चल रहा है।

@ जैद-अजाज क्या हम इस मुद्दे को बंद करने के लिए अच्छे हैं?

@Shmew मैंने अभी तक इसमें प्रवेश नहीं किया है, लेकिन मैं यह जानना चाहता था कि @MangelMaxime क्या कर रहा है। मुझे लगता है कि उसका समाधान फ़ेलिज़ ऐप्स के लिए बेहतर अनुकूल साबित हो सकता है क्योंकि प्रत्येक मान और फ़ंक्शन स्वचालित रूप से निर्यात किए जाते हैं। हो सकता है कि हम यहां से एक नया मुद्दा शुरू करें, लेकिन चलो इसे अभी तक बंद न करें 🙏

केवल आपकी जानकारी के लिए, अंत में मैंने पुराने Elmish.HMR NuGet का उपयोग करके मानक Elmish एप्लिकेशन के साथ जाने का फैसला किया।

मुझे कई मुद्दों का सामना करना पड़ा (क्षमा करें, यह बहुत Feliz.UseElmish पहले है इसलिए मुझे वास्तव में Elmish नहीं है ...

मुझे लगता है कि समस्या यह है कि fast-refresh केवल उन घटकों को पुनः लोड करता है जिन्हें अद्यतन किया गया है और इसलिए dispatch उदाहरण सही ढंग से अद्यतन/प्रचारित नहीं है या ऐसा कुछ है।

फिर से, मेरे परीक्षण 2 महीने पुराने हैं और मुझे ठीक से याद नहीं है कि समस्या क्या थी।

इसके अलावा क्योंकि मैं "शास्त्रीय प्रतिक्रिया घटकों" का उपयोग करके अपना आवेदन नहीं लिखता हूं, लेकिन "मानक" एल्मिश तरीके का उपयोग करके मैं ज्यादातर एपीआई के लिए फेलिज का उपयोग करता हूं।

क्या प्रतिक्रिया-ताज़ा-वेबपैक-प्लगइन के साथ समस्या को प्रतिक्रिया घटकों की आवश्यकता होती है जो फ़ाइल में एकमात्र निर्यात होने के लिए ReactComponentAttribute को एक अलग फ़ाइल के रूप में उस फ़ंक्शन को संकलित करने के लिए Fable को बताकर हल किया जा सकता है यानी Counter.fs Counter.fs.js और CounterRC.fs.js या कुछ उपयुक्त नाम बन जाता है?