browser-extension-manager 1.0.14 → 1.1.0

package/dist/gulp/tasks/package.js

@@ -10,6 +10,7 @@ const JSON5 = require('json5');
 // Load package
 const package = Manager.getPackage('main');
 const project = Manager.getPackage('project');
+const config = Manager.getConfig('project');
 const rootPathPackage = Manager.getRootPath('main');
 const rootPathProject = Manager.getRootPath('project');
 
@@ -24,6 +25,141 @@ const input = [
 const output = 'dist';
 const delay = 250;
 
+// Set index
+let index = -1;
+
+// JSONP Template for build.js
+const JSONP_TEMPLATE = `
+(function() {
+  // Create a global variable for the config
+  const config = { config };
+
+  // Assign to various global scopes for compatibility
+  if (typeof self !== 'undefined') self.BEM_BUILD_JSON = config;
+  if (typeof window !== 'undefined') window.BEM_BUILD_JSON = config;
+  if (typeof globalThis !== 'undefined') globalThis.BEM_BUILD_JSON = config;
+})();
+`.trim();
+
+// Generate build.js file
+async function generateBuildJs(outputDir) {
+  try {
+    // Get git info
+    const gitInfo = getGitInfo();
+
+    // Get manifest
+    const manifestPath = path.join('dist', 'manifest.json');
+    const manifest = JSON5.parse(jetpack.read(manifestPath));
+
+    // Get web-manager config from project config
+    const webManagerConfig = config.webManager || {};
+
+    // Build config object matching web-manager's expected structure
+    const buildConfig = {
+      timestamp: new Date().toISOString(),
+      repo: gitInfo,
+      environment: Manager.getEnvironment(),
+      packages: {
+        'browser-extension-manager': package.version,
+        'web-manager': getPackageVersion('web-manager'),
+      },
+      config: {
+        // Core metadata
+        version: manifest.version,
+        environment: Manager.getEnvironment(),
+        buildTime: Date.now(),
+
+        // Brand configuration (from browser-extension-manager.json or manifest)
+        brand: {
+          id: config.app?.id || manifest.app?.id || 'extension',
+          name: config.brand?.name || manifest.brand?.name || 'Extension',
+          url: config.brand?.url || manifest.brand?.url || '',
+          email: config.brand?.email || manifest.brand?.email || '',
+          brandmark: config.brand?.brandmark || '',
+          wordmark: config.brand?.wordmark || '',
+          combomark: config.brand?.combomark || '',
+        },
+
+        // BEM-specific config
+        bem: {
+          environment: Manager.getEnvironment(),
+          cache_breaker: Math.round(new Date().getTime() / 1000),
+          liveReloadPort: config.liveReloadPort || 35729,
+        },
+
+        // Web-manager features (matching expected structure)
+        auth: webManagerConfig.auth || { enabled: true, config: {} },
+
+        firebase: {
+          app: {
+            enabled: !!(config.firebaseConfig?.apiKey || webManagerConfig.firebase?.app?.config?.apiKey),
+            config: config.firebaseConfig || webManagerConfig.firebase?.app?.config || {},
+          },
+          appCheck: webManagerConfig.firebase?.appCheck || { enabled: false, config: {} },
+        },
+
+        cookieConsent: webManagerConfig.cookieConsent || { enabled: true, config: {} },
+        chatsy: webManagerConfig.chatsy || { enabled: true, config: {} },
+        sentry: webManagerConfig.sentry || {
+          enabled: !!config.sentry?.dsn,
+          config: config.sentry || {}
+        },
+        exitPopup: webManagerConfig.exitPopup || { enabled: false, config: {} },
+        lazyLoading: webManagerConfig.lazyLoading || { enabled: true, config: {} },
+        socialSharing: webManagerConfig.socialSharing || { enabled: false, config: {} },
+        pushNotifications: webManagerConfig.pushNotifications || { enabled: false, config: {} },
+        validRedirectHosts: webManagerConfig.validRedirectHosts || ['itwcreativeworks.com'],
+        refreshNewVersion: webManagerConfig.refreshNewVersion || { enabled: true, config: {} },
+        serviceWorker: webManagerConfig.serviceWorker || { enabled: false, config: {} },
+
+        // Theme config
+        theme: config.theme || {},
+      }
+    };
+
+    // Write JSON version
+    const jsonPath = path.join(outputDir, 'build.json');
+    jetpack.write(jsonPath, JSON.stringify(buildConfig, null, 2));
+
+    // Write JSONP version for service worker
+    const jsonpContent = JSONP_TEMPLATE.replace('{ config }', JSON.stringify(buildConfig, null, 2));
+    const jsonpPath = path.join(outputDir, 'build.js');
+    jetpack.write(jsonpPath, jsonpContent);
+
+    logger.log(`Generated build.js and build.json`);
+  } catch (e) {
+    logger.error(`Error generating build.js`, e);
+  }
+}
+
+// Get git info
+function getGitInfo() {
+  try {
+    const { execSync } = require('child_process');
+    const user = execSync('git config user.name', { encoding: 'utf8' }).trim();
+    const repo = execSync('git config --get remote.origin.url', { encoding: 'utf8' })
+      .trim()
+      .replace(/.*[\/:]([\w-]+)\/([\w-]+)(\.git)?$/, '$2');
+
+    return { user, name: repo };
+  } catch (e) {
+    return { user: 'unknown', name: 'unknown' };
+  }
+}
+
+// Get package version
+function getPackageVersion(packageName) {
+  try {
+    const pkgPath = require.resolve(`${packageName}/package.json`, {
+      paths: [process.cwd()]
+    });
+    const pkg = require(pkgPath);
+    return pkg.version;
+  } catch (e) {
+    return 'unknown';
+  }
+}
+
 // Special Compilation Task for manifest.json with default settings
 async function compileManifest(outputDir) {
   try {
@@ -124,12 +260,18 @@ async function packageRaw() {
         const value = redactions[key];
         const regex = new RegExp(key, 'g'); // Create a global regex for the key
         content = content.replace(regex, value);
+
+        // Log replacement
+        logger.log(`Redacted ${key} in ${filePath}`);
       });
 
       // Write the new content to the file
       jetpack.write(filePath, content);
     });
 
