Fork me on GitHub
#clojurescript
<
2021-09-19
>
zendevil.eth10:09:57

Hi I have an anchor tag: [:a {:href ""}] but when I click on the link, it takes me to the relative path, i.e., localhost:3000/…/foobar.io, whereas I want it to go to http://foobar.io. Does anyone know how to make it go there? I could prepend it with https://, but the href actually depends on the user input (it’s not hardcoded), and the user might or might not put the https:// in there, which might lead to a double https://.

p-himik11:09:00

Just check if the string starts with a protocol. If it doesn't, add a default protocol.

Arthur15:09:00

I guess you could just check use clojure/string includes? to check whether the user input includes the https:// and add it if the user didn’t include it?

p-himik15:09:37

1. Not contains? but includes? 2. You actually want to use starts-with?

☝️ 2
Michaël Salihi12:09:49

Hi, when using :target :bundle + webpack, I wonder to know if is it possible to use Webpack to do some tree shaking (dead code elimination)? As the generated file uses CommonJS require and not ES import, it does not seem to me that one can, right?

Michaël Salihi12:09:39

And if not, so package like Ant Design https://ant.design/ who relies heavily on Webpack to do the tree shaking aren't usable in production with CLJS, the generated bundle are too big for the browser (more than 1.1Mb for a simple project).

p-himik12:09:08

Are you including separate components or the while library and then use it by accessing separate fields? Material UI has the same issue, among, I'm sure, many other libraries. If you require ["@material-ui/core" :as mui] and then use it as e.g. (def button (.-Button mui)), the whole Material UI will end up in your bundle, even if you use nothing but that button. But if you require ["@material-ui/core/Button" :default Button], then you're all good - nothing but that button and everything that it uses will be included.

Michaël Salihi12:09:12

Thank you for the reply.

Michaël Salihi12:09:36

Yes I had a discussion about this with @U05224H0W so I tried to include the components separately.

p-himik12:09:17

And it didn't work with Ant Design?

Michaël Salihi12:09:32

In the following example, it drastically improved the import of icons but when I import the ProLayout I go straight back to more than 1MB.

Michaël Salihi12:09:03

;; More than 1.1MB
"@ant-design/pro-layout" :default ProLayout :refer [PageContainer]]

;; Icons OK
["@ant-design/icons/AppstoreOutlined" :default AppstoreOutlined]
["@ant-design/icons/FileTextOutlined" :default FileTextOutlined]
["@ant-design/icons/LikeOutlined" :default LikeOutlined]
["@ant-design/icons/SettingOutlined" :default SettingOutlined]
["@ant-design/icons/AlipayCircleFilled" :default AlipayCircleFilled]

Michaël Salihi12:09:44

Maybe my import is not optimized for the layout. What do you think ?

p-himik12:09:55

Of course, same problem. Try ["@ant-design/pro-layout/components/PageContainer" :default PageContainer].

Michaël Salihi13:09:44

Thanks I'm trying

Michaël Salihi13:09:03

But I need ProLayout too. Here is how it's done in JS:

import ProLayout, { PageContainer, SettingDrawer } from '@ant-design/pro-layout';

p-himik13:09:37

Just look at the source of the file you have sent the link to above. Same thing. ["@ant-design/pro-layout/BasicLayout" :default ProLayout].

Michaël Salihi13:09:48

["@ant-design/pro-layout/BasicLayout" :default ProLayout] doesn't work.

Michaël Salihi13:09:50

I change in ["@ant-design/pro-layout/es/BasicLayout" :default ProLayout] it works but the size is still huge 1.37 MiB 😕

Michaël Salihi14:09:50

Anyway, thanks for trying. 👍

thheller14:09:34

did you verify if webpack can actually shrink it with tree shaking? I mean its not uncommon for JS libs to get that big?

p-himik14:09:47

Ah, and I can't really test it because there's a JS file in @ant-design that requires a LESS file. Don't have any desire to figure out how to compile that sort of stuff, sorry.

Michaël Salihi15:09:20

@U2FRKM4TW FYI Shadow-CLJS has the :ignore-asset-requires true option to ignore requires assets (CSS, Less, etc).

👍 2
Michaël Salihi15:09:23

@U05224H0W Yes I already tried with create-react-app + Antd, the tree shaking works great. They worked a lot on this point for the v4 apparently. https://ant.design/docs/react/getting-started#Import-on-Demand

thheller15:09:06

and how large is it with exactly the imports you have in your cljs code?

Michaël Salihi15:09:22

Good news, with your both helps I am approaching a correct size. I continue my tests. Thank you!

thheller15:09:25

I'm aware that the general thing works to some extent

Michaël Salihi15:09:16

For the same code: • :js-provider :shadow = 2.97 MB • :js-provider :external + Webpack = 144.5 KB for app.js + 844,05KB for libs.js

👍 2
Michaël Salihi15:09:38

Here is the reports for the first option.

Michaël Salihi15:09:28

With the second option, it seems I'm on the right track! 🙂

