search

ElMassimo / iles

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

HMR on style updates in pages with islands #248

Open TechAkayy opened 1 year ago

TechAkayy commented 1 year ago

Description 📖

Please refer to index.vue in this repo. It's console logging whenever it mounts using the onMounted hook.

During development, HMR on simple style updates works beautifully as expected within islands (components inside the components folder) without re-mounting the component.

But, when updating styles in a page that's using islands (client directives applied), the page re-mounts for every style update. Try changing the colour in the scoped style class mybkg from green to red in index.vue and save and check console, you can see index.vue was re-mounted.

Not sure if this is expected in pages containing islands, please advise and close this issue if so. Thanks bunch!

Reproduction 🐞

https://github.com/techakayy/nature-delights-with-iles

If you face any peer dependencies issues, install using the force flag. Use command npm install --force

Dependencies Info _Run `npx iles info` and `pnpm list` (or `npm list`) and provide the output:_ ``` iles v0.8.7 / vite v3.2.5 Also tried - iles v0.9.5 / vite v4.3.0-beta.4 nature-delights-with-iles@0.0.0 /Users/techakayy/Projects/iles/nature-delights-with-iles ├── @headlessui/vue@1.7.12 ├── @heroicons/vue@2.0.17 ├── @iconify/json@2.2.46 ├── @nutui/nutui@4.0.4 ├── @nuxt/eslint-config@0.1.1 ├── @pinegrow/iles-module@3.0.0-beta.102 ├── @pinegrow/tailwindcss-plugin@3.0.0-beta.48 ├── @preact/preset-vite@2.5.0 ├── @sveltejs/vite-plugin-svelte@1.0.9 ├── @unocss/preset-icons@0.50.6 ├── @vue/devtools@6.5.0 ├── @vueuse/core@9.13.0 ├── autoprefixer@10.4.14 ├── eslint-config-prettier@8.8.0 ├── eslint@8.37.0 ├── iles@0.8.7 ├── node-html-parser@6.1.5 ├── postcss@8.4.21 ├── preact-render-to-string@6.0.2 ├── prettier@2.8.7 ├── tailwindcss@3.3.1 ├── typescript@4.9.5 ├── unocss@0.50.6 ├── unplugin-vue-components@0.24.1 └── 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:_ ``` iles:config loaded config at /Users/techakayy/Projects/iles/nature-delights-with-iles/iles.config.ts +0ms iles:config { iles:config root: '/Users/techakayy/Projects/iles/nature-delights-with-iles', iles:config modules: [ iles:config { iles:config name: 'iles:base-config', iles:config debug: true, iles:config drafts: true, iles:config turbo: false, iles:config jsx: 'preact', iles:config root: '/Users/techakayy/Projects/iles/nature-delights-with-iles', iles:config base: '/', iles:config siteUrl: '', iles:config prettyUrls: true, iles:config ssg: [Object], iles:config configPath: '/Users/techakayy/Projects/iles/nature-delights-with-iles/iles.config.ts', iles:config assetsDir: 'assets', iles:config pagesDir: 'pages', iles:config srcDir: 'src', iles:config outDir: 'dist', iles:config layoutsDir: 'layouts', iles:config tempDir: '.iles-ssg-temp', iles:config modules: [], iles:config namedPlugins: {}, iles:config resolvePath: undefined, iles:config vitePlugins: [], iles:config vite: [Object], iles:config vue: [Object], iles:config extendFrontmatter: [AsyncFunction: extendFrontmatter], iles:config extendRoute: [Function: extendRoute], iles:config extendRoutes: [Function: extendRoutes], iles:config markdown: [Object], iles:config components: [Object] iles:config }, iles:config { iles:config name: '@islands/mdx', iles:config markdown: [Object], iles:config configResolved: [Function: configResolved] iles:config }, iles:config { iles:config name: 'user-config', iles:config jsx: 'preact', iles:config svelte: true, iles:config components: [Object], iles:config vite: [Object], iles:config siteUrl: 'https://pg-iles-tailwindcss.netlify.app', iles:config extendRoutes: [Function: extendRoutes], iles:config configPath: '/Users/techakayy/Projects/iles/nature-delights-with-iles/iles.config.ts' iles:config }, iles:config { iles:config name: '@pinegrow/iles-module', iles:config vite: [Object], iles:config config: [Function: config] iles:config }, iles:config { iles:config name: '@islands/pages', iles:config configResolved: [Function: configResolved] iles:config }, iles:config { iles:config name: 'iles:base-config', iles:config debug: true, iles:config drafts: true, iles:config turbo: false, iles:config jsx: 'preact', iles:config root: '/Users/techakayy/Projects/iles/nature-delights-with-iles', iles:config base: '/', iles:config siteUrl: '', iles:config prettyUrls: true, iles:config ssg: [Object], iles:config configPath: '/Users/techakayy/Projects/iles/nature-delights-with-iles/iles.config.ts', iles:config assetsDir: 'assets', iles:config pagesDir: 'pages', iles:config srcDir: 'src', iles:config outDir: 'dist', iles:config layoutsDir: 'layouts', iles:config tempDir: '.iles-ssg-temp', iles:config modules: [], iles:config namedPlugins: {}, iles:config resolvePath: undefined, iles:config vitePlugins: [], iles:config vite: [Object], iles:config vue: [Object], iles:config extendFrontmatter: [AsyncFunction: extendFrontmatter], iles:config extendRoute: [Function: extendRoute], iles:config extendRoutes: [Function: extendRoutes], iles:config markdown: [Object], iles:config components: [Object] iles:config }, iles:config { iles:config name: '@islands/mdx', iles:config markdown: [Object], iles:config configResolved: [Function: configResolved] iles:config }, iles:config { iles:config name: 'user-config', iles:config jsx: 'preact', iles:config svelte: true, iles:config components: [Object], iles:config vite: [Object], iles:config siteUrl: 'https://pg-iles-tailwindcss.netlify.app', iles:config extendRoutes: [Function: extendRoutes], iles:config configPath: '/Users/techakayy/Projects/iles/nature-delights-with-iles/iles.config.ts' iles:config }, iles:config { iles:config name: '@pinegrow/iles-module', iles:config vite: [Object], iles:config config: [Function: config] iles:config }, iles:config { iles:config name: '@islands/pages', iles:config configResolved: [Function: configResolved] iles:config } iles:config ], iles:config debug: true, iles:config drafts: true, iles:config turbo: false, iles:config jsx: 'preact', iles:config base: '/', iles:config siteUrl: 'https://pg-iles-tailwindcss.netlify.app', iles:config prettyUrls: true, iles:config ssg: { sitemap: true }, iles:config configPath: '/Users/techakayy/Projects/iles/nature-delights-with-iles/iles.config.ts', iles:config assetsDir: 'assets', iles:config pagesDir: '/Users/techakayy/Projects/iles/nature-delights-with-iles/src/pages', iles:config srcDir: '/Users/techakayy/Projects/iles/nature-delights-with-iles/src', iles:config outDir: '/Users/techakayy/Projects/iles/nature-delights-with-iles/dist', iles:config layoutsDir: '/Users/techakayy/Projects/iles/nature-delights-with-iles/src/layouts', iles:config tempDir: '/Users/techakayy/Projects/iles/nature-delights-with-iles/.iles-ssg-temp', iles:config namedPlugins: { iles:config components: { iles:config name: 'unplugin-vue-components', iles:config enforce: 'post', iles:config api: [Object], iles:config transformInclude: [Function: transformInclude], iles:config transform: [Function (anonymous)], iles:config vite: [Object], iles:config webpack: [Function: webpack], iles:config configResolved: [Function: configResolved], iles:config configureServer: [Function: configureServer] iles:config }, iles:config vue: { iles:config name: 'vite:vue', iles:config handleHotUpdate: [Function: handleHotUpdate], iles:config config: [Function: config], iles:config configResolved: [Function: configResolved], iles:config configureServer: [Function: configureServer], iles:config buildStart: [Function: buildStart], iles:config resolveId: [AsyncFunction: resolveId], iles:config load: [Function: load], iles:config transform: [Function: transform] iles:config }, iles:config pages: { iles:config name: 'iles:pages', iles:config enforce: 'pre', iles:config api: [Getter], iles:config configResolved: [AsyncFunction: configResolved], iles:config configureServer: [AsyncFunction: configureServer], iles:config buildStart: [AsyncFunction: buildStart], iles:config resolveId: [AsyncFunction: resolveId], iles:config load: [AsyncFunction: load], iles:config transform: [AsyncFunction: transform] iles:config } iles:config }, iles:config vitePlugins: [ iles:config [ [Object], [Object], [Object], [Object] ], iles:config [ [Object], [Object] ], iles:config { iles:config name: 'iles:mdx:compile', iles:config configResolved: [AsyncFunction: configResolved], iles:config transform: [AsyncFunction: transform] iles:config }, iles:config { name: 'iles:mdx:sfc', transform: [AsyncFunction: transform] }, iles:config { iles:config name: 'iles:mdx:hmr', iles:config apply: 'serve', iles:config transform: [Function: transform] iles:config }, iles:config { iles:config name: 'iles:pages', iles:config enforce: 'pre', iles:config api: [Getter], iles:config configResolved: [AsyncFunction: configResolved], iles:config configureServer: [AsyncFunction: configureServer], iles:config buildStart: [AsyncFunction: buildStart], iles:config resolveId: [AsyncFunction: resolveId], iles:config load: [AsyncFunction: load], iles:config transform: [AsyncFunction: transform] iles:config }, iles:config { iles:config name: 'iles:mdx:compile', iles:config configResolved: [AsyncFunction: configResolved], iles:config transform: [AsyncFunction: transform] iles:config }, iles:config { name: 'iles:mdx:sfc', transform: [AsyncFunction: transform] }, iles:config { iles:config name: 'iles:mdx:hmr', iles:config apply: 'serve', iles:config transform: [Function: transform] iles:config }, iles:config { iles:config name: 'iles:pages', iles:config enforce: 'pre', iles:config api: [Getter], iles:config configResolved: [AsyncFunction: configResolved], iles:config configureServer: [AsyncFunction: configureServer], iles:config buildStart: [AsyncFunction: buildStart], iles:config resolveId: [AsyncFunction: resolveId], iles:config load: [AsyncFunction: load], iles:config transform: [AsyncFunction: transform] iles:config } iles:config ], iles:config vite: { iles:config root: '/Users/techakayy/Projects/iles/nature-delights-with-iles', iles:config resolve: { alias: [Array], dedupe: [Array] }, iles:config server: { fs: [Object] }, iles:config build: { cssCodeSplit: false, assetsDir: 'assets' }, iles:config define: { 'import.meta.env.DISPOSE_ISLANDS': true }, iles:config optimizeDeps: { include: [Array], exclude: [Array] }, iles:config css: { preprocessorOptions: [Object] }, iles:config plugins: [ [Array], [b], [Object], [Array], [b], [Object] ], iles:config base: '/' iles:config }, iles:config vue: { iles:config reactivityTransform: true, iles:config template: { compilerOptions: [Object] } iles:config }, iles:config extendFrontmatter: [AsyncFunction (anonymous)], iles:config extendRoute: [AsyncFunction (anonymous)], iles:config extendRoutes: [AsyncFunction (anonymous)], iles:config markdown: { iles:config jsxRuntime: 'automatic', iles:config jsxImportSource: 'iles', iles:config providerImportSource: 'iles', iles:config rehypePlugins: [ [Array], [Array] ], iles:config remarkPlugins: [ iles:config [Array], [Array], iles:config [Array], [Array], iles:config [Array], [Array], iles:config [Array], [Array] iles:config ], iles:config recmaPlugins: [ iles:config [Function: recmaVueResolveComponents], iles:config [Function: recmaVueResolveComponents], iles:config [Function (anonymous)], iles:config [Function (anonymous)] iles:config ] iles:config }, iles:config components: { iles:config dts: true, iles:config extensions: [ iles:config 'vue', 'jsx', 'tsx', iles:config 'js', 'ts', 'mdx', iles:config 'svelte', 'vue', 'jsx', iles:config 'tsx', 'js', 'ts', iles:config 'mdx', 'svelte' iles:config ], iles:config include: [ iles:config /\.vue$/, iles:config /\.vue\?vue/, iles:config /\.mdx?/, iles:config /\.vue$/, iles:config /\.vue\?vue/, iles:config /\.mdx?/ iles:config ], iles:config dirs: 'src/components', iles:config resolvers: [ iles:config [Function: IlesComponentResolver], iles:config [Function (anonymous)], iles:config [Object], iles:config [Function: IlesComponentResolver], iles:config [Function (anonymous)], iles:config [Object] iles:config ], iles:config transformer: 'vue3' iles:config }, iles:config svelte: true iles:config } +0ms ```

Screenshots 📷

Provide console or browser screenshots of the problem.