Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-23 23:18:48 -05:00
Code Issues Activity

✨ Add lazy loading for highlightjs on code-block component

Browse source 
Mainly because highlight.js is a heavy library but only used
on a very concrete situations, so it does not make sense to load
it all the time.
This commit is contained in:
Andrey Antukh 2023-12-22 12:50:43 +01:00 • committed by Alonso Torres
parent 538b8313ed
commit 37a7bb202b
2 changed files with 25 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
frontend/src/app/main/ui/components/code_block.cljs
View file

@ -7,12 +7,15 @@
(ns app.main.ui.components.code-block (ns app.main.ui.components.code-block
(:require-macros [app.main.style :as stl]) (:require-macros [app.main.style :as stl])
(:require (:require
["highlight.js" :as hljs]
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
[app.main.ui.context :as ctx] [app.main.ui.context :as ctx]
[app.util.dom :as dom]
[cuerdas.core :as str] [cuerdas.core :as str]
[rumext.v2 :as mf])) [promesa.core :as p]
[rumext.v2 :as mf]
[shadow.lazy :as lazy]))
(def highlight-fn
(lazy/loadable app.util.code-highlight/highlight!))
(mf/defc code-block (mf/defc code-block
{::mf/wrap-props false} {::mf/wrap-props false}
@ -20,11 +23,11 @@
(let [new-css-system (mf/use-ctx ctx/new-css-system) (let [new-css-system (mf/use-ctx ctx/new-css-system)
block-ref (mf/use-ref) block-ref (mf/use-ref)
code (str/trim code)] code (str/trim code)]
(mf/with-effect
[code type] (mf/with-effect [code type]
(when-let [node (mf/ref-val block-ref)] (when-let [node (mf/ref-val block-ref)]
(dom/set-data! node "highlighted" nil) (p/let [highlight-fn (lazy/load highlight-fn)]
(hljs/highlightElement node))) (highlight-fn node))))
(if new-css-system (if new-css-system
[:pre {:class (dm/str type " " (stl/css :code-display)) :ref block-ref} code] [:pre {:class (dm/str type " " (stl/css :code-display)) :ref block-ref} code]

15
frontend/src/app/util/code_highlight.cljs Normal file
View file

@ -0,0 +1,15 @@
;; This Source Code Form is subject to the terms of the Mozilla Public
;; License, v. 2.0. If a copy of the MPL was not distributed with this
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
;;
;; Copyright (c) KALEIDOS INC
(ns app.util.code-highlight
(:require
["highlight.js" :as hljs]
[app.util.dom :as dom]))
(defn highlight!
[node]
(dom/set-data! node "highlighted" nil)
(hljs/highlightElement node))