thheller15:09:57

that report is the second option 😛

Michaël Salihi15:09:29

Alright! 🙂 Here the good one.

thheller15:09:12

ah ok, so the pro-layout thing ends up importing the top level icons again

Michaël Salihi15:09:38

We can observe that although I target the requires, all the icons are imported, as well as unused components.

p-himik15:09:35

Yeah, was about to mention - got it working thanks to :ignore-asset-requires true and the report clearly shows that separate Ant components just require all the icons.

Michaël Salihi15:09:55

> ah ok, so the pro-layout thing ends up importing the top level icons again Yes, it's a mess!

thheller15:09:32

well they expect you to use webpack anyways so I guess thats fine

Michaël Salihi16:09:51

Yeah so for this case, we can say long live to : js-provider: external! The one and only solution in ClojureScript, right?

Michaël Salihi16:09:45

Thomas struck hard again! 👍

thheller16:09:01

:target :bundle is basically the same so nothing special there

thheller16:09:49

at some point I guess I'll figure out what the rules for webpack tree-shaking are and see if I can implement them

clojure-spin 4
Michaël Salihi16:09:58

And it will be awesome!

Michaël Salihi16:09:01

Thank you again to you gentlemen, you are a great help.

Michaël Salihi16:09:19

Even on a sunday 🙂

Ella Hoeppner22:09:33

Hi! I've been working on a little visual ClojureScript interface that some people here might find interesting: https://vlojure.io/

👏 3
👍 3
lsenjov22:09:08

Uncaught DOMException: CSSStyleSheet.insertRule: Not allowed to access cross-origin stylesheet
😞

lsenjov22:09:03

Ah, security breaks on FF, not on chrome

lsenjov22:09:36

Oh this is neat. I’m liking how easy it is to modify source and have the diagram update

👍 2
Ella Hoeppner22:09:03

Huh, thanks for catching that. It actually seems to be working fine in firefox on my end though. Do you know what version you're running?

lsenjov22:09:10

91.0.2 . Might just be one of my plugins turning up the security a little high

lsenjov22:09:13

New user nitpicks: • Add info on containers to tell us what type they are. Alternatively, show the source at that node. There’s a lot of new symbols and I can’t find an easy reference anywhere. • Possibly also some sort of tooltip/info on items on the right? All I’m seeing are pretty shapes • What does the button in the bottom right do? I’m assuming it’s unimplemented at the moment?

lsenjov22:09:47

Otherwise it’s neat! I like it

lsenjov22:09:05

Ah! Drag things to the bottom right, got it

👍 2
Ella Hoeppner22:09:36

I appreciate the feedback! I totally feel you on all the new symbols. I'm gunna create an "about" page for the site soon that has a little "cheat-sheet" displaying all of them

👍 2
Ella Hoeppner22:09:07

Overall I tried to keep a basic logic to it, like things that use square brackets are octagons, things that use curly brackets have little triangles pointing out on the corners, things prefixed by a # have little pairs of lines on each of the cardinal directions, etc. But even then it can still be confusing at first, and there are plenty of things that don't fit nicely into that that scheme

Ella Hoeppner22:09:42

A tooltip seems like a good idea

lsenjov23:09:15

It does seem to have issues with multiple top level forms, specifically going to the last one

lsenjov23:09:38

I can’t scroll far enough to the right, I can only see half of it

lsenjov23:09:04

Alright, I’ll stop breaking things now. Looking forward to seeing where it goes

Ella Hoeppner23:09:53

Oh good catch, I know that was working at some point in the past. I'll have to see what I broke

👍 2
Ella Hoeppner23:09:11

Glad you enjoyed it! 😄

phronmophobic23:09:37

looks cool! Looks like it's not rendering at correct pixel ratio (at least on mac). here's a snippet I use to enable retina graphics in canvas:

(defn update-scale [canvas]
  (let [content-scale (.-devicePixelRatio js/window)]
    (when (and content-scale (not= 1 content-scale))
      (let [cwidth (.-clientWidth canvas)
            cheight (.-clientHeight canvas)
            canvas-style (.-style canvas)
            ctx (.getContext canvas "2d")]
        (set! (.-width canvas-style) (str cwidth "px") )
        (set! (.-height canvas-style) (str cheight "px"))

        (set! (.-width canvas) (* cwidth content-scale))
        (set! (.-height canvas) (* cheight content-scale))))))

👍 2
phronmophobic02:09:37

I can't figure out what the >_ button does

Ella Hoeppner03:09:28

It's not a button, you can drag code into that area to evaluate it

Ella Hoeppner03:09:45

This video might help explain some of the more confusing parts, btw: https://youtu.be/1OcAUhe3E1E

👀 2
phronmophobic04:09:43

It might nice to have a help button with a little explanation or links to the youtube video.

Ella Hoeppner22:09:15

Here's a little twitter thread describing it and linking to a video tutorial: https://twitter.com/ella_hoeppner/status/1439717775904284672