🚀 A project starter for module publisher 🚀

Have you written some functions or React component that you're proud of? Do you want to share it as a standalone module on NPM, but find yourself unsure about the publishing process or how to manage the lifecycle of an open-source library?

Look no further - ts-ci is here to jumpstart your journey towards becoming a proficient NPM module author.

🗣️ Since a recent GitHub update you need to manually allow GitHub Action to push on your repo.
Fo this reason the initial setup will fail.
You need to enabled permission and re-run failed job: see video

https://user-images.githubusercontent.com/6702424/197344513-065246b9-8823-4894-a9a7-6c539da10655.mp4

ts-ci is an innovative project starter, arguably superior to alternatives like TSDX and typescript-starter. Here's why:

• Unlike traditional CLI tools, ts-ci utilizes automation within Github Actions. Simply update your package.json version number and push. Your new version is automatically published on NPM.
• It offers the convenience of publishing prereleases. All you need to do is update your package version to a prerelease format like 1.2.3-rc.3.
• It fosters enhanced quality control as it runs tests against the submitter's fork whenever a PR is opened.
• ts-ci doesn't bundle your library into a single file. Instead, users can cherry-pick imports from your library, enabling tree shaking. For instance: import { aSpecificFunction } from "your-module/aSpecificFile".

Examples of project using this template

• Keycloakify
• Denoify
• tss-react
• EVT
• i18nifty

How to use

• Click on
• The repo name you will choose will be used as a module name for NPM.
• Go to the repository Settings tab, then Secrets you will need to add a new secret: NPM_TOKEN, you NPM authorization token.
• To trigger publishing edit the package.json version field ( 0.0.0-> 0.0.1 for example) then push changes... that's all !
• Publish pre-release by setting your version number to X.Y.Z-rc.U (example: 1.0.0-rc.32). On NPM the version will be tagged next.
• The CI runs on main and on the branches that have a PR open on main.

Features

• ✍️ Filling up the package.json
• ✅ Testing on multiple Node version running on Ubuntu and Windows before publishing.
• 📦 Publishing on NPM and creating corresponding GitHub releases.
• 🧪 Enable you to test your local copy of the module on an external app.
• 🌗 You can use a different repo image for dark and light mode. Example with: i18nifty: Light - Dark
  See here the special GitHub syntax (#gh-dark-mode-only) that enable this to work.
  TS-CI provides an extra action that strips the dark mode specific image from your README.md before publishing on NPM (NPM do not recognize #gh-dark-mode-only yet).
• 🩳 TS-CI comes by default with a step in the workflow that move your dist files to the root before releasing.
  This enables your user to import specific file of your module like:
  import {...} from "my_module/theFile" (instead of "my_module/dist/theFile" )
  Feel free to remove this action if you don't like this behavior (or if you juste have an index.ts and users are not supposed to cherry pick what they want to import from your module.)
• ⚙️ ESlint and Prettier are automatically run against files staged for commit. (Optional, you can disable this feature)

Release in CJS, ESM or both

CJS only (default)

By default your module release in CommonJS (CJS) with ESM module interop.

You want to avoid this strategy if:

• Your module has peer dependencies that provides both an ESM and CJS distribution. (Example @mui/material, @emotion/react).
• You make use of async imports (import(...).then(...))).
• You want your module to be usable in node type: module mode AND you have some export default (if you don't have export default it will work just fine).

ESM only

If you want to only release as ESM just set "module": "ES6" in your tsconfig.json (and remove esModuleInterop).

You want to avoid this strategy if:

• You want your module to be usable with node. The ESM distribution produced by TypeScript is an ESM distribution that node in type: module can process (files need to have .mjs extension, exports need to be listed).
  As a result your module won't be usable at all on node except through Next.js for example that will be able to make it work.
  This means for example that you'd have to tell your users to configure their JEST so that it transpiles your module using "transformIgnorePatterns": [ "node_modules/(?!@codegouvfr/react-dsfr)" ].
  If you publish scripts (your package.json has a bin property) you'll need to transpile your script separately in CJS.

ESM for bundlers (browser) + CJS for node.

• Have a tsconfig.json that targets CSM (as by default): example
• Perform two build, one for CJS, one for ESM. example
• Explicitly list your exports in your package.json, example.

You want to avoid this strategy if:

• You use export default and you want to support node in type: module mode.
• You have lazy import (import(...).then(...)) and you want them to be lazy not only on the browser but on node too.

Deno

Regardless of the scenario you opt for you can always release for Deno using Denoify.

I have questions

If you find your self thinking:

"I don't know man, ESM, CJS, I have no idea, I just want my stuff to work!" "None of the option above covers all my requirement?" "Why can't I have a solution that work in every case?"
"Why can't I publish an actual standard compliant ESM distribution?"

Just start a discussion or hit my Twitter DM I'll be happy to provide further guidance.

FAQ

Click to expand

Can I use npm (or something else) instead of yarn

Yes, just remove the yarn.lock file and edit .github/workflows/ci.yaml, replace all yarn *** by npm run ****.
Note however that the the script (scripts/link-in-app.ts) that enable you to test in an external app will no longer work.

What will be included in the npm bundle?

All filles listed in the files property of your package JSON.

How to debug the action

You can increase the verbosity by creating a new secret ACTIONS_STEP_DEBUG and setting it to true.

Disable linting and formatting

Remove this, this and this from your package.json
Remove this and this from github/workflows/ci.yaml
Remove .eslintignore, .eslintrc.js, .prettierignore and .prettierrc.json.

Accessing files outside the dist/ directory (when this line is present in your repo)

The drawback of having short import path is that the dir structure
is not exactly the same in production ( in the npm bundle ) and in development.

The files and directories in dist/ will be moved to the root of the project.

As a result this won't work in production:

src/index.ts

import * as fs from "fs";
import * as path from "path";

const str = fs.readFileSync(
    path.join(__dirname,"..", "package.json")
).toString("utf8");

Because /dist/index.js will be moved to /index.js

You'll have to do:

src/index.ts

import * as fs from "fs";
import * as path from "path";
import { getProjectRoot } from "./tools/getProjectRoot";

const str = fs.readFileSync(
    path.join(getProjectRoot(),"package.json")
).toString("utf8");

With getProjectRoot.ts being:

import * as fs from "fs";
import * as path from "path";

function getProjectRootRec(dirPath: string): string {
    if (fs.existsSync(path.join(dirPath, "package.json"))) {
        return dirPath;
    }
    return getProjectRootRec(path.join(dirPath, ".."));
}

let result: string | undefined = undefined;

export function getProjectRoot(): string {
    if (result !== undefined) {
        return result;
    }

    return (result = getProjectRootRec(__dirname));
}