codxse · November 11, 2018 04:04
diff --git a/build.clj b/build.clj
 ;; this can be used on figwheel or in "any" cljs build api
 ;; at the first time, create a empty package.json with `{}` inside and `yarn add react webpack webpack-cli react-dom @material-ui/core`
 ;; you need to run "yarn install" and "yarn webpack" BEFORE this
 ;; !!!! this is a dev build !!!!
 (def dev-build
  '{:id           "dev"
    :source-paths ["src" "dev"]
    :figwheel     {:on-jsload cljs.user/on-jsload}
    :compiler     {:main            cljs.user
                   :asset-path      "/js/out"
                   :elide-asserts   false

                   :infer-externs   true
                   :npm-deps        false
                   :foreign-libs    [{:file           "dist/index_bundle.js"
                                      ;; provides is "what you use in  (require [....])
                                      :provides       ["react"
                                                       "react-dom"
                                                       "material-ui"
                                                       "material-styles"
                                                       "cljsjs.react"
                                                       "cljsjs.react.dom"]
                                      ;; exports "binds" the name from provides on window.LibName, check index.js.
                                      :global-exports {react            React
                                                       material-ui      MaterialUI
                                                       material-styles  MaterialStyles
                                                       cljsjs.react.dom ReactDOM
                                                       cljsjs.react     React
                                                       react-dom        ReactDOM}}]


                   :closure-defines {goog.asserts.ENABLE_ASSERTS true
                                     goog.DEBUG                  true}
                   :output-dir      "resources/public/js/out"
                   :output-to       "resources/public/js/app.js"}})

diff --git a/fulcro.cljs b/fulcro.cljs
 ;; please flow https://clojurescript.org/guides/webpack

 (ns client.fulcro
  (:require [material-ui :as m]
            [material-styles :as ms]
            [react :as r]))

 (defn factory-apply
  [class]
  (fn [props & children]
    (apply r/createElement class props children)))

 (def button (factory-apply m/Button))

 (def card-media (factory-apply m/CardMedia))

 ;;using with jss

 (defn get-class
  [this id]
  (aget (-> this .-props .-classes) (name id)))

 (defsc Card
  [this {:keys [photo/url
                photo/title]}]
  {:query [:photo/url :photo/title]}
  (card-media #js{:className (get-class this :media)
                  :image     url
                  :title     title}))


 (def ui-card (prim/factory ((ms/withStyles #js {:media #js {:height     0
                                                            :paddingTop "56.25%"}}) Card)
                           {:keyfn :photo/url}))


diff --git a/index.js b/index.js
 // please flow https://clojurescript.org/guides/webpack

 import React from 'react';
 import ReactDOM from 'react-dom';
 import * as MaterialUI from '@material-ui/core/index.js';
 import * as MaterialStyles from '@material-ui/core/styles';


 window.React = React;
 window.ReactDOM = ReactDOM;
 window.MaterialUI = MaterialUI
 window.MaterialStyles = MaterialStyles
diff --git a/reagent.cljs b/reagent.cljs
 ;; please flow https://clojurescript.org/guides/webpack

 (ns client.reagent
  (:require [material-ui :as m]
            [reagent.core :as r]))

 (def button (r/adapt-react-class m/Button))
 ;; more about reagent see https://gist.github.com/mhuebert/4e3af2fbc33b40e74539487e50110a14
diff --git a/webpack.config.js b/webpack.config.js
 module.exports = {
  entry: './src/js/index.js',
  mode: 'production',
  output: {
    filename: 'index_bundle.js'
  }
 }
	;; this can be used on figwheel or in "any" cljs build api
	;; at the first time, create a empty package.json with `{}` inside and `yarn add react webpack webpack-cli react-dom @material-ui/core`
	;; you need to run "yarn install" and "yarn webpack" BEFORE this
	;; !!!! this is a dev build !!!!
	(def dev-build
	'{:id "dev"
	:source-paths ["src" "dev"]
	:figwheel {:on-jsload cljs.user/on-jsload}
	:compiler {:main cljs.user
	:asset-path "/js/out"
	:elide-asserts false

	:infer-externs true
	:npm-deps false
	:foreign-libs [{:file "dist/index_bundle.js"
	;; provides is "what you use in (require [....])
	:provides ["react"
	"react-dom"
	"material-ui"
	"material-styles"
	"cljsjs.react"
	"cljsjs.react.dom"]
	;; exports "binds" the name from provides on window.LibName, check index.js.
	:global-exports {react React
	material-ui MaterialUI
	material-styles MaterialStyles
	cljsjs.react.dom ReactDOM
	cljsjs.react React
	react-dom ReactDOM}}]


	:closure-defines {goog.asserts.ENABLE_ASSERTS true
	goog.DEBUG true}
	:output-dir "resources/public/js/out"
	:output-to "resources/public/js/app.js"}})
	;; please flow https://clojurescript.org/guides/webpack

	(ns client.fulcro
	(:require [material-ui :as m]
	[material-styles :as ms]
	[react :as r]))

	(defn factory-apply
	[class]
	(fn [props & children]
	(apply r/createElement class props children)))

	(def button (factory-apply m/Button))

	(def card-media (factory-apply m/CardMedia))

	;;using with jss

	(defn get-class
	[this id]
	(aget (-> this .-props .-classes) (name id)))

	(defsc Card
	[this {:keys [photo/url
	photo/title]}]
	{:query [:photo/url :photo/title]}
	(card-media #js{:className (get-class this :media)
	:image url
	:title title}))


	(def ui-card (prim/factory ((ms/withStyles #js {:media #js {:height 0
	:paddingTop "56.25%"}}) Card)
	{:keyfn :photo/url}))
	// please flow https://clojurescript.org/guides/webpack

	import React from 'react';
	import ReactDOM from 'react-dom';
	import * as MaterialUI from '@material-ui/core/index.js';
	import * as MaterialStyles from '@material-ui/core/styles';


	window.React = React;
	window.ReactDOM = ReactDOM;
	window.MaterialUI = MaterialUI
	window.MaterialStyles = MaterialStyles
	;; please flow https://clojurescript.org/guides/webpack

	(ns client.reagent
	(:require [material-ui :as m]
	[reagent.core :as r]))

	(def button (r/adapt-react-class m/Button))
	;; more about reagent see https://gist.github.com/mhuebert/4e3af2fbc33b40e74539487e50110a14
	module.exports = {
	entry: './src/js/index.js',
	mode: 'production',
	output: {
	filename: 'index_bundle.js'
	}
	}