Skip to content

Instantly share code, notes, and snippets.

@rgm
Last active September 15, 2018 17:36
Show Gist options
  • Save rgm/688c24dc3fd1f23ebfc28c511b3898d4 to your computer and use it in GitHub Desktop.
Save rgm/688c24dc3fd1f23ebfc28c511b3898d4 to your computer and use it in GitHub Desktop.
How to get re-frame-10x working as a foreign lib (eg. via approach in https://clojurescript.org/guides/webpack).
{:paths ["src/clj"]
:deps {com.bhauman/rebel-readline {:mvn/version "0.1.4"}
org.clojure/clojurescript {:mvn/version "1.10.339"}
reagent {:mvn/version "0.8.1"
:exclusions [cljsjs/react
cljsjs/react-dom
cljsjs/react-dom-server
cljsjs/create-react-class]}
re-frame {:mvn/version "0.10.6"}}
:aliases {:figwheel
{:extra-paths ["resources" "target"]
:extra-deps {com.bhauman/rebel-readline-cljs {:mvn/version "0.1.4"}
com.bhauman/figwheel-main {:mvn/version "0.1.9"}
binaryage/devtools {:mvn/version "0.9.10"}
day8.re-frame/re-frame-10x
{:mvn/version "0.3.3-react16"
:exclusions [cljsjs/highlight
cljsjs/react-highlight
cljsjs/react-flip-move]}}
:main-opts ["-m" "figwheel.main"
"--build" "dev"
"--repl"]}}}
^{:css-dirs ["resources/public/css"]}
{:main reframe-sample.core
:closure-defines {"re_frame.trace.trace_enabled_QMARK_" true}
:preloads [day8.re-frame-10x.preload
devtools.preload]
:infer-externs true
:npm-deps false
:foreign-libs
[{:file "npm/dist/index_bundle.js"
:provides ["react"
"react-dom"
"react-dom-server"
"create-react-class"
"cljsjs.react-highlight"
"cljsjs.highlight.langs.clojure"
"cljsjs.react-flip-move"
]
:global-exports {react React
react-dom ReactDOM
react-dom-server ReactDOMServer
create-react-class createReactClass
cljsjs.react-highlight Highlight
cljsjs.highlight.langs.clojure HighlightLangsClojure
cljsjs.react-flip-move FlipMove}}]}
import React from "react";
import ReactDOM from "react-dom";
import ReactDOMServer from "react-dom/server";
const createReactClass = require("create-react-class");
window.React = React;
window.ReactDOM = ReactDOM;
window.ReactDOMServer = ReactDOMServer;
window.createReactClass = createReactClass;
// for re-frame 10x
import hljs from "highlight.js";
import Highlight from "react-highlight.js"
import FlipMove from "react-flip-move";
window.highlight = hljs;
// some cljsjs weirdness? cljsjs.highlight.langs.clojure doesn't seem to exist
// in NPM but it's package being synthesized by cljsjs/boot.
// Anyway, hack this and let clojurescript compile properly at the cost of
// syntax highlighting <shrug>
window.HighlightLangsClojure= {};
window.Highlight = Highlight;
window.FlipMove = FlipMove;
{
"name": "npm-foreign-libs",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"create-react-class": "^15.6.3",
"highlight.js": "^9.12.0",
"react": "^16.5.0",
"react-dom": "^16.5.0",
"react-flip-move": "^3.0.2",
"react-highlight.js": "^1.0.7"
},
"devDependencies": {
"webpack": "^4.18.0",
"webpack-cli": "^3.1.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment