Merge pull request #393 from nyaggah/develop

feat(project-gen): better project gen output files shape; code clean up

.changeset/red-bags-pretend.md

@@ -0,0 +1,6 @@
+---
+"create-bedframe": patch
+"@bedframe/cli": patch
+---
+
+better project gen output files shape; code cleanu up

packages/cli/package.json

@@ -19,8 +19,7 @@
     }
   },
   "bin": {
-    "bedframe": "./dist/bedframe.js",
-    "bed": "./dist/bedframe.js"
+    "bedframe": "./dist/bedframe.js"
   },
   "files": [
     "/dist",

packages/cli/public/stubs/components/app.tsx

@@ -1,13 +1,10 @@
-import { Router } from 'react-chrome-extension-router'
 import { Intro } from '@/components/intro'
 import '@/styles/style.css'
 
 export function App(): JSX.Element {
   return (
     <div className="flex items-center justify-center w-full h-full rounded-xl">
-      <Router>
-        <Intro />
-      </Router>
+      <Intro />
     </div>
   )
 }

packages/cli/public/stubs/components/intro.tsx

@@ -1,3 +1,5 @@
+import { PiXBold } from 'react-icons/pi'
+
 export function Intro(): JSX.Element {
   const bedHead = {
     name: chrome.runtime.getManifest().name,
@@ -25,24 +27,21 @@ export function Intro(): JSX.Element {
   `)
 
   return (
-    <div className="bg-[#181a1d] bg-[radial-gradient(#ffffff12_1px,transparent_0)] bg-[30px_30px] bg-[-20px_-22px] text-[#b6b8bd] flex flex-col items-center justify-center gap-[1em] h-full w-full relative">
-      <div className="absolute text-[1.5em] flex items-center justify-center bg-[#ffffff0a] h-7 w-7 cursor-pointer rounded-[50%] right-[15px] top-[15px]">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="1em"
-          height="1em"
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="2"
-          viewBox="0 0 24 24"
-        >
-          <title>Bedframe</title>
-          <path d="M18 6L6 18" />
-          <path d="M6 6L18 18" />
-        </svg>
-      </div>
+    <div className="flex flex-col items-center justify-center min-w-[360px] min-h-[400px] w-full h-full bg-background">
+      <button
+        className="flex items-center justify-center w-6 h-6 absolute text-[1.5em] hover:text-red-400 cursor-pointer rounded-[50%] right-[15px] top-[15px]"
+        onClick={() =>
+          window.parent.postMessage(
+            {
+              type: 'browser-action',
+              action: 'open-or-close-extension',
+            },
+            '*',
+          )
+        }
+      >
+        <PiXBold className="w-6 h-6" />
+      </button>
       <div className="flex flex-col w-max gap-[1em]">
         <div className="flex flex-col">
           <span className="text-white font-extrabold pb-[1em]">

packages/cli/public/stubs/components/layout.tsx

@@ -6,7 +6,7 @@ export interface LayoutProps {
 
 export function Layout({ children }: LayoutProps): JSX.Element {
   return (
-    <div className="flex items-center justify-center flex-col h-full w-full">
+    <div className="flex items-center justify-center flex-col min-w-[360px] min-h-[400px] h-full w-full">
       {children}
     </div>
   )

packages/cli/public/stubs/scripts/content.tsx

@@ -26,3 +26,12 @@ export function openOrCloseExtension(): void {
 
 // start listening for messages from (React) App
 chrome.runtime.onMessage.addListener(AppMessagesListener)
+
+// start listening for messages from iframe to parent/current page
+// we load the `main` page in the iframe so we'll have
+// a different origin. use js messaging! 🎉
+window.addEventListener('message', (event) => {
+  if (event.data.action === 'open-or-close-extension') {
+    openOrCloseExtension()
+  }
+})

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

@@ -20,18 +20,13 @@ export async function installDependencies(
 
   try {
     chdir(projectPath)
-    await execa('git', ['init'])
     await projectInstall({
       prefer: packageManager.toLowerCase(),
       cwd: projectPath,
     }).then(async () => {
-      await execa('git', ['add', '.']).then(async () => {
-        await execa('git', [
-          'commit',
-          '-am',
-          `feat: initial commit. configure bedframe`,
-        ])
-      })
+      await execa('git', ['init'])
+      await execa('git', ['add', '.'])
+      await execa('git', ['commit', '-am', `feat: initial commit. make BED!`])
     })
   } catch (err) {
     console.error(err)

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

@@ -2,8 +2,8 @@ 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 path, { basename } from 'node:path'
 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'

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

@@ -52,31 +52,40 @@ export function writeBedframeConfig(response: Answers<string>): void {
     })
     .join('\n')
 
-  const keyValue = (feature: any) => {
-    return feature ? `feature: ${feature},` : ''
+  const gitFeatures = {
+    git: git,
+    gitHooks: gitHooks,
+    commitLint: commitLint,
+    changesets: changesets,
   }
 
+  const featureStrings = Object.entries(gitFeatures).map(([key, value]) => {
+    return value ? `${key}: ${value},\n` : ''
+  })
+
   const fileContent = `import { createBedframe } from '@bedframe/core'
 ${browsers}
 
 export default createBedframe({
-  browser: [${browser.map((browserName: AnyCase<Browser>) => `${browserName}.browser`)}],  
+  browser: [
+    ${browser.map((browserName: AnyCase<Browser>) => `${browserName}.browser`).join(',\n')}
+  ],
   extension: {
-    type: '${extensionType}',
-    ${overridePage !== 'none' ? `overrides: '${overridePage}',` : ''}
-    ${optionsPage !== 'none' ? `options: '${optionsPage}',` : ''}
-    manifest: [${browser.map((browserName: AnyCase<Browser>) => browserName)}],
-    pages: {
-      ${
-        extensionType === 'sidepanel'
-          ? `welcome: 'src/pages/sidepanel-welcome.html',
+    type: '${extensionType}',${
+      overridePage !== 'none' ? `overrides: '${overridePage}',` : ''
+    }${
+      optionsPage !== 'none' ? `options: '${optionsPage}',` : ''
+    }manifest: [${browser.map((browserName: AnyCase<Browser>) => browserName)}],
+    pages: {${
+      extensionType === 'sidepanel'
+        ? `welcome: 'src/pages/sidepanel-welcome.html',
         main: 'src/pages/sidepanel-main.html',`
-          : ''
-      }${extensionType === 'overlay' ? `overlay: 'src/pages/main.html',` : ''}${
-        extensionType === 'devtools'
-          ? `devtools: 'src/pages/devtools.html',`
-          : ''
-      }${overridePage !== 'none' ? getOverridePage(overridePage) : ''}
+        : ''
+    }${extensionType === 'overlay' ? `\noverlay: 'src/pages/main.html',` : ''}${
+      extensionType === 'devtools'
+        ? `\ndevtools: 'src/pages/devtools.html',`
+        : ''
+    }${overridePage !== 'none' ? getOverridePage(overridePage) : ''}
     },    
   },
   development: {
@@ -122,14 +131,7 @@ export default createBedframe({
           watch: false,
         },`
             : ''
-        }    
-        ${
-          (keyValue(git),
-          keyValue(git),
-          keyValue(gitHooks),
-          keyValue(commitLint),
-          keyValue(changesets))
-        }    
+        }${featureStrings.join('')}  
       },
     },
   },

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

@@ -47,15 +47,13 @@ export const baseManifest: Manifest = createManifestBase({
   background: {
     service_worker: 'scripts/service-worker.ts',
     type: 'module',
-  },
-  ${
+  },${
     extensionType === 'sidepanel'
       ? `side_panel: {
     default_path: 'pages/sidepanel-main.html',
   },`
       : ''
-  }
-  ${
+  }${
     optionsPage === 'full-page'
       ? `options_page: 'pages/options.html',`
       : optionsPage === 'embedded'
@@ -64,18 +62,15 @@ export const baseManifest: Manifest = createManifestBase({
     open_in_tab: false,
   },`
         : ''
-  }
-  ${
+  }${
     extensionType === 'devtools' ? `devtools_page: 'pages/devtools.html',` : ''
-  }  
-  ${
+  }${
     overridePage !== 'none'
       ? `chrome_url_overrides: {
     ${`${overridePage}: 'pages/${overridePage}.html',`}
   },`
       : ''
-  }    
-  ${
+  }${
     response.extension.type.name === 'overlay'
       ? `content_scripts: [
     {
@@ -152,8 +147,7 @@ const updatedFirefoxManifest = {
     gecko: {
       id: 'me@${projectName.trim().replace(/\s+/g, '-').toLowerCase()}.com',
     },
-  },
-  ${
+  },${
     optionsPage === 'full-page' || optionsPage === 'embedded'
       ? `options_ui: {
         page: ${optionsPage === 'full-page' ? 'options_page' : 'options_ui.page'},

packages/cli/src/lib/make/utils/write-mvp-workflow.ts

@@ -35,8 +35,6 @@ export function writeMVPworkflow(response: Answers<string>) {
     packageManager,
     tests: hasTests,
     lintFormat,
-    // gitHooks,
-    // changesets,
   } = development.template.config
 
   const pm = packageManager.toLowerCase()
@@ -93,14 +91,12 @@ jobs:
       
       - name: '[ M A K E ] : Build ${projectName} - all browsers'
         id: buildProject
-        # this expects you to have a package.json script called: "build"
         run: ${pmRun} build
 ${
   lintFormat
     ? ` 
       - name: 'Format & Lint - Run Prettier + ESLint'
         id: lintFormat
-        # this expects you to have a package.json script called "lint:format"
         run: ${pmRun} lint:format`
     : ''
 }  
@@ -109,30 +105,13 @@ ${
     ? ` 
       - name: 'Unit Test - run unit test suite'
         id: unitTest
-        # this expects you to have a package.json script called "test"
         run: ${pmRun} test`
     : ''
 }
-      - name: 'Codemod - Perform some spaghetti 🤌 🤌 🤌'
-        # todo: polyfill namespaces and browser-specific apis 
-        # e.g. 'browser.runtime' and 'chrome.runtime', etc
-        #
-        # for now, perform some after-build code mods. not ideal, but...
-        # https://youtu.be/RlwlV4hcBac?t=21
-        # - - -
-        # bedframe builds for MV3 and while Firefox, et al support MV3 there
-        # is some divergence... this performs after-build codemods on manifest
-        # and feature code which ideally should happen during vite/crx dev and build processes...
-        # but... until then... spaghetti-ville!
-        id: codeMod
-        # this expects you to have a package.json script called "codemod"
-        run: ${pmRun} codemod firefox
-
       - name: '[ V E R S I O N ] : Create or Update Release Pull Request - Version Changes'
         id: changesets
         uses: changesets/action@v1
         with:
-          # this expects you to have a package.json script called "version" that will internally trigger \`changeset version\`.
           version: ${pmRun} version
         env:
           GITHUB_TOKEN: \$\{{ secrets.GITHUB_TOKEN }\}
@@ -160,7 +139,6 @@ ${
       - name: 'Create Release Archive(s) - zip 🫰 it 🫰 up 🫰 !'
         id: zip
         if: steps.changesets.outputs.hasChangesets == 'false'
-        # this expects you to have a package.json script called "zip"
         run: ${pmRun} zip
 
       - name: 'Create a git release w/ notes & release archive(s)'
@@ -175,7 +153,6 @@ ${
       - name: '[ P U B L I S H ] : Chrome - upload to Chrome Web Store'
         id: publishChrome
         if: steps.changesets.outputs.hasChangesets == 'false'
-        # this expects you to have a package.json script called "publish"
         run: ${pmRun} publish chrome
         env:
           ${publishVar.chrome.extensionId}: \$\{{ secrets.${
@@ -196,7 +173,6 @@ ${
       - name: 'Firefox - upload to AMO'
         id: publishFirefox
         if: steps.changesets.outputs.hasChangesets == 'false'
-        # this expects you to have a package.json script called "publish"
         run: ${pmRun} publish firefox
         env:
           ${publishVar.firefox.key}: \$\{{ secrets.${publishVar.firefox.key} }\}
@@ -209,7 +185,6 @@ ${
       - name: 'MS Edge - upload to MS Edge Add-ons'
         id: publishEdge
         if: steps.changesets.outputs.hasChangesets == 'false'
-        # this expects you to have a package.json script called "publish"
         run: ${pmRun} publish edge
         env:
           ${publishVar.edge.productId}: \$\{{ secrets.${