Skip to content

Latest commit

 

History

History
136 lines (113 loc) · 10.7 KB

CLI-OPTIONS.md

File metadata and controls

136 lines (113 loc) · 10.7 KB

CLI Options Combinations

This document lists all possible combinations of CLI options for the create-swc-vite-react-app tool.

Default Values

  • --theme-scale: both (default)
  • --theme-color: both (default)
  • --system: spectrum (default)
  • --eslint: true (default)
  • --mcp: false (default)

Package Manager Options

  • --use-npm - Use npm as package manager
  • --use-pnpm - Use pnpm as package manager
  • --use-yarn - Use yarn as package manager

MCP Mode

The tool can be started in MCP mode for integration with AI assistants:

# Start with MCP flag
create-swc-vite-react-app --mcp

# Or use npm scripts
npm run test:mcp

All Possible Combinations

# Description CLI Command
1 Using all defaults (both scales, both themes, Spectrum system) create-swc-vite-react-app default-app
2 Using all defaults with explicit options create-swc-vite-react-app explicit-defaults --theme-scale both --theme-color both --system spectrum
3 Default scale and color, explicit Spectrum system create-swc-vite-react-app spectrum-app --system spectrum
4 Default scale and system, explicit both themes create-swc-vite-react-app both-themes --theme-color both
5 Default color and system, explicit both scales create-swc-vite-react-app both-scales --theme-scale both
6 Large scale, default color and system create-swc-vite-react-app large-scale --theme-scale large
7 Medium scale, default color and system create-swc-vite-react-app medium-scale --theme-scale medium
8 Default scale, dark theme, default system create-swc-vite-react-app dark-theme --theme-color dark
9 Default scale, light theme, default system create-swc-vite-react-app light-theme --theme-color light
10 Default scale and color, Spectrum Two system create-swc-vite-react-app spectrum-two-app --system spectrum-two
11 Default scale and color, Express system create-swc-vite-react-app express-app --system express
12 Large scale, dark theme, default system create-swc-vite-react-app large-dark --theme-scale large --theme-color dark
13 Large scale, light theme, default system create-swc-vite-react-app large-light --theme-scale large --theme-color light
14 Medium scale, dark theme, default system create-swc-vite-react-app medium-dark --theme-scale medium --theme-color dark
15 Medium scale, light theme, default system create-swc-vite-react-app medium-light --theme-scale medium --theme-color light
16 Default scale, dark theme, Spectrum Two system create-swc-vite-react-app dark-spectrum-two --theme-color dark --system spectrum-two
17 Default scale, light theme, Spectrum Two system create-swc-vite-react-app light-spectrum-two --theme-color light --system spectrum-two
18 Default scale, dark theme, Express system create-swc-vite-react-app dark-express --theme-color dark --system express
19 Default scale, light theme, Express system create-swc-vite-react-app light-express --theme-color light --system express
20 Large scale, default color, Spectrum Two system create-swc-vite-react-app large-spectrum-two --theme-scale large --system spectrum-two
21 Medium scale, default color, Spectrum Two system create-swc-vite-react-app medium-spectrum-two --theme-scale medium --system spectrum-two
22 Large scale, default color, Express system create-swc-vite-react-app large-express --theme-scale large --system express
23 Medium scale, default color, Express system create-swc-vite-react-app medium-express --theme-scale medium --system express
24 Large scale, dark theme using Spectrum design system create-swc-vite-react-app large-dark-spectrum --theme-scale large --theme-color dark --system spectrum
25 Large scale, light theme using Spectrum design system create-swc-vite-react-app large-light-spectrum --theme-scale large --theme-color light --system spectrum
26 Medium scale, dark theme using Spectrum design system create-swc-vite-react-app medium-dark-spectrum --theme-scale medium --theme-color dark --system spectrum
27 Medium scale, light theme using Spectrum design system create-swc-vite-react-app medium-light-spectrum --theme-scale medium --theme-color light --system spectrum
28 Large scale, dark theme using Spectrum Two design system create-swc-vite-react-app large-dark-spectrum-two --theme-scale large --theme-color dark --system spectrum-two
29 Large scale, light theme using Spectrum Two design system create-swc-vite-react-app large-light-spectrum-two --theme-scale large --theme-color light --system spectrum-two
30 Medium scale, dark theme using Spectrum Two design system create-swc-vite-react-app medium-dark-spectrum-two --theme-scale medium --theme-color dark --system spectrum-two
31 Medium scale, light theme using Spectrum Two design system create-swc-vite-react-app medium-light-spectrum-two --theme-scale medium --theme-color light --system spectrum-two
32 Large scale, dark theme using Express design system create-swc-vite-react-app large-dark-express --theme-scale large --theme-color dark --system express
33 Large scale, light theme using Express design system create-swc-vite-react-app large-light-express --theme-scale large --theme-color light --system express
34 Medium scale, dark theme using Express design system create-swc-vite-react-app medium-dark-express --theme-scale medium --theme-color dark --system express
35 Medium scale, light theme using Express design system create-swc-vite-react-app medium-light-express --theme-scale medium --theme-color light --system express
36 Large scale with both light and dark themes using Spectrum design system create-swc-vite-react-app large-both-spectrum --theme-scale large --theme-color both --system spectrum
37 Medium scale with both light and dark themes using Spectrum design system create-swc-vite-react-app medium-both-spectrum --theme-scale medium --theme-color both --system spectrum
38 Large scale with both light and dark themes using Spectrum Two design system create-swc-vite-react-app large-both-spectrum-two --theme-scale large --theme-color both --system spectrum-two
39 Medium scale with both light and dark themes using Spectrum Two design system create-swc-vite-react-app medium-both-spectrum-two --theme-scale medium --theme-color both --system spectrum-two
40 Large scale with both light and dark themes using Express design system create-swc-vite-react-app large-both-express --theme-scale large --theme-color both --system express
41 Medium scale with both light and dark themes using Express design system create-swc-vite-react-app medium-both-express --theme-scale medium --theme-color both --system express
42 Both large and medium scales with dark theme using Spectrum design system create-swc-vite-react-app both-dark-spectrum --theme-scale both --theme-color dark --system spectrum
43 Both large and medium scales with light theme using Spectrum design system create-swc-vite-react-app both-light-spectrum --theme-scale both --theme-color light --system spectrum
44 Both large and medium scales with dark theme using Spectrum Two design system create-swc-vite-react-app both-dark-spectrum-two --theme-scale both --theme-color dark --system spectrum-two
45 Both large and medium scales with light theme using Spectrum Two design system create-swc-vite-react-app both-light-spectrum-two --theme-scale both --theme-color light --system spectrum-two
46 Both large and medium scales with dark theme using Express design system create-swc-vite-react-app both-dark-express --theme-scale both --theme-color dark --system express
47 Both large and medium scales with light theme using Express design system create-swc-vite-react-app both-light-express --theme-scale both --theme-color light --system express
48 Both scales with both themes using Spectrum design system create-swc-vite-react-app default-app --theme-scale both --theme-color both --system spectrum
49 Both scales with both themes using Spectrum Two design system create-swc-vite-react-app both-both-spectrum-two --theme-scale both --theme-color both --system spectrum-two
50 Both scales with both themes using Express design system create-swc-vite-react-app both-both-express --theme-scale both --theme-color both --system express

