Merge pull request #391 from nyaggah/develop

feat(manifests): cross-browesr manifest handling; dev/build commands
nyaggah · Mar 23, 2024 · 8ae5ac1 · 8ae5ac1
2 parents 6275c61 + 374e197
commit 8ae5ac1
Show file tree

Hide file tree

Showing 13 changed files with 128 additions and 98 deletions.
diff --git a/.changeset/chatty-pots-pull.md b/.changeset/chatty-pots-pull.md
@@ -0,0 +1,6 @@
+---
+"@bedframe/core": patch
+"@bedframe/cli": patch
+---
+
+cross-browesr manifest handling; dev/build commands
diff --git a/packages/cli/src/commands/build.ts b/packages/cli/src/commands/build.ts
@@ -12,11 +12,11 @@ import { getBrowserArray } from '../lib/get-browser-array'
  * @return {*}  {Promise<void>}
  */
 export async function executeBuildScript(
-  browsers: AnyCase<Browser>[] = [],
+  browsers: AnyCase<Browser>[],
 ): Promise<void> {
   const browserColors = ['magenta', 'green', 'cyan', 'yellow', 'red', 'blue']
-
   const colorMap: Record<string, string> = {}
+
   browsers.map((browserName, index) => {
     colorMap[browserName] = browserColors[index % browserColors.length]
   })
@@ -65,5 +65,12 @@ export const buildCommand = new Command('build')
   .arguments('[browsers]')
   .action(async (browser) => {
     const browserArray = getBrowserArray()
-    executeBuildScript(!browser ? browserArray : browser)
+    let cliBrowsers: AnyCase<Browser>[] = []
+    if (!browser) {
+      cliBrowsers = browserArray
+    } else {
+      cliBrowsers = Array.isArray(browser) ? browser : browser.split(',')
+    }
+
+    browser ? executeBuildScript(cliBrowsers) : executeBuildScript(browserArray)
   })
diff --git a/packages/cli/src/commands/codemod.ts b/packages/cli/src/commands/codemod.ts
@@ -70,15 +70,3 @@ export const codeModCommand = new Command('codemod')
       }
     }
   })
-/*
-interface CodeMod {
-  browser: AnyCase<Browser> | AnyCase<Browser>[]
-  options: {
-    distDir: string
-    manifest boolean
-    features: boolean
-  }
-}
-codeMod(browser, options)
-
-*/
diff --git a/packages/cli/src/commands/dev.ts b/packages/cli/src/commands/dev.ts
@@ -15,9 +15,8 @@ async function executeDevScript(
   browsers: AnyCase<Browser>[] = [], // maybe default to `getBrowserList() ?? allBrowsers` here ??
 ): Promise<void> {
   const browserColors = ['magenta', 'green', 'cyan', 'yellow', 'red', 'blue']
-  // TO diddly DO: ^^^ we have color/ browser helper functions in @bedframe/core... use that
-
   const colorMap: Record<string, string> = {}
+
   browsers.map((browserName, index) => {
     colorMap[browserName] = browserColors[index % browserColors.length]
   })
@@ -94,6 +93,12 @@ export const devCommand = new Command('dev')
   .arguments('[browsers]')
   .action(async (browser) => {
     const browserArray = getBrowserArray()
+    let cliBrowsers: AnyCase<Browser>[] = []
+    if (!browser) {
+      cliBrowsers = browserArray
+    } else {
+      cliBrowsers = Array.isArray(browser) ? browser : browser.split(',')
+    }
 
-    !browser ? executeDevScript(browserArray) : executeDevScript(browser)
+    browser ? executeDevScript(cliBrowsers) : executeDevScript(browserArray)
   })
diff --git a/packages/cli/src/lib/make/utils/make-bed.ts b/packages/cli/src/lib/make/utils/make-bed.ts
@@ -163,12 +163,14 @@ export async function makeBed(response: PromptsResponse) {
           },
           {
             title: `  ${dim('│ ├ ○')} workflows${dim('/')}`,
+            enabled: () => git,
             task: () => {},
           },
           {
             title: `  ${dim('│ │ └ ○')} mvp${dim('.yml')} ${dim(
               '👈 the M V P of your B E D !',
             )}`,
+            enabled: () => git,
             task: () => {},
           },
           {
@@ -365,7 +367,12 @@ export async function makeBed(response: PromptsResponse) {
                   })
                   .catch((error) => console.error(error))
               }
