nguyenbatranvan / vite-multiple-assets

npm package
https://www.npmjs.com/package/vite-multiple-assets
8 stars 7 forks source link

Folders outside of the working directory #17

Open shannonhochkins opened 1 week ago

shannonhochkins commented 1 week ago

What wasn't clear and it took me a while to figure this out, however if i add a path to a folder outside of the working directory, I needed to add a few more things to vite that i think should be part of the config of this plugin:

// vite.config.js
import { resolve } from "path";
import { UserConfig, searchForWorkspaceRoot, PluginOption, FSWatcher } from "vite";
import DynamicPublicDirectory from "vite-multiple-assets";

const CustomHmr = () => {
  return {
    name: 'custom-hmr',
    enforce: 'post',
    configureServer(server) {
      const { watcher, ws } = server;

      // Define the path to the external directory, i needed to add this to get hot reloading work for that particular asset too
      const externalPath = resolve(__dirname, '../sdk');

      // Watch the external directory for changes
      watcher.add(externalPath);

      // Handle changes in the external directory
      watcher.on('change', (path) => {
        if (path.startsWith(externalPath)) {
          console.log(`External file changed: ${path}`);
          // Trigger a full reload
          ws.send({
            type: 'full-reload',
            path: '*' // or you can specify paths if needed
          });
        }
      });
    },
  } satisfies PluginOption;
};

export default {
  server: {
    port: 3000,
    fs: {
      allow: [
        // i needed to tell the file system of the server to allow this folder
        resolve(__dirname, '../sdk/dist'),
        // i also needed it to tell the current working directory too to continue to allow it
        resolve(__dirname)
      ]
    }
  },
  publicDir: `${__dirname}/public`,
  plugins: [
    CustomHmr(),
    DynamicPublicDirectory([
      '../sdk',
    ], {
      ssr: false,
      mimeTypes: {
        '.js': 'text/javascript',
      }
    })
  ],
} satisfies UserConfig;

This might fall outside the scope of this plugin, but it might be good to document this!

nguyenbatranvan commented 1 week ago

What wasn't clear and it took me a while to figure this out, however if i add a path to a folder outside of the working directory, I needed to add a few more things to vite that i think should be part of the config of this plugin:

// vite.config.js
import { resolve } from "path";
import { UserConfig, searchForWorkspaceRoot, PluginOption, FSWatcher } from "vite";
import DynamicPublicDirectory from "vite-multiple-assets";

const CustomHmr = () => {
  return {
    name: 'custom-hmr',
    enforce: 'post',
    configureServer(server) {
      const { watcher, ws } = server;

      // Define the path to the external directory, i needed to add this to get hot reloading work for that particular asset too
      const externalPath = resolve(__dirname, '../sdk');

      // Watch the external directory for changes
      watcher.add(externalPath);

      // Handle changes in the external directory
      watcher.on('change', (path) => {
        if (path.startsWith(externalPath)) {
          console.log(`External file changed: ${path}`);
          // Trigger a full reload
          ws.send({
            type: 'full-reload',
            path: '*' // or you can specify paths if needed
          });
        }
      });
    },
  } satisfies PluginOption;
};

export default {
  server: {
    port: 3000,
    fs: {
      allow: [
        // i needed to tell the file system of the server to allow this folder
        resolve(__dirname, '../sdk/dist'),
        // i also needed it to tell the current working directory too to continue to allow it
        resolve(__dirname)
      ]
    }
  },
  publicDir: `${__dirname}/public`,
  plugins: [
    CustomHmr(),
    DynamicPublicDirectory([
      '../sdk',
    ], {
      ssr: false,
      mimeTypes: {
        '.js': 'text/javascript',
      }
    })
  ],
} satisfies UserConfig;

This might fall outside the scope of this plugin, but it might be good to document this!

Do you mean public folder outside the root folder will cause problems?

shannonhochkins commented 1 week ago

If you do not provide the fs allow option for the same path it doesn't work, so that should probably automatically set that value

Additionally an option to add the path to the internal watcher like shown would be useful