ElMassimo / iles

🏝 The joyful site generator
https://iles.pages.dev
MIT License
1.08k stars 32 forks source link

Vue app context not the same when hydrating at client side. #207

Closed joesonw closed 1 year ago

joesonw commented 1 year ago

Description 📖

I was trying to use vue-i18n with client:load hydration, I cannot get it work because it keeps telling me i18n is not installed to the app.

So I tried to print out getCurrentInstance() within the component, it turns out that at each component rendering (there is a list of them), instance.appContext.app is different, its uid is never 0 (which is the one from app.ts). . Was I doing something wrong? Or is this intended?

Reproduction 🐞

print out getCurrentInstance() in any client hydrated component.

Dependencies Info _Run `npx iles info` and `pnpm list` (or `npm list`) and provide the output:_ ``` dependencies: @faker-js/faker 7.6.0 ****** ****** ****** ****** dayjs 1.11.6 isomorphic-fetch 3.0.0 reflect-metadata 0.1.13 vue-i18n 9.2.2 devDependencies: @types/isomorphic-fetch 0.0.36 body-parser 1.20.0 postcss-discard-comments 5.1.2 ****** concurrently 7.4.0 postcss-use 3.0.0 ****** cors 2.8.5 sass 1.55.0 ****** express 4.18.1 typescript 4.8.4 ****** iles 0.8.5 vite 3.2.4 ****** json-graphql-server 2.3.2 vitest 0.23.2 @vitejs/plugin-vue 3.1.2 postcss 8.4.17 vue 3.2.39 autoprefixer 10.4.12 postcss-clean 1.2.2 vue-tsc 0.38.9 ```

Logs 📜

If not providing a reproduction:

Output _Run `DEBUG=iles:* npm run dev` or `DEBUG=iles:* npm run build` and provide the output:_ ``` ```

Screenshots 📷

Provide console or browser screenshots of the problem.

ElMassimo commented 1 year ago

This is expected, as the "outer app" will not be available when the app is built.

During development, the entire site is a Vue app to support HMR. Anything outside islands will be static at build time.

Vue apps can't have multiple mounting targets, so each island will be mounted as a Vue app on its own.