+    // Generate build.js and build.json
+    await generateBuildJs(outputDir);
+
     // Compile manifest and locales
     await compileManifest(outputDir);
     await compileLocales(outputDir);
@@ -194,23 +336,37 @@ function liveReload() {
 
 // Package Task
 async function packageFn(complete) {
-  // Log
-  logger.log('Starting...');
+  try {
+    // Log
+    logger.log('Starting...');
 
-  // Run packageRaw
-  await packageRaw();
+    // Increment index
+    index++;
 
-  // Run packageZip
-  await packageZip();
+    // Run build:pre hook
+    await hook('build:pre', index);
 
-  // Run liveReload
-  liveReload();
+    // Run packageRaw
+    await packageRaw();
 
-  // Log
-  logger.log('Finished!');
+    // Run packageZip
+    await packageZip();
 
-  // Complete
-  return complete();
+    // Run build:post hook
+    await hook('build:post', index);
+
+    // Run liveReload
+    liveReload();
+
+    // Log
+    logger.log('Finished!');
+
+    // Complete
+    return complete();
+  } catch (error) {
+    // Handle any errors that occur during package build
+    return Manager.reportBuildError(Object.assign(error, { plugin: 'Package' }), complete);
+  }
 }
 
 // Watcher Task
@@ -225,7 +381,7 @@ function packageFnWatcher(complete) {
   logger.log('[watcher] Watching for changes...');
 
   // Watch for changes in the dist folder
-  watch(input, { delay: delay }, packageFn)
+  watch(input, { delay: delay, dot: true }, packageFn)
     .on('change', function (path) {
       logger.log(`[watcher] File ${path} was changed`);
     });
@@ -237,6 +393,39 @@ function packageFnWatcher(complete) {
 // Export tasks
 module.exports = series(packageFn, packageFnWatcher);
 
+// Run hooks
+async function hook(file, index) {
+  // Full path
+  const fullPath = path.join(process.cwd(), 'hooks', `${file}.js`);
+
+  // Log
+  // logger.log(`Loading hook: ${fullPath}`);
+
+  // Check if it exists
+  if (!jetpack.exists(fullPath)) {
+    return console.warn(`Hook not found: ${fullPath}`);
+  }
+
+  // Log
+  logger.log(`Running hook: ${fullPath}`);
+
+  // Load hook
+  let hook;
+  try {
+    // Load the hook
+    hook = require(fullPath);
+  } catch (e) {
+    throw new Error(`Error loading hook: ${fullPath} ${e.stack}`);
+  }
+
+  // Execute hook
+  try {
+    return await hook(index);
+  } catch (e) {
+    throw new Error(`Error running hook: ${fullPath} ${e.stack}`);
+  }
+}
+
 // Get redactions
 function getRedactions() {
   const REDACTED = './REDACTED_REMOTE_CODE';

package/dist/gulp/tasks/sass.js

@@ -2,74 +2,180 @@
 const Manager = new (require('../../build.js'));
 const logger = Manager.logger('sass');
 const { src, dest, watch, series } = require('gulp');
+const glob = require('glob').globSync;
 const path = require('path');
+const jetpack = require('fs-jetpack');
 const compiler = require('gulp-sass')(require('sass'));
 const cleanCSS = require('gulp-clean-css');
 const rename = require('gulp-rename');
+const filter = require('gulp-filter').default;
 
 // Load package
 const package = Manager.getPackage('main');
 const project = Manager.getPackage('project');
+const config = Manager.getConfig('project');
 const rootPathPackage = Manager.getRootPath('main');
 const rootPathProject = Manager.getRootPath('project');
 
+// Define bundle files separately for easier tracking
+const bundleFiles = [
+  // Main bundles (if any exist in bundles/ directory)
+  `${rootPathPackage}/dist/assets/css/bundles/*.scss`,
+
+  // Project bundles
+  'src/assets/css/bundles/*.scss',
+];
+
 // Glob
 const input = [
-  // Files to include
-  'src/assets/css/**/*.{css,scss,sass}',
+  // Bundle files (if any exist)
+  ...bundleFiles,
 
-  // Main files
-  `${rootPathPackage}/dist/assets/css/**/*`,
+  // Project entry point (main.scss)
+  'src/assets/css/main.scss',
 
-  // Files to exclude
-  // '!dist/**',
+  // Component-specific CSS
+  `${rootPathPackage}/dist/assets/css/components/**/*.scss`,
+  'src/assets/css/components/**/*.scss',
 ];
+
+// Additional files to watch (but not compile as entry points)
+const watchInput = [
+  // Watch the paths we're compiling
+  ...input,
+
+  // Core CSS - watch for changes but don't compile as entry points
+  `${rootPathPackage}/dist/assets/css/**/*.scss`,
+
+  // Theme CSS - watch for changes but don't compile as entry points
+  `${rootPathPackage}/dist/assets/themes/**/*.scss`,
+  'src/assets/themes/**/*.scss',
+];
+
 const output = 'dist/assets/css';
 const delay = 250;
+const compiled = {};
+
+// Configuration
+const MAIN_BUNDLE_COMPONENT_PARTIALS = false; // Set to true to merge components into _component-specific.scss, false to compile separately
 
 // SASS Compilation Task
 function sass(complete) {
   // Log
   logger.log('Starting...');
+  Manager.logMemory(logger, 'Start');
+
+  // Generate component-specific scss
+  generateComponentScss();
 
   // Compile
-  return src(input)
-    .pipe(compiler({ outputStyle: 'compressed' }).on('error', compiler.logError))
-    // .pipe(
-    //   compiler({
-    //     outputStyle: 'compressed',
-    //     // importer: alias.create({
-    //     //   // '@themes': path.resolve(rootPathProject, `node_modules/${package.name}/dist/assets`),
-    //     //   '@themes': '/node_modules/browser-extension-manager/dist/assets/themes',
-    //     // }),
-    //     // importers: [customAliasImporter],
-    //     // includePaths: [
-    //     //   // path.resolve(rootPathProject, `node_modules/${package.name}/dist/assets`),
-    //     //   '/Users/ian/Developer/Repositories/Slinko/slinko-browser-extension/node_modules/browser-extension-manager/dist/assets',
-    //     // ]
-    //     // includePaths: [
-    //     //   path.join(__dirname, '..', '..', 'src'),
-    //     //   path.resolve(__dirname, '../../src/assets'),
-    //     //   path.resolve(__dirname, '../../src'),
-    //     // ],
-    //     // includePaths: [
-    //     //   path.resolve(__dirname, '../../'),
-    //     //   path.resolve(process.cwd(), '../../'),
-    //     // ],
-    //     // loadPaths: [
-    //     //   path.resolve(rootPathProject, `node_modules/${package.name}/dist/assets`),
-    //     // ],
-    //   }).on('error', compiler.logError)
-    // )
-    .pipe(cleanCSS())
-    .pipe(rename((path) => {
-      path.basename += '.bundle';
+  let stream = src(input, { sourcemaps: true })
+    // Skip files based on configuration
+    .pipe(filter(file => !shouldSkip(file.path), { restore: true }))
+    // Compile SASS
+    .pipe(compiler({
+      loadPaths: [
+        // So we can use "@use 'browser-extension-manager' as *;"
+        path.resolve(rootPathPackage, 'dist/assets/css'),
+
+        // So we can use "@use 'theme' as *;" which resolves to the active theme
+        path.resolve(rootPathPackage, 'dist/assets/themes', config.theme?.id || 'classy'),
+
+        // So we can load _component-specific.scss from the project's dist
+        path.resolve(rootPathProject, 'dist/assets/css'),
+
+        // Allow importing from node_modules (e.g., @import '@fortawesome/fontawesome-free/css/all.min.css')
+        path.resolve(rootPathProject, 'node_modules'),
+      ],
+      // Suppress deprecation warnings
+      quietDeps: true,
+      // Only show warnings once
+      verbose: false
+    })
+    .on('error', (error) => Manager.reportBuildError(Object.assign(error, { plugin: 'SASS' }), complete)));
+
+  // Process
+  return stream
+    .pipe(cleanCSS({
+      format: Manager.actLikeProduction() ? 'compressed' : 'beautify',
+    }))
+    .pipe(rename((file) => {
+      // Get list of expected bundle names from the bundle files glob
+      // These are files that should be in the root CSS directory
+      let bundleFilesFound = [];
+      try {
+        bundleFilesFound = glob(bundleFiles);
+      } catch (e) {
+        // Directory doesn't exist, that's ok
+      }
+      const bundleNames = bundleFilesFound.map(f => path.basename(f, '.scss'));
+      bundleNames.push('main'); // main.scss is always a root bundle
+
+      // Check if this is a root-level bundle
+      const baseName = file.basename;
+      const isBundle = bundleNames.includes(baseName);
+
+      // Check
+      if (isBundle) {
+        // Root-level bundles (main, or any future bundle in bundles/ directory)
+        // Keep in root directory
+        file.dirname = '.';
+      } else {
+        // Component files: special handling for pages vs other components
+        //
+        // ⚠️ CRITICAL: The 'pages' directory is treated differently!
+        //
+        // Pages directory can have MULTIPLE files (index, pricing, login, etc.)
+        // - pages/index.scss     → components/pages/index.bundle.css ✓
+        // - pages/pricing.scss   → components/pages/pricing.bundle.css ✓
+        // - pages/login.scss     → components/pages/login.bundle.css ✓
+        //
+        // Other components only have ONE file (index.html), so we strip /index:
+        // - popup/index.scss     → components/popup.bundle.css ✓
+        // - options/index.scss   → components/options.bundle.css ✓
+        // - sidepanel/index.scss → components/sidepanel.bundle.css ✓
+        //
+        // ❌ DO NOT GENERATE: components/pages.bundle.css
+        // ✓ DO GENERATE: components/pages/index.bundle.css, components/pages/pricing.bundle.css, etc.
+
+        const isInPages = file.dirname.includes(path.sep + 'pages' + path.sep)
+          || file.dirname.endsWith(path.sep + 'pages')
+          || file.dirname === 'pages';
+
+        if (file.basename === 'index' && !isInPages) {
+          // For non-pages components: strip /index
+          // components/popup/index.scss -> components/popup.bundle.css
+          const parts = file.dirname.split(path.sep);
+          const parentDir = parts[parts.length - 1];
+          file.basename = parentDir;
+          parts.pop();
+          file.dirname = parts.join(path.sep);
+        }
+        // For pages or non-index files: keep full path
+        // components/pages/index.scss -> components/pages/index.bundle.css
+        // components/pages/pricing.scss -> components/pages/pricing.bundle.css
+
+        // Add components/ prefix if not already there
+        if (!file.dirname.startsWith('components/') && !file.dirname.startsWith('components\\')) {
+          file.dirname = `components/${file.dirname}`;
+        }
+      }
+
+      // Add bundle to the name
+      file.basename += '.bundle';
+
+      // Track the full output path
+      const fullPath = path.resolve(output, file.dirname, `${file.basename}${file.extname}`);
+      compiled[fullPath] = true;
     }))
-    .pipe(dest(output))
-    .on('end', () => {
+    .pipe(dest(output, { sourcemaps: '.' }))
+    .on('finish', () => {
       // Log
       logger.log('Finished!');
 
+      // Trigger rebuild
+      Manager.triggerRebuild(compiled);
+
       // Complete
       return complete();
     });
@@ -87,14 +193,53 @@ function sassWatcher(complete) {
   logger.log('[watcher] Watching for changes...');
 
   // Watch for changes
-  watch(input, { delay: delay }, sass)
-  .on('change', function(path) {
-    logger.log(`[watcher] File ${path} was changed`);
+  watch(watchInput, { delay: delay, dot: true }, sass)
+  .on('change', (path) => {
+    logger.log(`[watcher] File changed (${path})`);
   });
 
   // Complete
   return complete();
 }
 
+function generateComponentScss() {
+  // Only generate _component-specific.scss if we're skipping component partials
+  if (!MAIN_BUNDLE_COMPONENT_PARTIALS) {
+    // When compiling components separately, create an empty file with a comment
+    const outputPath = path.resolve(rootPathProject, 'dist/assets/css/_component-specific.scss');
+    const content = `/*
+  AUTO-GENERATED COMPONENT-SPECIFIC SCSS
+  Components are now compiled separately when MAIN_BUNDLE_COMPONENT_PARTIALS = false
+  Find compiled component CSS in dist/assets/css/components/
+*/
+
+`;
+
+    jetpack.write(outputPath, content);
+    Manager.triggerRebuild(outputPath);
+    return;
+  }
+
+  // TODO: Implement merged component partials if needed in the future
+  // This would be similar to UJ's page-specific merging
+  logger.log('Merged component partials not yet implemented');
+}
+
+function isComponentPartial(file) {
+  return file.includes('/assets/css/components/') && file.endsWith('index.scss');
+}
+
+function shouldSkip(file) {
+  // Skip component partials only if MAIN_BUNDLE_COMPONENT_PARTIALS is true
+  if (MAIN_BUNDLE_COMPONENT_PARTIALS && isComponentPartial(file)) {
+    return true;
+  }
+  return false;
+}
+
 // Default Task
-module.exports = series(sass, sassWatcher);
+// Export
+module.exports = series(
+  sass,
+  sassWatcher
+);

package/dist/gulp/tasks/serve.js

@@ -7,6 +7,7 @@ const WebSocket = require('ws');
 // Load package
 const package = Manager.getPackage('main');
 const project = Manager.getPackage('project');
+const config = Manager.getConfig('project');
 const rootPathPackage = Manager.getRootPath('main');
 const rootPathProject = Manager.getRootPath('project');
 

package/dist/gulp/tasks/utils/template-transform.js

@@ -0,0 +1,50 @@
+// Libraries
+const through2 = require('through2');
+const { template } = require('node-powertools');
+const path = require('path');
+
+/**
+ * Creates a through2 transform stream that processes template variables in files
+ **/
+function createTemplateTransform(data) {
+  const extensions = ['html', 'md', 'liquid', 'json']
+
+  return through2.obj(function(file, encoding, callback) {
+    // Skip directories
+    if (file.isDirectory()) {
+      return callback(null, file);
+    }
+
+    // Check if file extension matches
+    const ext = path.extname(file.path).toLowerCase().slice(1);
+    if (!extensions.includes(ext)) {
+      return callback(null, file);
+    }
+
+    // Log
+    // console.log(`Processing file: ${file.path}`);
+
+    // Process the file contents
+    try {
+      const contents = file.contents.toString();
+
+      // Process templates
+      const templated = template(contents, data, {
+        brackets: ['[', ']'],
+      });
+
+      // Update file contents if changed
+      if (contents !== templated) {
+        file.contents = Buffer.from(templated);
+        const relativePath = file.relative || file.path;
+      }
+    } catch (error) {
+      console.error(`Error processing templates in ${file.path}:`, error);
+    }
+
+    // Pass the file through
+    callback(null, file);
+  });
+}
+
+module.exports = createTemplateTransform;