Import Statements

Each combination will generate different import statements in the SpTheme.ts file:

Spectrum System Imports

import '@spectrum-web-components/theme/scale-medium.js';
import '@spectrum-web-components/theme/scale-large.js';
import '@spectrum-web-components/theme/theme-light.js';
import '@spectrum-web-components/theme/theme-dark.js';

Spectrum Two System Imports

import '@spectrum-web-components/theme/spectrum-two/scale-medium.js';
import '@spectrum-web-components/theme/spectrum-two/scale-large.js';
import '@spectrum-web-components/theme/spectrum-two/theme-light.js';
import '@spectrum-web-components/theme/spectrum-two/theme-dark.js';

Express System Imports

import '@spectrum-web-components/theme/express/scale-medium.js';
import '@spectrum-web-components/theme/express/scale-large.js';
import '@spectrum-web-components/theme/express/theme-light.js';
import '@spectrum-web-components/theme/express/theme-dark.js';

Summary

This document lists a total of 50 different ways to use the CLI:

  • 5 options using all or most defaults (options 1-5)
  • 18 options using partial defaults (options 6-23)
  • 27 options with all parameters explicitly specified (options 24-50)

Project Naming Convention

The project names in the examples now follow a more descriptive naming convention that reflects the options being used, making it easier to understand what each project configuration includes.

For example:

  • large-dark means large scale, dark theme, default spectrum system
  • large-dark-express means large scale, dark theme, express system
  • default-app means both scales, both themes, spectrum system (all defaults)

The CLI is designed to be flexible, allowing you to specify only the options you care about while using sensible defaults for the rest. The most common usage patterns are:

  1. Quickest start: create-swc-vite-react-app default-app
  2. Specific scale only: create-swc-vite-react-app large-scale --theme-scale large
  3. Specific color only: create-swc-vite-react-app dark-theme --theme-color dark
  4. Specific system only: create-swc-vite-react-app express-app --system express
  5. Full customization: create-swc-vite-react-app custom-app --theme-scale large --theme-color dark --system express