Ninja Pumpkin Mutants

    mrm-preset-project-init-tools

    1.0.14 • Public • Published

    mrm-preset-project-init-tools

    A set of opinionated configuration tools for fast initialize of Expo, React-Native, React projects.

    This package contains a set of tasks that can be executed via mrm.

    When they run on top of a corresponding project, they automatically install packages and create/modify configuration files as needed, to set up the requested features.

    They are strongly opinionated. But you can use them to quickly perform initial configuration and then fine-tune to your liking.

    Currently, the tasks included are:

    • expo-eslint: A base configuration of eslint, prettier, and husky automation for expo projects.
    • expo-jest: Base configuration with expo-jest on Typescript project.
    • plop: Installs the plop code generator and command to easily create a starter for custom commands.

    How to use tools

    Install the mrm package first. Prefer to install it globally:

    npm install -g mrm
    

    or with yarn

    yarn global add mrm
    

    Then you can run any task with the following command

    mrm <task> --preset project-init-tools
    

    Where is one of the included tasks below

    expo-eslint

    mrm expo-eslint --preset project-init-tools
    

    Installs eslint,prettier,husky+pre-commit for running eslint in your code.

    The task is designed for typescript projects initiated with expo init, but it can apply to bare workflow react-native projects.

    Adds the following scripts

    • lint: Runs eslint rules on all typescript files including prettier checks
    • pretty: Runs prettier on all project files and formats them properly.

    It also sets up husky and pre-commit hook, so when you commit staged files they are automatically properly formatted before they commit.

    expo-jest

    mrm expo-jest --preset project-init-tools
    

    Install expo-jest in the project with proper configuration for running the tests in Typescript. Based on instructions from official Expo documentation

    plop

    mrm plop --preset project-init-tools
    

    Installs plop code generator. You can create custom "plop commands" that will in turn generate custom boiler plate file in your code.

    It installs also "plop command" plopCommand that creates a boilerplate code for generating your own next command.

    Once installed, you can run at anytime

    yarn plop plopCommand
    

    It will ask you for the new command name and the command config files path (by default plops).

    For more information on how use plop and add your own code templates see https://www.npmjs.com/package/plop

    inversify & mobx

    Installs inversifyJS DI/IOC framework and Mobx state management.

    mrm plop --preset project-init-tools
    

    If not already present, it will install also plop (see above).

    inversify

    A file src/config/inversify.ts is created, which initiates a container. The container configured with options:

      autoBindInjectable: true,
      defaultScope: 'Transient'
    

    and exports a function to get the container

    export const getRootContainer = () => container;
    

    store template

    The scripts also creates a plop file that allows you to generate a starter class-based mobx store.

    yarn plop addStore <StoreName> <target_folder>
    

    It will generate a starter class. For example:

    @injectable()
    class MyStore {
      constructor() {
        makeAutoObservable(this);
      }
    }
    

    Which can be requested from inversify root container as:

    const myStoreInstance = getRootContainer().get(MyStore)
    

    bind in singleton mode

    By default Classes are bound in 'transient' mode. To bind in singleton mode, you can bind it right after the class declaration. Example:

    getRootContainer().bind(MyStore).toSelf().inSingletonScope();
    

    request an instance via hook

    Each store file exports a React-hook that allows you to get an instance directly from within a React component. For example, it exports:

    export const useMyStore = () => useClassStore(MyStore);
    

    and inside your component you can get an instance by using this hook:

    const myStore = useMyStore();
    

    Store Context

    In case you wish to pass a specific store instance from a parent component to a child component, you can use the pre-declared Context of the store:

    export const {
      Context: myStoreContext,
      useStoreContext: useMyStoreContext,
    } = createStoreContext<MyStore>();
    

    So then in your parent component after you get an instance, you pass it into context. For example:

    const myStore = useMyStore();
    ...
    <MyStoreContext.Provider value={myStore}>
        // child components
    </MyStoreContext.Provider value={myStore}>
    

    And in you child components

    const myStore = useMyStoreContext()
    

    This is especially useful when your stores are 'transients' and you want to pass them down your React tree.

    Overriding

    If you want to override or modify the configurations an easy way would be to

    1. Clone the repository locally
    2. Make modify the tasks to your liking
    3. Launch your task from the local repository with the following commander
    mrm <task> --dir <path/to/your/locally/cloned/repository>
    

    See mrm documentation for more details on how to modify or create your own tasks and presets.

    Install

    npm i mrm-preset-project-init-tools

    DownloadsWeekly Downloads

    0

    Version

    1.0.14

    License

    MIT

    Unpacked Size

    30.5 kB

    Total Files

    43

    Last publish

    Collaborators

    • ioannou.dev