npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

generate-solidjs-cli

v1.0.5

Published

A simple SolidJs CLI to generate components instantly and more.

Downloads

18

Readme

Generate SolidJS CLI

License

Credit

This is based entirely on arminbro's - generate-react-cli cli tool. I have made additions/edits to the code to specifically target the SolidJS library.

Why?

To help speed up productivity in SolidJS projects and stop copying, pasting, and renaming files each time you want to create a new component.

Table of Contents:

You can run it using npx like this:

  npx generate-solidjs-cli component Box

(npx is a package runner tool that comes with npm 5.2+)

Config File

When you run GSC within your project the first time, it will ask you a series of questions to customize the cli for your project needs (this will create a "generate-solidjs-cli.json" config file).

Please Note:

When you first run GSC, you will be asked the following question: 'Would you like to create a corresponding test file with each component you generate that uses the SolidJs Testing Library?'

GSC presupposes that you have installed and are using the SolidJs Testing Library and will generate a test file with an import reference to that library.

If you wish to autogenerate a test file using GSC and do not want to configure a custom template for your testing files, as a prerequisite for using GSC you must install the SolidJs Testing Library.

Example of the generate-solidjs-cli.json config file:

{
  "usesTypeScript": true,
  "usesCssModule": true,
  "cssPreprocessor": "scss",
  "component": {
    "default": {
      "path": "src/components",
      "withStyle": true,
      "withTest": true,
      "withModel": true
    }
  }
}

Generate Components

  npx generate-solidjs-cli component Box

This command will create a folder with your component name within your default (e.g. src/components) directory, and its corresponding files.

Example of the component files structure:

|-- /src
    |-- /components
        |-- /Box
            |-- Box.tsx
            |-- Box.module.css
            |-- Box.module.css.d.ts
            |-- Box.test.tsx

Options

You can also override some of the GSC component config rules using one-off commands. So for example, let's say you have set withTest to be true in the component.default property. You can override it like this:

  npx generate-solidjs-cli component Box --withTest=false

Or vice versa, if you have set withTest to be false you can do this:

  npx generate-solidjs-cli component Box --withTest=true

Otherwise, if you don't pass any options, it will just use the default values that you have set in the GSC config file under component.default.

Custom component types

By default, GSC will use the component.default configuration rules when running the component command out of the box.

What if you wanted to generate other types of components that have their own set of config rules (e.g., page or layout)?

You can do so by extending the generate-solidjs-cli.json config file like this.

{
  "usesTypeScript": true,
  "usesCssModule": true,
  "cssPreprocessor": "scss",
  "component": {
    "default": {
      "path": "src/components",
      "withStyle": true,
      "withModel": true,
      "withTest": true
    },
    "page": {
      "path": "src/pages",
      "withStyle": true,
      "withTest": true
    },
    "layout": {
      "path": "src/layout",
      "withStyle": false,
      "withTest": true
    }
  }
}

Now you can generate a component with your custom component types like this:

  npx generate-solidjs-cli component HomePage --type=page
  npx generate-solidjs-cli component BoxLayout --type=layout

You can also pass the same options to your custom component types as you would for the default component type.

Custom component templates

You can also create your own custom templates that GSC can use instead of the built-in templates that come with it. We hope this will provide more flexibility for your components that you want to generate.

There is an optional customTemplates object that you can pass to the component.default or any of your custom component types within your generate-solidjs-cli.json config file.

Example of the customTemplates object:

"customTemplates": {
  "component": "templates/TemplateName.js",
  "style": "templates/TemplateName.style.scss",
  "test":  "templates/TemplateName.test.js"
},

The keys represent the type of file, and the values are the paths that point to where your custom template lives in your project/system. Please note the TemplateName keyword in the template filename. GSC will use this keyword and replace it with your component name (in whichever format you typed the component name in the command) as the filename.

Example of using the customTemplates object within your generate-solidjs-cli.json config file:

{
  "usesTypeScript": true,
  "usesCssModule": true,
  "cssPreprocessor": "scss",
  "component": {
    "default": {
      "customTemplates": {
        "component": "templates/component/TemplateName.js",
        "style": "templates/component/TemplateName.style.scss",
        "test": "templates/component/TemplateName.test.js"
      },
      "path": "src/components",
      "withStyle": true,
      "withTest": true
    },
    "page": {
      "customTemplates": {
        "test": "templates/page/TemplateName.test.js"
      },
      "path": "src/pages",
      "withStyle": true,
      "withTest": true
    }
  }
}

Notice in the page.customTemplates that we only specified the test custom template type. That's because all the custom template types are optional. If you don't set the other types, GSC will default to using the built-in templates it comes with.

Example of a custom component template file: // start here determine if we need context

// templates/component/TemplateName.js

import styles from './TemplateName.module.css';

export const TemplateName = (props) => {
  return <></>;
};

