@itstandu/code-style 1.1.1 → 1.2.1

package/README.md

@@ -11,6 +11,7 @@ Production-ready shared ESLint + Prettier configuration library for JavaScript a
 - **Prettier v3** with Tailwind CSS support
 - Supports **JavaScript** and **TypeScript**
 - **Full file type support** - Formats all common file types: JS/JSX, TS/TSX, JSON, CSS/SCSS/LESS, HTML, Markdown, YAML, GraphQL, and more
+- **Dual package exports** - Supports both CommonJS (`require`) and ES modules (`import`)
 - Framework presets: **React**, **Next.js**, **Vue**, **Angular**, **NestJS**
 - **Node.js** backend support
 - Stable import sorting with `eslint-plugin-simple-import-sort`
@@ -47,7 +48,27 @@ yarn add -D @itstandu/code-style
 bun add -d @itstandu/code-style
 ```
 
-**Note:** You do NOT need to install `eslint`, `prettier`, or any plugins separately. This package includes all dependencies.
+**Note:** 
+- ESLint plugins are bundled and don't need separate installation.
+- Prettier plugins are included but **Prettier requires plugins to be installed in your project's `node_modules`** (not in dependencies of this package). 
+
+**For pnpm users:** You need to install Prettier plugins in your project:
+
+```bash
+pnpm add -D prettier @prettier/plugin-oxc @prettier/plugin-xml prettier-plugin-tailwindcss
+```
+
+**For npm/yarn users:** Plugins should work automatically, but if you encounter issues, install them explicitly:
+
+```bash
+# npm
+npm install -D prettier @prettier/plugin-oxc @prettier/plugin-xml prettier-plugin-tailwindcss
+
+# yarn
+yarn add -D prettier @prettier/plugin-oxc @prettier/plugin-xml prettier-plugin-tailwindcss
+```
+
+The config automatically detects and only loads plugins that are available, so it won't crash if some are missing.
 
 ## Quick Start
 
@@ -55,16 +76,18 @@ After installation, you only need to configure **2 files** to get started:
 
 ### 1. ESLint Config
 
-Create `eslint.config.js` (or `eslint.config.mjs`) in your project root:
+Create `eslint.config.js` (CommonJS) or `eslint.config.mjs` (ES modules) in your project root:
 
-**For TypeScript projects:**
+**CommonJS (`eslint.config.js`):**
+
+For TypeScript projects:
 ```javascript
 const codeStyle = require('@itstandu/code-style')
 
 module.exports = [codeStyle.recommended, codeStyle.typescript, codeStyle.node]
 ```
 
-**For React/Next.js:**
+For React/Next.js:
 ```javascript
 const codeStyle = require('@itstandu/code-style')
 
@@ -72,30 +95,38 @@ module.exports = [codeStyle.recommended, codeStyle.typescript, codeStyle.react]
 // or codeStyle.next for Next.js
 ```
 
-**For Vue:**
+**ES Modules (`eslint.config.mjs`):**
+
+For TypeScript projects:
 ```javascript
-const codeStyle = require('@itstandu/code-style')
+import codeStyle from '@itstandu/code-style'
 
-module.exports = [codeStyle.recommended, codeStyle.vue]
+export default [codeStyle.recommended, codeStyle.typescript, codeStyle.node]
 ```
 
-**For JavaScript-only projects:**
+For React/Next.js:
 ```javascript
-const codeStyle = require('@itstandu/code-style')
+import codeStyle from '@itstandu/code-style'
 
