Component Scanning and Discovery

Codux searches for components in all project files by default, but the search can be scoped to obtain more accurate results and decrease the application's loading time.
The scope for this search can be configured using include and/or exclude glob patterns under the componentsDiscovery key in the codux.config.json config file.
Let's say we have the following project structure:

├── packages
│ ├── package-a
│ │ ├── components
│ │ │ ├── button-a.tsx (with definition)
│ │ │ ├── input-a.tsx (with definition)
│ │ │ ├── tests
│ │ │ │ ├── button-test-a.tsx (with definition)
│ │ │ │ ├── input-test-a.tsx (with definition)
│ │ ├── services
│ │ │ ├── ...
│ ├── package-b
│ │ ├── components
│ │ │ ├── button-b.tsx (with definition)
│ │ │ ├── input-b.tsx (with definition)
│ │ │ ├── tests
│ │ │ │ ├── button-test-b.tsx (with definition)
│ │ │ │ ├── input-test-b.tsx (with definition)
│ │ ├── services
│ │ │ ├── ...
├── dist
├── node_modules
└── ...

By default, Codux will search all .ts and .tsx files in the above example (excluding those in the node_modules and dist folders), and will find:
  • ButtonA in /packages/package-a/components/
  • InputA in /packages/package-a/components/
  • ButtonTestA in /packages/package-a/components/tests/
  • InputTestA in /packages/package-a/components/tests/
  • ButtonB in /packages/package-b/components/
  • InputB in /packages/package-b/components/
  • ButtonTestB in /packages/package-b/components/tests/
  • InputTestB in /packages/package-b/components/tests/
To configure Codux to only search for components inside folders named 'components' (within the project directory), you would use the following include pattern:
1
2
3
4
5
6
7
8
{  
    "$schema": "https://wixplosives.github.io/codux-config-schema/codux.config.schema.json",
    "componentsDiscovery": {
        "include": [
            "packages/*/components/**"
        ]
    } 
}
Now let's say that we don't want components from folders named 'tests' to be discovered. We can use the exclude key to tell Codux to skip over those folders as follows:
1
2
3
4
5
6
7
8
9
10
11
{  
    "$schema": "https://wixplosives.github.io/codux-config-schema/codux.config.schema.json",
    "componentsDiscovery": {
        "include": [
            "packages/*/components/**"
        ],
        "exclude": [
            "packages/*/components/tests/**"
        ]
    } 
}
This would result in Codux only identifying the components we want included:
  • ButtonA
  • InputA
  • ButtonB
  • InputB
Important!
The component directory must be located within the project directory or else components will not be resolved.
Previous article
Next article