Merge pull request #583 from nyaggah/feat/update-project-gen

feat(cli): update project gen + file creation

.changeset/chatty-jeans-drop.md

@@ -0,0 +1,10 @@
+---
+'sidepanel-react-ts': patch
+'devtools-react-ts': patch
+'overlay-react-ts': patch
+'popup-react-ts': patch
+'bedframe-poup-vue-ts': patch
+'@bedframe/cli': patch
+---
+
+project gen updates + commit hook clean up

.husky/commit-msg

@@ -1,6 +1,3 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 if [ -t 0 ]; then
   # Running in a terminal (development environment)
   npx --no -- commitlint --edit "${1}"

.husky/pre-commit

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 # npx lint-staged

.husky/prepare-commit-msg

@@ -1,6 +1,3 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 if [ -t 1 ]; then
   # Running in a terminal
   exec < /dev/tty && node_modules/.bin/cz --hook || true

examples/devtools-react-ts/__husky/pre-commit

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 npx lint-staged

examples/overlay-react-ts/__husky/pre-commit

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 npx lint-staged

examples/popup-react-ts/__husky/pre-commit

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 npx lint-staged

examples/popup-vue-ts/__husky/pre-commit

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 npx lint-staged

examples/sidepanel-react-ts/__husky/pre-commit

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 npx lint-staged

packages/cli/public/stubs/git-hooks/__husky/commit-msg

@@ -1,6 +1,3 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 if [ -t 0 ]; then
   # Running in a terminal (development environment)
   npx --no -- commitlint --edit "${1}"

packages/cli/public/stubs/git-hooks/__husky/pre-commit

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 npx lint-staged

packages/cli/public/stubs/git-hooks/__husky/prepare-commit-msg

@@ -1,6 +1,3 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 if [ -t 1 ]; then
   # Running in a terminal
   exec < /dev/tty && node_modules/.bin/cz --hook || true

packages/cli/src/lib/make/utils/install-deps.ts

@@ -1,4 +1,3 @@
-import { chdir } from 'node:process'
 import { execa } from 'execa'
 import { projectInstall } from 'pkg-install'
 import type { PromptsResponse } from '../prompts'
