CSS Plugin

package.json

@@ -41,6 +41,5 @@
     "programs/*",
     "browser-extension-test-data",
     "__TEST__/*"
-  ],
-  "dependencies": {}
+  ]
 }

packages/run-chrome-extension/helpers/messages.ts

@@ -23,9 +23,7 @@ interface Data {
 }
 
 function manifestFieldError(feature: string, htmlFilePath: string) {
-  const hintMessage = `Check the ${
-    feature
-  } field in your manifest.json file and try again.`
+  const hintMessage = `Check the ${feature} field in your manifest.json file and try again.`
 
   const errorMessage = `[manifest.json] File path ${underline(
     htmlFilePath

packages/run-edge-extension/helpers/messages.ts

@@ -23,9 +23,7 @@ interface Data {
 }
 
 function manifestFieldError(feature: string, htmlFilePath: string) {
-  const hintMessage = `Check the ${
-    feature
-  } field in your manifest.json file and try again.`
+  const hintMessage = `Check the ${feature} field in your manifest.json file and try again.`
 
   const errorMessage = `[manifest.json] File path ${underline(
     htmlFilePath
@@ -151,9 +149,7 @@ function browserNotFound(edgePath: string) {
 
 function webSocketError(error: any) {
   error(
-    `[⛔️] ${bgCyan(white(` edge-browser `))} ${red(
-      '✖︎✖︎✖︎'
-    )} WebSocket error`,
+    `[⛔️] ${bgCyan(white(` edge-browser `))} ${red('✖︎✖︎✖︎')} WebSocket error`,
     error
   )
 }

packages/run-firefox-addon/helpers/messages.ts

@@ -23,9 +23,7 @@ interface Data {
 }
 
 function manifestFieldError(feature: string, htmlFilePath: string) {
-  const hintMessage = `Check the ${
-    feature
-  } field in your manifest.json file and try again.`
+  const hintMessage = `Check the ${feature} field in your manifest.json file and try again.`
 
   const errorMessage = `[manifest.json] File path ${underline(
     htmlFilePath
@@ -137,9 +135,9 @@ function certRequired() {
   log(`
   npx -y ${'mkcert-cli'} \\
     ${green('--outDir')} ${path.join(
-      process.cwd(),
-      'node_modules/webpack-run-firefox-addon/dist/certs'
-    )} \\
+    process.cwd(),
+    'node_modules/webpack-run-firefox-addon/dist/certs'
+  )} \\
     ${green('--cert')} ${'localhost.cert'} \\
     ${green('--key')} ${'localhost.key'}
   `)

packages/run-firefox-addon/steps/RunFirefoxPlugin/firefoxLocation.ts

@@ -22,8 +22,8 @@ function getFirefoxLocation(): string | null {
     return fs.existsSync(regPath)
       ? regPath
       : fs.existsSync(altPath)
-        ? altPath
-        : null
+      ? altPath
+      : null
   } else {
     const suffix = path.join('Mozilla Firefox', 'firefox.exe')
     const possiblePaths = [

packages/scripts-plugin/helpers/utils.ts

@@ -39,8 +39,8 @@ export function getScriptEntries(
   const scriptEntries = Array.isArray(scriptPath)
     ? scriptPath || []
     : scriptPath
-      ? [scriptPath]
-      : []
+    ? [scriptPath]
+    : []
 
   const fileAssets = scriptEntries.filter((asset) => {
     const validFile =
@@ -68,8 +68,8 @@ export function getCssEntries(
   const scriptEntries = Array.isArray(scriptPath)
     ? scriptPath || []
     : scriptPath
-      ? [scriptPath]
-      : []
+    ? [scriptPath]
+    : []
 
   const fileAssets = scriptEntries.filter((asset) => {
     const validFile =

programs/cli/spec/create.spec.ts

@@ -67,11 +67,11 @@ describe('extension create', () => {
               ? 'ts'
               : 'tsx'
             : template.uiFramework === 'vue'
-              ? 'js'
-              : 'jsx'
+            ? 'js'
+            : 'jsx'
           : template.configFiles?.includes('tsconfig.json')
-            ? 'ts'
-            : 'js'
+          ? 'ts'
+          : 'js'
 
         template.uiContext?.forEach((context: string) => {
           // Expect [context]/index.html for all contexts except 'content'

programs/create/steps/initializeGitRepository.ts

@@ -52,9 +52,9 @@ export default async function initializeGitRepository(
         console.error(
           `🧩 ${`Extension.js`} ${red(
             `✖︎✖︎✖︎`
-          )} Child process error: Can't initialize ${yellow('git')} for ${
-            projectName
-          }. ${error.message}`
+          )} Child process error: Can't initialize ${yellow(
+            'git'
+          )} for ${projectName}. ${error.message}`
         )
         reject(error)
       })

programs/create/steps/installDependencies.ts

