Never-ending Pumpkin Mulch

    lvd-fluentui-component-scaffolding

    0.0.5 • Public • Published

    FluentUI Component Scaffolding

    NPM

    This is a nodejs application to generate the basic structure of a React component built using the FluentUI library, including the scripts and configuration requried for publishing it to the npm package repository. This tool uses a built-in template directory, collects some additional data, such as package name, library name, package author and creates:

    • the basic directory structure;
    • build scripts, package.json, webpack configuration files, license file and a standard .gitignore;
    • empty component file;
    • empty stylesheet files;
    • basic structure of a demo application to feature the component.

    It also runs npm install after the package structure has been created.

    Installing

    npm install --g lvd-fluentui-component-scaffolding

    Usage

    Navigate to the root directory where your component will be created and run:

    npm exec create-fluentui-component

    You will then be prompted for additional information, which is further detailed below.

    Demo

    Below you can find a screen capture of running this tool with the following arguments:

    • --create-root
    • --skip-deps
    • --git-clone-repo="[repo-url]"
    • --git-push

    Sample run

    Command line arguments

    Argument Type Description
    --version boolean Show version number
    --from-manifest, --fm boolean Read package information from a manifest file named component-manifest.json in the base destination directory. Defaults to false.
    --create-root, --cr boolean Create root component directory. Defaults to false, that is use current working directory as root.
    --skip-deps, --sd boolean Do not run npm install afer the component package has been created. Defaults to false.
    --skip-vscode, --svs boolean Do not create the .code-workspace VS Code workspace file, even if it is included in the template. Defaults to false.
    --git-clone-repo, --gcr boolean Clone the specified directory before creating the component package. Will fail if directory is not empty. Defaults to null.
    --git-commit, --gcm boolean Perform a git commit after creating the component package. You will be prompted for an optional commit message. Defaults to false.
    --git-push, --gcm boolean Perform a git commit and push after creating the component package. If this flag is specified, the git-commit flag is not required. Defaults to false.
    --git-name, --gnm boolean Configure git operations to use this author name. Defaults to null.
    --git-email, --gem boolean Configure git operations to use this author email. Defaults to null.
    --git-username, --gur boolean Configure git operations to use this username when logging on. Defaults to null.
    --git-token, --gtk boolean Configure git operations to use this token as password when logging on. Defaults to null.
    --log-directory, --ld string Specify log directory name. Defaults to package_builder_logs.
    --worskpace-directory, --ld string Specify workspace directory name. Defaults to workspace.
    --additional-dirs, --ld string[] Specify additional directories to be created alongside the workspace directory. Defaults to []. Example: --additonal-dirs dira dirb dirb/dirb1 dirc.
    --help boolean Show help

    Required user input

    The following parameters are collected from user input:

    Parameter Description Mandatory Default Valid values
    Package name The name of the package. The name used in package.json is obtained from this value, converted to lower case Y If --create-root is not specified, then the default package name is the name of the current directory, if considered valid. letters, numbers and dashes
    Package description The description of the package N - -
    Package author The author of the package N - -
    Libary name The name of the root component; also the name used for the library configuratin in the webpack config file. N The part of the package name following the last dash. letters, numbers and underscores
    Library name, dashed form The name of the root component in dashed form. N Derived from the library name. letters, numbers and dashes

    Output structure

    The following output structure is all relative to the workspace directory.

    The directory structure

    The following directory structure is generated within:

    Directory Description
    demo Demo application root directory
    demo/build/app Demo application build output directory
    dist Component library build output
    docs Documentation files
    src Root directory for all component library source files
    src/assets Assets directory (eg. image files)
    src/components Component javascript source code
    src/css Root directory for all stylesheet files
    src/css/components Component-related stylesheet files
    src/docs Documentation source files

    Support files

    The following support files are generated (configuration files, build scripts, license):

    File Description
    LICENSE License file - BSD 3-clause by default
    .gitignore The git-ignore file, which, by default, contains entries for node_modules directory and *.tgz files
    package.json The package.json file, with a bunch of stuff already added to it, including standard dependencies and dev-dependencies.
    README.md The readme file file, with the package title and package description added to it.
    webpack-app.config.js webpack configuration file for building the demo application
    webpack-dist.config.js webpack configuration file for building the library itself for distribution via npm packaging
    build-all.ps1 PowerShell script for building the demo app and the library itself in one sitting
    build-app.ps1 PowerShell script for building the demo app
    build-dist.ps1 PowerShell script for building the library itself
    ${PackageName}.code-workspace VS Code workspace file. The ${PackageName} placeholder is replaced with the value collected (or derived) from user input.

    Component files

    The following javascript files are generated for the library-related component:

    File Description
    src/components/${LibraryName}.jsx The main component file, that contains an empty component class definition. The ${LbraryName} placeholder is replaced with the value collected (or derived) from user input.
    src/components/Index.js The root export file that will be used as an entry point when building the library itself.

    The following javascript files are generated for the demo application-related components:

    File Description
    src/App.jsx The actual demo application main component
    src/Root.jsx Sets up the root component structure, including the stuff required for FluentUI apps
    src/Index.jsx Sets up the who react application lifecycle

    Stylesheet files

    The following stylesheet files are generated for the library-related component:

    File Description
    src/css/components/${LibraryNameDashed}.css The main component stylesheet file. The ${LibraryNameDashed}.css placeholder is replaced with the value collected (or derived) from user input.
    src/css/components/index.css The root file that will be used as a stylesheet entry point when building the library itself.

    The following stylesheet files are generated for the demo application:

    File Description
    src/css/style.css The maine demo app stylesheet file. Contains some standard includes, as well as basic rules.

    Demo application

    The following files are generated in order to run the built demo application:

    File Description
    demo/index.html The html entry point for the demo application. Either run it directly or deploy it somewhere.

    Supported placeholders

    The following placeholders are supported for usage both in file names, as well as file contents:

    Placeholder Value
    ${LibraryName} Library name
    ${LibraryNameDashed} Library name, dashed form
    ${PackageName} Package name
    ${PackageNameLower} Package name, converted to lower case
    ${PackageDescription} Package description
    ${PackageAuthor} Package author
    ${CurrentYear} new Date().getFullYear()
    ${LogDirectoryName} Log directory name as provided via command line arguments. Defaults to _logs

    Generated log files

    The tool generates the following log files:

    • [LOG_DIRECTORY_PATH]/error.log - for error events: exceptions, errors coming from the git engine, erros from the npm install stderr output;
    • [LOG_DIRECTORY_PATH]/activity.log - for every other stuff that's being logged - debug messages, warning messages, info messages and so on.

    As of version 0.0.5, the [LOG_DIRECTORY_PATH] is located at [USER_HOME]/lvd-fluentui-component-scaffolding/[LOG_DIRECTORY_NAME] where:

    • [USER_HOME] depends on the os;
    • [LOG_DIRECTORY_NAME] defaults as mentioned above, but may be overridden using the --log-directory flag.

    Notes

    1. To avoid having npm pack strip the empty directories, a .dummy file is included in each template directory. This does not find its way in the final component package directory.
    2. To avoid having npm pack rename the .gitignore file in the template directory to .npmignore, the file is included using the .ignore name and renamed when when creating the final component package directory.

    Changelog

    Version 0.0.5

    • Default directory name is now package_builder_logs;
    • Changed logging directory location: logs are now saved globally in [USER_HOME]/lvd-fluentui-component-scaffolding/[LOG_DIRECTORY_NAME] where:
      • [USER_HOME] depends on the os;
      • [LOG_DIRECTORY_NAME] defaults as mentioned above, but may be overridden using the --log-directory flag.
    • Changed package structure to include a workspace directory used for the component package itself, to avoid issues when a git clone needs to be performed but, at the same time, the --from-manifest flag is used.
    • Added possibility to create additional directories alongside the package workspace, using the --additional-dirs flag.

    Version 0.0.4

    • Fixed an issue with logging throwing .trim() is not a function in certain conditions.
    • Updated package description and home page in package.json.

    Version 0.0.3

    • Can now read package information from a manifest file placed in the base target directory (see above). By default it reads from console user input, use --from-manifest to switch to package manifest mode;
    • Added option to skip installing dependencies by automatically running npm install. By default, dependencies are installed, use --skip-deps to skip installation;
    • Added .code-workspace template file in the package template and an option to skip creating it, if desired, by specifying the --skip-vscode flag;
    • Can now clone a git repository before creating component package, by using --git-clone-repo=[repo-url];
    • Can now commit to the previously cloned git repository after component si created, by using the flag --git-commit;
    • Can now push to the previously cloned git repository after component si created, by using the flag --git-push;
    • Basic git configuration can be specified by using the flags: --git-name, --git-email, --git-username and --git-token;
    • Better error handling;
    • More detailed and better formatted output of executed steps;
    • Major refactoring and some bug fixes.

    Version 0.0.2

    • Can now specify whether or not to create a root directory for the package. By default it does not, use --create-root flag to create it.

    Version 0.0.1

    • First tracked version

    Donate

    I put some of my free time into developing and maintaining this plugin. If helped you in your projects and you are happy with it, you can...

    ko-fi

    Install

    npm i lvd-fluentui-component-scaffolding

    DownloadsWeekly Downloads

    0

    Version

    0.0.5

    License

    BSD-3-Clause

    Unpacked Size

    138 kB

    Total Files

    54

    Last publish

    Collaborators

    • alexandru.boia