React: एचएमआर के लिए हमें अब कैसे ऐप सेट करना चाहिए कि फास्ट रिफ्रेश रिएक्ट-हॉट-लोडर को बदले?

कुछ भ्रम है। नए DevTools गर्म पुनः लोड करने में सक्षम नहीं हैं (या पुनः लोड करने के लिए कुछ भी नहीं है)। इसके बजाय, डैनलोड्स और रिएक्ट का उपयोग संचार करने के लिए "हुक" का उपयोग करने के लिए डैन पर काम कर रहे गर्म पुनः लोडिंग परिवर्तनों पर किया गया है। यह खुद को बीच में जोड़ता है इसलिए यह पुनः लोडिंग कर सकता है।

मैंने DevTools का उल्लेख निकालने के लिए शीर्षक संपादित किया है (क्योंकि यह भ्रम पैदा कर सकता है)।

इस सवाल के लिए कि नए एचएमआर का उपयोग कैसे किया जाना चाहिए, मुझे नहीं लगता कि मुझे वहां नवीनतम सोच के बारे में पता है। मैं देख रहा हूं @ Cear रेपो पर wip PR है:
https://github.com/facebook/create-react-app/pull/5958

इस सवाल के लिए कि नए एचएमआर का उपयोग कैसे किया जाना चाहिए, मुझे नहीं लगता कि मुझे वहां नवीनतम सोच के बारे में पता है। मैं देख रहा हूं @ Cear रेपो पर wip PR है:

पाठकों के लिए स्पष्ट करने के लिए, पीआर बहुत पुराना है और प्रासंगिक नहीं है।

मुझे इस बारे में कुछ लिखने की आवश्यकता है कि फास्ट रिफ्रेश कैसे काम करता है और इसे कैसे एकीकृत किया जाए। अभी तक समय नहीं था

ठीक है, यहाँ जाता है।

फास्ट रिफ्रेश क्या है?

यह रिएक्ट के पूर्ण समर्थन के साथ "हॉट रीलोडिंग" का पुन: कार्यान्वयन है। यह मूल रूप से रिएक्ट नेटिव के लिए शिपिंग है, लेकिन अधिकांश कार्यान्वयन प्लेटफ़ॉर्म-स्वतंत्र है। यह योजना बोर्ड भर में उपयोग करने के लिए है - विशुद्ध रूप से उपयोगकर्ता के समाधान के लिए एक प्रतिस्थापन के रूप में (जैसे react-hot-loader )।

क्या मैं वेब पर फास्ट रिफ्रेश का उपयोग कर सकता हूं?

सैद्धांतिक रूप से, हाँ, यह योजना है। व्यावहारिक रूप से, किसी को वेब पर बंडलर्स के साथ इसे एकीकृत करने की आवश्यकता होती है (जैसे वेबपैक, पार्सल)। मैं ऐसा करने के लिए अभी तक नहीं मिला है। शायद कोई इसे उठाना चाहता है। यह टिप्पणी आप इसे कैसे करेंगे के लिए एक मोटा गाइड है।

इसमें क्या समाविष्ट है?

फास्ट रिफ्रेश एक साथ काम करने वाले कई टुकड़ों पर निर्भर करता है:

• मॉड्यूल सिस्टम में "हॉट मॉड्यूल रिप्लेसमेंट" तंत्र।
  
  
  
  • यह आमतौर पर बंडलर द्वारा भी प्रदान किया जाता है।
  
  
  • जैसे वेबपैक में, module.hot API आपको ऐसा करने देता है।
  
  
• रिएक्टर रेंडर 16.9.0+ (जैसे रिएक्ट डोम 16.9)
  
  
  
  • या कस्टम रेंडरर्स के लिए [email protected] या अधिक
  
  
• react-refresh/runtime प्रवेश बिंदु
• react-refresh/babel बेबेल प्लगइन

आप शायद एकीकरण भाग पर काम करना चाहते हैं। यानी वेबपैक "हॉट मॉड्यूल रिप्लेसमेंट" तंत्र के साथ react-refresh/runtime एकीकरण।

इंटीग्रेशन लुकिंग लाइक क्या है?

स्पष्ट करने के लिए, यह उन लोगों के लिए एक मार्गदर्शिका है जो एकीकरण के कार्यान्वयन को लागू करना चाहते हैं। अपने खुद के समाधान पर पेश किया!

कुछ चीजें हैं जो आप न्यूनतम रूप से करना चाहते हैं:

• अपने बंडल में HMR सक्षम करें (जैसे webpack)
• सुनिश्चित करें कि प्रतिक्रिया 16.9.0+ है
• अपने Babel प्लगइन्स में react-refresh/babel जोड़ें

उस बिंदु पर आपका ऐप क्रैश होना चाहिए। इसमें $RefreshReg$ और $RefreshSig$ फ़ंक्शंस शामिल होने चाहिए जो अपरिभाषित हैं।

फिर आपको एक नया JS प्रविष्टि बिंदु बनाने की आवश्यकता है, जो आपके ऐप में react-dom (!) सहित किसी भी कोड से पहले चलना चाहिए , यह महत्वपूर्ण है; यदि यह react-dom बाद चलता है, तो कुछ भी काम नहीं करेगा। इस प्रविष्टि बिंदु को कुछ इस तरह करना चाहिए:

if (process.env.NODE_ENV !== 'production' && typeof window !== 'undefined') {
  const runtime = require('react-refresh/runtime');
  runtime.injectIntoGlobalHook(window);
  window.$RefreshReg$ = () => {};
  window.$RefreshSig$ = () => type => type;
}

इससे क्रैश को ठीक करना चाहिए। लेकिन यह अभी भी कुछ भी नहीं करेगा क्योंकि ये $RefreshReg$ और $RefreshSig$ कार्यान्वयन नहीं हैं। उन्हें हुक करना उस एकीकरण कार्य का मांस है जिसे आपको करने की आवश्यकता है।

आप कैसे करते हैं यह आपके बंडलर पर निर्भर करता है। मुझे लगता है कि वेबपैक के साथ आप एक लोडर लिख सकते हैं जो प्रत्येक मॉड्यूल को निष्पादित करने से पहले और बाद में कुछ कोड जोड़ता है। या हो सकता है कि मॉड्यूल टेम्पलेट में कुछ इंजेक्ट करने के लिए कुछ हुक हो। भले ही, आप जो हासिल करना चाहते हैं वह यह है कि हर मॉड्यूल इस तरह दिखता है:

// BEFORE EVERY MODULE EXECUTES

var prevRefreshReg = window.$RefreshReg$;
var prevRefreshSig = window.$RefreshSig$;
var RefreshRuntime = require('react-refresh/runtime');

window.$RefreshReg$ = (type, id) => {
  // Note module.id is webpack-specific, this may vary in other bundlers
  const fullId = module.id + ' ' + id;
  RefreshRuntime.register(type, fullId);
}
window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;

try {

  // !!!
  // ...ACTUAL MODULE SOURCE CODE...
  // !!!

} finally {
  window.$RefreshReg$ = prevRefreshReg;
  window.$RefreshSig$ = prevRefreshSig;
}

यहाँ विचार यह है कि हमारा बैबल प्लगइन इस फ़ंक्शन को कॉल करता है, और फिर ऊपर हमारा एकीकरण उन कॉल को मॉड्यूल आईडी से जोड़ता है। जब एक घटक पंजीकृत किया जा रहा है तो रनटाइम "path/to/Button.js Button" जैसे तार प्राप्त करता है। (या, वेबपैक के मामले में, आईडी नंबर होंगे।) यह मत भूलो कि दोनों बैबेल रूपांतरित होते हैं और यह रैपिंग केवल विकास मोड में होनी चाहिए।

मॉड्यूल कोड को लपेटने के विकल्प के रूप में, हो सकता है कि ट्राय करने के लिए कोई रास्ता / अंत में इस तरह से उस जगह के आसपास हो जहां बंडलर वास्तव में मॉड्यूल कारखाने को शुरू करता है। जैसे हम यहां मेट्रो (आरएन बंडल) में करते हैं। यह शायद बेहतर होगा क्योंकि हमें हर मॉड्यूल को ब्लोट करने की आवश्यकता नहीं होगी, या अवैध सिंटैक्स को शुरू करने के बारे में चिंता करने की आवश्यकता होगी, जैसे कि import में try / finally import साथ रैप करना।

एक बार जब आप इसे हुक करते हैं, तो आपके पास एक आखिरी समस्या है आपके बंडल को पता नहीं है कि आप अपडेट संभाल रहे हैं, इसलिए यह संभवतः वैसे भी पृष्ठ को फिर से लोड करता है। आपको यह बताने की जरूरत है कि नहीं। यह फिर से बंडल-विशिष्ट है, लेकिन मैं जो सुझाव देता हूं वह यह जांचने के लिए है कि क्या सभी निर्यात प्रतिक्रियाशील घटक हैं , और उस मामले में, अपडेट को "स्वीकार" करें। वेबपैक में यह कुछ इस तरह दिख सकता है:

// ...ALL MODULE CODE...

const myExports = module.exports; 
// Note: I think with ES6 exports you might also have to look at .__proto__, at least in webpack

if (isReactRefreshBoundary(myExports)) {
  module.hot.accept(); // Depends on your bundler
  enqueueUpdate();
}

