Numbers Probably Matter

    dyna-ts-react-module-boilerplate
    TypeScript icon, indicating that this package has built-in type declarations

    17.0.3 • Public • Published

    About

    Webpack boilerplate for Typescript React Components to use as a module in other apps or other modules.

    Develop, debug, test, Storybook, and distribute React component(s).

    Usage

    Replace the my-component with the name of your new module.

    git clone http://github.com/aneldev/dyna-ts-react-module-boilerplate my-component
    cd my-component
    yarn run create
    

    That's all.

    Why is create-react-app different?

    It is different because create-react-app creates React applications and includes everything an application needs.

    The dyna-ts-react-module-boilerplate creates React modules (reusable components). It creates React components that will be used in React applications or other modules.

    Supported React versions

    React version Git entity Name
    15 tag v4.1.5
    16 branch master
    17 branch react-v17

    Features

    • Write in Typescript, .tsx, .ts, but also .jsx & .js are supported`
    • Ready for react-router, dev server serves deep links and multiple ports
    • Load inline images
    • Configured font loader
    • Lint
    • Supports CSS, SCSS & LESS at the same time
    • CSS modules (with *.module.less/scss filename pattern)
    • Test with Jest, snapshots
    • Analyse dependencies with Webpack Analyser
    • Distribute as a module with TypeScript Definitions (ready to import)
    • Distributed versions work in Javascript and Typescript projects
    • Detect circular dependencies (where leads to import undefined or null values)

    Environment

    This boilerplate runs only under bash (Linux, Mac, Windows with git bash).

    Scripts of this package are not designed for the Windows command line!

    For Windows users, there are multiple ways:

    Export a single module

    Export whatever you want in /src/index.tsx line this

    export { Button, IButtonProps} from "./Button.tsx";
    

    From another package, import the Button line this:

    import {Button} from "my-compoennt";
    

    Export multiple modules isolated

    Each folder would contain components, and each component would be exported as a module. This will help the shaking tree method of webpack since your final App module won't include components that are not used.

    Delete the /src/index.tsx and under the /src folder, each folder will be considered a module.

    The Absence of the /src/index.tsx will make the boilerplate build each folder as a module. If the /src/index.tsx is exists, then only one module is exported.

    The folder structure will be like this:

    /src
    /src/Button/Button.tsx
    /src/Button/index.tsx   // This index exports for the Button only
    /src/Label/Label.tsx
    /src/Label/index.tsx    // This index exports for the Label only
    

    From another package, import the Button line this:

    import {Button} from "my-compoennt/dist/Button";
    

    Folder structure

    There are loaders for various files, like: .less, .scss, .svg, .jpg, etc.. Loaders loaded in /webpack.loaders.js, where you can add your loaders used for all tasks (npm scripts).

    Develop

    You can develop using the Storybook or create your app. In any case on yarn release, only what is exported by src/index.tsx will be released.

    If you want to add a dependency that will be used only in a Story or in your custom app, install it as dev dependency.

    Start the Storybook

    Stories are all files with extension .stories.tsx. There is already a stories folder, but story files would be anywhere.

    yarn storybook

    Or yarn storybook-at <custom port> to open Storybook on a custom port.

    Start an app

    If you don't want to use the Storybook, you can create your app.

    Under the /dev/app/ folder, a small web application can use your module component in different ways. This way, you can develop, debug, and create a demo of your component.

    yarn start

    or, if you want to start it to a different port, yarn start-to -- 3232 to start in port 3232.

    Like an App, this boilerplate uses the dyna-showcase, a very light StoryBook like solution. One of the benefits is that it is speedy compared with StoryBook, and you can see the actual edges of the components (for high fidelity dev). It is ideal for development, but you can easily replace it with yours, yarn remove dyna-showcase, and write your app under the /dev folder.

    StoryBook is still available!

    Lint

    yarn lint

    Update the tslint.json with your preferences.

    Analyse dependencies

    Run yarn build-analyze and check which dependencies will be delivered in your module.

    Test

    Write tests

    For tests, this boilerplate uses the Jest.

    Test files can be anywhere but they should have a name *.(test|spec).(ts|tsx|js|jsx). There is a tests/ folder if you want to use it but this is not mandatory.

    Run tests

    Call yarn test to run your tests and coverage.

    Call yarn test-watch to run your tests after any change, with no coverage.

    Build

    yarn build

    Build creates your distributable version of your component under ./dist. Typescript's declaration will be there too.

    You don't need to use the build, since the release script calls the build.

    You will need this is if you have linked this package with another local package (like yarn link or so).

    Release

    yarn release

    • builds the component
    • bumps the patch version
    • publishes to npm and
    • it pushes the changes to your repo

    The output is not compressed, while it is intended to be used in other apps where it will be bundled and compressed. This also makes your component debuggable.

    For private packages, where you don't want to expose them to yarn, remove the yarn pulish call from the publish-push script.

    Exclude dependencies from the output bundle

    You can exclude dependencies from the distributed bundle by declaring them in the /webpack.dist.config.js. By default, all dependencies are declared there.

    Features

    Link with sync-usages

    About

    Link your modules easily with the yarn sync-usages --watch watcher script.

    In case that the yarn link doesn't work for any reason, this boilerplate offers a "copy" approach to update the packages.

    The script performs:

    • Scans deeply for usages of this package in all siblings folders
    • Updates all usages with the content of this package, excluding the node_modules of this package
    • Before the copy clears the target src && dist folders

    Run

    • Call yarn sync-usages to sync it once
    • Call yarn sync-usages --watch for run in watcher mode

    Prerequisite

    For all except Mac desktops, you have to install the rsync on your system. See below how to do it.

    About the rsync prerequisite

    You have to install the rsync on your system.

    • For Mac, you don't need to do anything. It is already there.
    • For Linux follow this guide
    • For Windows's not a clear guid has been found, feel free to fork this doc.

    Known issues

    HMR performs only full refresh

    The callbacks are not called only the page is refreshed. Forks are welcome.

    Typescript module without React?

    If you are interested in a typescript module, in other words, if you want to implement everything as we do here but without any react components, check this out this dyna-ts-module-boilerplate repo.

    References

    Webpack configuration

    Install

    npm i dyna-ts-react-module-boilerplate

    DownloadsWeekly Downloads

    1

    Version

    17.0.3

    License

    MIT

    Unpacked Size

    137 kB

    Total Files

    94

    Last publish

    Collaborators

    • dennisat