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");

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))

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

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)

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.

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

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

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

and finally see the translation examples provided here https://shadow-cljs.github.io/docs/UsersGuide.html#_using_npm_packages

It is from the documentation here https://github.com/FormidableLabs/prism-react-renderer#user-content-faq (adding a language)

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

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

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

https://unpkg.com/browse/[email protected]/components/prism-clojure.js

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

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

instead of mucking with the global nonsense

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

yes

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?

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

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

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

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