isReactRefreshBoundary क्या है? यह एक ऐसी चीज है जो उथले निर्यात पर निर्भर करती है और यह निर्धारित करती है कि क्या यह केवल रिएक्ट घटकों का निर्यात करती है। यह है कि आप कैसे एक अद्यतन को स्वीकार करने का फैसला करते हैं या नहीं। मैंने इसे यहां पेस्ट नहीं किया, लेकिन यह कार्यान्वयन एक अच्छी शुरुआत हो सकती है। (उस कोड में, Refresh react-refresh/runtime निर्यात को संदर्भित करता है)।

आप सभी निर्यातों को $RefreshReg$ कार्यों के लिए कॉल करेगा। यदि आप ऐसा नहीं करते हैं, तो कक्षाओं के अपडेट का पता नहीं लगाया जाएगा।

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

const runtime = require('react-refresh/runtime');

let enqueueUpdate = debounce(runtime.performReactRefresh, 30);

इस बिंदु तक आपको कुछ काम करना चाहिए।

बारीकियों

कुछ आधारभूत अनुभव की उम्मीदें हैं जो मुझे परवाह हैं कि "फास्ट रिफ्रेश" ब्रांडिंग में जाएं। यह एक वाक्यविन्यास त्रुटि, एक मॉड्यूल आरंभीकरण त्रुटि, या एक रेंडरिंग त्रुटि से इनायत से पुनर्प्राप्त करने में सक्षम होना चाहिए। मैं इन तंत्रों में विस्तार से नहीं जाऊंगा, लेकिन मुझे बहुत दृढ़ता से लगता है कि आपको अपने प्रयोग को "फास्ट रिफ्रेश" नहीं कहना चाहिए, जब तक कि यह उन मामलों को अच्छी तरह से संभाल नहीं लेता है।

दुर्भाग्य से, मुझे नहीं पता कि वेबपैक उन सभी का समर्थन कर सकता है, लेकिन हम मदद के लिए पूछ सकते हैं यदि आप कुछ हद तक काम कर रहे हैं, लेकिन फिर अटक जाते हैं। उदाहरण के लिए, मैंने देखा है कि वेबपैक का accept() API त्रुटि सुधार को और अधिक कठिन बना देता है (आपको एक त्रुटि के बाद मॉड्यूल के _prepret_ संस्करण को स्वीकार करने की आवश्यकता होती है), लेकिन इसके आसपास हैक करने का एक तरीका है। एक और चीज जो हमें वापस प्राप्त करने की आवश्यकता है, वह सभी निर्यातों को स्वचालित रूप से "रजिस्टर" करने के लिए है, और न कि केवल बैबल प्लगइन द्वारा पाए गए। अभी के लिए, आइए इसे अनदेखा करें, लेकिन अगर आपके पास कुछ ऐसा है जो उदाहरण के लिए काम करता है जैसे कि वेबपैक, तो मैं इसे पॉलिश कर सकता हूं।

इसी तरह, हमें इसे "त्रुटि बॉक्स" अनुभव के साथ एकीकृत करने की आवश्यकता होगी, react-error-overlay Create

अगर आपका कोई प्रश्न हैं, तो मुझे से पूछें!

सिंटैक्स एरर / इनिशियलाइज़ेशन एरर किसी भी तरह से हैंडल करने के लिए रिएक्ट बताने से पहले किसी भी तरह से "आसान पर्याप्त" होना चाहिए, लेकिन कैसे रेंडरिंग एरर एरर सीमाओं के साथ इंटरैक्ट करेगा?

यदि एक रेंडरिंग त्रुटि होती है, तो यह निकटतम त्रुटि सीमा को ट्रिगर करेगा जो कि एक त्रुटि स्थिति में स्नैपशॉट होगा, और त्रुटि सीमाओं को बताने के लिए कोई सामान्य तरीका नहीं है कि उनके बच्चों को लाइव ताज़ा करने के बाद जादुई _possibly_ तय किया गया है। क्या प्रत्येक रीफ्रेश किए गए घटक को मुफ्त में अपनी त्रुटि सीमा प्राप्त करनी चाहिए, या क्या त्रुटि को अलग करने में काम करता है जब रीकंस्ट्रक्शन पर आरंभीकरण समर्थन का पता लगाया जाता है?

सभी निर्यात रिएक्ट घटक हैं, और उस मामले में, अद्यतन को "स्वीकार" करते हैं

क्या ऐसे घटकों का पता लगाने का कोई तरीका है? जहाँ तक मैं समझता हूँ - नहीं। export.toString().indexOf('React')>0 छोड़कर, लेकिन यह किसी भी HOC के साथ काम करना बंद कर देगा।
इसके अलावा फ़ाइल के अंत में स्वयं स्वीकार करना_ त्रुटि-प्रवण नहीं है - नया स्वीकार हैंडल स्थापित नहीं किया जाएगा, और अगला अपडेट उच्च सीमा पर बबल जाएगा, इसीलिए require("react-hot-loader/root").hot बनाया गया था।

किसी भी मामले में - ऐसा प्रतीत होता है कि यदि कोई बाहरी एपीआई को अछूता रखते हुए react-hot-loader से सभी प्रतिक्रिया-विशिष्ट कोड को फेंक देगा - जो कि पर्याप्त होगा, और सभी मौजूदा प्रतिष्ठानों पर लागू होगा।

react-refresh/babel 0.4.0 का उपयोग करना मुझे बड़ी संख्या में फ़ाइलों में यह त्रुटि दे रहा है:

ERROR in ../orbit-app/src/hooks/useStores.ts
Module build failed (from ../node_modules/babel-loader/lib/index.js):
TypeError: Cannot read property '0' of undefined
    at Function.get (/Users/nw/projects/motion/orbit/node_modules/@babel/traverse/lib/path/index.js:115:33)
    at NodePath.unshiftContainer (/Users/nw/projects/motion/orbit/node_modules/@babel/traverse/lib/path/modification.js:191:31)
    at PluginPass.exit (/Users/nw/projects/motion/orbit/node_modules/react-refresh/cjs/react-refresh-babel.development.js:546:28)

मैंने उस फ़ाइल को उस सरलतम चीज़ तक सीमित कर दिया, जो इसका कारण बनती है:

import { useContext } from 'react'

export default () => useContext()

यदि एक रेंडरिंग त्रुटि होती है, तो यह निकटतम त्रुटि सीमा को ट्रिगर करेगा जो कि एक त्रुटि स्थिति में स्नैपशॉट होगा, और त्रुटि सीमाओं को बताने के लिए कोई सामान्य तरीका नहीं है कि उनके बच्चों को संभवतः लाइव रिफ्रेश होने के बाद तय किया जाए।

React के अंदर Fast Refresh कोड याद रखता है कि कौन सी सीमाएँ वर्तमान में विफल हैं। जब भी फास्ट रिफ्रेश अपडेट शेड्यूल किया जाता है, तो यह हमेशा उन्हें रिमूव करेगा।

यदि कोई सीमा नहीं है, लेकिन एक रूट अपडेट में विफल हो गया, तो फास्ट रिफ्रेश उस रूट को अपने अंतिम तत्व के साथ प्रदान करेगा।

यदि रूट माउंट पर विफल रहा है, तो runtime.hasUnrecoverableErrors() आपको बताएंगे। फिर आपको फिर से लोड करना होगा। हम उस मामले को बाद में संभाल सकते थे, मेरे पास इसे ठीक करने का समय नहीं था।

प्रतिक्रिया-रिफ्रेश / बेबल का प्रयोग 0.4.0 मुझे बड़ी संख्या में फाइलों पर यह त्रुटि दे रहा है:

नया मुद्दा दर्ज करें pls?

क्या ऐसे घटकों का पता लगाने का कोई तरीका है?

मैं अपने कार्यान्वयन से जुड़ा था, जो स्वयं Runtime.isLikelyAReactComponent() का उपयोग करता है। यह सही नहीं है, लेकिन यह काफी अच्छा है।

नया स्वीकार हैंडल स्थापित नहीं किया जाएगा, और अगला अपडेट उच्च सीमा पर बुलबुला होगा

क्या आप एक उदाहरण बना सकते हैं? मैं पीछा नहीं कर रहा हूँ। भले ही, यह बंडल के लिए कुछ विशिष्ट है। मैंने जो चाहा, मेट्रो कर दिया। अगर हम एक एपीआई को याद कर रहे हैं तो हम कुछ जोड़ने के लिए वेबपैक से पूछ सकते हैं।

यहां लक्ष्य है कि निरंतरता की गारंटी देते हुए कुछ मॉड्यूलों को फिर से निष्पादित किया जाए। हम अधिकांश संपादन के लिए रूट को अपडेट बबल नहीं करना चाहते हैं।

ऐसा लगता है कि यदि कोई प्रतिक्रिया-हॉट-लोडर से सभी प्रतिक्रिया-विशिष्ट कोड को फेंक देगा, तो बाहरी एपीआई को अछूता नहीं रखेगा

हो सकता है, हालांकि मैं शीर्ष स्तर के कंटेनर को भी निकालना चाहूंगा। मैं त्रुटि बॉक्स के साथ एक सख्त एकीकरण भी चाहता हूं। हो सकता है कि अभी भी react-hot-loader कहा जा सके।

वैसे मैंने अपने गाइड को एक लापता टुकड़ा शामिल करने के लिए संपादित किया जिसे मैं भूल गया - performReactRefresh कॉल। यह वह चीज है जो वास्तव में अपडेट को शेड्यूल करता है।

isLikelyComponentType(type) {
   return typeof type === 'function' && /^[A-Z]/.test(type.name);
},