@@ -71,9 +71,9 @@ export default async function installDependencies(
         console.error(
           `🧩 ${`Extension.js`} ${red(
             `✖︎✖︎✖︎`
-          )} Child process error: Can't install dependencies for ${
-            projectName
-          }. ${error.message}`
+          )} Child process error: Can't install dependencies for ${projectName}. ${
+            error.message
+          }`
         )
         reject(error)
       })

programs/develop/commands/build/generate-zip.ts

@@ -81,9 +81,10 @@ export async function generateZip(
     const outputDir = path.join(distDir, browser)
     // We collect data from the projectDir if the user wants to zip the source files.
     const dataDir = options.zipSource ? projectDir : outputDir
-    const manifest: Record<string, string> = require(
-      path.join(dataDir, 'manifest.json')
-    )
+    const manifest: Record<string, string> = require(path.join(
+      dataDir,
+      'manifest.json'
+    ))
     const name = getPackageName(manifest, options)
     const ext = getExtensionExtension(browser)
     // Dist zips are stored in dist/[browser]/[name].zip
@@ -119,13 +120,17 @@ export async function generateZip(
 
     if (options.zip && options.zipSource) {
       console.log(
-        `\n${'📦 Package name:'} ${yellow(`${name}`)}, ${'Target Browser:'} ${`${capitalizedBrowser}`}` +
+        `\n${'📦 Package name:'} ${yellow(
+          `${name}`
+        )}, ${'Target Browser:'} ${`${capitalizedBrowser}`}` +
           `\n   ${'└─'} ${underline(`${sourceZipPath}`)} (source)` +
           `\n   ${'└─'} ${underline(`${distZipPath}`)} (distribution)`
       )
     } else if (options.zip) {
       console.log(
-        `\n${'📦 Package name:'} ${yellow(`${name}.${ext}`)}, ${'Target Browser:'} ${`${capitalizedBrowser}`}` +
+        `\n${'📦 Package name:'} ${yellow(
+          `${name}.${ext}`
+        )}, ${'Target Browser:'} ${`${capitalizedBrowser}`}` +
           `\n   ${'└─'} ${underline(`${distZipPath}`)} (distribution)`
       )
     } else if (options.zipSource) {

programs/develop/install-scripts.sh

@@ -9,7 +9,6 @@ plugin_loader_path() {
   echo "$(dirname "$0")/webpack/$base_folder/$plugin_folder/steps/$filename"
 }
 
-# Define the files
 html_plugin_files=(
   # "$(plugin_loader_path 'plugin-extension' 'feature-html' 'ensure-hmr-for-scripts.ts')"
 )
@@ -48,13 +47,11 @@ execute_command() {
   local entry=$1
   local format=$2
   command=$(tsup "$entry" "$format")
-  echo "Executing: $command"
-
-  # Execute the command
-  $command
+  # Execute the command and redirect output to /dev/null
+  $command > /dev/null 2>&1
 
   code=$?
-  echo "[develop] process exited with code $code for entry: $entry"
+  # echo "[develop] process exited with code $code for entry: $entry"
 }
 
 # Copy required files to dist directory
@@ -67,41 +64,41 @@ copy_files_to_dist() {
   )
   for file in "${files[@]}"; do
     if [ -e "$file" ]; then
-      echo "Copying $file to dist/"
+      # echo "Copying $file to dist/"
       cp -r "$file" dist/
     else
       echo "File $file does not exist"
     fi
   done
 }
 
-echo '►►► Executing commands for HTML plugin files'
+echo '►►► Setting up HTML loaders'
 for entry in "${html_plugin_files[@]}"; do
   execute_command "$entry" "cjs"
 done
 
-echo '►►► Executing commands for Resolve plugin files'
+echo '►►► Setting up resolver loaders'
 for entry in "${resolve_plugin_files[@]}"; do
   execute_command "$entry" "cjs"
 done
 
-echo '►►► Executing commands for Scripts plugin files'
+echo '►►► Setting up script loaders'
 for entry in "${scripts_plugin_files[@]}"; do
   execute_command "$entry" "cjs"
 done
 
-echo '►►► Executing commands for Reload plugin files'
+echo '►►► Setting up reload loaders'
 for entry in "${reload_plugin_files[@]}"; do
   execute_command "$entry" "cjs"
 done
 
-echo '►►► Executing commands for Minimum files with ESM format'
+echo '►►► Setting up minimum required files (ESM format)'
 for entry in "${minimum_files[@]}"; do
   execute_command "$entry" "esm"
 done
 
 # echo '►►► Building core module'
 # execute_command "$(dirname "$0")/module.ts" "cjs"
 
-echo '►►► Copying files to dist directory'
+echo '►►► Setting up client helper files'
 copy_files_to_dist

programs/develop/plugin-browsers/browser-lib/messages.ts

@@ -12,16 +12,14 @@ export function watchModeClosed(browser: string, code: number, reason: Buffer) {
 
 export function browserNotFound(browser: string, binaryPath: string) {
   const capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1)
-  return `${bgWhite(` ${browser}-browser `)} ${red(
-    '✖︎✖︎✖︎'
-  )} ${capitalize(browser)} not found at ${binaryPath}`
+  return `${bgWhite(` ${browser}-browser `)} ${red('✖︎✖︎✖︎')} ${capitalize(
+    browser
+  )} not found at ${binaryPath}`
 }
 
 export function webSocketError(browser: string, error: any) {
   error(
-    `[⛔️] ${bgWhite(` ${browser}-browser `)} ${red(
-      '✖︎✖︎✖︎'
-    )} WebSocket error`,
+    `[⛔️] ${bgWhite(` ${browser}-browser `)} ${red('✖︎✖︎✖︎')} WebSocket error`,
     error
   )
 }

programs/develop/webpack/lib/messages.ts

@@ -20,10 +20,10 @@ function getLoggingPrefix(type: 'warn' | 'info' | 'error' | 'success'): string {
     type === 'warn'
       ? yellow('►►►')
       : type === 'info'
-        ? blue('►►►')
-        : type === 'error'
-          ? red('✖︎✖︎✖︎')
-          : green('►►►')
+      ? blue('►►►')
+      : type === 'error'
+      ? red('✖︎✖︎✖︎')
+      : green('►►►')
   return `🧩 ${'Extension.js'} ${arrow}`
 }
 
@@ -472,8 +472,48 @@ export function serverRestartRequiredFromWebpack(
 ) {
   return (
     `${getLoggingPrefix('info')} Entry Point Modification Found\n\n` +
-    `${addingOrRemoving} ${typeOfAsset} in the ${underline(folder + '/')} folder after compilation requires a server restart.\n` +
+    `${addingOrRemoving} ${typeOfAsset} in the ${underline(
+      folder + '/'
+    )} folder after compilation requires a server restart.\n` +
     `\n\n- File ${addedOrRemoved}: ${underline(pathRelative)}\n\n` +
     `To apply these changes, restart the program.`
   )
 }
+
+export function featureNotInstalled(feature: string, packageManeger: string) {
+  return (
+    `${getLoggingPrefix('info')} ` +
+    `This is your first time running a project using ${yellow(feature)}.\n` +
+    `Installing required dependencies via ${blue(packageManeger)}. ` +
+    `This is a one time operation...`
+  )
+}
+
+export function installingRootDependencies() {
+  return (
+    `${getLoggingPrefix('info')} ` +
+    'Installing dependencies in the project root. This is only happens for authors and contributors...'
+  )
+}
+
+export function featureInstalledSuccessfully(feature: string) {
+  return (
+    `${getLoggingPrefix('success')} ` +
+    `${feature} and related dependencies installed successfully...`
+  )
+}
+
+export function youAreAllSet(feature: string) {
+  return (
+    `${getLoggingPrefix('success')} ` +
+    `You are all set! Run the program again to start hacking, now with ${feature} support.`
+  )
+}
+
+export function failedToinstallFeature(error: unknown) {
+  return (
+    `${getLoggingPrefix('error')} ` +
+    'Failed to detect package manager or install packages: ' +
+    error?.toString()
+  )
+}

programs/develop/webpack/plugin-compilation/env.ts

@@ -45,8 +45,8 @@ export class EnvPlugin {
         path: fs.existsSync(path.join(projectPath, '.env'))
           ? path.join(projectPath, '.env')
           : fs.existsSync(path.join(projectPath, '.env.local'))
-            ? path.join(projectPath, '.env.local')
-            : path.join(projectPath, '.env.example'),
+          ? path.join(projectPath, '.env.local')
+          : path.join(projectPath, '.env.example'),
         allowEmptyValues: true,
         defaults: fs.existsSync(path.join(projectPath, '.env.defaults')),
         systemvars: true

programs/develop/webpack/plugin-compilation/index.ts

@@ -4,7 +4,7 @@ import {EnvPlugin} from './env'
 import {CleanHotUpdatesPlugin} from './clean-hot-updates'
 import * as messages from '../lib/messages'
 
-import {type PluginInterface} from '../types'
+import {type PluginInterface, type Manifest} from '../types'
 
 export class CompilationPlugin {
   public readonly manifestPath: string
@@ -20,8 +20,10 @@ export class CompilationPlugin {
 
     new CleanHotUpdatesPlugin().apply(compiler)
 
+    const manifest: Manifest = require(this.manifestPath)
+
     compiler.hooks.done.tap('develop:brand', (stats) => {
-      stats.compilation.name = `${messages.boring(stats)}`
+      stats.compilation.name = `${messages.boring(stats)} ${manifest.name}`
     })
   }
 }