Generate CLI

With this CLI you can generate base code to start to program fast. Also you can personalize the base code to generate.

Options

A command line interface for Frontend development

Usage: tfverse [OPTIONS] [NAME]

Arguments:
  [NAME]  Project name

Options:
  -t, --tool <TOOL>          Template tool to choose
  -a, --arch <ARCH>          Frontend piece or project template
  -l, --language <LANGUAGE>  TypeScript or JavaScript
  -s, --styles <STYLES>      Styles type
  -p, --path <PATH>          Template path to generate
  -y, --sure                 Accept all questions
  -g, --global               Set configuration
  -c, --config <FILE>        Config file to customize this CLI
  -h, --help                 Print help
  -V, --version              Print version

Config file

To personalize the cli you must create a .json file. And use the following schema.

The commented paths are the default values.

Exmaple tfverse_config.json

{
  "$schema": "https://gvtmpjzawvdhojsxlece.supabase.co/storage/v1/object/public/cli/schema/config.json",
  "repository": "[email protected]:YOUR_ORG_OR_YOUR_USER",
  "root": "", // The project root, default is "./"
  "paths": { // The modules paths
    "globals": {
      "contexts": null, // "./src/logic/contexts"
      "schemas": null, // "./src/logic/schemas"
      "services": null, // "./src/logic/services"
      "types": null, // "./src/logic/typing"
      "ui": null // "./src/ui"
    },
    "react": {
      "hocs": null, // "./src/logic/hocs"
      "hooks": {
        "global": null, // "./src/logic/hooks"
        "internal": null // "hooks"
      },
      "locales": null, // "./public/locales"
      "routes": null // "./src/logic/routes"
    },
    "svelte": {
      "actions": null, // "./src/logic/actions"
      "layouts": null, // "./src/routes"
      "locales": null, // "./static/locales"
      "pages": null, // "./src/routes"
      "stores": null // "./src/logic/stores"
    },
    "vanilla": {
      "classes": null, // "./src/logic/classes"
      "functions": null // "./src/logic/functions"
    }
  },
  "tools_type": { // The list to generate libraries and projects boilerplates
    "vanilla": [
      [
        "base", // Name to show in the list
        {
          "name": "REPOSITORY_NAME",
          "project": "main",
          "library": null
        }
      ]
    ],
    "react": [
      [
        "base", // Name to show in the list
        {
          "name": "REPOSITORY_NAME",
          "project": "main",
          "library": null
        }
      ]
    ],
    "svelte": [
      [
        "base", // Name to show in the list
        {
          "name": "REPOSITORY_NAME",
          "project": "main",
          "library": null
        }
      ]
    ]
  },
  "templates": { // The paths to your custom templates, all paths are concat with "$HOME"
    "react": {
      "component": null, // Example: "path/to/your/folder/component"
      "context": null,
      "hoc": null,
      "hook": null,
      "layout": null,
      "page": null,
      "schema": null,
      "service": null
    },
    "svelte": {
      "action": null,
      "context": null,
      "layout": null,
      "page": null,
      "schema": null,
      "service": null,
      "store": null,
      "component": null
    },
    "vanilla": {
      "class": null,
      "component": null,
      "function": null,
      "layout": null,
      "page": null,
      "schema": null,
      "service": null
    }
  }
}

Templates paths

If you want to personalize this CLI you must create the following files inside the folders that you set in the templates option.

React Component

| Path | To | | --- | --- | | /component.(ts\|js)x | Component | | /import.(ts\|js) | Component imports | | /proptypes.ts | Component props | | /styles.(ts\|js) | Component styles | | /styles.responsive.(ts\|js) | Component responsive |

Svelte Component

| Path | To | | --- | --- | | /component.svelte | Component | | /script.(ts\|js).svelte | Component script | | /import.(ts\|js) | Component imports | | /proptypes.ts | Component props | | /styles.(ts\|js) | Component styles | | /styles.responsive.(ts\|js) | Component responsive |

Vanilla Component

Not ready yet

React Layout

| Path | To | | --- | --- | | /layout.(ts\|js)x | Layout | | /layout.styles.(ts\|js)x | Layout barrel styles | | /proptypes.ts | Layout props | | /styles.(ts\|js) | Layout styles | | /styles.responsive.(ts\|js) | Layout responsive |

Svelte Layout

| Path | To | | --- | --- | | /layout.svelte | Layout | | /layout.styles.(ts\|js)x | Layout barrel styles | | /script.(ts\|js).svelte | Layout script | | /proptypes.ts | Layout props | | /styles.(ts\|js) | Layout styles | | /styles.responsive.(ts\|js) | Layout responsive |

Vanilla Layout

Not ready yet

React Page

| Path | To | | --- | --- | | /page.(ts\|js)x | Page | | /proptypes.ts | Page props | | /locale.json | Locale for i18n | | /i18n.(ts\|js) | i18n context | | /styles.(ts\|js) | Page styles | | /styles.responsive.(ts\|js) | Page responsive | | /router.(ts\|js) | Router | | /route.(ts\|js) | Route | | /config.(ts\|js) | Config file project | | /config.aliases.(ts\|js) | Project aliases | | /tsconfig.json | TSConfig file project | | /tsconfig.aliases.json | TSConfig aliases |

Svelte Page

| Path | To | | --- | --- | | /page.svelte | Page | | /script.(ts\|js).svelte | Page script | | /locale.json | Locale for i18n | | /i18n.(ts\|js) | i18n store | | /proptypes.ts | Page props | | /styles.(ts\|js) | Page styles | | /styles.responsive.(ts\|js) | Page responsive | | /config.(ts\|js) | Svelte config | | /config.aliases.(ts\|js) | Svelte config aliases |

Vanilla Page

Not ready yet

React Schema

| Path | To | | --- | --- | | /schema.(ts\|js)x | Schema | | /proptypes.ts | Schema props |

Svelte Schema

| Path | To | | --- | --- | | /schema.(ts\|js)x | Schema | | /proptypes.ts | Schema props | | /proptypes.imports.ts | Schema props imports |

Vanilla Schema

Not ready yet

Templates keywords

| Keyword | Description | | --- | --- | | NAME_CAMEL | Camel case name | | NAME_PASCAL | Pascal case name | | NAME_DASH | Dash case name | | NAME_CONSTANT | Constant case name | | NAME_SNAKE | Snake case name | | NAME_LOWER | Lowercase name | | NAME | User input name | | NAMESPACE | User input namespace | | EXT_STYLES | Styles extension |

Templates keywords for svelte

| Keyword | Description | | --- | --- | | SCRIPT | Script tag |

Templates keywords for schemas

| Keyword | Description | | --- | --- | | /* NEXT_TYPE */ | Next type | | /* PROPTYPES */ | PropTypes |

Tempaltes keywords for pages

| Keyword | Description | | --- | --- | | /* NEXT_ALIAS */ | Alias for next page | | /* NEXT_LOCALE */ | Locale for next page | | /* NEXT_ROUTE */ | Route for next page (Only ReactJS) |

Templates keywords for pages and schemas

| Keyword | Description | | --- | --- | | /* NEXT_IMPORT */ | Next import |