-module.exports = [codeStyle.recommended, codeStyle.javascript, codeStyle.node]
+export default [codeStyle.recommended, codeStyle.typescript, codeStyle.react]
+// or codeStyle.next for Next.js
 ```
 
 ### 2. Prettier Config
 
-Create `.prettierrc.js` (or `.prettierrc.cjs`) in your project root:
-
+**CommonJS (`.prettierrc.js` or `.prettierrc.cjs`):**
 ```javascript
 module.exports = require('@itstandu/code-style/prettier')
 ```
 
-Or add to `package.json`:
+**ES Modules (`.prettierrc.mjs`):**
+```javascript
+import prettierConfig from '@itstandu/code-style/prettier'
+
+export default prettierConfig
+```
 
+**Or add to `package.json`:**
 ```json
 {
   "prettier": "@itstandu/code-style/prettier"
@@ -106,23 +137,59 @@ Or add to `package.json`:
 
 ## Usage
 
+### CommonJS vs ES Modules
+
+This package supports both CommonJS and ES modules:
+
+- **CommonJS**: Use `require()` and `module.exports` (works with `.js` files)
+- **ES Modules**: Use `import` and `export` (works with `.mjs` files or `"type": "module"`)
+
+The package automatically resolves to the correct format based on your import style.
+
 ### Available Presets
 
 #### Base Preset (Minimal)
+
+**CommonJS:**
 ```javascript
+const codeStyle = require('@itstandu/code-style')
 module.exports = [codeStyle.base, codeStyle.typescript, codeStyle.node]
 ```
 
+**ES Modules:**
+```javascript
+import codeStyle from '@itstandu/code-style'
+export default [codeStyle.base, codeStyle.typescript, codeStyle.node]
+```
+
 #### Recommended Preset (Default, Better Safety)
+
+**CommonJS:**
 ```javascript
+const codeStyle = require('@itstandu/code-style')
 module.exports = [codeStyle.recommended, codeStyle.typescript, codeStyle.node]
 ```
 
+**ES Modules:**
+```javascript
+import codeStyle from '@itstandu/code-style'
+export default [codeStyle.recommended, codeStyle.typescript, codeStyle.node]
+```
+
 #### Strict Preset (Opt-in, includes boundaries)
+
+**CommonJS:**
 ```javascript
+const codeStyle = require('@itstandu/code-style')
 module.exports = [codeStyle.strict, codeStyle.typescript, codeStyle.node]
 ```
 
+**ES Modules:**
+```javascript
+import codeStyle from '@itstandu/code-style'
+export default [codeStyle.strict, codeStyle.typescript, codeStyle.node]
+```
+
 ### Framework Presets
 
 - **React**: `codeStyle.react`

package/index.mjs

@@ -0,0 +1,19 @@
+import { createRequire } from 'module'
+import { fileURLToPath } from 'url'
+import { dirname, join } from 'path'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+const require = createRequire(import.meta.url)
+
+export const base = require(join(__dirname, 'eslint', 'base.js'))
+export const javascript = require(join(__dirname, 'eslint', 'javascript.js'))
+export const typescript = require(join(__dirname, 'eslint', 'typescript.js'))
+export const node = require(join(__dirname, 'eslint', 'node.js'))
+export const react = require(join(__dirname, 'eslint', 'react.js'))
+export const next = require(join(__dirname, 'eslint', 'next.js'))
+export const vue = require(join(__dirname, 'eslint', 'vue.js'))
+export const angular = require(join(__dirname, 'eslint', 'angular.js'))
+export const nest = require(join(__dirname, 'eslint', 'nest.js'))
+export const recommended = require(join(__dirname, 'eslint', 'recommended.js'))
+export const strict = require(join(__dirname, 'eslint', 'strict.js'))

package/package.json

@@ -1,17 +1,27 @@
 {
   "name": "@itstandu/code-style",
-  "version": "1.1.1",
+  "version": "1.2.1",
   "description": "Production-ready shared ESLint + Prettier configuration for JavaScript and TypeScript projects",
   "type": "commonjs",
-  "main": "index.js",
+  "main": "./index.js",
+  "module": "./index.mjs",
   "exports": {
-    ".": "./index.js",
-    "./prettier": "./prettier/index.cjs"
+    ".": {
+      "require": "./index.js",
+      "import": "./index.mjs",
+      "default": "./index.js"
+    },
+    "./prettier": {
+      "require": "./prettier/index.cjs",
+      "import": "./prettier/index.mjs",
+      "default": "./prettier/index.cjs"
+    }
   },
   "files": [
     "eslint",
     "prettier",
     "index.js",
+    "index.mjs",
     "README.md",
     ".prettierignore"
   ],

package/prettier/index.cjs

@@ -1,3 +1,22 @@
+// Helper function to try requiring a plugin, returns null if not found
+function tryRequire(pluginName) {
+  try {
+    return require(pluginName)
+  } catch (e) {
+    return null
+  }
+}
+
+// Build plugins array - only include plugins that are installed
+const plugins = []
+const oxcPlugin = tryRequire('@prettier/plugin-oxc')
+const xmlPlugin = tryRequire('@prettier/plugin-xml')
+const tailwindPlugin = tryRequire('prettier-plugin-tailwindcss')
+
+if (oxcPlugin) plugins.push('@prettier/plugin-oxc')
+if (xmlPlugin) plugins.push('@prettier/plugin-xml')
+if (tailwindPlugin) plugins.push('prettier-plugin-tailwindcss')
+
 module.exports = {
   // Basic formatting
   semi: true,
@@ -40,10 +59,7 @@ module.exports = {
   xmlSortAttributesByKey: false,
   xmlWhitespaceSensitivity: 'strict',
 
-  // Plugins - order matters: oxc first for parsing, tailwindcss last for class sorting
-  plugins: [
-    '@prettier/plugin-oxc',
-    '@prettier/plugin-xml',
-    'prettier-plugin-tailwindcss',
-  ],
+  // Plugins - automatically detected, only loaded if installed
+  // Order matters: oxc first for parsing, tailwindcss last for class sorting
+  plugins,
 }

package/prettier/index.mjs

@@ -0,0 +1,74 @@
+import { createRequire } from 'module'
+import { fileURLToPath } from 'url'
+import { dirname } from 'path'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+const require = createRequire(import.meta.url)
+
+// Helper function to try requiring a plugin, returns null if not found
+function tryRequire(pluginName) {
+  try {
+    require.resolve(pluginName)
+    return pluginName
+  } catch (e) {
+    return null
+  }
+}
+
+// Build plugins array - only include plugins that are installed
+const plugins = []
+const oxcPlugin = tryRequire('@prettier/plugin-oxc')
+const xmlPlugin = tryRequire('@prettier/plugin-xml')
+const tailwindPlugin = tryRequire('prettier-plugin-tailwindcss')
+
+if (oxcPlugin) plugins.push(oxcPlugin)
+if (xmlPlugin) plugins.push(xmlPlugin)
+if (tailwindPlugin) plugins.push(tailwindPlugin)
+
+export default {
+  // Basic formatting
+  semi: true,
+  singleQuote: true,
+  trailingComma: 'all',
+  printWidth: 80,
+  tabWidth: 2,
+  useTabs: false,
+
+  // Bracket and spacing
+  bracketSpacing: true,
+  bracketSameLine: false,
+  arrowParens: 'always',
+
+  // JSX/HTML specific
+  jsxSingleQuote: false,
+  singleAttributePerLine: false,
+
+  // Quotes
+  quoteProps: 'as-needed',
+
+  // Line endings and whitespace
+  endOfLine: 'lf',
+  proseWrap: 'preserve',
+  htmlWhitespaceSensitivity: 'css',
+
+  // Vue specific
+  vueIndentScriptAndStyle: false,
+
+  // Pragma (for legacy systems)
+  insertPragma: false,
+  requirePragma: false,
+
+  // Embedded language formatting
+  embeddedLanguageFormatting: 'auto',
+
+  // XML/SVG specific options
+  xmlQuoteAttributes: 'preserve',
+  xmlSelfClosingSpace: true,
+  xmlSortAttributesByKey: false,
+  xmlWhitespaceSensitivity: 'strict',
+
+  // Plugins - automatically detected, only loaded if installed
+  // Order matters: oxc first for parsing, tailwindcss last for class sorting
+  plugins,
+}