Define components with "require.context" in "<script setup>".

[muttering-oldman]

How can I add components with require.context using <script setup>?
The rfc for script setup shows this example. In the example, each component has to be imported.

In the Options API I used this code to collect all the components from a particular folder:

function getComponents() {
  const context = require.context('../icons', true, /Icon[A-Z]\w+\.vue$/)

  const res = {
    components: {},
    namesForValidator: [],
  }
  for (const key of context.keys()) {
    const match = key.match(/\/(\w+)\.\w+$/)
    if (match && match[1]) {
      const name = kebabCase(match[1])
      res.components[name] = context(key).default
      res.namesForValidator.push(name)
    }
  }
  return res
}

Then I add the resulting components object to the options object passed to defineComponent.

const { components, namesForValidator } = getIconsComponents()

export default defineComponent({
  components,

  // ...
})

All this works fine.
But in the <script setup> it's not clear to me how to make it work.
Maybe there is (or is planned) some undocumented defineComponets compiler macros that would solve this problem?

[muttering-oldman]

Solved this problem with the code below, but I get an error when I try to use the namesForValidator array inside the validator function when defining the props.

<template>
  <component :is="icon" />
</template>

<script lang="ts" setup>
import { kebabCase } from '@/helpers'
import { computed, toRefs } from 'vue'
import type { DefineComponent } from 'vue'

export interface IconComponentsList {
  components: Record<string, DefineComponent>
  namesForValidator: string[]
}

function getIconsComponents(): IconComponentsList {
  const context = require.context('../icons', true, /Icon[A-Z]\w+\.vue$/)

  const res = {
    components: {} as Record<string, DefineComponent>,
    namesForVallidator: [] as string[],
  }
  for (const key of context.keys()) {
    const match = key.match(/\/(\w+)\.\w+$/)
    if (match && match[1] && typeof match[1] === 'string') {
      const name = kebabCase(match[1].replace('Icon', ''))
      res.components[name] = context(key).default
      res.namesForVallidator.push(name)

    }
  }
  return res
}

const { components, namesForValidator }: IconComponentsList = getIconsComponents()

const { name } = toRefs(defineProps({
  name: {
    type: String,
    required: true,
    validator(v: string) {
      return namesForValidator.includes(v) // this line causes error <--------------------------------------
    },
  },
}))

const icon = computed(() => {
  return components[name]
})
</script>

Error:

bootstrap:27 Uncaught Error: Module build failed (from ./node_modules/vue-loader/dist/index.js):
TypeError: Cannot read property 'content' of null
at Object.selectBlock (E:\project\node_modules\vue-loader\dist\select.js:23:45)
at Object.loader (E:\project\node_modules\vue-loader\dist\index.js:70:25)
at Object../node_modules/cache-loader/dist/cjs.js??clonedRuleSet-40.use[0]!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-40.use[2]!./node_modules/cache-loader/dist/cjs.js??ruleSet[0].use[0]!./node_modules/vue-loader/dist/index.js??
...

If I remove the validator everything works fine. :)