Figwheel이 내 코드에서 대부분의 변화를 감지하지 못합니다.

Question

Figwheel이 코드를 잘 보여줍니다. 하지만 변경 사항을 보려면 페이지를 새로 고쳐야합니다. Figwheel이 변경 사항을 표시하려면 무엇을 변경해야합니까? 응용 프로그램 상태를 잃지 않고 강제로 다시 그리기 명령이 있습니까?

은 BTW : 크롬은 사용 안 함 캐시 사실을 가지고 있으며, 파일이을 저장할 때 CLJS 아이콘이 나타납니다.

(defn simple-example [] 
    [ui/mui-theme-provider {:mui-theme (get-mui-theme 
             {:palette {:text-color (color :blue800)}})} 
    [:div 
    [ui/app-bar {:title     "Hi all" 
       :icon-class-name-right "muidocs-icon-navigation-expand-more"}] 
    [ui/paper 
    [:div 
     [ui/tabs 
     [ui/tab {:label "Menu" :value "0"} 
     [:div "Hello world"]]]]]]])) 

(defn ^:export run [] 
    (render [simple-example] 
      (js/document.getElementById "app")))) 

Answer 1

:

는 자동적으로 응용 프로그램에 figwheel 클라이언트 코드를 삽입합니다 :figwheel true 또는 :figwheel { :on-jsload "example.core/reload-hook" } 설정. 함수 이름 인 :on-jsload을 제공하면 새 코드가 다시로드 된 후 해당 함수가 호출됩니다. 당신의 project.clj에

(ns your-namespace.core 
    (:require [reagent.core :as r])) 


(defn render [view] 
    (let [node (.getElementById js/document "app")] 
    (r/render-component view node))) 


(defn rerender [] 
    (let [node (.getElementById js/document "app")] 
    (r/unmount-component-at-node node) 
    (render [:div "Reloading"])) 


(defn ^:export reload [] 
    (rerender)) 

그리고 :

시약의 예를 다시로드 후크 플러스 구성

프레임을 다시

:cljsbuild {:builds {:dev {:source-paths ["src"] 
          :figwheel  {:on-jsload "your-namespace.core/reload"}}} 

/편집

참고 시약을 사용합니다. 리 프레임의 경우 re-frame-template으로 시작하는 것이 좋습니다. 다음과 같은 예를 들어,

lein new re-frame your-project-name # options, e.g., +re-frisk +cider 

이

은 기본 core.cljs을 줄 것이다 :

(defn dev-setup [] 
    (when config/debug? 
    (enable-console-print!) 
    (println "dev mode"))) 

(defn mount-root [] 
    (re-frame/clear-subscription-cache!) 
    (reagent/render [views/main-panel] 
        (.getElementById js/document "app"))) 

(defn ^:export init [] 
    (re-frame/dispatch-sync [:initialize-db]) 
    (dev-setup) 
    (mount-root)) 

index.html은 ID app와 노드를 가지고 있으며, init를 호출합니다.다음과 같이 그리고 project.cljs는 on-jsload을 지정

:cljsbuild 
{:builds 
[{:id   "dev" 
    :source-paths ["src/cljs"] 
    :figwheel  {:on-jsload "your-project-name.core/mount-root"} 
#_(...)}} 

이 절대적으로 변경된 구성 요소와 페이지를 업데이트해야합니다. 그것이 당신이 원하는 것을하지 않으면 나는 당신의 질문을 오해했을 것입니다.

Answer 2

는 시약 화면에 영향을받는 구성 요소를 다시 렌더링 상태 변경에 대해 통지해야합니다. 귀하의 코드에는 아직 재 렌더링이 필요한지를 결정하기 위해 관찰 할 수있는 내부 상태가 없습니다.

귀하의 앱 상태는 시약 원자에 저장할 수 있습니다. 시약 구성 요소 (즉, 해당 구성 요소 인 simple-example 구성 요소)의 시약 원자를 비 참조 할 때 이벤트 리스너는 상태 원자로 설정되므로 변경 될 때마다 구성 요소가 다시 렌더링됩니다.

은 넣어 다음 바로 simple-example의 정의 전에 :이 아직 존재하지 않는 경우 상태가 counter라고 만들어

(defonce counter (reagent.core/atom 0)) 
(swap! counter inc) 

. 또한 즉시 등록 된 구성 요소가 새로 고쳐 지도록 즉시 증가시킵니다.

그런 다음 의 함수 본문에 @counter deref 호출을 삽입하십시오. 이 방법으로 함수의 초기 호출은 상태 변경 리스너를 설치합니다.

이제 코드를 수정할 때마다 네임 스페이스가 다시로드되므로 counter 아톰이 증가하여 구성 요소의 다시 렌더링을 트리거합니다. docs에서