मैं इस तरह के तर्क से सुरक्षित महसूस नहीं करूंगा। यहां तक ​​कि अगर सभी CapitalizedFunctions प्रतिक्रियाशील घटक हैं लगभग हमेशा - कई मॉड्यूल (मेरा) के रूप में अच्छी तरह से अन्य निर्यात किया है। उदाहरण के लिए _exports-for-test_। यह कोई समस्या नहीं है, लेकिन कुछ _unpredictability_ बनाता है - किसी भी बिंदु पर गर्म सीमा बनाई जा सकती है ... या लाइन बदलने के बाद नहीं बनाई गई।
क्या तोड़ सकता है isLikelyComponentType परीक्षण:

• निर्यात mapStateToProps (परीक्षणों के लिए, उत्पादन कोड में उपयोग नहीं किया गया)
• निर्यात hook (और यह ठीक है)
• निर्यात Class जो एक प्रतिक्रिया वर्ग नहीं हो सकता है (नहीं होगा, लेकिन होना चाहिए)

इसलिए - ऐसे मामले होंगे जब गर्म सीमा की स्थापना की जाएगी, लेकिन नहीं होगी, और ऐसे मामले भी होंगे जब गर्म सीमा की स्थापना की जाएगी, लेकिन नहीं होगी। पुराने अच्छे अस्थिर गर्म पुनः लोडिंग की तरह लगता है हम दोनों को काफी पसंद नहीं है :)

एक जगह है जहाँ गर्म सीमा को लागू करना इतना अप्रत्याशित नहीं होगा, और काफी उम्मीद की जाएगी - एक thing या domain सीमा, या एक निर्देशिका सूचकांक, यानी index.js reexporting एक ही निर्देशिका में Component.js से एक "सार्वजनिक एपीआई" (एक फेसबुक शैली afaik नहीं)।

दूसरे शब्दों में - आप की तरह सब कुछ मेट्रो में किया, लेकिन अधिक सीमाओं के साथ लागू किया गया। बाकी सब, जैसे कि किसी भी आलसी लोड किए गए घटक के लिए ऐसी सीमा स्थापित करने के लिए लाइनिंग नियम, का उपयोग सही व्यवहार लागू करने के लिए किया जा सकता है।

जिसमें से बोला- हॉट फास्ट रिफ्रेश लाज को संभालता? क्या import के दूसरी तरफ से सीमा होने की उम्मीद है?

यह ब्राउज़र में जादू देखने की एक त्वरित कोशिश की और यह बहुत अच्छा है :) मैंने सबसे सरल संभव काम किया, अर्थात सभी इंस्ट्रूमेंटेशन कोड को हार्डकोड करना, इसलिए कोई वेबपैक प्लग इन अभी तक नहीं है

रेपो यहाँ: https://github.com/pekala/react-refresh-test

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

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

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

आप निश्चित रूप से रैपिंग के लिए एक और बैबल प्लगइन बना सकते हैं। लेकिन यह है कि आप webpack के माध्यम से कर कुछ भी नहीं खरीदता है। चूंकि यह वेबपैक-विशिष्ट है। और यह भ्रमित किया जा सकता है कि आप गलती से उस बैबल प्लगइन को किसी अन्य वातावरण में चला सकते हैं (वेबपैक नहीं) जहां यह समझ में नहीं आएगा।

आप कर सकते हैं, compilation.mainTemplate.hooks.require झरना हुक में हुक करके। इसका पिछला आह्वान __webpack_require__ फ़ंक्शन का डिफ़ॉल्ट निकाय है, इसलिए आप सामग्री को try/finally ब्लॉक में लपेटने के लिए हुक में टैप कर सकते हैं।

समस्या को __webpack_require__ अंदर React का संदर्भ मिल रहा है। यह संभव है, लेकिन कुछ हद तक पुनर्संयोजन और पुनरावर्तन गार्ड की आवश्यकता हो सकती है।

अधिक जानकारी के लिए, वेबपैक स्रोत कोड में MainTemplate.js और web/JsonpMainTemplatePlugin.js की जाँच करें। JsonpMainTemplatePlugin ही MainTemplate.js से हुक के झुंड में बस इतना है कि शायद "मांस" है कि आप से निपटने की जरूरत है।

यहाँ एक हरे रंग का प्रोटोटाइप है जिसे मैंने एक साथ हैक किया था जो प्रभावी रूप से दान ऊपर उल्लिखित है। यह काफी अधूरा है, लेकिन वेबपैक में एक लो-फाई कार्यान्वयन साबित होता है: https://gist.github.com/maisano/441a4bc6b2954205803d68deac04a716

कुछ नोट:

• react-dom यहां हार्डकोड किया गया है, इसलिए यह कस्टम रेंडरर्स या सब-पैकेज (जैसे react-dom/profiling ) के साथ काम नहीं करेगा।
• मैंने बहुत गहराई से नहीं देखा है कि वेबपैक के सभी टेम्प्लेट वेरिएंट कैसे काम करते हैं, लेकिन जिस तरह से मैंने मॉड्यूल निष्पादन को लिपटा है वह काफी हैक है। मुझे यकीन नहीं है कि अगर यह उदाहरण काम करेगा, तो कहेंगे, एक umd लाइब्रेरी लक्ष्य का उपयोग करता है।

समस्या को __webpack_require__ के अंदर React का संदर्भ मिल रहा है। यह संभव है, लेकिन कुछ हद तक पुनर्संयोजन और पुनरावर्तन गार्ड की आवश्यकता हो सकती है।

मेरा मानना ​​है कि आपको रिफ्रेश रनटाइम का संदर्भ मिल रहा है।

मेट्रो में मैंने इसे require.Refresh = RefreshRuntime जितनी जल्दी संभव हो हल कर लिया है। तब require कार्यान्वयन के अंदर मैं require फ़ंक्शन से एक गुण पढ़ सकता हूं। यह तुरंत उपलब्ध नहीं होगा, लेकिन इससे कोई फर्क नहीं पड़ेगा अगर हम इसे जल्दी सेट करते हैं।

@maisano मुझे कई चीजों को बदलना पड़ा, और आखिरकार मैं वेबपैक द्वारा बुलाए गए अस्वीकार्य फ़ंक्शन को नहीं देख रहा हूं। मैंने दोनों .accept(module.i, () => {}) और .accept(() => {}) (स्वयं को स्वीकार करने की कोशिश की है, सिवाय इसके कि यह वेबपैक में काम नहीं करता है)। hot संपत्ति सक्षम है, मुझे लगता है कि यह नीचे आया है और स्वीकृत मॉड्यूल के माध्यम से चलता है।

इसलिए मैंने स्वयं स्वीकार करने वाले मॉड्यूल को कॉल करने के लिए पैचिंग वेबपैक को समाप्त किया, और यह अंतिम फिक्स था।

यहाँ पैच है:

diff --git a/node_modules/webpack/lib/HotModuleReplacement.runtime.js b/node_modules/webpack/lib/HotModuleReplacement.runtime.js
index 5756623..7e0c681 100644
--- a/node_modules/webpack/lib/HotModuleReplacement.runtime.js
+++ b/node_modules/webpack/lib/HotModuleReplacement.runtime.js
@@ -301,7 +301,10 @@ module.exports = function() {
                var moduleId = queueItem.id;
                var chain = queueItem.chain;
                module = installedModules[moduleId];
-               if (!module || module.hot._selfAccepted) continue;
+               if (!module || module.hot._selfAccepted) {
+                   module && module.hot._selfAccepted()
+                   continue;
+               }
                if (module.hot._selfDeclined) {
                    return {
                        type: "self-declined",

मुझे पता है कि यह उनके एपीआई के खिलाफ जाता है, जो चाहता है कि "एररक्लैकबैक" हो, मुझे याद है कि यह विशेष रूप से कई साल पहले हमारे आंतरिक एचएमआर पर काम कर रहा था, और आखिरकार हमने अपना खुद का बंडल लिखना शुरू कर दिया। मेरा मानना ​​है कि पार्सल "स्व-स्वीकार" कॉलबैक एपीआई का समर्थन करता है। शायद यह वेबपैक पर एक मुद्दा खोलने के लायक है और अगर हम इसे विलय कर सकते हैं तो देख सकते हैं? @sokra

इसलिए ... मैंने @maisano के काम के आधार पर प्लगइन को और पॉलिश किया:
https://github.com/pmmmwh/react-refresh-webpack-plugin
(मैंने इसे टाइपस्क्रिप्ट में लिखा था क्योंकि मुझे खुद पर भरोसा नहीं है कि मैंने वेबपैक इंटर्नल के साथ जब मैं शुरू किया था, तो मैं इसे जेएस / फ्लो पर सादे में बदल सकता हूं)

मैंने वेबप Dependency वर्गों के साथ हॉट-मॉड्यूल कोड इंजेक्ट करने के लिए एक लोडर की आवश्यकता को दूर करने की कोशिश की, लेकिन प्रतीत होता है कि सभी मॉड्यूल के फिर से पार्स की आवश्यकता होगी (क्योंकि सभी फ़ंक्शन इनलाइन के साथ, हमें अभी भी एक आवश्यकता है react-refresh/runtime कहीं पर

एक और मुद्दा यह है कि वेबपैक में जावास्क्रिप्ट जैसी फ़ाइलों का पता लगाने के लिए कोई सरल तरीके (एफएक) नहीं हैं - उदाहरण के लिए html-webpack-plugin javascript/auto प्रकार का उपयोग करता है, इसलिए मुझे लगता है कि कठिन कोडित किया जा रहा है लोडर इंजेक्शन के लिए एक स्वीकार्य फ़ाइल मास्क (जेएस / टीएस / फ्लो)।

मैंने इस 5 साल पुराने धागे में @gaearon की टिप्पणी के आधार पर त्रुटि सुधार (कम से कम वाक्यविन्यास त्रुटि) को भी जोड़ा। अगला प्रतिक्रिया त्रुटियों से उबर रहा है - मुझे संदेह है कि यह एक वैश्विक त्रुटि सीमा (जैसे AppWrapper react-hot-loader ) को इंजेक्ट करके किया जा सकता है, जो त्रुटि-बॉक्स इंटरफ़ेस से भी निपटेगा, लेकिन नहीं उस समय को पाने के लिए अभी काफी समय है।

@Natew द्वारा उठाए गए मुद्दे को भी टाला जाता है - enqueueUpdate कॉल और hot.accpet(errorHandler) कॉल को डिकॉप्ल करके हासिल किया जाता है।

@pmmmwh क्या समय है! मैंने अभी एक रेपो बनाया है, जिसे मैंने जीस्ट में साझा किए गए थोड़े से काम पर बनाया है।

मैं किसी भी मामले में त्रुटि से निपटने के लिए नहीं मिला है, हालांकि यहां प्लगइन मेरे द्वारा लिए गए प्रारंभिक दृष्टिकोण की तुलना में थोड़ा अधिक ठोस है।

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

यह पहले से ही बॉक्स से बाहर काम करना चाहिए। यहां कस्टम त्रुटि सीमा या रैपिंग की कोई आवश्यकता नहीं है।

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

यह पहले से ही बॉक्स से बाहर काम करना चाहिए। यहां कस्टम त्रुटि सीमा या रैपिंग की कोई आवश्यकता नहीं है।

@ बेयरन स्ट्रेंज। मैंने फ़ंक्शन घटकों को रेंडर करने में त्रुटियों को फेंकने की कोशिश की - यदि त्रुटि return , तो एचएमआर काम करता है, लेकिन अगर यह कहीं और होता है, तो यह कभी-कभी काम नहीं करेगा।

@pmmmwh क्या समय है! मैंने अभी एक रेपो बनाया है, जिसे मैंने जीस्ट में साझा किए गए थोड़े से काम पर बनाया है।

मैं किसी भी मामले में त्रुटि से निपटने के लिए नहीं मिला है, हालांकि यहां प्लगइन मेरे द्वारा लिए गए प्रारंभिक दृष्टिकोण की तुलना में थोड़ा अधिक ठोस है।

@maisano मुझे क्या कहना चाहिए? मैंने वास्तव में इस पर काम करना शुरू कर दिया था और पिछले सप्ताहांत पर निर्भरता इंजेक्शन के मुद्दे के साथ फंस गया ... आपके जीस्ट ने मुझे बाहर का रास्ता प्रदान किया: टाडा:

यदि त्रुटि रिटर्न में होती है, तो एचएमआर काम करता है, लेकिन अगर यह कहीं और होता है, तो यह कभी-कभी काम नहीं करेगा।

मुझे इस बात के बारे में अधिक जानकारी की आवश्यकता है कि आपने वास्तव में क्या कोशिश की और "काम" और "काम नहीं करता" से आपका क्या मतलब है।

कई चीजें हैं जो गलत हो सकती हैं यदि मॉड्यूल बंडलर एकीकरण को सही तरीके से लागू नहीं किया गया है (जो विषय या यह धागा है)। मुझे उम्मीद है कि रिएक्ट में कुछ भी नहीं है जो संपादन के दौरान पेश की गई त्रुटियों से पुनर्प्राप्ति को रोकता है। आप यह सत्यापित कर सकते हैं कि यह React Native 0.61 RC3 में काम करता है।

@pmmmwh , @maisano निम्नलिखित चेक घटकों को निर्यात नाम के साथ घटक के रूप में और कोई ताज़ा सीमा स्थापित नहीं है:

https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/master/src/loader/utils/isReactRefreshBoundary.ts#L23 -L27

const desc = Object.getOwnPropertyDescriptor(moduleExports, key);
if (desc && desc.get) {
  // Don't invoke getters as they may have side effects.
  return false;
}

मुझे नहीं पता कि Metro में इसकी आवश्यकता क्यों है, लेकिन webpack गेटर्स में केवल नामांकित निर्यात वापस आते हैं और जहां तक ​​मैं बता सकता हूं कि कोई दुष्प्रभाव नहीं हैं। इसलिए इसे हटाना सुरक्षित होना चाहिए।

@gaearon React.lazy घटकों (जैसे कोड-विभाजित मार्गों) को फिर से प्रदान नहीं किया जा रहा है। यह डिजाइन द्वारा है? मैं देख सकता हूं कि ताज़ा सीमा स्थापित है लेकिन performReactRefresh() कुछ भी नहीं लगता है। आलसी बच्चों के लिए ठीक ताज़ा परिवर्तन, इसलिए यह कोई बड़ी बात नहीं है, लेकिन मैं सोच रहा हूँ कि क्या हम कुछ गलत कर रहे हैं ...

lazy थोड़ी राज्य मशीन है - यह पुराने घटक के संदर्भ में है, और उस संदर्भ को अद्यतन करना होगा।
अब आइए कल्पना करें कि यह था, और अब एक बिलकुल नए lazy वस्तु का उल्लेख किया जा रहा है) - इसे फिर से loading चरण में जाना होगा, और यह संभवतः सभी नेस्टेड पेड़ को नष्ट कर देगा।

मैं आलसी से काम करने की उम्मीद करूंगा। शायद कुछ टूट गया। मुझे एक प्रजनन मामले को देखने की जरूरत है।

चूंकि कुछ प्रोटोटाइप हैं, क्या हमें एक को चुनना चाहिए और फिर इस चर्चा को इसके मुद्दों पर ले जाना चाहिए? और वहां पुनरावृति।

वहाँ है:
https://github.com/maisano/react-refresh-plugin
तथा:
https://github.com/pmmmwh/react-refresh-webpack-plugin
मैंने pmmwh के प्लगइन का एक कांटा स्थापित किया है जो [email protected] साथ काम करता है (निर्यात नाम भी तय करता है):
https://github.com/WebHotelier/webpack-fast-refresh

react-hot-loader बारे में क्या?

react-hot-loader fast refresh से लगभग सभी सुविधाओं को वापस भेज दिया गया है, लेकिन कुछ ऐतिहासिक और एकीकृत क्षण हैं, जो सभी को बैकपोर्ट नहीं दे रहे हैं, और, ईमानदारी से, उन्हें "rhal" शब्दों में फिर से लागू करने का कोई मतलब नहीं है । तो - इसे रिटायर होने दो।

एक अन्य: https://github.com/yiminghe/react-refresh-loader

मुझे इस बात के बारे में अधिक जानकारी की आवश्यकता है कि आपने वास्तव में क्या कोशिश की और "काम" और "काम नहीं करता" से आपका क्या मतलब है।

कई चीजें हैं जो गलत हो सकती हैं यदि मॉड्यूल बंडलर एकीकरण को सही तरीके से लागू नहीं किया गया है (जो विषय या यह धागा है)। मुझे उम्मीद है कि रिएक्ट में कुछ भी नहीं है जो संपादन के दौरान पेश की गई त्रुटियों से पुनर्प्राप्ति को रोकता है। आप यह सत्यापित कर सकते हैं कि यह React Native 0.61 RC3 में काम करता है।

कुछ मोड़ के बाद, मैं सत्यापित कर सकता हूं कि यह काम करता है।

हालाँकि - ऐसा लगता है कि कोलाहल प्लगइन कक्षाओं के लिए काम नहीं कर रहा था। मैंने जाँच की है और यह सभी तरह के इंजेक्शन और react-refresh/runtime ठीक से काम करने के संबंध में कार्यान्वयन के संबंध में कम होता है। मुझे यकीन नहीं है कि अगर यह इरादा है या अगर यह वेबपैक विशिष्ट है, अगर यह बाद का है तो मैं कल एक फिक्स जमीन पर उतरने की कोशिश कर सकता हूं। (मैंने केवल मेट्रो प्रीसेट के साथ इसका परीक्षण भी किया था, यहाँ पर पुन: पेश

मुझे यकीन है कि यह आरएन के लिए काम करता है, लेकिन मेरी वर्तमान मशीन पर मुझे आरएन पर परीक्षण करने के लिए एक पर्यावरण काम नहीं है, इसलिए यदि आप मुझे मेट्रो में बेबल प्लगइन के कार्यान्वयन या उन परिवर्तनों को इंगित कर सकते हैं जो वास्तव में उपयोगी होंगे।

चूंकि कुछ प्रोटोटाइप हैं, क्या हमें एक को चुनना चाहिए और फिर इस चर्चा को इसके मुद्दों पर ले जाना चाहिए? और वहां पुनरावृति।

शायद हम यहां जा सकते हैं? अपनी अंतिम टिप्पणी के बाद से मैंने पूरे प्रोजेक्ट को सादे JS में पोर्ट कर लिया है और अपडेट कतार में कुछ सुधार जोड़ दिए हैं। मुझे वेबपैक @ 5 के लिए प्लगइन पोर्ट करने के लिए नहीं मिला है, लेकिन @apostolos द्वारा वेबपैक @ में नए HMR लॉजिक को पढ़ने के बाद, फिक्स सीधे-आगे होना चाहिए।

हां, बाबेल प्लगइन कक्षाएं पंजीकृत नहीं करेगा। आशय यह है कि यह मॉड्यूल सिस्टम स्तर पर होगा। प्रत्येक निर्यात को एक संभावित घटक "संभावना" होने के लिए जाँच की जानी चाहिए। (चेकिंग फ़ंक्शन रनटाइम द्वारा प्रदान किया जाता है।) यदि सही है, तो निर्यात को पंजीकृत करें, ठीक उसी तरह जैसे बैबेल प्लग इन होता है। इसे filename exports%export_name जैसी ID दें। यह वही है जो कक्षाओं को मेट्रो में काम करता है, क्योंकि बैबल प्लगइन उन्हें नहीं मिलेगा।

दूसरे शब्दों में, चूँकि हम क्लास स्टेट को वैसे भी संरक्षित नहीं कर सकते हैं, इसलिए हम उन्हें ट्रांसफॉर्मेशन के साथ सोर्स कोड में इनलाइन खोजने की कोशिश करने के बजाय मॉड्यूल एक्सपोर्ट बाउंड्री को "लोकेट" कर सकते हैं। निर्यात हमें उन घटकों के लिए "कैच ऑल" के रूप में कार्य करना चाहिए जो हमें प्लगइन के साथ नहीं मिले।

Mailchimp ने पिछले साझा किए गए प्लगइन के कांटे का उपयोग करना शुरू कर दिया। यह एक छोटे से अधिक बाहर fleshed किया गया है और जो लोग इसे का उपयोग करने में चुना है काफी खुश लग रहे हो। हम स्थानीय स्तर पर इसे जारी रखना चाहते हैं। मैं कांटा निकालने और ऊपर की ओर एक बार अपडेट अपडेट प्रकाशित करने की योजना बना रहा हूं।

@gaearon एक प्रतीक को जोड़ने पर विचार हम उन चीजों से

export default create({
  id: '100'
})

export const View = () => <div />

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

संपादित करें: मुझे एहसास हुआ कि यह ताज़ा कार्यान्वयन में जा सकता है! मुझे लगा कि यह रनटाइम में बेहतर हो सकता है लेकिन शायद नहीं। लोडर के इतने सारे अलग-अलग प्रभावों के साथ यह एक मानक तरीका हो सकता है।

10 साल आगे चलिए। आपका कोडबेस कैसा दिखता है? यहां अनुमति दें, वहां से अस्वीकृत करें? कैसे रखें इन झंडों को आज तक? कैसे करें कारण? जैसे कि अपडेट_ स्थानों के लिए _safe, और _unsafe_, आपको संरक्षित करना है, या किसी कारण से ठीक से मेल नहीं खा सकते हैं। प्रत्येक मामले में कौन से कारण वैध कारण हैं?

• जो symbols आपके पास और अधिक होगा - लगभग force allow रीलोड, या force disallow रीलोड
• आप अद्यतन प्रसार सीमा को कम क्यों करना चाहते हैं (अर्थात "इस" मॉड्यूल सीमा पर अद्यतन को स्वीकार करें), या इसे उठाना चाहते हैं (अर्थात "उस" मॉड्यूल सीमा पर अद्यतन को स्वीकार करें)
• यदि कोई सीमा निर्धारित नहीं होगी तो क्या होगा? क्या यह केवल एक प्रदर्शन समस्या है, या कुछ और अधिक गंभीर हो सकता है?

हाय दोस्तों, मैं यहाँ एक हाथ उधार देने के लिए देख रहा हूँ। क्या हम एकल रेपो / प्रयास पर सहमत हुए हैं?

क्या यह रेपो @pmmmwh द्वारा साझा किया गया है
https://github.com/pmmmwh/react-refresh-webpack-plugin

या क्या यह रेपो @maisano द्वारा साझा किया गया है
https://github.com/maisano/react-refresh-plugin

ऐसा लगता है कि @pmmmwh द्वारा एक को और हाल ही में प्रतिबद्ध किया गया है। जब तक मैं नहीं सुनता अन्यथा मैं मानने वाला हूं कि इस पर ध्यान केंद्रित करने वाला व्यक्ति है।

पार्सल 2 में कार्यान्वयन यहाँ शुरू हो गया है: https://github.com/parcel-bundler/parcel/pull/3654

गर्मी!

किसी को भी इसकी तलाश के लिए, रोलअप परियोजनाओं के विकास के लिए रोलअप परियोजनाओं के लिए रीएक्ट रिफ्रेश का कार्यान्वयन: https://github.com/PepsRyuu/rollup-plugin-react-refresh

शायद सबसे साफ कार्यान्वयन नहीं है, लेकिन यह काम करता है।

वेबपैक समाधानों के लिए, ऐसा लगता है कि उपरोक्त प्लगइन्स की कोई आधिकारिक रिलीज़ नहीं हुई है, इसलिए ऐसा लगता है कि प्रतिक्रिया के लिए सबसे अच्छा एचएमआर समाधान डैन की लाइब्रेरी अभी भी है: https://github.com/gaearon/react-hot-loader

हमने सिर्फ पार्सल 2 अल्फा 3 को बॉक्स के बाहर फास्ट रिफ्रेश के लिए सपोर्ट के साथ शिप किया है! इसे ट्राय करने के लिए स्वतंत्र महसूस करें। .Com / https://twitter.com/devongovett/status/119718738888985860096?s=20

🥳 आरएचएल को जोड़ा गया डिप्रेसेशन नोट

एक नुस्खा जिसका उपयोग मैं CRA ऐप पर प्रगति में @pmmmwh के काम में करने के लिए कर रहा हूं, react-app-rewired , और customize-cra :

npx create-react-app <project_dir> --typescript

npm install -D react-app-rewired customize-cra react-refresh babel-loader https://github.com/pmmmwh/react-refresh-webpack-plugin

./package.json संपादित करें:

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },

./config-overrides.js फ़ाइल जोड़ें:

// eslint-disable-next-line
const { addBabelPlugin, addWebpackPlugin, override } = require('customize-cra');
// eslint-disable-next-line
const ReactRefreshPlugin = require('react-refresh-webpack-plugin');

/* config-overrides.js */
module.exports = override(
  process.env.NODE_ENV === 'development'
    ? addBabelPlugin('react-refresh/babel')
    : undefined,
  process.env.NODE_ENV === 'development'
    ? addWebpackPlugin(new ReactRefreshPlugin())
    : undefined,
);

अब तक के अनुभव का आनंद ले रहे हैं। सभी शामिल सभी कार्यों के लिए धन्यवाद!

धन्यवाद @ drather19 !

मैंने आपके निर्देश के आधार पर एक भंडार बनाया, यह काम करता है:https://github.com/jihchi/react-app-rewired-react-refreshअगर कोई इसे आज़माना चाहता है और कुछ टाइपिंग को बचाना चाहता है, तो बेझिझक रेपो का क्लोन तैयार करें।

कृपया https://github.com/pmmmwh/react-refresh-webpack-plugin/tree/master/examples/cra-kitchen-sink देखें

और ... वेबपैक के लिए v0.1.0 सिर्फ

@ drather19 @jihchi
आप लोग उस संस्करण पर स्विच करना चाह सकते हैं - इसमें एक अधिक एकीकृत अनुभव और साथ ही प्रारंभिक कार्यान्वयन पर बहुत सारे बग सुधार शामिल हैं।

@pmmmwh ts-loader + babel-loader ?

@pmmmwh ts-loader + babel-loader ?

मैंने टीएस के खिलाफ केवल बैबेल के साथ परीक्षण किया और यह काम करता है, इसलिए यदि यह काम नहीं करता है जब आप टीएस + बैबल लोडर का उपयोग करते हैं तो कृपया एक मुद्दा दर्ज करने के लिए स्वतंत्र महसूस करें :)

@ drather19 मैंने क्लोनिंग और अपने रेपो को चलाने की कोशिश की, लेकिन देव सर्वर कभी भी शुरू नहीं हुआ।

वातावरण,
OS - OSX 10.14.6
नोड - v12.13.0
सूत -1.19.2

@pmmmwh - FYI करें

react-app-rewired-react-refresh on  master is 📦 v0.1.0 via ⬢ v12.13.0
❯ yarn start
yarn run v1.19.2
$ react-app-rewired start | cat
ℹ ｢wds｣: Project is running at http://192.168.1.178/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/seanmatheson/Development/temp/react-app-rewired-react-refresh/public
ℹ ｢wds｣: 404s will fallback to /index.html
Starting the development server...

@ drather19 मैंने क्लोनिंग और अपने रेपो को चलाने की कोशिश की, लेकिन देव सर्वर कभी भी शुरू नहीं हुआ।

वातावरण,
OS - OSX 10.14.6
नोड - v12.13.0
सूत -1.19.2

@pmmmwh - FYI करें

react-app-rewired-react-refresh on  master is 📦 v0.1.0 via ⬢ v12.13.0
❯ yarn start
yarn run v1.19.2
$ react-app-rewired start | cat
ℹ ｢wds｣: Project is running at http://192.168.1.178/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/seanmatheson/Development/temp/react-app-rewired-react-refresh/public
ℹ ｢wds｣: 404s will fallback to /index.html
Starting the development server...

यह प्लगइन के master शाखा में तय किया गया है, और कल जारी किया जाएगा।

मैं Babel का उपयोग करके टाइपस्क्रिप्ट रिएक्ट ऐप के साथ @pmmmwh के वेबपैक प्लगइन को प्राप्त करने में कामयाब रहा। हालाँकि, वृद्धिशील बनाता है ~ ts-loader के साथ ~ 2 सेकंड के बजाय लगभग 12 सेकंड। मैं यह देखने के लिए इसके साथ खेलता रहूंगा कि क्या मुझे बैबल कॉन्फिग साइड पर कुछ याद आ रहा है, जो प्रदर्शन को करीब लाता है, लेकिन अभी के लिए यह टीएस-लोडर और फुल रिफ्रेश की तुलना में वॉश है।

@IronSean कृपया उस प्लगइन के रेपो में रिपोर्ट करें? यह सामान्य नहीं लगता है।

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

मन वहाँ अपने विन्यास / सेटअप पोस्टिंग? मैं अधिक संदर्भ के बिना मुद्दों का पता लगाने में सक्षम नहीं होगा।

@pmmmwh मैंने इस मुद्दे को अपने रेपो में स्थानांतरित करने के लिए खोल दिया जब मैंने पुष्टि की कि यह वास्तव में आपके प्लगइन का अंतर बना रहा है:
https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/20

क्या Preact के साथ react-refresh ( React Fast Refresh ?) काम होगा, या Preact के लिए react-hot-loader दीर्घकालिक समाधान है?

@ जंबुडमल जो

CRA के लोग फास्ट रिफ्रेश के साथ दौड़ना चाहते हैं, मेरे पास अब निम्नलिखित craco.config.js माध्यम से क्रैको (बनाम प्रतिक्रिया-ऐप-रीवाइर्ड + कस्टमाइज़-क्रेक) के साथ बेहतर भाग्य है।

// eslint-disable-next-line
const { whenDev } = require('@craco/craco');
// eslint-disable-next-line
const ReactRefreshPlugin = require('react-refresh-webpack-plugin');

module.exports = {
  webpack: {
    configure: webpackConfig => {
      if (process.env.NODE_ENV === 'development') {
        webpackConfig.module.rules.push({
          test: /BabelDetectComponent\.js/,
          use: [
            {
              loader: require.resolve('babel-loader'),
              options: {
                plugins: [require.resolve('react-refresh/babel')],
              },
            },
          ],
        });
        webpackConfig.module.rules.push({
          test: /\.[jt]sx?$/,
          exclude: /node_modules/,
          use: [
            {
              loader: require.resolve('babel-loader'),
              options: {
                presets: [
                  '@babel/react',
                  '@babel/typescript',
                  ['@babel/env', { modules: false }],
                ],
                plugins: [
                  '@babel/plugin-proposal-class-properties',
                  '@babel/plugin-proposal-optional-chaining',
                  '@babel/plugin-proposal-nullish-coalescing-operator',
                  'react-refresh/babel',
                ],
              },
            },
          ],
        });
      }
      return webpackConfig;
    },
    plugins: [
      ...whenDev(
        () => [new ReactRefreshPlugin({ disableRefreshCheck: false })],
        [],
      ),
    ],
  },
};

विशेष रूप से, webpackConfig.optimization.runtimeChunk = false; जोड़ने से आप हुक जोड़ेंगे / हटा सकते हैं और फिर भी शालीनतापूर्वक ताज़ा कर पाएंगे।

अब और भी बेहतर अनुभव का आनंद ले रहे हैं। Https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/25 के माध्यम से टिप के लिए @ mmhand123 को धन्यवाद ! (<- हल!)

@ Drather19 के सुझाव के आधार पर मैंने इसे आसान बनाने के लिए एक कस्टमाइज़- एसिटनिक / कस्टमाइज्ड-क्रेप-रिएक्शन-रिफ्रेश देखें ।

@ Drather19 के लिए धन्यवाद, मैं कोड को थोड़ा संशोधित करता हूं अब यह एक यार्न कार्यक्षेत्र मोनोरेपो सेटअप में काम कर सकता है।

सबसे पहले, उप-पैकेजों में निम्नलिखित को स्थापित करें जिन्हें आप तेज़ ताज़ा करना चाहते हैं:

"@craco/craco": "^5.6.3", "@pmmmwh/react-refresh-webpack-plugin": "^0.2.0", "webpack-hot-middleware": "^2.25.0"

फिर इसे craco.config.js :

;(function ForbidCRAClearConsole() {
    try {
        require('react-dev-utils/clearConsole')
        require.cache[require.resolve('react-dev-utils/clearConsole')].exports = () => {}
    } catch (e) {}
})()

const { whenDev } = require('@craco/craco')
const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin')

module.exports = {
    webpack: {
        configure: webpackConfig => {
            whenDev(() => {
                // Work around monorepo setup when using yarn workspace hoisted packages
                // without the need to list 'babel-loader' and 'babel-preset-react-app' as
                // dependencies to avoid duplication since 'react-scripts' already has them.
                const reactLoaderConfig = webpackConfig.module.rules
                    .find(x => Array.isArray(x.oneOf))
                    .oneOf.find(
                        x =>
                            x.options &&
                            x.options.presets &&
                            x.options.presets.some(p => p.includes('babel-preset-react-app')) &&
                            x.loader &&
                            typeof x.loader.includes === 'function' &&
                            x.loader.includes('babel-loader') &&
                            x.test &&
                            typeof x.test.test === 'function' &&
                            x.test.test('x.tsx') &&
                            x.test.test('x.jsx'),
                    )

                if (reactLoaderConfig) {
                    webpackConfig.module.rules.push({
                        test: /BabelDetectComponent\.js/,
                        use: [
                            {
                                loader: reactLoaderConfig.loader,
                                options: {
                                    plugins: [require.resolve('react-refresh/babel')],
                                },
                            },
                        ],
                    })

                    webpackConfig.module.rules.push({
                        test: /\.[jt]sx?$/,
                        exclude: /node_modules/,
                        use: [
                            {
                                loader: reactLoaderConfig.loader,
                                options: {
                                    presets: reactLoaderConfig.options.presets,
                                    plugins: [require.resolve('react-refresh/babel')],
                                },
                            },
                        ],
                    })
                } else {
                    console.error('cannot find react app loader')
                }

                // console.debug(require('util').inspect(webpackConfig.module.rules, { colors: true, depth: null }))
            })

            return webpackConfig
        },
        plugins: [whenDev(() => new ReactRefreshPlugin({ disableRefreshCheck: false }))].filter(Boolean),
    },
}

Do @gaearon हम तेजी से ताज़ा समय में कुछ बिंदु पर डिफ़ॉल्ट रूप से सीआरए में उपलब्ध होने की उम्मीद है?
यदि ऐसा है तो उसके लिए क्या आवश्यक है?

उस कार्य के लिए कुछ राशि की आवश्यकता है :-) जो वर्तमान में किया जा रहा है।

यदि HMR फ़ंक्शन का उपयोग किया जाता है? उदाहरण के लिए घटकडिमाउंट।
मैं प्रतिक्रिया-प्रॉक्सी का उपयोग करता हूं और कंपोनेंटडिमाउंट को कॉल किया जाएगा।
और प्रतिक्रिया 15.X फास्ट रिफ्रेश का उपयोग कर सकते हैं?

• componentDidMount कहा जाएगा। साथ ही unmount - वर्ग पूर्ण रूप से पुनः लोड किए जाएंगे।
• और यह react-proxy का उपयोग बंद करने का अच्छा समय है। ठीक है, आपको कुछ साल पहले शायद रोकना चाहिए।
• 15.X ? - बिलकुल नहीं। फास्ट रीफ़्रेश करें __is प्रतिक्रिया का एक part__ है, और इस प्रकार केवल एक आधुनिक संस्करण में मौजूद है।

इसलिए हमें प्रतिक्रिया-प्रॉक्सी को बदलने के लिए फास्ट रिफ्रेश या प्रतिक्रिया-हॉट-लोडर का उपयोग करना चाहिए?
क्या एचएमआर के लिए कार्यों (कंपोनेंटमाउंट) को निष्पादित करने से रोकने का कोई तरीका है? - यह नए डेटा प्राप्त करने के लिए विधि को कॉल करेगा।

मुझे JIT में प्रतिक्रिया-हॉट-लोडर का उपयोग कैसे करना चाहिए? - ब्राउज़र वास्तविक समय संकलन

• इसलिए हमें प्रतिक्रिया-प्रॉक्सी को बदलने के लिए फास्ट रिफ्रेश या प्रतिक्रिया-हॉट-लोडर का उपयोग करना चाहिए?

  fast refresh पहले आज़माएं, फिर RHL

• क्या एचएमआर के लिए कार्यों (कंपोनेंटमाउंट) को निष्पादित करने से रोकने का कोई तरीका है? - यह नए डेटा प्राप्त करने के लिए विधि को कॉल करेगा।

  (उपयोग हुक ...), घटक जीवन चक्र पर भरोसा न करें, जब आवश्यक हो तो डेटा प्राप्त करें। react-query , swr या अन्य समाधान आज़माएं।

इस सवाल के लिए कि नए एचएमआर का उपयोग कैसे किया जाना चाहिए, मुझे नहीं लगता कि मुझे वहां नवीनतम सोच के बारे में पता है। मैं देख रहा हूं @ Cear रेपो पर wip PR है:

पाठकों के लिए स्पष्ट करने के लिए, पीआर बहुत पुराना है और प्रासंगिक नहीं है।

मुझे इस बारे में कुछ लिखने की आवश्यकता है कि फास्ट रिफ्रेश कैसे काम करता है और इसे कैसे एकीकृत किया जाए। अभी तक समय नहीं था

आज तक, वह पीआर अभी भी खुला है। यह अच्छा होगा यदि केवल प्रासंगिक पीआर जिन्हें अभी भी मर्ज करने का मौका दिया गया है उन्हें बेहतर अवलोकन के लिए खुला रखा जाएगा। यदि आप उन्हें केवल एक संदर्भ के रूप में रख रहे हैं, तो मैं आपको एक शाखा, टैग या विभिन्न रिपॉजिटरी में सामान ले जाने की सलाह दूंगा।

मैं Error: [React Refresh] Hot Module Replacement (HMR) is not enabled! React Refresh requires HMR to function properly. हूं, मैंने प्रलेखन का पालन किया है, लेकिन ऐसा लगता है कि मुझे कुछ याद आ गया है?

मुझे त्रुटि मिलती रहती है: [प्रतिक्रिया ताज़ा करें] हॉट मॉड्यूल रिप्लेसमेंट (HMR) सक्षम नहीं है! रिएक्ट रिफ्रेश को ठीक से काम करने के लिए HMR की आवश्यकता होती है। मैंने दस्तावेज़ीकरण का पालन किया है, लेकिन ऐसा लगता है कि मुझे कुछ याद आ गया है?

@silkfire मैं मान रहा हूं कि आप https://github.com/pmmmwh/react-refresh-webpack-plugin/।

आज तक, वह पीआर अभी भी खुला है। यह अच्छा होगा यदि केवल प्रासंगिक पीआर जिन्हें अभी भी मर्ज करने का मौका दिया गया है उन्हें बेहतर अवलोकन के लिए खुला रखा जाएगा। यदि आप उन्हें केवल एक संदर्भ के रूप में रख रहे हैं, तो मैं आपको एक शाखा, टैग या विभिन्न रिपॉजिटरी में सामान ले जाने की सलाह दूंगा।

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

मैं इसे बंद करने जा रहा हूं।

हमारे पास https://github.com/pmmmwh/react-refresh-webpack-plugin/ वेबपैक के लिए एक संदर्भ कार्यान्वयन के रूप में है।
और https://github.com/facebook/react/issues/16604#issuecomment -528663101 बताते हैं कि कस्टम एकीकरण कैसे करें।

मैं Error: [React Refresh] Hot Module Replacement (HMR) is not enabled! React Refresh requires HMR to function properly. हूं, मैंने प्रलेखन का पालन किया है, लेकिन ऐसा लगता है कि मुझे कुछ याद आ गया है?

ऐसा लगता है कि आपने वेबपैक HMR को सक्षम नहीं किया है। आगे की मदद के लिए कृपया प्लगइन के रेपो में एक समस्या दर्ज करें।

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

इस तरह की जानकारी github मुद्दों और ब्लॉग पोस्ट में दफन नहीं किया जाना चाहिए।

@theKashey यह रिएक्ट में है, लेकिन प्रतिक्रिया-डोम कार्यान्वयन केवल एक के लिए प्रयोगात्मक है।
इसके अलावा, एक तेज़ रिफ्रेश कार्यान्वयन है जिसे क्रिएट-रिएक्शन-ऐप के साथ बंडल किया जाएगा, लेकिन यह अभी तक जारी नहीं किया गया है: pmmmwh / react-refresh-webpack-plugin # 7। शायद यह अगले प्रतिक्रिया-स्क्रिप्ट संस्करण में होगा।

तो शायद रिएक्ट टीम को फिलहाल इस प्रायोगिक चरण में प्रतिक्रिया-डोम के लिए फास्ट रिफ्रेश के बारे में बात करना सही नहीं लगता है।

यह रिएक्ट में है, लेकिन प्रतिक्रिया-डोम कार्यान्वयन केवल एक के लिए प्रयोगात्मक है।

स्पष्ट होने के लिए, रिएक्ट नेटिव की तरह react-dom में कार्यान्वयन स्थिर है। यह सिर्फ इतना है कि एकीकरण सभी स्थिर नहीं हैं।

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

यह उचित लगता है। मुझे एक उन्नत मार्गदर्शिका अनुभाग में पीआर जोड़ने में खुशी होगी, शायद इसी तरह के आरएन पृष्ठ पर आधारित हो।

@gaearon
मेरी प्रतिक्रिया एप्लिकेशन कुछ स्टाइल घटक परिवर्तनों के साथ ठीक है और बिना किसी समस्या के उन परिवर्तनों को सही ढंग से लागू कर रहा है।
हालाँकि, जब मैं Redux के रिड्यूसर में कुछ कोड बदलता हूं, तो पूरा ऐप हार्ड-रिफ्रेश हो जाता है और सभी redux स्टेट्स को खो देता है।
मैं जैसे कुछ अन्य पुस्तकालयों का उपयोग करने की आवश्यकता है redux-persist के साथ-साथ वर्तमान स्थिति को बचाने के लिए react-fast-refresh ?

हमने एक पूरा घेरा बना लिया है और यहाँ हम फिर से जा रहे हैं and

एचएमआर निम्न स्तर पर काम कर रहा है, और तेजी से रिफ्रेश जिम्मेदारी से बाहर है। कृपया रिडक्स या वेबपैक डॉक्स देखें

हमने एक पूरा घेरा बना लिया है और यहाँ हम फिर से जा रहे हैं and

एचएमआर निम्न स्तर पर काम कर रहा है, और तेजी से रिफ्रेश जिम्मेदारी से बाहर है। कृपया रिडक्स या वेबपैक डॉक्स देखें

क्या आप पूर्ण वृत्त संदर्भ जोड़ेंगे?

@ jwchang0206 सुनिश्चित करें कि आपके पास इस तरह का कोड आपके स्टोर में है।

क्या आप पूर्ण वृत्त संदर्भ जोड़ेंगे?

रिएक्ट हॉट लोडर से वही प्रश्न पूछे गए। वही जवाब दिए गए। हम एक नए चक्र की शुरुआत में हैं।

@ jwchang0206 redux-reducers-इंजेक्टर को देखो, एक छोटी सी लाइब्रेरी जिसे मैंने इस मुद्दे को संबोधित करने के लिए लिखा था।
यह आपको पुनः लोडिंग के साथ पुनः लोड करने वाले रेड्यूसर का समर्थन करने की अनुमति देगा।
सुनिश्चित करें कि आप अपने reducers में अपरिवर्तनीयता के redux सिद्धांतों का पालन करते हैं और यह सुचारू red काम करेगा
और अगर आप साग का उपयोग कर रहे हैं, तो आप रेडक्स-सागास-इंजेक्टर का उपयोग कर सकते हैं।

@gaearon मैं window के उपयोग से थोड़ा भ्रमित हूं। यह मेरे लिए नहीं दिखता है क्योंकि यह वास्तव में आवश्यक है क्योंकि कार्यान्वयन की अदला-बदली की जाती है? किस बात का?

var prevRefreshReg = window.$RefreshReg$; // these are dummies
var prevRefreshSig = window.$RefreshSig$; // these are dummies
var RefreshRuntime = require('react-refresh/runtime');

window.$RefreshReg$ = (type, id) =>{ /*...*/ }
window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;

try {
  // ...
} finally {
  window.$RefreshReg$ = prevRefreshReg; // these are dummies again
  window.$RefreshSig$ = prevRefreshSig; // these are dummies again
}

मेरा अपना कस्टम बंडलर है और मैं इसे लागू करने की प्रक्रिया कर रहा हूं, लेकिन मैं यह नहीं देख सकता कि ऐसा क्यों होना चाहिए या इसका क्या मतलब होगा ... शुरू में मुझे कुछ मेमोरी उपयोग / रिसाव अनुकूलन पर संदेह था लेकिन ये केवल RefreshRuntime लिए अग्रेषित किए गए कॉल हैं ...

@leidegre मैं विंडो ऑब्जेक्ट पर $ RefreshSig $ सेट करने के निर्णय पर टिप्पणी नहीं कर सकता, लेकिन एक ब्राउज़र वातावरण के लिए युग्मन ने मुझे प्रतिक्रियाशील NativeScript में फास्ट रिफ्रेश का उपभोग करते समय समस्याएं दीं। @pmmmwh ब्राउज़र पर फास्ट रिफ्रेश की कपलिंग को दूर करने के लिए अपने फास्ट रिफ्रेश वेबपैक प्लगइन को अपनाने से बचाव में आया (इस मुद्दे पर सामना किए गए और दूर किए गए मुद्दों पर चर्चा की गई: https://github.com/pmmmwh/react-rebesh-webpack-plugin/ मुद्दों / 79)। मुझे आश्चर्य है कि अगर इस्तेमाल किया दृष्टिकोण आपके कस्टम बंडलर के फास्ट रिफ्रेश के एकीकरण में आपके किसी काम का होगा।

मेरा बंडल ज्यादातर टाइपस्क्रिप्ट कंपाइलर के आसपास एक आवरण है। कार्यान्वयन ज्यादातर यह react-refresh/babel आगंतुक से अनुकूलित है।

यह सिर्फ एक साधारण बात है जो काम करती है लेकिन यह react-refresh/bable आगंतुक के रूप में पूरी नहीं होती है।

import ts = require("typescript")

import { IndexModule } from "./registry"

/** Enables the use of `react-refresh` for hot reloading of React components. */
export function hotTransform(m: IndexModule, hot: boolean) {
  // see https://github.com/facebook/react/issues/16604#issuecomment-528663101
  return (ctx: ts.TransformationContext) => {
    return (sourceFile: ts.SourceFile) => {
      const refreshRuntime = ts.createUniqueName("ReactRefreshRuntime")

      const createSignatureFunctionForTransform = ts.createPropertyAccess(
        refreshRuntime,
        "createSignatureFunctionForTransform"
      )

      const register = ts.createPropertyAccess(refreshRuntime, "register")

      let hasComponents = false

      function visitor(node: ts.Node): ts.VisitResult<ts.Node> {
        if (ts.isFunctionDeclaration(node)) {
          if (_hasModifier(node, ts.SyntaxKind.ExportKeyword)) {
            // assert component naming convention

            if (node.name === undefined) {
              console.warn("unsupported export of unnamed function in ...")
              return node
            }

            const name = node.name
            if (!_isComponentName(name.text)) {
              console.warn(
                `warning: unsupported export '${name.text}' in ${m.path} (${m.id}) does not look like a function component, component names start with a capital letter A-Z. TSX/JSX files should only export React components.`
              )
              return node
            }

            if (!hot) {
              return node // opt-out
            }

            hasComponents = true

            let hookSignatureString = ""

            function hookSignatureStringVisitor(
              node: ts.Node
            ): ts.VisitResult<ts.Node> {
              const hookSig = _getHookSignature(node)
              if (hookSig !== undefined) {
                if (0 < hookSignatureString.length) {
                  hookSignatureString += "\n"
                }
                hookSignatureString += hookSig
              }
              return node
            }

            // update function body to include the call to create signature on render

            const signature = ts.createUniqueName("s")

            node = ts.visitEachChild(
              node,
              (node) => {
                if (ts.isBlock(node)) {
                  return ts.updateBlock(
                    ts.visitEachChild(node, hookSignatureStringVisitor, ctx),
                    [
                      ts.createExpressionStatement(
                        ts.createCall(signature, undefined, [])
                      ),
                      ...node.statements,
                    ]
                  )
                }
                return node
              },
              ctx
            )

            const signatureScope = ts.createVariableStatement(
              undefined,
              ts.createVariableDeclarationList(
                [
                  ts.createVariableDeclaration(
                    signature,
                    undefined,
                    ts.createCall(
                      createSignatureFunctionForTransform,
                      undefined,
                      undefined
                    )
                  ),
                ],
                ts.NodeFlags.Const
              )
            )

            const createSignature = ts.createExpressionStatement(
              ts.createCall(signature, undefined, [
                name,
                ts.createStringLiteral(hookSignatureString),
              ])
            )

            const registerComponent = ts.createExpressionStatement(
              ts.createCall(register, undefined, [
                name,
                ts.createStringLiteral(m.path + " " + name.text),
              ])
            )

            return [signatureScope, node, createSignature, registerComponent]
          }
        }

        if (!hot) {
          // if hot reloading isn't enable, remove hot reloading API calls
          if (ts.isExpressionStatement(node)) {
            const call = node.expression
            if (ts.isCallExpression(call)) {
              if (
                _isPropertyAccessPath(
                  call.expression,
                  "module",
                  "hot",
                  "reload"
                )
              ) {
                return undefined
              }
            }
          }
        }

        return node
      }

      sourceFile = ts.visitEachChild(sourceFile, visitor, ctx)

      if (hot && hasComponents) {
        let reactIndex = sourceFile.statements.findIndex((stmt) => {
          if (ts.isImportEqualsDeclaration(stmt)) {
            const ref = stmt.moduleReference
            if (ts.isExternalModuleReference(ref)) {
              const lit = ref.expression
              if (ts.isStringLiteral(lit)) {
                return lit.text === "react"
              }
            }
          }
          return false
        })

        if (reactIndex === -1) {
          console.warn(`cannot find import React = require('react') in ...`)
          reactIndex = 0
        }

        // insert after

        sourceFile = ts.updateSourceFileNode(sourceFile, [
          ...sourceFile.statements.slice(0, reactIndex + 1),
          ts.createImportEqualsDeclaration(
            undefined,
            undefined,
            refreshRuntime,
            ts.createExternalModuleReference(
              ts.createStringLiteral("react-refresh/runtime")
            )
          ),
          ...sourceFile.statements.slice(reactIndex + 1),
          ts.createExpressionStatement(
            ts.createCall(
              ts.createPropertyAccess(
                ts.createPropertyAccess(
                  ts.createIdentifier("module"),
                  ts.createIdentifier("hot")
                ),
                ts.createIdentifier("reload")
              ),
              undefined,
              undefined
            )
          ),
          ts.createExpressionStatement(
            ts.createBinary(
              ts.createPropertyAccess(
                ts.createIdentifier("globalThis"),
                ts.createIdentifier("__hot_enqueueUpdate")
              ),
              ts.createToken(ts.SyntaxKind.AmpersandAmpersandToken),
              ts.createCall(
                ts.createPropertyAccess(
                  ts.createIdentifier("globalThis"),
                  ts.createIdentifier("__hot_enqueueUpdate")
                ),
                undefined,
                undefined
              )
            )
          ),
        ])
      }

      return sourceFile
    }
  }
}

function _hasModifier(node: ts.Node, kind: ts.SyntaxKind): boolean {
  const modifiers = node.modifiers
  if (modifiers !== undefined) {
    for (let i = 0; i < modifiers.length; i++) {
      if (modifiers[i].kind === kind) {
        return true
      }
    }
  }
  return false
}

function _isComponentName(name: string): boolean {
  // ^[A-Z]
  const ch0 = name.charCodeAt(0)
  return 0x41 <= ch0 && ch0 <= 0x5a
}

function _isPropertyAccessPath(
  node: ts.Expression,
  ...path: ReadonlyArray<string>
): node is ts.PropertyAccessExpression {
  for (let i = 0; i < path.length; i++) {
    if (ts.isPropertyAccessExpression(node)) {
      if (!(node.name.text === path[path.length - (i + 1)])) {
        return false
      }
      node = node.expression
    }
  }
  return true
}

function _getHookSignature(node: ts.Node): string | undefined {
  if (ts.isExpressionStatement(node)) {
    const call = node.expression
    if (ts.isCallExpression(call)) {
      const prop = call.expression
      if (ts.isPropertyAccessExpression(prop)) {
        const text = prop.name.text
        if (text.startsWith("use") && 3 < text.length) {
          // todo: add additional checks and emit warnings if the hook usage looks non standard

          return text
        }
      }
    }
  }
  return undefined
}

मुझे यकीन नहीं था कि पहली बार में createSignatureFunctionForTransform का उपयोग कैसे किया जाए, लेकिन यह सिर्फ एक फैक्ट्री फ़ंक्शन है जो प्रत्येक घटक के लिए थोड़ा स्टेट मशीन बनाता है। तो आप इसे स्टैटिक हुक सिग्नेचर (जो कि सिर्फ एक अपारदर्शी मान है, एक हैश के बराबर है) के साथ प्रत्येक फ़ंक्शन के लिए एक बार कहते हैं। आप इसे सेटअप कार्य पूरा करने के लिए इसे रेंडर से कहते हैं।

यह कुछ इस तरह से बदलता है:

import React = require("react")

export function App() {
  const [state, setState] = React.useState(0)

  return (
    <React.Fragment>
      <p>
        Click Count !!!<strong>{state}</strong>!!!
        <br />
        <button onClick={() => setState((acc) => acc + 1)}>Click me</button>
      </p>
    </React.Fragment>
  )
}

इस मामले में:

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const ReactRefreshRuntime_1 = require(6);
const s_1 = ReactRefreshRuntime_1.createSignatureFunctionForTransform();
function App() {
    s_1();
    const [state, setState] = React.useState(0);
    return (React.createElement(React.Fragment, null,
        React.createElement("p", null,
            "Click Count !!!",
            React.createElement("strong", null, state),
            "!!!",
            React.createElement("br", null),
            React.createElement("button", { onClick: () => setState((acc) => acc + 1) }, "Click me"))));
}
exports.App = App;
s_1(App, "useState");
ReactRefreshRuntime_1.register(App, "./App App");
module.hot.reload();
globalThis.__hot_enqueueUpdate && globalThis.__hot_enqueueUpdate();

ध्यान दें कि आगंतुक अधूरा है। यह केवल सबसे बुनियादी उपयोग के मामले से संबंधित है।

मैं window के उपयोग से थोड़ा भ्रमित हूं। यह मेरे लिए नहीं दिखता है क्योंकि यह वास्तव में आवश्यक है क्योंकि कार्यान्वयन की अदला-बदली की जाती है? किस बात का?

@leidegre

मुझे लगता है कि मेट्रो में कार्यान्वयन window उपयोग नहीं करता है, बल्कि वास्तविक global गुंजाइश का उपयोग करता है।

मुझे इस कार्यान्वयन के बारे में मूल तर्क के बारे में नहीं पता है, लेकिन यह मेरे अनुभव से उपयोगी है - यह सुनिश्चित करता है कि वास्तविक आवश्यकता तर्क तेज ताज़ा तर्क से स्वतंत्र है (जिसका अर्थ है react-refresh/babel परिवर्तनों को वस्तुतः किसी के साथ भी उपयोग किया जा सकता है। बंडलर)। स्वैपिंग के साथ, यह एक मॉड्यूल के रूप में भी काम करता है ताकि यह सुनिश्चित हो सके कि रनटाइम द्वारा संसाधित नहीं किए जाने वाले मॉड्यूल को संसाधित नहीं किया जाएगा:

ऐसे मामले पर विचार करें जहां @babel/runtime का उपयोग किया जा रहा है, जो बंडल में आयात के रूप में सहायकों को इंजेक्ट करेगा और आप केवल HMR को node_modules कोड देना चाहते हैं। यदि आप पहले खाली सहायकों को आरंभिक नहीं करते हैं और फिर भी वैश्विक दायरे में सहायकों को असाइन करते हैं, तो एक दुर्लभ मामला हो सकता है जहां उपयोगकर्ता-भूमि मॉड्यूल वास्तव में आरंभीकरण को समाप्त करने से पहले बैबल-इंजेक्टेड हेल्पर्स cleanup कॉल करेंगे (क्योंकि वे बच्चे हैं) आयात)।