Merge pull request #397 from nyaggah/develop

feat: bun in bed! parse flags; code clean up

.changeset/fifty-weeks-raise.md

@@ -0,0 +1,6 @@
+---
+"@bedframe/core": patch
+"@bedframe/cli": patch
+---
+
+Bun in BED! 🎉 cli ux; code clean up

packages/cli/README.md

@@ -208,19 +208,26 @@ As an example, to scaffold a multi-extension project i.e. BED environment target
 
 ```bash
 $ bedframe make multi-extension-project \
-  --version 0.0.1  \
-  --browsers chrome, brave, opera, edge \
-  --packageManager yarn \
+  --browsers 'chrome, firefox, safari, brave, opera, edge' \
+  --version '0.0.0'  \
+  --description 'this is my BED! there are many like it, but this one is... MINE!!!'  \
+  --author 'joe, [email protected], https://bedframe.dev'  \
+  --license MIT  \
+  --private  \
+  --type overlay  \
+  --override newtab  \
+  --options embedded  \
+  --packageManager bun \
   --framework react \
   --language typescript \
-  --style Tailwind \
+  --style tailwind \
   --lintFormat \
+  --tests \
   --git \
   --gitHooks \
-  --tests \
   --commitLint \
   --changesets \
-  --installDeps \
+  --installDeps
 ```
 
 If any required configuration isn't passed in via `flags` the CLI will prompt you for the missing requirements.

packages/cli/package.json

@@ -8,13 +8,13 @@
   "version": "0.0.77",
   "license": "MIT",
   "type": "module",
-  "main": "dist/bedframe.cjs",
+  "main": "dist/bedframe.js",
   "module": "dist/bedframe.js",
   "types": "dist/bedframe.d.ts",
   "exports": {
     ".": {
       "import": "./dist/bedframe.js",
-      "require": "./dist/bedframe.cjs",
+      "require": "./dist/bedframe.js",
       "types": "./dist/bedframe.d.ts"
     }
   },

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

@@ -3,18 +3,14 @@ import { type FrameConfig, mountFrame, unmountIframe } from './iframe.config'
 
 export const frameConfig: FrameConfig = {
   iframe: {
-    id: `__${chrome.runtime.getManifest().name.replace(/[^A-Z0-9]/gi, '_')}__extension-root__`,
+    id: `__${chrome.runtime.getManifest().name.replace(/[^A-Z0-9]/gi, '_')}__frame__`,
     src: chrome.runtime.getURL('pages/main.html'),
   },
   iframeBg: {
-    id: `__${chrome.runtime.getManifest().name.replace(/[^A-Z0-9]/gi, '_')}__extension-overlay__`,
+    id: `__${chrome.runtime.getManifest().name.replace(/[^A-Z0-9]/gi, '_')}__overlay__`,
   },
 }
 
