hello

doya installed react-window kamponen

@barikoi the react-window is npm package

figwheel: cljsbuild/dev/compiler { :npm-deps {:react “16.8.6” :react-dom “16.8.6" :react-window “1.8.5”} :install-deps true}

dats great

(def react-comp (r/reactify-component exported))

is this line needed to be reactifyed?

I think it can be used, but this is not the point. I think the root of the error is figwheel npm package support problem.

@barikoi because i test this component in the shadow-cljs，is work.

i dont' usually use figwheels buildin npm setup, i think it's still sorda expermandal use figwheel along with webpack works great for me

@barikoi this project is shadow-cljs & react mixed project .

I export the MyComponent to jsx ReactDOM.render to render , is work.

but just for test.

https://figwheel.org/docs/npm.html

u-needta webpack.config.js as -

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'index.bundle.js'
  }
}

an on src/js/index.js

import React from 'react';
import ReactDOM from 'react-dom';
window.React = React;
window.ReactDOM = ReactDOM;

use npm deps as false

{:main hello-world.core
 :npm-deps false}

then

on dev.cljs.edn

{:main hell-world.core
 :npm-deps false
 :infer-externs true
 :foreign-libs [{:file "dist/index.bundle.js"
                 :provides ["react" "react-dom"]
                 :global-exports {react React
                                  react-dom ReactDOM}}]}

datsit

it's a boiler plate for figwheel-main

in shadow-cljs tis just audamadic

@barikoi thanks

this code is word in the shadow-cljs .

this code is work in the shadow-cljs .

great

@barikoi I create ClojureScript + Webpack project https://github.com/chanshunli/hello-webpack-cljs, flow this document https://clojurescript.org/guides/webpack .

https://github.com/chanshunli/hello-webpack-cljs/blob/master/src/cljs/hello_webpack/core.cljs

I got this error

I need some interop help. How can I emulate the following in Reagent

Specifically the {({height, width}) => ()} part

Where is Row defined?

@vikeri You could create an effect for resize event

That will dispatch an event

Or a listener on the resize event

Dispatching the height and width

Like

{:on-resize {:dispatch ::evt}}

The ::evt handler will get the width and height from the fx

Not really following, are you saying I should implement this in another way?

Kinda

https://github.com/district0x/re-frame-window-fx/blob/664c1e37aaef1b292d6ce42dcac2255fddc0a1bd/src/district0x/re_frame/window_fx.cljs#L34-L39 Here's example from googling

So, in order to get something similar to what you mentioned above, you need to create an effect, setup it and then it will start sending you the events. The event handler should put data somewhere in your db. Then you shold subscribe to this data in some component, you could call it auto-sizer, and then this component could pass the width and height into its children. I'd prefer to use data in place, instead of adding another component, there will be not so much difference.

[auto-sizer
  [x] [y] [z]]

or

(let [w @(rf/subscribe [:window/width])
      h @(rf/subscribe [:window/height])]
  [:<>
    [x w h] [y w h] [z w h]])

omg

I forgot it's about reagent, my bad

@vikeri I'm sorry about misleading you, need to switch my brain to reagent mode

In case of reagent you will need to create an component that will handle all of this

(ns some-ns
  (:require [reagent.core :as r]
            [goog.events :as events])

(defn auto-size [& children]
  (r/with-let [size (r/atom nil)
               handler #(reset! size {:width js/window.innerWidth :height js/window.innerWidth})
               _ (.addEventListener js/window events/EventType.RESIZE handler)]
    (into
      [:<>]
      (map put-a-size-in-child children))
    (finally (.removeEventListener js/window events/EventType.RESIZE handler))))

NB: code above is just a stub

You should at least debounce

Another concern is that each time we use the auto-size component, we're creating another listener. Looks like it might be better to create r/atom in namespace instead of component, and setup our listener globally too.

Hope I fixed my initial confusion.