From f632cd9346db92612d9bc49aed80f75bd1c733c2 Mon Sep 17 00:00:00 2001 From: Brijesh Bittu Date: Tue, 5 Nov 2024 15:08:42 +0530 Subject: [PATCH] [example] Update vite example (#300) Co-authored-by: Brijesh Bittu --- examples/.eslintrc.js | 1 + examples/pigment-css-vite-ts/eslint.config.js | 25 ++++++++++++++++++ examples/pigment-css-vite-ts/index.html | 6 ++--- examples/pigment-css-vite-ts/package.json | 12 +++++++-- examples/pigment-css-vite-ts/src/App.tsx | 1 - .../pigment-css-vite-ts/tsconfig.app.json | 26 +++++++++++++++++++ examples/pigment-css-vite-ts/tsconfig.json | 21 ++------------- .../pigment-css-vite-ts/tsconfig.node.json | 21 ++++++++++++--- examples/pigment-css-vite-ts/vite.config.ts | 5 +++- 9 files changed, 89 insertions(+), 29 deletions(-) create mode 100644 examples/pigment-css-vite-ts/eslint.config.js create mode 100644 examples/pigment-css-vite-ts/tsconfig.app.json diff --git a/examples/.eslintrc.js b/examples/.eslintrc.js index 1cfca7d3..a5dcccaf 100644 --- a/examples/.eslintrc.js +++ b/examples/.eslintrc.js @@ -11,6 +11,7 @@ module.exports = { 'import/order': 'off', // create-vite generates .jsx 'react/jsx-filename-extension': 'off', + 'react/react-in-jsx-scope': 'off', }, overrides: [ { diff --git a/examples/pigment-css-vite-ts/eslint.config.js b/examples/pigment-css-vite-ts/eslint.config.js new file mode 100644 index 00000000..cfd81c93 --- /dev/null +++ b/examples/pigment-css-vite-ts/eslint.config.js @@ -0,0 +1,25 @@ +import js from '@eslint/js'; +import globals from 'globals'; +import reactHooks from 'eslint-plugin-react-hooks'; +import reactRefresh from 'eslint-plugin-react-refresh'; +import tseslint from 'typescript-eslint'; + +export default tseslint.config( + { ignores: ['dist'] }, + { + extends: [js.configs.recommended, ...tseslint.configs.recommended], + files: ['**/*.{ts,tsx}'], + languageOptions: { + ecmaVersion: 2020, + globals: globals.browser, + }, + plugins: { + 'react-hooks': reactHooks, + 'react-refresh': reactRefresh, + }, + rules: { + ...reactHooks.configs.recommended.rules, + 'react-refresh/only-export-components': ['warn', { allowConstantExport: true }], + }, + }, +); diff --git a/examples/pigment-css-vite-ts/index.html b/examples/pigment-css-vite-ts/index.html index 04c0ee3a..e4b78eae 100644 --- a/examples/pigment-css-vite-ts/index.html +++ b/examples/pigment-css-vite-ts/index.html @@ -1,10 +1,10 @@ - + - - Pigment CSS + Vite + TypeScript + + Vite + React + TS
diff --git a/examples/pigment-css-vite-ts/package.json b/examples/pigment-css-vite-ts/package.json index 8caae366..b5a49e55 100644 --- a/examples/pigment-css-vite-ts/package.json +++ b/examples/pigment-css-vite-ts/package.json @@ -4,20 +4,28 @@ "type": "module", "scripts": { "dev": "vite", - "build": "tsc && vite build", + "build": "tsc -b && vite build", + "lint": "eslint .", "preview": "vite preview" }, "dependencies": { "@pigment-css/react": "latest", + "prop-types": "latest", "react": "latest", "react-dom": "latest" }, "devDependencies": { + "@eslint/js": "latest", "@pigment-css/vite-plugin": "latest", "@types/react": "latest", "@types/react-dom": "latest", - "@vitejs/plugin-react": "latest", + "@vitejs/plugin-react-swc": "latest", + "eslint": "latest", + "eslint-plugin-react-hooks": "latest", + "eslint-plugin-react-refresh": "latest", + "globals": "latest", "typescript": "latest", + "typescript-eslint": "latest", "vite": "latest" } } diff --git a/examples/pigment-css-vite-ts/src/App.tsx b/examples/pigment-css-vite-ts/src/App.tsx index 2cdb4224..6d506d7d 100644 --- a/examples/pigment-css-vite-ts/src/App.tsx +++ b/examples/pigment-css-vite-ts/src/App.tsx @@ -1,4 +1,3 @@ -import * as React from 'react'; import { styled, css, keyframes } from '@pigment-css/react'; const scale = keyframes({ diff --git a/examples/pigment-css-vite-ts/tsconfig.app.json b/examples/pigment-css-vite-ts/tsconfig.app.json new file mode 100644 index 00000000..f867de0d --- /dev/null +++ b/examples/pigment-css-vite-ts/tsconfig.app.json @@ -0,0 +1,26 @@ +{ + "compilerOptions": { + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", + "target": "ES2020", + "useDefineForClassFields": true, + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "Bundler", + "allowImportingTsExtensions": true, + "isolatedModules": true, + "moduleDetection": "force", + "noEmit": true, + "jsx": "react-jsx", + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true, + "noUncheckedSideEffectImports": true + }, + "include": ["src"] +} diff --git a/examples/pigment-css-vite-ts/tsconfig.json b/examples/pigment-css-vite-ts/tsconfig.json index 3d0a51a8..d32ff682 100644 --- a/examples/pigment-css-vite-ts/tsconfig.json +++ b/examples/pigment-css-vite-ts/tsconfig.json @@ -1,21 +1,4 @@ { - "compilerOptions": { - "target": "ESNext", - "useDefineForClassFields": true, - "lib": ["DOM", "DOM.Iterable", "ESNext"], - "allowJs": false, - "skipLibCheck": true, - "esModuleInterop": false, - "allowSyntheticDefaultImports": true, - "strict": true, - "forceConsistentCasingInFileNames": true, - "module": "ESNext", - "moduleResolution": "Node", - "resolveJsonModule": true, - "isolatedModules": true, - "noEmit": true, - "jsx": "react-jsx" - }, - "include": ["src"], - "references": [{ "path": "./tsconfig.node.json" }] + "files": [], + "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }] } diff --git a/examples/pigment-css-vite-ts/tsconfig.node.json b/examples/pigment-css-vite-ts/tsconfig.node.json index 9d31e2ae..abcd7f0d 100644 --- a/examples/pigment-css-vite-ts/tsconfig.node.json +++ b/examples/pigment-css-vite-ts/tsconfig.node.json @@ -1,9 +1,24 @@ { "compilerOptions": { - "composite": true, + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", + "target": "ES2022", + "lib": ["ES2023"], "module": "ESNext", - "moduleResolution": "Node", - "allowSyntheticDefaultImports": true + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "Bundler", + "allowImportingTsExtensions": true, + "isolatedModules": true, + "moduleDetection": "force", + "noEmit": true, + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true, + "noUncheckedSideEffectImports": true }, "include": ["vite.config.ts"] } diff --git a/examples/pigment-css-vite-ts/vite.config.ts b/examples/pigment-css-vite-ts/vite.config.ts index dd811914..a4e005fa 100644 --- a/examples/pigment-css-vite-ts/vite.config.ts +++ b/examples/pigment-css-vite-ts/vite.config.ts @@ -1,5 +1,5 @@ import { defineConfig } from 'vite'; -import react from '@vitejs/plugin-react'; +import react from '@vitejs/plugin-react-swc'; import { pigment, extendTheme } from '@pigment-css/vite-plugin'; // To learn more about theming, visit https://github.com/mui/pigment-css/blob/master/README.md#theming @@ -32,4 +32,7 @@ export default defineConfig({ }), react(), ], + optimizeDeps: { + include: ['react-is', 'prop-types'], + }, });