Important - You can also use the following keywords within your custom templates to format the component name in your templates accordingly:

| Keyword | Replacement | | --------------- | ---------------------------------------------------------------------------------------------- | | templatename | component name in raw case (whichever format the user typed the component name in the command) | | TemplateName | component name in PascalCase | | templateName | component name in camelCase | | template-name | component name in kebab-case | | template_name | component name in snake_case | | TEMPLATE_NAME | component name in uppercase SNAKE_CASE |

Example of a custom test template file:

// templates/component/TemplateName.test.js

import { render } from '@solidjs/testing-library';
import { TemplateName } from './TemplateName';

describe('tests for TemplateName', () => {
  it('***TEST***', () => {
    render(() => <TemplateName />);
  });
});

Custom component files

GSC comes with corresponding built-in files for a given component if you need them (i.e., withStyle, withTest, and withModel).

What if you wanted to add custom files of your own?

For example, let's say you wanted to add an index.js file for each component, so you don't have to add the additional component name with each import (i.e., import Box from './components/Box' instead of import Box from './components/Box/Box').

Or maybe you need a context file for your component.

You can do so by editing your generate-solidjs-cli.json config file like so.

{
  "usesTypeScript": false,
  "usesCssModule": false,
  "cssPreprocessor": "css",
  "component": {
    "default": {
      "path": "src/components",
      "withStyle": true,
      "withTest": true,
      "withIndex": true,
      "withContext": true,
      "customTemplates": {
        "index": "templates/index.js",
        "context": "templates/TemplateName.context.js"
      }
    }
  }
}
// templates/default/index.js

export { default } from './TemplateName';
// templates/default/TemplateName.context.js

import { createContext, useContext } from 'solid-js';

const TemplateNameContext = createContext();

export function TemplateNameProvider(props) {
  return <TemplateNameContext.Provider>{props.children}</TemplateNameContext.Provider>;
}

export function useTemplateName() {
  return useContext(TemplateNameContext);
}

In this case, we added a withIndex & withContext to the component.default. Note: You can add custom files to any of your custom component types.

You should also see that we added index and context to our customTemplates object. That's because custom files require custom templates. Otherwise, you will get an error when you generate a component.

Also, we used the TemplateName keyword for the context custom file. GSC will generate this corresponding file and replace TemplateName with the component name.

Custom component directory

Using the customDirectory you can easily override the directory name for the component generated. For instance, if prefixes are required for particular components or if template names will be mixed, the customDirectory option will allow you to override the way that GSC generates the name of the directory where the component files will live.

The customDirectory directive allows all supported casings (see previous section) and can be overridden at the following levels in ascending specific of priority:

  • top
  • component.default
  • component.type
  • CLI

Example:

For Solidjs Context Providers in a project, the decision has been made to separate Context generation from the visual components.

In a typical configuration the configuration would look as following:

{
  "provider": {
    "path": "src/components/providers",
    "withStyle": false,
    "withTest": true,
    "withContext": true,
    "customTemplates": {
      "component": "templates/provider/TemplateName.tsx",
      "context": "templates/provider/TemplateName.context.ts",
      "test": "templates/provider/TemplateName.test.tsx"
    }
  }
}

With the configuration above, the component would be required to either follow a full or a minimalistic naming convention. I.e. the component would either need to be generated as ThemeProvider and consequently the context name would be generated as ThemeProviderContext, or by renaming the files and templates as TemplateNameProvider but with the downside of the component path being generated as src/components/providers/Theme. This creates inconsistent naming in the directory containg the component files.

To work around this, the customDirectory option can be used to enforce a particular style.

{
  ...
  "provider": {
    "path": "src/components/providers",
      "withStyle": false,
      "withTest": true,
      "withContext": true,
      "customDirectory": "TemplateNameProvider",
      "customTemplates": {
          "component": "templates/provider/TemplateNameProvider.tsx",
          "context": "templates/provider/TemplateName.context.ts",
          "test": "templates/provider/TemplateNameProvider.test.tsx"
      }
  }
  ...
}

The above configuration would allow you to mix and match different template names and keep naming consistent.

If we executed GSC with the above configuration (npx generate-solidjs-cli component Theme --type=provider), the result would look like this:

src/components/providers/ThemeProvider/Theme.context.ts
src/components/providers/ThemeProvider/ThemeProvider.tsx
src/components/providers/ThemeProvider/ThemeProvider.test.tsx

Similarly, this construct could be used as a shortcut for generating other named components, like the BoxLayout example above, depending on that could be shortened to:

  npx generate-solidjs-cli component Box --type=layout --customDir=TemplateNameLayout

Or it could be used to generate files with a naming convention with Test, Context, Theme, or Provider suffixes. Or even combined with skeleton CSS

License

Generate Solidjs CLI is an open source software licensed as MIT.