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

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?

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

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.

Thank you for the reply.

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

And it didn't work with Ant Design?

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.

;; 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]

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

Here is the file of the package in question: https://github.com/ant-design/pro-components/blob/master/packages/layout/src/index.tsx#L29-L59

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

Thanks I'm trying

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

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

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

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

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

Anyway, thanks for trying. 👍

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

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.

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

@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

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

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

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

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

Here is the reports for the first option.

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

that report is the second option 😛

Alright! 🙂 Here the good one.

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

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

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.

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

https://github.com/ant-design/pro-components/blob/master/packages/layout/src/Footer.tsx#L1

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

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

Thomas struck hard again! 👍

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

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

And it will be awesome!

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

Even on a sunday 🙂

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

Ah, security breaks on FF, not on chrome

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

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?

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

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?

Otherwise it’s neat! I like it

Ah! Drag things to the bottom right, got it

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

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

A tooltip seems like a good idea

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

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

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

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

Glad you enjoyed it! 😄

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

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

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

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

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