@shohojdhara/atomix 0.3.14 → 0.4.0

package/build-tools/vite-plugin.js

@@ -0,0 +1,161 @@
+/**
+ * @fileoverview Vite Plugin for Atomix Design System
+ * Provides seamless integration of Atomix components and styles into Vite projects
+ */
+
+import fs from 'fs';
+import path from 'path';
+import {
+  resolveAtomixRoot,
+  filterComponents,
+  removeAtomImports,
+  generateThemeCss,
+  applyThemeToCSS,
+  getAvailableThemes,
+  createLogger,
+} from './utils.js';
+import { Validator } from './error-handler.js';
+
+/**
+ * @typedef {Object} AtomixVitePluginOptions
+ * @property {string} [theme='default'] - Theme to use
+ * @property {string[]} [components=[]] - Specific components to include
+ * @property {boolean} [optimizeCss=true] - Whether to optimize CSS
+ * @property {boolean} [includeAtoms=false] - Whether to include atomic styles
+ * @property {boolean} [verbose=false] - Enable verbose logging
+ */
+
+/**
+ * Atomix Vite Plugin
+ * @param {AtomixVitePluginOptions} options - Plugin options
+ * @returns {import('vite').Plugin}
+ */
+export default function atomixVitePlugin(options = {}) {
+  const {
+    theme = 'default',
+    components = [],
+    optimizeCss = true,
+    includeAtoms = false,
+    verbose = false,
+  } = options;
+
+  const log = createLogger('[Atomix Vite Plugin]', verbose);
+  let atomixRoot = null;
+
+  // Validate options — throws AtomixBuildError on failure
+  Validator.validateOptions({ theme, components }, [], []);
+
+  log.log(`Initializing with theme: ${theme}`);
+  if (components.length > 0) {
+    log.log(`Selected components: ${components.join(', ')}`);
+  }
+
+  return {
+    name: 'atomix',
+
+    configResolved(_resolvedConfig) {
+      atomixRoot = resolveAtomixRoot();
+      if (atomixRoot) {
+        log.log(`Found Atomix at: ${atomixRoot}`);
+      } else {
+        log.warn('Could not resolve Atomix package location');
+      }
+    },
+
+    /**
+     * Transform Atomix imports to optimize for production
+     */
+    async transform(code, id) {
+      const isAtomixFile =
+        id.includes('@shohojdhara/atomix') ||
+        (atomixRoot && id.includes(atomixRoot)) ||
+        code.includes('@shohojdhara/atomix');
+
+      if (!isAtomixFile) {
+        return null;
+      }
+
+      log.log(`Processing: ${id}`);
+
+      let transformedCode = code;
+
+      // Apply component filtering if specified
+      if (components.length > 0) {
+        transformedCode = filterComponents(transformedCode, components, includeAtoms);
+      }
+
+      // Remove atom imports if not requested
+      if (!includeAtoms) {
+        transformedCode = removeAtomImports(transformedCode);
+      }
+
+      return {
+        code: transformedCode,
+        map: null,
+      };
+    },
+
+    /**
+     * Inject theme CSS into dev server
+     */
+    configureServer(server) {
+      server.middlewares.use((req, res, next) => {
+        if (req.url && req.url.includes('/atomix-theme.css')) {
+          try {
+            const themeCss = generateThemeCss(theme, atomixRoot);
+            res.setHeader('Content-Type', 'text/css');
+            res.setHeader('Cache-Control', 'no-cache');
+            res.end(themeCss);
+            return;
+          } catch (error) {
+            log.error('Error serving theme CSS:', error);
+            res.statusCode = 500;
+            res.end('Error serving theme CSS');
+            return;
+          }
+        }
+        next();
+      });
+    },
+
+    /**
+     * Generate CSS for production build
+     */
+    generateBundle(outputOptions, bundle) {
+      if (!optimizeCss) return;
+
+      for (const fileName in bundle) {
+        const chunk = bundle[fileName];
+        if (chunk.type === 'asset' && chunk.fileName.endsWith('.css')) {
+          try {
+            if (theme !== 'default') {
+              chunk.source = applyThemeToCSS(chunk.source.toString(), theme, atomixRoot);
+              log.log(`Applied theme ${theme} to ${fileName}`);
+            }
+          } catch (error) {
+            log.error(`Error processing CSS ${fileName}:`, error);
+          }
+        }
+      }
+    },
+
+    /**
+     * Build start hook
+     */
+    buildStart() {
+      log.log('Build started');
+
+      // Validate theme exists
+      if (theme !== 'default' && atomixRoot) {
+        const themePath = path.join(atomixRoot, 'themes', theme);
+        if (!fs.existsSync(themePath)) {
+          const available = getAvailableThemes(atomixRoot);
+          this.warn(`[Atomix Vite Plugin] Theme '${theme}' not found. Available themes: ${available.join(', ') || 'none detected'}`);
+        }
+      }
+    },
+  };
+}
+
+// Re-export helpers for external consumption
+export { resolveAtomixRoot as getAtomixPackageLocation, getAvailableThemes } from './utils.js';

