Add templates for Node.js, CRA, Next.js, Expo (#292)

__tests__/package.json

@@ -18,7 +18,7 @@
   "devDependencies": {
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
-    "eslint-config-upleveled": "^5.1.4",
+    "eslint-config-upleveled": "^6.0.0-0",
     "postcss-styled-syntax": "^0.5.0",
     "stylelint": "^15.9.0",
     "stylelint-config-upleveled": "^1.0.2",

templates/prettier.config.cjs → __tests__/prettier.config.mjs

@@ -4,4 +4,4 @@ const config = {
   trailingComma: 'all',
 };
 
-module.exports = config;
+export default config;

__tests__/stylelint.config.cjs → __tests__/stylelint.config.mjs

@@ -3,4 +3,4 @@ const config = {
   extends: ['stylelint-config-upleveled'],
 };
 
-module.exports = config;
+export default config;

bin/install.js

@@ -20,7 +20,20 @@ const projectPackageJson = JSON.parse(
 const projectDependencies = projectPackageJson.dependencies || {};
 const projectDevDependencies = projectPackageJson.devDependencies || {};
 
-
+const [projectType, projectTypeTitle] =
+  'postgres' in projectDependencies
+    ? ['next-js-postgresql', 'Next.js with PostgreSQL']
+    : 'next' in projectDependencies
+    ? ['next-js', 'Next.js']
+    : '@upleveled/react-scripts' in projectDependencies
+    ? ['create-react-app', 'Create React App']
+    : 'expo' in projectDependencies
+    ? ['expo', 'Expo (React Native)']
+    : ['node-js', 'Node.js'];
+
+console.log(`Detected project type: ${projectTypeTitle}`);
+
+// Commented out in case we need to patch Next.js again in the future
 // if ('next' in projectDependencies) {
 //   // Remove previous patches in package.json
 //   if (projectPackageJson?.pnpm?.patchedDependencies) {
@@ -31,7 +44,7 @@ const projectDevDependencies = projectPackageJson.devDependencies || {};
 //     );
 //   }
 // }
-
+//
 // writeFileSync(
 //   projectPackageJsonPath,
 //   JSON.stringify(projectPackageJson, null, 2) + '\n',
@@ -51,7 +64,7 @@ const newDevDependenciesToInstall = [
 
 if (
   // Install SafeQL dependencies in Postgres.js projects
-  'postgres' in projectDependencies &&
+  projectType === 'next-js-postgresql' &&
   // SafeQL currently not supported on Windows
   // https://github.com/ts-safeql/safeql/issues/80
   process.platform !== 'win32'
@@ -60,8 +73,9 @@ if (
 }
 
 if (
-  '@upleveled/react-scripts' in projectDependencies ||
-  'next' in projectDependencies
+  projectType === 'create-react-app' ||
+  projectType === 'next-js' ||
+  projectType === 'next-js-postgresql'
 ) {
   newDevDependenciesToInstall.push(
     '@types/react',
@@ -101,6 +115,7 @@ const templatePath = resolve(
   dirname(fileURLToPath(import.meta.url)),
   '..',
   'templates',
+  projectType,
 );
 
 const templateFileNamesAndPaths =
@@ -140,42 +155,22 @@ for (const {
   name: templateFileName,
   path: templateFilePath,
 } of templateFileNamesAndPaths) {
-  // Don't copy create-react-app types for non-create-react-app / non-Next.js projects
-  if (
-    templateFileName === 'react-app-env.d.ts' &&
-    !('@upleveled/react-scripts' in projectDependencies)
-  ) {
-    continue;
-  }
-
-  // Don't copy Stylelint config for projects not using create-react-app or Next.js
-  if (
-    ['.vscode/settings.json', 'stylelint.config.cjs'].includes(
-      templateFileName,
-    ) &&
-    !(
-      '@upleveled/react-scripts' in projectDependencies ||
-      'next' in projectDependencies
-    )
-  ) {
-    continue;
-  }
-
   const filePathInProject = join(process.cwd(), templateFileName);
 
   let overwriteExistingFile = false;
 
   if (existsSync(filePathInProject)) {
+    // Always overwrite prettier.config.mjs in Postgres.js projects
+    if (
+      templateFileName === 'prettier.config.mjs' &&
+      projectType === 'next-js-postgresql'
+    ) {
+      overwriteExistingFile = true;
+    }
+
+    // Always overwrite tsconfig.json
     if (templateFileName === 'tsconfig.json') {
-      const projectTsconfigJson = JSON.parse(
-        readFileSync(join(process.cwd(), 'tsconfig.json'), 'utf-8')
-          // Remove comments from tsconfig.json
-          .replace(/^\s*\/\/.*/gm, ''),
-      );
-
-      if ('plugins' in (projectTsconfigJson.compilerOptions || {})) {
-        overwriteExistingFile = true;
-      }
+      overwriteExistingFile = true;
     }
 
     if (!overwriteExistingFile) {
@@ -200,8 +195,9 @@ console.log('✅ Done copying config files');
 
 try {
   if (
+    (projectType === 'next-js' || projectType === 'next-js-postgresql') &&
     readFileSync(join(process.cwd(), 'jsconfig.json'), 'utf-8').trim() ===
-    `{
+      `{
   "compilerOptions": {
     "paths": {
       "@/*": ["./*"]
@@ -246,7 +242,8 @@ writeFileSync(
 
 console.log('✅ Done updating .gitignore');
 
-// if ('next' in projectDependencies) {
+// Commented out in case we need to patch Next.js again in the future
+// if (projectType === 'next-js' || projectType === 'next-js-postgresql') {
 //   const patchesPath = join(process.cwd(), 'patches');
 
 //   // Remove previous patch files

package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-upleveled",
-  "version": "5.1.4",
+  "version": "6.0.0-0",
   "description": "UpLeveled ESLint defaults for programming in JavaScript, TypeScript, React, Next.js, Node.js, Postgres.js",
   "keywords": [
     "eslint",

prettier.config.cjs → prettier.config.mjs

@@ -4,4 +4,4 @@ const config = {
   trailingComma: 'all',
 };
 
-module.exports = config;
+export default config;

templates/create-react-app/.eslintignore

@@ -0,0 +1,3 @@
+# /build is default build directory for `@upleveled/react-scripts`
+# Ref: https://github.com/upleveled/create-react-app/pull/2
+build

templates/create-react-app/prettier.config.mjs

@@ -0,0 +1,7 @@
+/** @type {import('prettier').Options} */
+const config = {
+  singleQuote: true,
+  trailingComma: 'all',
+};
+
+export default config;

templates/stylelint.config.cjs → templates/create-react-app/stylelint.config.mjs

@@ -3,4 +3,4 @@ const config = {
   extends: ['stylelint-config-upleveled'],
 };
 
-module.exports = config;
+export default config;

templates/create-react-app/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "eslint-config-upleveled/tsconfig.base.json",
+  "include": [
+    "**/.eslintrc.cjs",
+    "**/*.ts",
+    "**/*.tsx",
+    "**/*.js",
+    "**/*.jsx",
+    "**/*.cjs",
+    "**/*.mjs"
+  ]
+}

templates/expo/.eslintrc.cjs

@@ -0,0 +1,6 @@
+/** @type {import('@typescript-eslint/utils').TSESLint.Linter.Config} */
+const config = {
+  extends: ['upleveled'],
+};
+
+module.exports = config;

templates/expo/prettier.config.mjs

@@ -0,0 +1,7 @@
+/** @type {import('prettier').Options} */
+const config = {
+  singleQuote: true,
+  trailingComma: 'all',
+};
+
+export default config;

templates/expo/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "eslint-config-upleveled/tsconfig.base.json",
+  "compilerOptions": {
+    // Based on expo/tsconfig.base.json
+    // https://github.com/expo/expo/blob/main/packages/expo/tsconfig.base.json
+    "jsx": "react-native",
+    "target": "ESNext"
+  },
+  "include": [
+    "**/.eslintrc.cjs",
+    "**/*.ts",
+    "**/*.tsx",
+    "**/*.js",
+    "**/*.jsx",
+    "**/*.cjs",
+    "**/*.mjs"
+  ],
+  "exclude": ["node_modules"]
+}

templates/next-js-postgresql/.eslintignore

@@ -0,0 +1,2 @@
+# Next.js build folder
+.next

templates/next-js-postgresql/.eslintrc.cjs

@@ -0,0 +1,6 @@
+/** @type {import('@typescript-eslint/utils').TSESLint.Linter.Config} */
+const config = {
+  extends: ['upleveled'],
+};
+
+module.exports = config;

templates/next-js-postgresql/.vscode/settings.json

@@ -0,0 +1,12 @@
+{
+  // Ignore unknown CSS at rules for Tailwind CSS
+  "css.lint.unknownAtRules": "ignore",
+  // Enable Stylelint in javascript and typescriptreact (for CSS-in-JS) and scss
+  "stylelint.validate": [
+    "css",
+    "scss",
+    "postcss",
+    "javascript",
+    "typescriptreact"
+  ]
+}

templates/next-js-postgresql/prettier.config.mjs

@@ -0,0 +1,7 @@
+/** @type {import('prettier').Options} */
+const config = {
+  singleQuote: true,
+  trailingComma: 'all',
+};
+
+export default config;

templates/next-js-postgresql/stylelint.config.mjs

@@ -0,0 +1,6 @@
+/** @type { import('stylelint').Config } */
+const config = {
+  extends: ['stylelint-config-upleveled'],
+};
+
+export default config;

templates/next-js/.eslintignore

@@ -0,0 +1,2 @@
+# Next.js build folder
+.next

templates/next-js/.eslintrc.cjs

@@ -0,0 +1,6 @@
+/** @type {import('@typescript-eslint/utils').TSESLint.Linter.Config} */
+const config = {
+  extends: ['upleveled'],
+};
+
+module.exports = config;

templates/next-js/.vscode/settings.json

@@ -0,0 +1,12 @@
+{
+  // Ignore unknown CSS at rules for Tailwind CSS
+  "css.lint.unknownAtRules": "ignore",
+  // Enable Stylelint in javascript and typescriptreact (for CSS-in-JS) and scss
+  "stylelint.validate": [
+    "css",
+    "scss",
+    "postcss",
+    "javascript",
+    "typescriptreact"
+  ]
+}

templates/next-js/prettier.config.mjs

@@ -0,0 +1,7 @@
+/** @type {import('prettier').Options} */
+const config = {
+  singleQuote: true,
+  trailingComma: 'all',
+};
+
+export default config;

templates/next-js/stylelint.config.mjs

@@ -0,0 +1,6 @@
+/** @type { import('stylelint').Config } */
+const config = {
+  extends: ['stylelint-config-upleveled'],
+};
+
+export default config;

templates/next-js/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "eslint-config-upleveled/tsconfig.base.json",
+  "compilerOptions": {
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": [
+    "**/.eslintrc.cjs",
+    "**/*.ts",
+    "**/*.tsx",
+    "**/*.js",
+    "**/*.jsx",
+    "**/*.cjs",
+    "**/*.mjs",
+    ".next/types/**/*.ts"
+  ]
+}

templates/node-js/.eslintrc.cjs

@@ -0,0 +1,6 @@
+/** @type {import('@typescript-eslint/utils').TSESLint.Linter.Config} */
+const config = {
+  extends: ['upleveled'],
+};
+
+module.exports = config;

templates/node-js/prettier.config.mjs

@@ -0,0 +1,7 @@
+/** @type {import('prettier').Options} */
+const config = {
+  singleQuote: true,
+  trailingComma: 'all',
+};
+
+export default config;