-              copyOverridePage(overridePage, getOverridePage(overridePage).path)
+              if (overridePage !== 'none') {
+                copyOverridePage(
+                  overridePage,
+                  getOverridePage(overridePage).path,
+                )
+              }
               if (optionsPage !== 'none') {
                 ensureDir(pagesDir)
                   .then(() => {

diff --git a/packages/cli/src/lib/make/utils/write-bedframe-config.ts b/packages/cli/src/lib/make/utils/write-bedframe-config.ts
@@ -52,15 +52,19 @@ export function writeBedframeConfig(response: Answers<string>): void {
     })
     .join('\n')
 
+  const keyValue = (feature: any) => {
+    return feature ? `feature: ${feature},` : ''
+  }
+
   const fileContent = `import { createBedframe } from '@bedframe/core'
 ${browsers}
 
 export default createBedframe({
   browser: [${browser.map((browserName: AnyCase<Browser>) => `${browserName}.browser`)}],  
   extension: {
     type: '${extensionType}',
-    ${overridePage ? `overrides: '${overridePage}',` : 'none'}
-    options: '${optionsPage}',
+    ${overridePage !== 'none' ? `overrides: '${overridePage}',` : ''}
+    ${optionsPage !== 'none' ? `options: '${optionsPage}',` : ''}
     manifest: [${browser.map((browserName: AnyCase<Browser>) => browserName)}],
     pages: {
       ${
@@ -103,7 +107,7 @@ export default createBedframe({
             },
           ],
         },
-        lintFormat: ${lintFormat},
+        ${lintFormat ? `lintFormat: ${lintFormat},` : ''}
         ${
           hasTests
             ? `tests: {
@@ -118,11 +122,14 @@ export default createBedframe({
           watch: false,
         },`
             : ''
-        }        
-        git: ${git},
-        gitHooks: ${gitHooks},
-        commitLint: ${commitLint},
-        changesets: ${changesets},
+        }    
+        ${
+          (keyValue(git),
+          keyValue(git),
+          keyValue(gitHooks),
+          keyValue(commitLint),
+          keyValue(changesets))
+        }    
       },
     },
   },

diff --git a/packages/cli/src/lib/make/utils/write-manifests.ts b/packages/cli/src/lib/make/utils/write-manifests.ts
@@ -134,40 +134,38 @@ import { baseManifest } from './base.manifest'
 const { ${optionsUIorPage}${
     extensionType === 'sidepanel' ? ', side_panel' : ''
   }, ...rest } = baseManifest
-  
-${
-  extensionType === 'sidepanel'
-    ? `const sidePanel = {
-  default_icon: baseManifest.action.default_icon,
-  default_title: baseManifest.name,
-  default_panel: side_panel.default_path,
-}`
-    : ''
-}
-${
-  optionsPage === 'full-page' || optionsPage === 'embedded'
-    ? `const optionsUI = {
-  page: ${optionsPage === 'full-page' ? 'options_page' : 'options_ui.page'},
-}`
-    : ''
-}
 
 const updatedFirefoxManifest = {
-    ...rest,
-    ${extensionType === 'sidepanel' ? 'sidebar_action: sidePanel,' : ''}
-    browser_specific_settings: {
-      gecko: {
-        id: 'me@${projectName.trim().replace(/\s+/g, '-').toLowerCase()}.com',
-      },
+  ...rest,
+  background: {
+    scripts: [baseManifest.background.service_worker],
+  },${
+    extensionType === 'sidepanel'
+      ? `sidebar_action: {
+    default_icon: baseManifest.action.default_icon,
+    default_title: baseManifest.name,
+    default_panel: side_panel.default_path,
+  },`
+      : ''
+  }
+  browser_specific_settings: {
+    gecko: {
+      id: 'me@${projectName.trim().replace(/\s+/g, '-').toLowerCase()}.com',
     },
-    ${
-      optionsPage === 'full-page' || optionsPage === 'embedded'
-        ? 'options_ui: optionsUI,'
-        : ''
-    }
-  } as Manifest
+  },
+  ${
+    optionsPage === 'full-page' || optionsPage === 'embedded'
+      ? `options_ui: {
+        page: ${optionsPage === 'full-page' ? 'options_page' : 'options_ui.page'},
+      },`
+      : ''
+  }
+}
 
-export const firefox = createManifest(updatedFirefoxManifest, 'firefox')
+export const firefox = createManifest(
+  updatedFirefoxManifest as Manifest,
+  'firefox'
+)
 
 `
   const isFirefox = browser.toLowerCase() === 'firefox'

diff --git a/packages/cli/src/lib/make/utils/write-package-json.ts b/packages/cli/src/lib/make/utils/write-package-json.ts
@@ -73,7 +73,7 @@ export function writePackageJson(response: prompts.Answers<string>): void {
     ${hasTests ? `"test": "vitest run --coverage",` : ''}
     ${commitLint ? `"commit": "lint-staged && cz",` : ''}
     "zip": "bedframe zip",
-    "codemod": "bedframe codemod",
+    "codemod": "bedframe codemod"${browsers.includes('safari') ? ',' : ''}
     ${
       browsers.includes('safari')
         ? `"convert:safari": "xcrun safari-web-extension-converter dist/safari --project-location . --no-open --app-name $npm_package_name@$npm_package_version-safari-web-extension"`
@@ -104,8 +104,8 @@ export function writePackageJson(response: prompts.Answers<string>): void {
     }
   },
   "devDependencies": {
-    "@bedframe/cli": "^0.0.74",
-    "@bedframe/core": "^0.0.39",
+    "@bedframe/cli": "^0.0.75",
+    "@bedframe/core": "^0.0.40",
     ${
       changesets
         ? `"@changesets/cli": "^2.26.2",
@@ -163,7 +163,7 @@ export function writePackageJson(response: prompts.Answers<string>): void {
     ${language.toLowerCase() === 'typescript' ? `"typescript": "^5.2.2",` : ''}
     "unplugin-fonts": "^1.0.3",
     "vite": "^4.5.0"
-  },
+  }${lintFormat ? ',' : ''}
   ${
     lintFormat
       ? `"eslintConfig": {
@@ -225,7 +225,7 @@ export function writePackageJson(response: prompts.Answers<string>): void {
     "singleQuote": true
   }`
       : ''
-  }${lintFormat && commitLint ? ',' : ''}
+  }${commitLint ? ',' : ''}
   ${
     commitLint
       ? `"commitlint": {
@@ -239,7 +239,7 @@ export function writePackageJson(response: prompts.Answers<string>): void {
     }
   }`
       : ''
-  }${commitLint && gitHooks ? ',' : ''}
+  }${gitHooks ? ',' : ''}
   ${
     gitHooks
       ? `"husky": {

diff --git a/packages/cli/src/lib/make/utils/write-vite-config.ts b/packages/cli/src/lib/make/utils/write-vite-config.ts
@@ -4,7 +4,6 @@ import { ensureFile, outputFile } from './utils.fs'
 
 export function viteConfig(response: prompts.Answers<string>): string {
   const { tests: hasTests } = response.development.template.config
-  const { type } = response.extension
 
   return `import { getFonts, getManifest } from '@bedframe/core'
 import react from '@vitejs/plugin-react'
@@ -27,7 +26,9 @@ export default defineConfig(({ command, mode }) => {
       },
     },
     plugins: [
-      getManifest({ command, mode }, manifest),
+      getManifest({ command, mode }, manifest, {
+        browser: mode
+      }),
       getFonts(fonts),
       react(),
     ],

diff --git a/packages/core/src/lib/create-bedframe.ts b/packages/core/src/lib/create-bedframe.ts
@@ -1,36 +1,36 @@
-import type { BedframeTemplate } from "./create-template";
-import type { Browser, BuildTarget } from "./types";
-import type { AnyCase } from "./utils";
+import type { BedframeTemplate } from './create-template'
+import type { Browser, BuildTarget } from './types'
+import type { AnyCase } from './utils'
 
-export type ExtensionType = "popup" | "overlay" | "sidepanel" | "devtools";
-export type OverrideType = "none" | "newtab" | "history" | "bookmarks";
-export type PositionType = "center" | "left" | "right";
-export type OptionsType = "full-page" | "embedded";
+export type ExtensionType = 'popup' | 'overlay' | 'sidepanel' | 'devtools'
+export type OverrideType = 'none' | 'newtab' | 'history' | 'bookmarks'
+export type PositionType = 'center' | 'left' | 'right'
+export type OptionsType = 'full-page' | 'embedded'
 
 export type Extension = {
-	type: ExtensionType;
-	overrides: OverrideType;
-	position?: PositionType;
-	options: OptionsType;
-	manifest: BuildTarget[];
-	pages?: string | string[] | { [entryAlias: string]: string };
-	// ^^^ type from rollup input: >> export type InputOption = string | string[] | { [entryAlias: string]: string };
-};
+  type: ExtensionType
+  overrides?: OverrideType
+  position?: PositionType
+  options?: OptionsType
+  manifest: BuildTarget[]
+  pages?: string | string[] | { [entryAlias: string]: string }
+  // ^^^ type from rollup input: >> export type InputOption = string | string[] | { [entryAlias: string]: string };
+}
 
 export type Development = {
-	template: BedframeTemplate;
-};
+  template: BedframeTemplate
+}
 
 export interface Bedframe {
-	browser: AnyCase<Browser>[];
-	extension: Extension;
-	development: Development;
+  browser: AnyCase<Browser>[]
+  extension: Extension
+  development: Development
 }
 /**
  * Generate Bedframe object
  * @param {Bedframe} bedframe
  * @return {*}  {Bedframe}
  */
 export const createBedframe = (bedframe: Bedframe): Bedframe => {
-	return bedframe;
-};
+  return bedframe
+}
diff --git a/packages/core/src/lib/create-template.ts b/packages/core/src/lib/create-template.ts
@@ -18,13 +18,12 @@ export interface TemplateConfig {
     fonts?: FontFamily[]
     theme?: string | Record<string, any>
   }
-  lintFormat: Record<string, any> | boolean
-  // tests: vitest.InlineConfig | boolean // Record<string, any> | boolean
-  tests: any // Record<string, any> | boolean // Record<string, any> | boolean
-  git: Record<string, any> | boolean
-  gitHooks: Record<string, any> | boolean
-  commitLint: Record<string, any> | boolean
-  changesets: Record<string, any> | boolean
+  lintFormat?: Record<string, any> | boolean
+  tests?: any
+  git?: Record<string, any> | boolean
+  gitHooks?: Record<string, any> | boolean
+  commitLint?: Record<string, any> | boolean
+  changesets?: Record<string, any> | boolean
 }
 
 /**