0

I am currently trying to use TailWindElements-React in Clojure Script. In JS an example would look like this:

import React, { useState } from "react";
import { TECollapse, TERipple } from "tw-elements-react";

export default function App(): JSX.Element {
  const [show, setShow] = useState(false);

  const toggleShow = () => setShow(!show);

  return (
    <>
      <TERipple rippleColor="light">
        <a
          className="inline-block rounded bg-primary mr-2 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
          role="button"
          onClick={toggleShow}
        >
          Link
        </a>
      </TERipple>
      <TERipple rippleColor="light">
        <button
          type="button"
          className="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
          onClick={toggleShow}
        >
          Button
        </button>
      </TERipple>

      <TECollapse show={show}>
        <div className="block rounded-lg bg-white p-6 shadow-lg dark:bg-neutral-700 dark:text-neutral-50">
          Some placeholder content for the collapse component. This panel is
          hidden by default but revealed when the user activates the relevant
          trigger.
        </div>
      </TECollapse>
    </>
  );
}

However, (afaik) TWE uses/requires the import() function. This seems to make problems for CLJS and the workaround is

(ns my.app
  (:require
    [shadow.esm :refer (dynamic-import)]
    [shadow.cljs.modern :refer (js-await)]))

(defn foo []
  (js-await [mod (dynamic-import "https://cdn.pika.dev/preact@^10.0.0")]
    (js/console.log "loaded module" mod)))

as shown here using ES.

So I adapted this to

(ns my.app
  (:require
    [shadow.esm :refer (dynamic-import)]
    [shadow.cljs.modern :refer (js-await)]))

(defn TERipple []
  (js-await [mod (dynamic-import "tw-elements-react")]
    (js/console.log "loaded module" mod)))

However this results in CLJS telling me shadow_esm_import is not defined. I guess I need to change my target in the config to :esm, but then I am unable to mount my app into the DOM. I am realtively new to CLJS so this is all very confusing. Can someone help me?

Edit: Thomas Heller pointed out, that this is no use of import() but only the basic import syntax. Which would lead to an import via

(:require ["tw-elements-react" :refer (TECollapse TERipple)])

and then using it like

[:> TERipple
...
]

This, however gives me

[:app] Build failure:
Closure compilation failed with 1 errors
--- node_modules/tw-elements-react/dist/js/tw-elements-react.umd.min.js:13
Dynamic import expressions cannot be transpiled.

1 Answer 1

1

The JS example is not using import(). It is just a regular import. I know they look similar, but they are entirely different.

There are a lot of common translation examples available in the shadow-cljs docs.

So, import { TECollapse, TERipple } from "tw-elements-react"; translates to

(ns my.app
  (:require ["tw-elements-react" :refer (TECollapse TERipple)]))

Incidentally the tw-elements-react package does indeed use import() internally. This does not change how you :require it from CLJS, but shadow-cljs version 2.26.6+ is required for that to work.

Sign up to request clarification or add additional context in comments.

6 Comments

Thank you for the answere. I've alread tried this and got this error [:app] Build failure: Closure compilation failed with 1 errors node_modules/tw-elements-react/dist/js/tw-elements-react.umd.min.js:13 Dynamic import expressions cannot be transpiled.
Which shadow-cljs version do you use? Support for this was added in 2.26.6, so older versions won't work.
I was indeed running version 2.26.2. I bumped it up and now I now get everything compiled and imported, but if I use [:> TERipple [:div ... ]] the browser throws Minified react error 40: Target container is not a DOM element.
The error seems to stem from an invalid hook call, but I don't know what is wrong with my syntax.
Probably good to ask that as a separate question with the code you tried.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.