ElMassimo/iles

Client:visible not downloading javascript of dependencies of a component as expected

TechAkayy opened this issue · 2 comments

TechAkayy commented

Description 📖

This is a followup of a discussion item (#267) I created earlier today where I wanted to download js/css from cdn during client:visible hydration of a component called BookAnAppointment.vue. Also had a discord chat on that topic here.

In order to avoid using a library via cdn, I replaced the datepicker solution with shadcn-vue, and added the date-picker to the above BookAnAppointment.vue component.

When testing it out, even though it has the client:visible directive, on checking network tab in devtools, the dependencies of the date picker (lucide-vue-next, etc) are downloading immediately on page load. So, basically client:visible is not working as expected, as it should hydrate the whole island as an individual app only when it comes into the viewport. Note the component itself if hydrating on visible as expected, but not it's dependencies.

Reproduction 🐞

https://github.com/TechAkayy/prozone-chairs-iles-shadcn-vue

Clone, install dependencies, run npm run dev to start dev-server, open devtools, check network tab. Search for lucide-vue-next which is used by the date-picker, and its already downloaded, while it should ideally download and hydrate the BookAnAppointment.vue only on client:visible.

Dependencies Info

Run npx iles info and pnpm list (or npm list) and provide the output:

`npx iles info`

iles v0.9.5 vite v4.4.7

`npm list`

pg-iles-tailwindcss@0.0.0 /Users/techakayy/Projects/pg/prozone-chairs-iles-shadcn-vue
├── @11ty/is-land@4.0.0
├── @iconify/json@2.2.96
├── @islands/prism@0.8.0
├── @nuxt/eslint-config@0.1.1
├── @pinegrow/iles-module@3.0.34
├── @pinegrow/tailwindcss-plugin@3.0.18
├── @popperjs/core@2.11.8
├── @preact/preset-vite@2.5.0
├── @sveltejs/vite-plugin-svelte@2.4.3
├── @tailwindcss/forms@0.5.4
├── @tailwindcss/typography@0.5.9
├── @types/node@20.5.0
├── @unocss/preset-icons@0.57.2
├── @vue/devtools@6.5.0
├── @vueuse/core@10.7.2
├── @vueuse/head@2.0.0
├── autoprefixer@10.4.14
├── class-variance-authority@0.7.0
├── clsx@2.1.0
├── daisyui@4.6.0
├── defu@6.1.2
├── eslint-config-prettier@8.9.0
├── eslint@8.46.0
├── iles@0.9.5
├── lite-youtube-embed@0.2.0
├── lucide-vue-next@0.314.0
├── npm-run-all@4.1.5
├── ofetch@1.3.3
├── pikaday@1.8.2
├── pinia@2.1.6
├── postcss@8.4.31
├── preact-render-to-string@6.2.0
├── preact@10.16.0
├── prettier@2.8.8
├── radix-vue@1.3.2
├── rehype-external-links@2.1.0
├── solid-js@1.7.11
├── svelte@4.2.0
├── tailwind-merge@2.2.1
├── tailwindcss-animate@1.0.7
├── tailwindcss@3.3.3
├── typescript@5.1.6
├── unocss@0.57.2
├── unplugin-auto-import@0.16.6
├── v-calendar@3.1.2
├── vee-validate@4.11.6
├── vite-plugin-vue-devtools@0.0.22
└── vue-tsc@1.8.8

Logs 📜

If not providing a reproduction:

Output

Run DEBUG=iles:* npm run dev or DEBUG=iles:* npm run build and provide the output:

Screenshots 📷

image

ElMassimo commented

The expectation for client:visible is that the component is created when the condition is met, not that it's script is downloaded only then (that would increase latency and time to responsiveness).

If you want to delay the load of a heavy dependency, try using dynamic imports instead, which can be paired with defineAsyncComponent if needed.

TechAkayy commented

Gotcha, thanks for the clarification :-)

  • 👍1