Fork me on GitHub
#shadow-cljs
<
2022-09-26
>
sheluchin12:09:25

I'm having some trouble requiring code. I'll put the details in the thread.

sheluchin12:09:10

Here is the code I'm trying to translate:

import Prism from "prism-react-renderer/prism";

(typeof global !== "undefined" ? global : window).Prism = Prism;

require("prismjs/components/prism-clojure");

sheluchin12:09:54

I am trying to do it like this:

(ns ui-cards
  (:require
   [com.fulcrologic.fulcro.algorithms.react-interop :as interop]
   [com.fulcrologic.fulcro.dom :as dom]
   [nubank.workspaces.card-types.react :as ct.react]
   [nubank.workspaces.core :as ws]
   [nubank.workspaces.model :as wsm]
   ["prism-react-renderer" :default Highlight :refer [defaultProps]]
   ["prism-react-renderer/themes/github" :default _ :as theme]
   ["prism-react-renderer/prism" :as Prism]
   ["prismjs/components/prism-clojure" :as Clojure]))

(set! (. (if (exists? global)
           js/global
           js/window)
         -Prism) Prism))

sheluchin12:09:38

The resulting error:

main.js:1426 ReferenceError: Prism is not defined
    at shadow$provide.module$node_modules$prismjs$components$prism_clojure (prism-clojure.js:3:1)
    at shadow.js.jsRequire (js.js:66:18)
    at shadow.js.require (js.js:113:20)
    at eval (ui_cards.js:5:68)
    at eval (<anonymous>)
    at goog.globalEval (main.js:472:11)
    at env.evalLoad (main.js:1534:12)
    at main.js:1889:12

sheluchin12:09:42

I can't use a require call - it gives an error stating that the require must be part of the ns form: ns* not supported (require, require-macros, import, import-macros, ... must be part of your ns form)

sheluchin12:09:49

The confusing thing is I can make it "work" by commenting out ["prismjs/components/prism-clojure" :as Clojure], building, and then uncommenting it and building again. It just doesn't survive a page refresh. Any tip for how to get this working? Please excuse me if I'm missing this in the docs.

thheller13:09:28

first of all you should question what this code is even supposed to be doing

thheller13:09:01

why is it using import AND require? usually you use either one of them, never both

thheller13:09:22

and why export to global? what shouldn't be necessary?

thheller13:09:26

aha so its a garbage package. thats fun. ...

sheluchin13:09:20

I don't really understand why it's exporting to global. Garbage package? lol

thheller13:09:26

so the "extra languages" just access a global Prism object

thheller13:09:42

that isn't how JS is done for like 15 years now

thheller13:09:03

if that is the only language you need I'd recommend just writing that part in pure CLJS

thheller13:09:21

instead of mucking with the global nonsense

sheluchin13:09:34

You mean just translate the language definition file you linked to CLJS?

sheluchin13:09:34

I don't have a very good grasp on interop. Writing the definition is trivial, but how would I apply it so that Prism uses it?

thheller13:09:24

not a clue but the prism-clojure.js files just assigs a property, so thats probably enough

sheluchin13:09:08

Alright, I can try that. Strange that such a popular library is written in this way.

thheller14:09:00

sad state of the JS world. lots of bad/half-maintained code

sheluchin14:09:21

Indeed. The mess we're in :man-shrugging: Thanks for the advice, @U05224H0W 🙏