Skip to main content

@presetter/preset-web

@presetter/preset-web is a focused browser layer. It does not extend @presetter/preset-essentials and does not include Storybook; compose it with the TypeScript, React, Next.js, or Storybook presets your project actually needs.

Purpose​

Use this preset when a package needs browser-aware generated configuration:

  • tsconfig.json is extended with DOM, DOM.Iterable, and ESNext libraries.
  • ESLint receives browser globals from globals.browser.
  • TailwindCSS usage is linted through eslint-plugin-better-tailwindcss.
  • Tailwind entry/config files are discovered and passed into the ESLint settings when present.
  • Image and stylesheet module declarations are generated under the configured types directory.
  • Generated image/style type files are added to .gitignore.

Installation​

npm install --save-dev presetter @presetter/preset-essentials @presetter/preset-web

Configuration​

Compose web with a base preset when you want a full TypeScript toolchain:

presetter.config.ts
import essentials from '@presetter/preset-essentials';
import web from '@presetter/preset-web';
import { preset } from 'presetter';

export default preset('browser-package', {
  extends: [essentials, web],
});

For React projects, compose the React and web layers explicitly:

presetter.config.ts
import react from '@presetter/preset-react';
import web from '@presetter/preset-web';
import { preset } from 'presetter';

export default preset('react-package', {
  extends: [react, web],
});

Then generate the files:

npx presetter bootstrap

Generated Files​

FilePurpose
.gitignoreAdds generated web type files to ignored paths.
eslint.config.tsAdds browser globals and TailwindCSS lint settings.
tsconfig.jsonAdds DOM libraries for browser APIs.
types/image.d.tsDeclares common image module imports.
types/style.d.tsDeclares stylesheet module imports.

TailwindCSS​

The preset looks for a Tailwind entry file and Tailwind config file in the project. When found, those paths are passed to eslint-plugin-better-tailwindcss so class validation uses the same inputs as the app.

The ESLint override enables the recommended warn-level Tailwind rules and warns on conflicting or unknown classes.

Variables​

VariableDefaultDescription
types"types"Directory for generated image.d.ts and style.d.ts.
presetter.config.ts
import essentials from '@presetter/preset-essentials';
import web from '@presetter/preset-web';
import { preset } from 'presetter';

export default preset('browser-package', {
  extends: [essentials, web],
  variables: {
    types: 'src/types',
  },
});