HMR on style updates in pages with islands

[TechAkayy]

• I have read the troubleshooting section before opening an issue.
• I have tried upgrading iles and vite.

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

[email protected] /Users/techakayy/Projects/iles/nature-delights-with-iles
├── @headlessui/[email protected]
├── @heroicons/[email protected]
├── @iconify/[email protected]
├── @nutui/[email protected]
├── @nuxt/[email protected]
├── @pinegrow/[email protected]
├── @pinegrow/[email protected]
├── @preact/[email protected]
├── @sveltejs/[email protected]
├── @unocss/[email protected]
├── @vue/[email protected]
├── @vueuse/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

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.