LuckyWindsck / eslint-plugin-nuxt3-auto-import

A plugin that adds ESLint globals for nuxt3 auto imported functions
MIT License
4 stars 1 forks source link

Functions that are not auto-imported yet would also be treaded as globals #2

Open LuckyWindsck opened 2 years ago

LuckyWindsck commented 2 years ago

Nuxt@3.0.0-rc.4 has a module called autoImportsModule that will auto import helper functions, composables and Vue APIs.

This is how auto import works.

First, in the function loadNuxt(opts), nuxt.config.ts will be loaded by another function loadNuxtConfig(opts), then the module autoImportsModule will be pushed into options._modules. Later, when the function nuxt.ready() is called, all modules in modulesToInstall (including nuxt.options._modules) will be installed by function installModule.

const commonPresets = [
  defineUnimportPreset({
    from: "#head",
    imports: [
      ...
    ]
  }),
  defineUnimportPreset({
    from: "vue-demi",
    imports: [
      ...
    ]
  })
];
const appPreset = defineUnimportPreset({
  from: "#app",
  imports: [
    ...
  ]
});
const vuePreset = defineUnimportPreset({
  from: "vue",
  imports: [
    ...
  ]
});
const defaultPresets = [
  ...commonPresets,
  appPreset,
  vuePreset
];

const autoImportsModule = defineNuxtModule({
  meta: {
    ...
  },
  defaults: {
    presets: defaultPresets,
    ...
  },
  async setup(options, nuxt) {
    await nuxt.callHook("autoImports:sources", options.presets);
    ...
  }
});

function createNuxt(options) {
  ...
  const nuxt = {
    ...
    ready: () => initNuxt(nuxt),
    ...
  };
  return nuxt;
}

async function initNuxt(nuxt) {
  ...
  await nuxt.callHook("modules:before", { nuxt });
  const modulesToInstall = [
    ...nuxt.options.buildModules,
    ...nuxt.options.modules,
    ...nuxt.options._modules
  ];
   ...
  for (const m of modulesToInstall) {
    if (Array.isArray(m)) {
      await installModule(m[0], m[1]);
    } else {
      await installModule(m, {});
    }
  }
  await nuxt.callHook("modules:done", { nuxt });
   ...
}

async function loadNuxt(opts) {
  const options = await loadNuxtConfig(opts); // This is where the nuxt.config.ts is loaded

  ...

  options._modules.push([autoImportsModule, {
    transform: {
      include: options._layers.filter((i) => i.cwd && i.cwd.includes("node_modules")).map((i) => new RegExp(`(^|\\/)${escapeRE(i.cwd.split("node_modules/").pop())}(\\/|$)(?!node_modules\\/)`))
    }
  }]);

  ...

  const nuxt = createNuxt(options);
  if (opts.ready !== false) {
    await nuxt.ready(); // indeed `initNuxt(nuxt)`
  }
  return nuxt;
}

The problem is that the configuration file (nuxt.config.ts) will be loaded first, then auto-import will be done. So nuxt functions like defineNuxtPlugin can not be used in the configuration file. If someone attempt to use those functions in the configuration file, and use this plugin and add globals to silent the ESLint no-undef rule, those functions still cannot be used.

Maybe I need to find a way other than just setting globals, or find a way to apply globals setting on Nuxt configuration files.

LuckyWindsck commented 2 years ago

Workaround image

  overrides: [
    ...,
    {
      files: ['nuxt.config.ts'],
      env: { 'nuxt3-auto-import/nuxt': false },
    },
  ],