@@ -19,29 +18,38 @@ export async function installDependencies(
   const { packageManager, lintFormat } = response.development.template.config
 
   try {
-    chdir(projectPath)
     if (packageManager.toLowerCase() === 'bun') {
-      await execa('bun', ['install']).then(async () => {
+      await execa('bun', ['install'], {
+        cwd: projectPath,
+      }).then(async () => {
         if (lintFormat) {
-          await execa('bun', ['run', 'lint:format'])
+          await execa('bun', ['run', 'lint:format'], {
+            cwd: projectPath,
+          })
         }
-
-        await execa('git', ['init'])
-        await execa('git', ['add', '.'])
-        await execa('git', ['commit', '-am', 'feat: initial commit. make BED!'])
       })
     } else {
-      await projectInstall({
-        prefer: packageManager.toLowerCase(),
+      const pm = packageManager.toLowerCase()
+      // const pmRun = pm !== 'yarn' ? `${pm} run` : pm
+      await execa(pm, ['install', '--force'], {
         cwd: projectPath,
       }).then(async () => {
         if (lintFormat) {
-          await execa(packageManager, ['run', 'lint:format'])
+          await execa(pm, ['run', 'lint:format'], {
+            cwd: projectPath,
+          })
         }
-        await execa('git', ['init'])
-        await execa('git', ['add', '.'])
-        await execa('git', ['commit', '-am', 'feat: initial commit. make BED!'])
       })
+      // await projectInstall({
+      //   prefer: packageManager.toLowerCase(),
+      //   cwd: projectPath,
+      // }).then(async () => {
+      //   if (lintFormat) {
+      //     await execa(packageManager, ['run', 'lint:format'], {
+      //       cwd: projectPath,
+      //     })
+      //   }
+      // })
     }
   } catch (err) {
     console.error(err)

packages/cli/src/lib/make/utils/make-bed.ts

@@ -1,10 +1,10 @@
-import { promises as fs } from 'node:fs'
-import path, { basename } from 'node:path'
-import url from 'node:url'
 import type { Browser } from '@bedframe/core'
 import { execa } from 'execa'
 import { bold, dim, lightGray, green as lightGreen } from 'kolorist'
 import Listr, { type ListrTask } from 'listr'
+import { promises as fs } from 'node:fs'
+import path, { basename } from 'node:path'
+import url from 'node:url'
 import type { PromptsResponse } from '../prompts'
 import { copyFolder } from './copy-folder'
 import { getAssetsDir } from './degit-assets-dir'
@@ -18,6 +18,7 @@ import { writeReadMe } from './write-readme'
 import { writeServiceWorker } from './write-service-worker'
 import { writeTsConfig } from './write-tsconfig'
 import { writeViteConfig } from './write-vite-config'
+import { writeEslintConfig } from './write-eslint-config'
 
 export async function makeBed(response: PromptsResponse) {
   const { browser } = response
@@ -36,7 +37,7 @@ export async function makeBed(response: PromptsResponse) {
   if (projectPath) {
     try {
       ensureDir(projectPath).catch(console.error)
-      execa('cd', [`${projectPath}`]).catch(console.error)
+      // execa('cd', [`${projectPath}`]).catch(console.error)
 
       const __dirname = path.dirname(url.fileURLToPath(import.meta.url))
       const stubsPath = path.resolve(path.join(__dirname, 'stubs'))
@@ -151,7 +152,11 @@ export async function makeBed(response: PromptsResponse) {
           {
             title: `  ${dim('├ .')}git${dim('/')}`,
             enabled: () => git,
-            task: () => {},
+            task: async () => {
+              await execa('git', ['init'], {
+                cwd: projectPath,
+              })
+            },
           },
           {
             title: `  ${dim('├ .')}github${dim('/')}`,
@@ -423,6 +428,11 @@ export async function makeBed(response: PromptsResponse) {
             enabled: () => lintFormat,
             task: () => copyFolder(stubs.lintFormat, projectPath),
           },
+          {
+            title: `  ${dim('├ ○')} eslint.config.js`,
+            enabled: () => lintFormat,
+            task: () => writeEslintConfig(response),
+          },
           {
             title: `  ${dim('├ ○')} components${dim('.json')}`,
             task: () => {},
@@ -459,8 +469,24 @@ export async function makeBed(response: PromptsResponse) {
             enabled: () => installDeps,
             task: async () => await installDependencies(response),
           },
+          {
+            title: 'Initial git commit',
+            enabled: () => git,
+            task: async () => {
+              await execa('git', ['add', '.'], {
+                cwd: projectPath,
+              })
+              await execa(
+                'git',
+                ['commit', '-am', 'feat: initial commit. make BED!'],
+                {
+                  cwd: projectPath,
+                },
+              )
+            },
+          },
         ],
-        { concurrent: true },
+        { concurrent: false },
       )
 
       await tasks.run().finally(() => {

packages/cli/src/lib/make/utils/write-eslint-config.ts

@@ -0,0 +1,56 @@
+import path from 'node:path'
+import { Answers } from 'prompts'
+import { writeFile } from './utils.fs'
+
+export function writeEslintConfig(response: Answers<string>): void {
+  const { browser: browsers } = response
+  const { manifest } = response.extension
+  const projectName = manifest[0].manifest.name
+
+  const { tests: hasTests } = response.development.template.config
+
+  const eslintConfig = `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",
+      ${browsers.includes('safari') && `"${projectName}-safari",`}
+      "node_modules"${
+        hasTests
+          ? `,
+      "coverage"`
+          : ''
+      }
+    ],
+  },
+  {
+    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 },
+      ],
+    },
+  },
+)
+`
+
+  const destinationRoot = path.resolve(response.extension.name.path)
+  const destinationEslintConfig = path.join(destinationRoot, 'eslint.config.js')
+  writeFile(destinationEslintConfig, `${eslintConfig}\n`).catch(console.error)
+}

packages/cli/src/lib/make/utils/write-manifests.ts

@@ -43,7 +43,15 @@ export const baseManifest = {
 
   // Optional
   // - - - - - - - - -
-  ${response.extension.author.email ? 'author: pkg.author.email,' : ''}
+  ${
+    response.extension.author.email
+      ? `
+  author: {
+    email: pkg.author.email
+  },
+  `
+      : ''
+  }
   background: {
     service_worker: 'scripts/service-worker.ts',
     type: 'module',
@@ -129,7 +137,6 @@ export function manifestForBrowser(
 
   const firefoxManifest = `import { createManifest } from '@bedframe/core'
 import { baseManifest } from './base.manifest'
-import pkg from '../../package.json'
 
 const { ${optionsPage !== 'none' ? `${optionsUIorPage},` : ''}${
     extensionType === 'sidepanel' ? 'side_panel, ' : ''
@@ -150,7 +157,7 @@ const updatedFirefoxManifest = {
   }
   browser_specific_settings: {
     gecko: {
-      id: pkg.author.email,
+      id: baseManifest.author.email,
       // ^^^ https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings#id
     },
   },${