-/**
- * If the iframe doesn't exist (find by id), mount it,
- * otherwise, find it and remove it from the page
- */
 export function mountOrUnmountIframe(): void {
   const FrameId = (frameConfig.iframe as { id: string }).id
   document.getElementById(FrameId) === null ? mountFrame() : unmountIframe()
@@ -27,9 +23,8 @@ 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! 🎉
+// start listening for messages from iframe
+// https://developer.mozilla.org/en-US/docs/Web/API/Window/message_event
 window.addEventListener('message', (event) => {
   if (event.data.action === 'open-or-close-extension') {
     openOrCloseExtension()

packages/cli/rollup.config.js

@@ -29,17 +29,8 @@ export default [
       string({
         include: `${name}.js`,
       }),
-      string({
-        include: `${name}.cjs`,
-      }),
     ],
     output: [
-      {
-        file: `${name}.cjs`,
-        format: 'cjs',
-        sourcemap: true,
-        banner: '#!/usr/bin/env node\n',
-      },
       {
         file: `${name}.js`,
         format: 'es',

packages/cli/src/lib/make/prompts/prompts.ts

@@ -50,19 +50,9 @@ export const browserPrompts = (
       warn: red(' - Currently unavailable'),
       choices: browsers,
       min: 1,
-      // hint: `- ${yellow('[ space ]')} - select. ${yellow('[ return ]')} - submit`,
       instructions: promptInstructions('multiselect'),
     },
   ]
-  // if (options.browsers) {
-  //   const BrowsersArray = options.browsers
-  //     .split(',')
-  //     .map((browser: AnyCase<Browser>) => browser.trim().toLowerCase())
-  //   console.log('BrowsersArray', BrowsersArray)
-  //   browsersResponse.browsers = BrowsersArray
-  //   console.log('array > options.browser', options.browsers)
-  //   console.log('browsersResponse.browsers', browsersResponse.browsers)
-  // }
 }
 
 export const extensionPrompts = (
@@ -80,29 +70,29 @@ export const extensionPrompts = (
 
   return [
     {
-      type: 'text',
+      type: () => (!options.name ? 'text' : null),
       name: 'name',
       message: 'Project name:',
-      initial: initialValue.name,
+      initial: options.name ? options.name : initialValue.name,
       hint: `— Where would you like to create your project? ${yellow(
         italic(name ? name : './bedframe-project'),
       )}`,
       format: (answer: string) => formatTargetDir(answer),
     },
     {
-      type: 'text',
+      type: () => (!options.version ? 'text' : null),
       name: 'version',
       message: 'Project version:',
       initial: initialValue.version,
     },
     {
-      type: 'text',
+      type: () => (!options.description ? 'text' : null),
       name: 'description',
       message: 'Description:',
       initial: '',
     },
     {
-      type: 'list',
+      type: () => (!options.author ? 'list' : null),
       name: 'author',
       message: `Author ${dim('(name, email, url)')}:`,
       initial: '',
@@ -116,21 +106,21 @@ export const extensionPrompts = (
       },
     },
     {
-      type: 'text',
+      type: () => (!options.license ? 'text' : null),
       name: 'license',
       message: 'License:',
       initial: 'MIT',
     },
     {
-      type: 'toggle',
+      type: () => (!options.private ? 'toggle' : null),
       name: 'private',
       message: 'Private:',
       initial: true,
       active: 'Yes',
       inactive: 'No',
     },
     {
-      type: 'select',
+      type: () => (!options.type ? 'select' : null),
       name: 'type',
       message: 'Type:',
       initial: 0,
@@ -161,8 +151,7 @@ export const extensionPrompts = (
       ],
     },
     {
-      // type: (prev) => (prev === 'pageOverride' ? 'select' : null), // <--- if the type is page override
-      type: 'select',
+      type: () => (!options.override ? 'select' : null),
       name: 'override',
       message: 'Override page:',
       hint: dim('you can override one of these pages'),
@@ -191,7 +180,7 @@ export const extensionPrompts = (
       ],
     },
     {
-      type: 'select',
+      type: () => (!options.options ? 'select' : null),
       name: 'options',
       message: 'Options page:',
       initial: 0,
@@ -240,87 +229,87 @@ export const developmentPrompts = (
 
   return [
     {
-      type: 'select',
+      type: () => (!options.packageManager ? 'select' : null),
       name: 'packageManager',
       message: 'Package manager:',
       choices: packageManagers,
       initial: initialValue.packageManager,
     },
     {
-      type: 'select',
+      type: () => (!options.framework ? 'select' : null),
       name: 'framework',
       message: 'Framework:',
       warn: yellow('currently unavailable'),
       choices: frameworks,
       initial: initialValue.framework,
     },
     {
-      type: 'select',
+      type: () => (!options.language ? 'select' : null),
       name: 'language',
       message: 'Programming language:',
       warn: yellow('currently unavailable'),
       choices: languages,
       initial: initialValue.language,
     },
     {
-      type: 'select',
+      type: () => (!options.style ? 'select' : null),
       name: 'style',
       message: 'CSS framework:',
       choices: stylingOptions,
       initial: initialValue.style,
     },
     {
-      // TO diddly DO: if ts, yasiin bey lint:format
-      // maybe just default to yes and don't prompt
-      type: 'toggle',
+      type: () => (!options.lintFormat ? 'toggle' : null),
       name: 'lintFormat',
       message: 'Add linting & formatting:',
       initial: initialValue.lintFormat,
       active: 'Yes',
       inactive: 'No',
     },
     {
-      type: 'toggle',
+      type: () => (!options.tests ? 'toggle' : null),
       name: 'tests',
       message: 'Add unit tests:',
       initial: initialValue.tests,
       active: 'Yes',
       inactive: 'No',
     },
     {
-      type: 'toggle',
+      type: () => (!options.git ? 'toggle' : null),
       name: 'git',
       message: 'Add git',
       initial: initialValue.git,
       active: 'Yes',
       inactive: 'No',
     },
     {
-      type: (prev) => (prev ? 'toggle' : null),
+      type: (prev) => (prev && !options.gitHooks ? 'toggle' : null),
       name: 'gitHooks',
       message: 'Add git hooks:',
       initial: initialValue.gitHooks,
       active: 'Yes',
       inactive: 'No',
     },
     {
-      type: (_prev, answers) => (answers.git ? 'toggle' : null),
+      type: (_prev, answers) =>
+        answers.git && !options.commitLint ? 'toggle' : null,
       name: 'commitLint',
       message: 'Add commit linting:',
       initial: initialValue.commitLint,
       active: 'Yes',
       inactive: 'No',
     },
     {
-      type: (_prev, answers) => (answers.git ? 'toggle' : null),
+      type: (_prev, answers) =>
+        answers.git && !options.changesets ? 'toggle' : null,
       name: 'changesets',
       message: 'Add changesets:',
       initial: initialValue.changesets,
       active: 'Yes',
       inactive: 'No',
     },
     {
-      type: 'toggle',
+      type: () => (!options.installDeps ? 'toggle' : null),
       name: 'installDeps',
       message: 'Install dependencies:',
       initial: initialValue.installDeps,
@@ -336,13 +325,12 @@ export async function bedframePrompts(
 ): Promise<Bedframe> {
   projectName === undefined ? basename(cwd()) : projectName
 
-  const browsersResponse = options.browser
+  const browsersResponse = options.browsers
     ? options.browsers
         .toString()
         .split(',')
         .map((browser: AnyCase<Browser>) => browser.trim().toLowerCase())
     : await prompts(browserPrompts(options), {
-        // onSubmit: (_prompt, answer, _answers) => console.log('browsers:', answer),
         onCancel: () => {
           console.log('cancelling...')
           process.exit()
@@ -360,7 +348,6 @@ export async function bedframePrompts(
   const extensionResponse = await prompts(
     extensionPrompts(projectName, options),
     {
-      // onSubmit: (_prompt, answer, _answers) => console.log('Work:', answer),
       onCancel: () => {
         console.log('cancelling...')
         process.exit()
@@ -378,7 +365,12 @@ export async function bedframePrompts(
     extensionResponse.description = options.description
   }
   if (options.author) {
-    extensionResponse.author = options.author
+    const [name, email, url] = options.author.split(',')
+    extensionResponse.author = {
+      name: name.trim(),
+      email: email.trim(),
+      url: url.trim(),
+    }
   }
   if (options.license) {
     extensionResponse.license = options.license
@@ -389,9 +381,6 @@ export async function bedframePrompts(
   if (options.type) {
     extensionResponse.type = options.type
   }
-  if (options.type === 'overlay' && options.position) {
-    extensionResponse.position = options.position
-  }
   if (options.override) {
     extensionResponse.override = options.override
   }
@@ -406,6 +395,9 @@ export async function bedframePrompts(
     },
   })
 
+  if (options.packageManager) {
+    developmentResponse.packageManager = options.packageManager
+  }
   if (options.framework) {
     developmentResponse.framework = options.framework
   }