package/build-tools/webpack-loader.js

@@ -0,0 +1,123 @@
+/**
+ * @fileoverview Webpack Loader for Atomix Design System
+ * Provides integration of Atomix components and styles into Webpack projects
+ */
+
+import path from 'path';
+import { createRequire } from 'module';
+import {
+  filterComponents,
+  removeAtomImports,
+  shouldProcessFile,
+  createLogger,
+} from './utils.js';
+import { Validator } from './error-handler.js';
+
+const require = createRequire(import.meta.url);
+
+/**
+ * @typedef {Object} AtomixLoaderOptions
+ * @property {boolean} [includeAtoms=false] - Whether to include atomic styles
+ * @property {string[]} [components=[]] - Specific components to include
+ * @property {boolean} [excludeUnnecessaryStyles=true] - Remove unused styles
+ * @property {boolean} [verbose=false] - Enable verbose logging
+ * @property {string} [theme='default'] - Theme to use
+ */
+
+/**
+ * Webpack loader to process Atomix components and optimize imports
+ * @param {string} source - Source code to transform
+ * @returns {string} Transformed source code
+ */
+export default function atomixLoader(source) {
+  const options = this.getOptions() || {};
+
+  const {
+    includeAtoms = false,
+    components = [],
+    verbose = false,
+  } = options;
+
+  const log = createLogger('[Atomix Webpack Loader]', verbose);
+
+  // Validate options — throws AtomixBuildError on failure
+  Validator.validateOptions({ components }, [], []);
+
+  const resourcePath = this.resourcePath;
+
+  log.log(`Processing: ${resourcePath}`);
+  if (components.length > 0) {
+    log.log(`Selected components: ${components.join(', ')}`);
+  }
+
+  // Determine if we should process this file (strict matching)
+  if (!shouldProcessFile(resourcePath, source)) {
+    return source;
+  }
+
+  let transformedSource = source;
+
+  // Apply component filtering if specified
+  if (components.length > 0) {
+    transformedSource = filterComponents(transformedSource, components, includeAtoms);
+  }
+
+  // Remove atom imports if not requested
+  if (!includeAtoms) {
+    transformedSource = removeAtomImports(transformedSource);
+  }
+
+  log.log(`Transformation complete for: ${resourcePath}`);
+
+  return transformedSource;
+}
+
+/**
+ * Pitch loader function for preprocessing.
+ * Runs before the source is processed.
+ */
+export function pitch() {
+  const options = this.getOptions() || {};
+  const { verbose = false } = options;
+
+  const isAtomixFile =
+    this.resourcePath.includes('node_modules/@shohojdhara/atomix') ||
+    this.resourcePath.includes('@shohojdhara/atomix');
+
+  if (!isAtomixFile) {
+    return; // Skip processing
+  }
+
+  if (verbose) {
+    console.log(`[Atomix Webpack Loader - Pitch] Will process: ${this.resourcePath}`);
+  }
+}
+
+/**
+ * Helper to get Atomix configuration from the project root.
+ * @param {string} context - Project context path.
+ * @returns {Object} Atomix configuration.
+ */
+export function getAtomixConfig(context) {
+  try {
+    const configPath = path.join(context, 'atomix.config.ts');
+    const resolvedPath = require.resolve(configPath);
+
+    // Clear module cache to get fresh config
+    if (require.cache[resolvedPath]) {
+      delete require.cache[resolvedPath];
+    }
+
+    return require(configPath);
+  } catch {
+    return {
+      theme: 'default',
+      optimize: true,
+      includeAtoms: false,
+      components: [],
+    };
+  }
+}
+
+// Re-export helper for external consumption
+export { getAvailableThemes } from './utils.js';