use global-exports to supply vendored markdown and highlighting libs

Author: Bruce Hauman

project.clj

@@ -10,8 +10,7 @@
                  [cljsjs/react "16.4.1-0"]
                  [cljsjs/react-dom "16.4.1-0"]
                  [cljsjs/create-react-class "15.6.3-1"]
-                 [sablono "0.8.4"]
-                 [cljsjs/marked "0.3.5-1"]]
+                 [sablono "0.8.4"]]
 
   :source-paths ["src"]
 

resources/public/devcards/js/highlight.pack.js

@@ -0,0 +1,9 @@
+{:foreign-libs
+ [{:file "devcards/js_libs/highlight.pack.js"
+   :provides ["devcards-syntax-highlighter"]
+   :global-exports {devcards-syntax-highlighter DevcardsSyntaxHighlighter}}
+  {:file "devcards/js_libs/marked.min.js"
+   :provides ["devcards-marked"]
+   :global-exports {devcards-marked DevcardsMarked}}]
+ :externs ["devcards/js_libs/highlight.ext.js"
+           "devcards/js_libs/marked.ext.js"]}

src/deps.cljs

@@ -1,19 +1,19 @@
 (ns devcards.core
   (:require
    [devcards.system :as dev]
-
    [devcards.util.markdown :as mark]
    [devcards.util.utils :as utils
     :refer [html-env? define-react-class define-react-class-once]]
-
    [sablono.core :as sab :include-macros true]
    [devcards.util.edn-renderer :as edn-rend]
    [goog.object :as gobj]
    [clojure.string :as string]
    [cljs.test]
+   [goog.labs.userAgent.device :as device]
    [react :as react]
    [react-dom :as react-dom]
    [create-react-class :as create-react-class]
+   [devcards-syntax-highlighter :as devcards-syntax-highlighter]
    [cljs.core.async :refer [put! chan sliding-buffer timeout <! close! alts!] :as async])
   (:require-macros
    [devcards.core]
@@ -105,22 +105,18 @@
 
 ;; syntax highlighting
 
-(defn get-hljs []
-  (gobj/get js/goog.global "hljs"))
-
 (defn highlight-node [this]
-  (when-let [node (ref->node this "code-ref")]
-    (when-let [hljs (get-hljs)]
-      (when-let [highlight-block (gobj/get hljs "highlightBlock")]
-        (highlight-block node)))))
+  (when-not (device/isMobile)
+    (when-let [node (ref->node this "code-ref")]
+      (js/DevcardsSyntaxHighlighter.highlightBlock node))))
 
 (define-react-class CodeHighlight
   (componentDidMount [this] (highlight-node this))
   (componentDidUpdate [this] (highlight-node this))
   (render
    [this]
    (sab/html
-    [:pre {:className (if (get-hljs) "com-rigsomelight-devcards-code-highlighting"  "")
+    [:pre {:className (if-not (device/isMobile) "com-rigsomelight-devcards-code-highlighting"  "")
            :key (hash (get-props this :code))}
      [:code {:className (or (get-props this :lang) "")
              :ref "code-ref"}

src/devcards/core.cljs

@@ -0,0 +1,14 @@
+// copied from https://github.com/isagalaev/highlight.js/blob/6662b/src/highlight.js#L699-L711
+
+var DevcardsSyntaxHighlighter = {};
+DevcardsSyntaxHighlighter.highlight = function (name, value, ignore_illegals, continuation) {};
+DevcardsSyntaxHighlighter.highlightAuto = function (text, languageSubset) {};
+DevcardsSyntaxHighlighter.fixMarkup = function (value) {};
+DevcardsSyntaxHighlighter.highlightBlock = function (block) {};
+DevcardsSyntaxHighlighter.configure = function (user_options) {};
+DevcardsSyntaxHighlighter.initHighlighting = function () {};
+DevcardsSyntaxHighlighter.initHighlightingOnLoad = function () {};
+DevcardsSyntaxHighlighter.registerLanguage = function (name, language) {};
+DevcardsSyntaxHighlighter.listLanguages = function () {};
+DevcardsSyntaxHighlighter.getLanguage = function (name) {};
+DevcardsSyntaxHighlighter.inherit = function (parent, obj) {};

src/devcards/js_libs/highlight.ext.js

@@ -0,0 +1,18 @@
+
+function DevcardsMarked() {};
+
+DevcardsMarked.options = {};
+DevcardsMarked.defaults = {};
+
+DevcardsMarked.parser = function() {};
+DevcardsMarked.parse = function() {};
+DevcardsMarked.Parser = function() {};
+
+DevcardsMarked.lexer = function() {};
+DevcardsMarked.Lexer = function() {};
+
+DevcardsMarked.inlineLexer = function() {};
+DevcardsMarked.InlineLexer = function() {};
+
+DevcardsMarked.Renderer = function() {};
+DevcardsMarked.setOptions = function() {};

src/devcards/js_libs/highlight.pack.js

@@ -7,7 +7,6 @@
    [goog.object :as gobj]
    [goog.events :as events]
    [goog.history.EventType :as EventType]
-   [goog.labs.userAgent.device :as device]
    [devcards.util.utils :as utils :refer-macros [define-react-class]]
    [react :as react]
    [react-dom :as react-dom])
@@ -64,7 +63,6 @@
                       (create-style-element "com-rigsomelight-code-highlight-css"
                                             (inline-resouce-file "public/devcards/css/com_rigsomelight_github_highlight.css"))))
 
-
       (when-not (get-element-by-id "com-rigsomelight-devcards-css")
         (.appendChild head (create-style-element "com-rigsomelight-devcards-css"
                                                  (inline-resouce-file "public/devcards/css/com_rigsomelight_devcards.css"))))
@@ -74,16 +72,7 @@
       (when-not (get-element-by-id "com-rigsomelight-edn-css")
         (.appendChild head
                       (create-style-element "com-rigsomelight-edn-css"
-                                            (inline-resouce-file "public/devcards/css/com_rigsomelight_edn_flex.css"))))
-
-      ;; we are injecting conditionally so that we can skip mobile
-      ;; and skip node
-      ;; really not diggin this but ...
-      (when-not (or (get-element-by-id "com-rigsomelight-code-highlighting")
-                    (device/isMobile))
-        (.appendChild head
-                      (create-script-element "com-rigsomelight-code-highlighting"
-                                             (inline-resouce-file "public/devcards/js/highlight.pack.js")))))))
+                                            (inline-resouce-file "public/devcards/css/com_rigsomelight_edn_flex.css")))))))
 
 (defn render-base-if-necessary! []
   (add-css-if-necessary!)

src/devcards/js_libs/marked.ext.js

@@ -1,7 +1,7 @@
 (ns devcards.util.markdown
   (:require
    [clojure.string :as string]
-   [cljsjs.marked]))
+   [devcards-marked :as devcards-marked]))
 
 (defn leading-space-count [s]
   (when-let [ws (second (re-matches #"^([\s]*).*"  s))]
@@ -25,7 +25,7 @@
     (string/trim s)))
 
 (defn markdown-to-html [markdown-txt]
-  (js/marked markdown-txt))
+  (js/DevcardsMarked markdown-txt))
 
 (defn matches-delim? [line]
   (re-matches #"^[\s]*```(\w*).*" line))