[ClojureScript] Re: Can't use React from a CDN with reagent 0.8.0-alpha2 without vendoring externs
This dates back to over a year ago, but here's what I did to use React
15.1.0 from a CDN when using Reagent 0.7:
My Reagent dependency in project.clj looks like this:
[reagent "0.7.0" :exclusions [cljsjs/react
cljsjs/react-dom
cljsjs/react-dom-server]]
Then I just created a set of dummy namespaces in my source tree to fake out
the compiler:
solace:eris2 jfischer$ find src/cljsjs
src/cljsjs
src/cljsjs/react.cljs
src/cljsjs/react
src/cljsjs/react/dom.cljs
src/cljsjs/react/dom
src/cljsjs/react/dom/server.cljs
solace:eris2 jfischer$ cat src/cljsjs/react.cljs
(ns cljsjs.react
"Dummy namespace to let me exclude React from my compiled output.")
And in my HTML loaded React from the CDN:
https://unpkg.com/react@15.1.0/dist/react.min.js";>
https://unpkg.com/react-dom@15.1.0/dist/react-dom.min.js";>
On Monday, March 5, 2018 at 11:02:53 PM UTC-8, al...@hill.net.au wrote:
>
> Hi all,
>
> I want to use reagent 0.8 with an external React 16, available as
> `window.React` (equivalent to using React from a CDN, but in reality built
> and exported from a separate webpack bundle).
>
> My goal is to build a bundle which uses React, ReactDOM and
> createReactClass from the window object, instead of inlining its own copies
> of those libraries.
>
> I talked to @Deraen about this on Slack a couple of months ago who helped
> me get this working. I'm currently able to build a bundle as described
> above, but I have to vendor in all the extern files from the relevant
> cljsjs React libraries, and add them to :exclusions. My :compiler key in my
> cljsbuild config looks like this:
>
>:foreign-libs [{:file "src/js/empty.js"
>:provides ["react" "react-dom" "create-react-class"
> "react-dom/server"]
>:requires []
>:global-exports {react React
> react-dom ReactDOM
> create-react-class createReactClass
> react-dom/server ReactDOMServer}}]
>:externs ["src/js/externs/react.ext.js"
> "src/js/externs/react-dom.ext.js"
> "src/js/externs/create-react-class.ext.js"]
>
> He thought at the time that it should be possible without the externs and
> :exclusions, as mentioned on this page:
> https://github.com/reagent-project/reagent/blob/master/docs/0.8-upgrade.md#browser---loading-react-from-cdnjs-or-custom-webpack-bundle
>
> > it should be possible to override the Cljsjs foreign-libs, while still
> using externs from Cljsjs packages.
>
> But I can't figure it out - if I don't exclude the cljsjs libraries, I get
> a bundle with React 15 built-in, and if I do exclude them, the bundle is
> broken because the externs are missing and the names get eaten by the
> closure compiler.
>
> Is there any way around having to commit the externs?
>
> Thanks,
> Alex
>
>
--
Note that posts from new members are moderated - please be patient with your
first post.
---
You received this message because you are subscribed to the Google Groups
"ClojureScript" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to clojurescript+unsubscr...@googlegroups.com.
To post to this group, send email to clojurescript@googlegroups.com.
Visit this group at https://groups.google.com/group/clojurescript.
[ClojureScript] Re: Reagent/routing/SPA question
It kind of comes down to how you're managing the state in your project. I'm
using re-frame at the moment, so I have kind of top-level key in my project
state to tell me what the user's looking at. Then I register my routes with
Secretary and each route just kicks off an event that'll eventually modify that
top-level key.
So more specifically, my project's state is in one big map, and I have a key
`:app/view` that has a view id I can use to figure out what to render, along
with any additional info it might need.
(def default-db
{:app/view {:view/id :view/sign-in}})
My routing code looks like this (I only start listening to navigation events
after a user has signed in, and stop again when she signs out):
(ns my-app.routing
(:require-macros [secretary.core :refer [defroute]])
(:require [re-frame.core :refer [console dispatch]]
[goog.events :as events]
[secretary.core :as secretary])
(:import [goog.history Html5History]))
(defonce history
(let [h (Html5History.)]
(events/listen h
goog.history.EventType.NAVIGATE
(fn [e]
(when (.-isNavigation e)
(secretary/dispatch! (.-token e)
h))
(defn set-token! [token]
(.setToken history token))
(defn get-token
"Returns the current history token (e.g. the stuff after the # in the URL)"
[]
(.getToken history))
(defn listen!
"Starts listening for and dispatching history/navigation events."
[]
(.setEnabled history true))
(defn stop!
"Stops listening for navigation events."
[]
(.setEnabled history false))
(defroute "/data-logging" []
(dispatch [:events/navigate {:view/id :view/data-logging}]))
(defroute "/info" []
(dispatch [:events/navigate {:view/id :view/info}]))
(defroute #"/page/(\d+)"
[page-id]
(dispatch [:events/navigate {:view/id :view/page :page/id (js/parseInt
page-id)}]))
(defroute "*"
;; Catch-all history token router to show a 404 page, etc.
{:as params}
(dispatch [:events/navigate {:view/id :view/unknown}]))
Again, using re-frame, so I dispatch an event and handle it elsewhere, but that
navigate event just ends up modifying the :app/view key, something like:
(swap! app-state #(assoc % :app/view new-value))
Where app-state is a Reagent atom and updating it triggers a re-render.
On Saturday, April 22, 2017 at 10:13:33 AM UTC-7, Jonathon McKitrick wrote:
> I have an app that's been working wonderfully for a few years now. I want to
> improve it by adding links. If you see a person's name, I want to be able to
> click on that name and the app will jump to the 'user' page (simple enough)
> and then move the browser view to that particular item. In static HTML we'd
> obviously do that with a # and an anchor. But with Reagent, I'm not quite
> sure.
>
> I'm exploring Secretary right now, but what's the missing piece that will get
> me from a link to a Reagent-rendered page and then jumping to that row or
> even opening a modal with that item?
--
Note that posts from new members are moderated - please be patient with your
first post.
---
You received this message because you are subscribed to the Google Groups
"ClojureScript" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to clojurescript+unsubscr...@googlegroups.com.
To post to this group, send email to clojurescript@googlegroups.com.
Visit this group at https://groups.google.com/group/clojurescript.
