ElMassimo
commented
8 months ago 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
ilesandvite.Description 📖
This is a followup of a discussion item (https://github.com/ElMassimo/iles/discussions/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.vuecomponent.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:visibleis 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 devto start dev-server, open devtools, check network tab. Search forlucide-vue-nextwhich is used by the date-picker, and its already downloaded, while it should ideally download and hydrate theBookAnAppointment.vueonly 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 📷