React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

• Configure the top-level parserOptions property like this:

export default tseslint.config({
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})

• Replace tseslint.configs.recommended to tseslint.configs.recommendedTypeChecked or tseslint.configs.strictTypeChecked
• Optionally add ...tseslint.configs.stylisticTypeChecked
• Install eslint-plugin-react and update the config:

// eslint.config.js
import react from 'eslint-plugin-react'

export default tseslint.config({
  // Set the react version
  settings: { react: { version: '18.3' } },
  plugins: {
    // Add the react plugin
    react,
  },
  rules: {
    // other rules...
    // Enable its recommended rules
    ...react.configs.recommended.rules,
    ...react.configs['jsx-runtime'].rules,
  },
})

My rough notes

There is a lot of extra config and plugins that need to be added...did my best to include them here.

Installing React via vite

This is compiled from several articles and an example repo: Create a Component Library Fast🚀(using Vite's library mode) - DEV Community receter/my-component-library at storybook Setting up a React component library | by Joey Imlay | EDF Data and Tech | Medium Publish your React library to npm using vite | by Jessish Pothancheri | Medium

Extra plugin dependencies

vite-plugin-dts: vite does not offer a way to automatically export type definitions when using library mode. We need to export Typescript definitions. This tool offers a way, though we may want to take the time to do it ourselves (through rollup and tsc?), since this is a smaller 3rd party plugin. I spent about an hour looking into it but it will take time and research on how to do it ourselves.

vite-plugin-lib-inject-css: This allows vite inject .css files as javascript import statements, which we need for building our react components. Not sure if we will need this if extending another component library.

glob: allows for pattern matching for files in shell commands. We will use this in conjunction with rollup so its possible for the components to individually imported. Not necessary but helpful for all node projects.

In test-jes-package-workspace directory:

Install using Vite (recommended by React) - alternative to webpack

npm create vite test-jes-package

Create new project name: test-jes-package Choose React framework Select Typescript variant

cd test-jes-package npm i npm run dev

ctrl-c to exit app

install node type definitions npm i @type/node -D

Create initial component files in src/components Tooltip.tsx (React uses PascalCase for component names) tooltipStyles.css

Set up the library

Create lib/main.ts at root of test-jes-package

In order to transpile only the component library (lib/) activate Vite's library mode by adding the following to vite.config.ts

Disable the default publishing of the public/ directory from the dist/ directory when building

in tsconfig.app.json file at root of test-jes-package add "lib" directory to include:

Create tsconfig-build.json file at root of test-jes-package with the following:

Update the build script of package.json with the following to include the tsconfig.build.json confguration

copy vite-env.d.ts to lib/ directory to include the vite type definitions for Typescript

Run npm run build and you should see the following in dist/

Add typescript definitions to the dist/ when building (mentioned here) npm i vite-plugin-dts -D

Add ability for .css files to be imported individually in the react (ts) app files npm i vite-plugin-lib-inject-css -D

Then add it to vite.config.ts plugins

This will create separate css files in dist/assets look like when you build the library (npm run build). Setup assets later.

Add glob so we can do wildcard patterns matches on files when using rollup. npm i glob -D

Add rollup options for vite.config.ts. If you get emphasized errors in, you need to add the correct imports to the top of the file.

rollupOptions: {
  external: ['react', 'react/jsx-runtime'],
  input: Object.fromEntries(
    glob
      .sync('lib/**/*.{ts,tsx}', {
        ignore: ['lib/**/*.d.ts', 'lib/**/*.stories.tsx'],
      })
      .map(file => [
        relative('lib', file.slice(0, file.length - extname(file).length)),
        fileURLToPath(new URL(file, import.meta.url)),
      ]),
    ),
  output: {
    assetFileNames: 'assets/[name][extname]',
    entryFileNames: '[name].js',
  },
}

Make changes to package.json entry points, type defs, and (package) files, and persist css files

"main": "dist/main.js", "types": "dist/main.d.ts", "files": [ "dist" ], "sideEffects": [ "**/*.css" ],

Copy react and react-dom to devDependencies and rename dependencies to peerDependencies (needed for the package to be installed in app)

So library changes are build before publishing add "prepublishOnly"