@idealyst/components 1.0.83 → 1.0.84

package/plugin/README.md

@@ -0,0 +1,272 @@
+# MDI Auto-Import Babel Plugin
+
+Automatically imports Material Design Icons for web builds and transforms Icon components to use the imported paths.
+
+## Features
+
+### 1. Context-Aware String Replacement
+The plugin only transforms strings that are actually used with the `Icon` component. This prevents false positives on common words like "home", "account", etc.
+
+```jsx
+// ✅ WILL transform - used with Icon
+const iconName = "home";
+<Icon name={iconName} />
+
+// ❌ WON'T transform - not used with Icon
+const pageName = "home";
+<div>{pageName}</div>
+```
+
+### 2. Namespace Prefix Support
+Use the `mdi:` prefix to explicitly mark a string as an icon name. This guarantees transformation even in complex scenarios.
+
+```jsx
+// Always transforms, even in complex expressions
+const icon = "mdi:home";
+<Icon name={icon} />
+
+// Works with conditionals
+<Icon name={showMenu ? "mdi:menu" : "mdi:close"} />
+```
+
+### 3. Variable Tracking with Scope Analysis
+The plugin follows variables back to their declarations to determine if they contain icon names.
+
+```jsx
+// Plugin tracks that iconName is used with Icon
+const iconName = "account";  // ✅ Will transform
+<Icon name={iconName} />
+
+// Plugin knows this is unrelated
+const userName = "account";  // ❌ Won't transform
+<div>{userName}</div>
+```
+
+### 4. Manifest Support
+Add frequently-used icons to a manifest file to ensure they're always available:
+
+```json
+{
+  "icons": ["home", "menu", "close", "check", "alert"]
+}
+```
+
+Icons in the manifest are always imported, even if not statically analyzable.
+
+## Usage
+
+### Direct String Literals
+The simplest case - just use the icon name directly:
+
+```jsx
+<Icon name="home" size="md" />
+```
+
+**Transforms to:**
+```jsx
+import { mdiHome as _mdiHome } from '@mdi/js';
+<Icon path={_mdiHome} size="md" />
+```
+
+### Variables
+Use variables for dynamic icons:
+
+```jsx
+const iconName = "account";
+<Icon name={iconName} size="md" />
+```
+
+**The plugin will:**
+1. Detect that `iconName` is used with `Icon`
+2. Import `mdiAccount`
+3. Transform the component
+
+### Namespace Prefix (Recommended for Dynamic Cases)
+For maximum reliability, especially with computed values:
+
+```jsx
+const iconName = "mdi:star";
+<Icon name={iconName} size="md" />
+```
+
+The `mdi:` prefix guarantees the string will be recognized as an icon name.
+
+### Conditional Expressions
+```jsx
+<Icon name={isActive ? "check" : "close"} size="md" />
+```
+
+**The plugin will:**
+1. Import both `mdiCheck` and `mdiClose`
+2. Keep the component as-is (since there are multiple possible icons)
+
+To transform conditionals, use namespace prefixes:
+```jsx
+<Icon name={isActive ? "mdi:check" : "mdi:close"} size="md" />
+```
+
+### Function Returns
+For function calls that return icon names, add them to the manifest:
+
+```jsx
+// icons.manifest.json
+{
+  "icons": ["file", "folder", "document"]
+}
+
+// Your code
+function getFileIcon(type) {
+  return type === 'dir' ? 'folder' : 'file';
+}
+
+<Icon name={getFileIcon(fileType)} />  // Icons pre-imported from manifest
+```
+
+## Configuration
+
+### Plugin Options
+
+```javascript
+// babel.config.js
+module.exports = {
+  plugins: [
+    ['@idealyst/components/plugin/web', {
+      debug: false,  // Enable debug logging
+      manifestPath: './icons.manifest.json'  // Path to icon manifest
+    }]
+  ]
+};
+```
+
+### Manifest File Format
+
+```json
+{
+  "icons": [
+    "home",
+    "menu",
+    "close",
+    "account",
+    "settings"
+  ]
+}
+```
+
+## How It Works
+
+### First Pass: Variable Tracking
+1. Scan all `<Icon>` components in the file
+2. Track any variables used in the `name` prop
+3. Mark these variables as "icon-related"
+
+### Second Pass: Transformation
+1. For each `<Icon>` component:
+   - Extract icon names from the `name` prop
+   - Handle direct strings, variables, conditionals, etc.
+   - Import the required MDI icons
+   - Transform `name="icon"` to `path={_mdiIcon}`
+
+2. For each string literal:
+   - Check if it's icon-related (used with Icon, has `mdi:` prefix, or in manifest)
+   - If yes, import the icon
+   - Context-aware: only transforms Icon-related strings
+
+### Third Pass: Add Imports
+- Add all collected icon imports from `@mdi/js`
+- Add `MdiIcon` import from `@mdi/react` if needed
+
+## Best Practices
+
+### ✅ DO
+
+```jsx
+// Use direct strings when possible
+<Icon name="home" />
+
+// Use namespace prefix for dynamic icons
+const icon = "mdi:account";
+<Icon name={icon} />
+
+// Add common icons to manifest
+// icons.manifest.json: { "icons": ["home", "menu"] }
+
+// Use variables for clarity
+const deleteIcon = "delete";
+<Icon name={deleteIcon} />
+```
+
+### ❌ DON'T
+
+```jsx
+// Don't rely on transformation for computed strings
+<Icon name={`icon-${type}`} />  // Won't work
+
+// Don't use common words without context
+const home = "home";  // If not used with Icon, won't transform
+<SomeOtherComponent name={home} />
+
+// Don't use complex expressions without namespace
+<Icon name={getIcon()} />  // Add to manifest instead
+```
+
+## Troubleshooting
+
+### Icon not transforming?
+1. Check if the string is actually used with `<Icon name={...} />`
+2. Try adding `mdi:` prefix: `"mdi:home"`
+3. Add the icon to `icons.manifest.json`
+4. Enable debug mode to see what the plugin is doing
+
+### False positives?
+This should be rare with the enhanced plugin, but if it happens:
+1. Ensure the variable is not used with `Icon`
+2. Report it as a bug with the code example
+
+### Getting warnings about dynamic expressions?
+Add the possible icon names to the manifest file.
+
+## Migration from Old Plugin
+
+The enhanced plugin is backwards compatible. Existing code will continue to work.
+
+New features you can now use:
+- Variables with icon names (without manifest)
+- Namespace prefix for explicit marking
+- Better handling of common words
+
+## Examples
+
+See `test-cases.jsx` for comprehensive examples of all supported patterns.
+
+## Technical Details
+
+### Icon Name Format
+- Input: `"home"`, `"account-circle"`, `"chevron-right"`
+- Output: `mdiHome`, `mdiAccountCircle`, `mdiChevronRight`
+
+The plugin converts kebab-case and snake_case to PascalCase and adds the `mdi` prefix.
+
+### Scope Analysis
+Uses Babel's scope API to:
+- Track variable bindings
+- Follow references to declarations
+- Determine if a variable is icon-related
+
+### Performance
+- Single-pass analysis per file
+- Minimal overhead during build
+- Only processes files that import Icon component
+
+## Contributing
+
+To test changes to the plugin:
+1. Edit `packages/components/plugin/web.js`
+2. Run a build: `yarn build`
+3. Check the transformed output in `dist/`
+
+Enable debug mode to see detailed logs:
+```javascript
+{
+  debug: true
+}
+```

package/plugin/test-cases.jsx

@@ -0,0 +1,112 @@
+/**
+ * Test cases for the enhanced MDI auto-import babel plugin
+ *
+ * These examples demonstrate how the plugin handles different scenarios:
+ * 1. Direct string literals in Icon components
+ * 2. Variables with icon names
+ * 3. Namespace prefixes (mdi:iconname)
+ * 4. Conditional expressions
+ * 5. Common words that should NOT be transformed
+ */
+
+import React from 'react';
+import { Icon } from '@idealyst/components';
+
+export function TestCases() {
+  // Case 1: Direct string literal - SHOULD transform
+  const case1 = <Icon name="home" size="md" />;
+
+  // Case 2: Variable with icon name - SHOULD transform (context-aware)
+  const iconName = "account";
+  const case2 = <Icon name={iconName} size="md" />;
+
+  // Case 3: Namespace prefix - SHOULD ALWAYS transform
+  const explicitIcon = "mdi:star";
+  const case3 = <Icon name={explicitIcon} size="md" />;
+
+  // Case 4: Direct namespace in JSX - SHOULD transform
+  const case4 = <Icon name="mdi:heart" size="md" />;
+
+  // Case 5: Conditional expression - SHOULD transform both
+  const isActive = true;
+  const case5 = <Icon name={isActive ? "check" : "close"} size="md" />;
+
+  // Case 6: Common word NOT used with Icon - should NOT transform
+  const pageName = "home";  // This is just a page name, not an icon
+  const case6 = <div>{pageName}</div>;
+
+  // Case 7: Common word in unrelated variable - should NOT transform
+  const title = "account";  // Not used with Icon
+  const case7 = <h1>{title}</h1>;
+
+  // Case 8: Variable from manifest (if manifest includes "folder")
+  const directoryIcon = "folder";
+  const case8 = <Icon name={directoryIcon} size="md" />;
+
+  // Case 9: Function that returns icon name - currently won't transform without manifest
+  function getIcon() {
+    return "file";
+  }
+  const case9 = <Icon name={getIcon()} size="md" />;  // Won't transform unless "file" is in manifest
+
+  // Case 10: Complex expression with namespace prefix - SHOULD transform
+  const showDetails = false;
+  const case10 = <Icon name={showDetails ? "mdi:chevron-down" : "mdi:chevron-right"} size="md" />;
+
+  // Case 11: Template literal (static) - SHOULD transform
+  const case11 = <Icon name={`home`} size="md" />;
+
+  // Case 12: Logical expression - SHOULD transform
+  const hasError = true;
+  const case12 = <Icon name={hasError && "alert"} size="md" />;
+
+  return (
+    <div>
+      <h2>Icon Transform Test Cases</h2>
+      <div>Case 1 (direct literal): {case1}</div>
+      <div>Case 2 (variable): {case2}</div>
+      <div>Case 3 (namespace variable): {case3}</div>
+      <div>Case 4 (namespace direct): {case4}</div>
+      <div>Case 5 (conditional): {case5}</div>
+      <div>Case 6 (non-icon string): {case6}</div>
+      <div>Case 7 (unrelated variable): {case7}</div>
+      <div>Case 8 (manifest icon): {case8}</div>
+      <div>Case 9 (function call): {case9}</div>
+      <div>Case 10 (complex with namespace): {case10}</div>
+      <div>Case 11 (template literal): {case11}</div>
+      <div>Case 12 (logical expression): {case12}</div>
+    </div>
+  );
+}
+
+/**
+ * Expected transformations after babel plugin runs:
+ *
+ * - case1: "home" -> path={_mdiHome}
+ * - case2: "account" -> path={_mdiAccount} (because iconName is used with Icon)
+ * - case3: "mdi:star" -> path={_mdiStar} (namespace prefix)
+ * - case4: "mdi:heart" -> path={_mdiHeart} (namespace prefix)
+ * - case5: Both "check" and "close" imported, component not transformed (multiple icons)
+ * - case6: "home" NOT transformed (not used with Icon)
+ * - case7: "account" NOT transformed (not used with Icon)
+ * - case8: "folder" -> path={_mdiFolder} (if in manifest)
+ * - case9: No transform unless "file" is in manifest
+ * - case10: Both chevron icons imported and transformed (namespace prefix)
+ * - case11: "home" -> path={_mdiHome} (static template literal)
+ * - case12: "alert" imported (but component might not transform due to logical expression)
+ *
+ * Expected imports at top of file:
+ * import MdiIcon from '@mdi/react';
+ * import {
+ *   mdiHome as _mdiHome,
+ *   mdiAccount as _mdiAccount,
+ *   mdiStar as _mdiStar,
+ *   mdiHeart as _mdiHeart,
+ *   mdiCheck as _mdiCheck,
+ *   mdiClose as _mdiClose,
+ *   mdiFolder as _mdiFolder,  // if in manifest
+ *   mdiChevronDown as _mdiChevronDown,
+ *   mdiChevronRight as _mdiChevronRight,
+ *   mdiAlert as _mdiAlert
+ * } from '@mdi/js';
+ */

package/plugin/web-legacy.js

@@ -0,0 +1,320 @@
+module.exports = function ({ types: t }, options = {}) {
+  const debug = options.debug || false;
+  const manifestPath = options.manifestPath || './icons.manifest.json';
+  
+  // Debug logging function that only logs when debug is enabled
+  const debugLog = (...args) => {
+    if (debug) {
+      console.log(...args);
+    }
+  };
+  
+  debugLog('[mdi-auto-import] Plugin loaded');
+  
+  const importedIcons = new Set();
+  const iconImportIdentifiers = new Map();
+  let hasIconImport = false;
+  let manifestIcons = new Set();
+  
+  // Load icon manifest if it exists
+  function loadIconManifest() {
+    try {
+      const fs = require('fs');
+      const path = require('path');
+      
+      // Try to resolve the manifest path relative to the current working directory
+      const fullPath = path.resolve(process.cwd(), manifestPath);
+      
+      if (fs.existsSync(fullPath)) {
+        const manifestContent = fs.readFileSync(fullPath, 'utf8');
+        const manifest = JSON.parse(manifestContent);
+        
+        if (manifest.icons && Array.isArray(manifest.icons)) {
+          manifest.icons.forEach(iconName => {
+            if (typeof iconName === 'string') {
+              manifestIcons.add(iconName);
+            }
+          });
+          debugLog(`[mdi-auto-import] Loaded ${manifestIcons.size} icons from manifest: ${fullPath}`);
+          debugLog('[mdi-auto-import] Manifest icons:', Array.from(manifestIcons));
+        } else {
+          console.warn(`[mdi-auto-import] Invalid manifest format in ${fullPath}. Expected { "icons": ["icon-name", ...] }`);
+        }
+      } else {
+        debugLog(`[mdi-auto-import] No manifest found at ${fullPath}`);
+      }
+    } catch (error) {
+      console.warn(`[mdi-auto-import] Error loading manifest from ${manifestPath}: ${error.message}`);
+    }
+  }
+  
+  function formatIconName(name) {
+    // Handle empty or invalid names
+    if (!name || typeof name !== 'string') {
+      throw new Error(`Invalid icon name: ${name}`);
+    }
+    
+    const formatted = name
+      // Convert kebab-case and snake_case to PascalCase
+      .replace(/[-_]/g, ' ')
+      .replace(/([a-z])([A-Z])/g, '$1 $2')
+      .split(' ')
+      .filter(part => part.length > 0)
+      .map(part => part.charAt(0).toUpperCase() + part.slice(1).toLowerCase())
+      .join('');
+    
+    debugLog(`[mdi-auto-import] formatIconName: ${name} -> ${formatted}`);
+    return formatted;
+  }
+  
+  function getMdiIconName(name) {
+    const mdiName = `mdi${formatIconName(name)}`;
+    debugLog(`[mdi-auto-import] getMdiIconName: ${name} -> ${mdiName}`);
+    return mdiName;
+  }
+  
+  function getIconIdentifier(iconName) {
+    if (!iconImportIdentifiers.has(iconName)) {
+      iconImportIdentifiers.set(iconName, `_${iconName}`);
+    }
+    const identifier = iconImportIdentifiers.get(iconName);
+    debugLog(`[mdi-auto-import] getIconIdentifier: ${iconName} -> ${identifier}`);
+    return identifier;
+  }
+
+  // Recursively extract all possible string literal values from an expression
+  function extractIconNames(expression, path) {
+    const iconNames = new Set();
+    
+    function traverse(node) {
+      if (!node) return;
+      
+      if (t.isStringLiteral(node)) {
+        iconNames.add(node.value);
+        debugLog(`[mdi-auto-import] Found string literal: ${node.value}`);
+      } 
+      else if (t.isConditionalExpression(node)) {
+        // Handle ternary: condition ? 'icon1' : 'icon2'
+        debugLog('[mdi-auto-import] Processing conditional expression');
+        traverse(node.consequent);
+        traverse(node.alternate);
+      }
+      else if (t.isLogicalExpression(node)) {
+        // Handle logical: condition && 'icon1' || 'icon2'
+        debugLog('[mdi-auto-import] Processing logical expression');
+        traverse(node.left);
+        traverse(node.right);
+      }
+      else if (t.isTemplateLiteral(node)) {
+        // Handle template literals with no expressions (static strings)
+        if (node.expressions.length === 0 && node.quasis.length === 1) {
+          const value = node.quasis[0].value.cooked;
+          iconNames.add(value);
+          debugLog(`[mdi-auto-import] Found template literal: ${value}`);
+        } else {
+          debugLog('[mdi-auto-import] Skipping dynamic template literal');
+        }
+      }
+      else if (t.isMemberExpression(node)) {
+        // Handle object.property where object is static
+        if (t.isIdentifier(node.object) && t.isIdentifier(node.property)) {
+          debugLog(`[mdi-auto-import] Found member expression: ${node.object.name}.${node.property.name}`);
+          // We could potentially resolve this if we track object declarations
+          // For now, just warn that we found it but can't resolve it
+        }
+      }
+      else if (t.isCallExpression(node)) {
+        debugLog('[mdi-auto-import] Found function call - cannot statically analyze');
+        console.warn(`[mdi-auto-import] Function call detected at ${path.node.loc ? `${path.node.loc.start.line}:${path.node.loc.start.column}` : 'unknown location'}. Consider adding icon names to manifest (${manifestPath}) for auto-import support.`);
+        // For function calls, we can't statically determine the result
+        // But we could potentially add runtime analysis or hints
+      }
+      else if (t.isIdentifier(node)) {
+        debugLog(`[mdi-auto-import] Found identifier: ${node.name}`);
+        // We could potentially trace variable declarations
+        // For now, just note that we found it
+      }
+      else {
+        debugLog(`[mdi-auto-import] Unhandled expression type: ${node.type}`);
+      }
+    }
+    
+    traverse(expression);
+    return Array.from(iconNames);
+  }
+
+  return {
+    name: 'mdi-auto-import',
+    visitor: {
+      Program: {
+        enter(path) {
+          // Reset state for each file
+          importedIcons.clear();
+          iconImportIdentifiers.clear();
+          hasIconImport = false;
+          manifestIcons.clear();
+          
+          // Load icon manifest
+          loadIconManifest();
+          
+          // Add all manifest icons to the import list
+          manifestIcons.forEach(iconName => {
+            try {
+              const mdiIconName = getMdiIconName(iconName);
+              importedIcons.add(mdiIconName);
+              debugLog(`[mdi-auto-import] Added manifest icon to import list: ${mdiIconName}`);
+            } catch (error) {
+              console.error(`[mdi-auto-import] Error processing manifest icon "${iconName}": ${error.message}`);
+            }
+          });
+          
+          // Check if Icon is already imported from @mdi/react
+          path.node.body.forEach(node => {
+            if (t.isImportDeclaration(node) && node.source.value === '@mdi/react') {
+              debugLog('[mdi-auto-import] Found @mdi/react import');
+              const hasIconSpecifier = node.specifiers.some(spec => 
+                t.isImportDefaultSpecifier(spec) && spec.local.name === 'MdiIcon'
+              );
+              if (hasIconSpecifier) {
+                debugLog('[mdi-auto-import] MdiIcon already imported');
+                hasIconImport = true;
+              }
+            }
+          });
+        },
+        exit(path) {
+          if (importedIcons.size === 0) {
+            return;
+          }
+          debugLog(`[mdi-auto-import] importedIcons.size: ${importedIcons.size}`);
+          
+          // Add imports at the top of the file if any icons were used
+          if (importedIcons.size > 0) {
+            debugLog('[mdi-auto-import] Adding imports for icons:', Array.from(importedIcons));
+            
+            // Import individual icons from @mdi/js
+            const iconImportSpecifiers = Array.from(importedIcons).map(iconName => {
+              const identifier = getIconIdentifier(iconName);
+              return t.importSpecifier(
+                t.identifier(identifier),
+                t.identifier(iconName)
+              );
+            });
+            
+            const iconImportDeclaration = t.importDeclaration(
+              iconImportSpecifiers,
+              t.stringLiteral('@mdi/js')
+            );
+            
+            // Import Icon component from @mdi/react if not already imported
+            if (!hasIconImport) {
+              debugLog('[mdi-auto-import] Adding MdiIcon import from @mdi/react');
+              const iconComponentImport = t.importDeclaration(
+                [t.importDefaultSpecifier(t.identifier('MdiIcon'))],
+                t.stringLiteral('@mdi/react')
+              );
+              path.unshiftContainer('body', iconComponentImport);
+            } else {
+              debugLog('[mdi-auto-import] MdiIcon already imported, skipping');
+            }
+            
+            // Add icon imports
+            path.unshiftContainer('body', iconImportDeclaration);
+            debugLog('[mdi-auto-import] Imports added successfully');
+          } else {
+            debugLog('[mdi-auto-import] No icons to import');
+          }
+        }
+      },
+      
+      JSXElement(path) {
+        const { node } = path;
+        
+        // Check if this is an Icon component from @idealyst/components
+        if (
+          t.isJSXIdentifier(node.openingElement.name) &&
+          node.openingElement.name.name === 'Icon'
+        ) {
+          
+          // Find the name attribute
+          const nameAttr = node.openingElement.attributes.find(attr => 
+            t.isJSXAttribute(attr) && 
+            t.isJSXIdentifier(attr.name) && 
+            attr.name.name === 'name'
+          );
+          
+          if (!nameAttr) {
+            debugLog('[mdi-auto-import] No name attribute found');
+            return;
+          }
+          
+          let iconNames = [];
+          
+          // Handle both string literals and JSX expressions
+          if (nameAttr && t.isStringLiteral(nameAttr.value)) {
+            iconNames = [nameAttr.value.value];
+            debugLog(`[mdi-auto-import] Found direct string literal: ${nameAttr.value.value}`);
+          } else if (nameAttr && t.isJSXExpressionContainer(nameAttr.value)) {
+            // Handle JSX expressions with enhanced detection
+            const expression = nameAttr.value.expression;
+            iconNames = extractIconNames(expression, path);
+            
+            if (iconNames.length === 0) {
+              // For dynamic expressions we can't resolve, leave a helpful comment
+              console.warn(`[mdi-auto-import] Cannot determine icon name (${nameAttr.value.expression}) for dynamic expression at ${path.node.loc ? `${path.node.loc.start.line}:${path.node.loc.start.column}` : 'unknown location'}. Consider adding icon names to manifest (${manifestPath}) for auto-import support.`);
+              return;
+            }
+          }
+          
+          if (iconNames.length > 0) {
+            debugLog(`[mdi-auto-import] Processing icons: ${iconNames.join(', ')}`);
+            
+            // Process each icon name found
+            const processedIcons = [];
+            iconNames.forEach(iconName => {
+              try {
+                const mdiIconName = getMdiIconName(iconName);
+                const iconIdentifier = getIconIdentifier(mdiIconName);
+                
+                // Track that we need to import this icon
+                importedIcons.add(mdiIconName);
+                processedIcons.push({ iconName, mdiIconName, iconIdentifier });
+                debugLog(`[mdi-auto-import] Added icon to import list: ${mdiIconName}`);
+              } catch (error) {
+                console.error(`[mdi-auto-import] Error processing icon "${iconName}": ${error.message}`);
+              }
+            });
+            
+            // If we have exactly one icon, we can transform the component
+            if (processedIcons.length === 1) {
+              const { iconIdentifier } = processedIcons[0];
+              
+              // Replace name="iconName" with path={iconIdentifier}
+              const pathAttr = t.jsxAttribute(
+                t.jsxIdentifier('path'),
+                t.jsxExpressionContainer(t.identifier(iconIdentifier))
+              );
+              
+              // Remove the name attribute and add the path attribute
+              node.openingElement.attributes = node.openingElement.attributes
+                .filter(attr => !(
+                  t.isJSXAttribute(attr) && 
+                  t.isJSXIdentifier(attr.name) && 
+                  attr.name.name === 'name'
+                ))
+                .concat(pathAttr);
+              
+              debugLog(`[mdi-auto-import] Transformed Icon component: name="${processedIcons[0].iconName}" -> path={${iconIdentifier}}`);
+            } else if (processedIcons.length > 1) {
+              // For multiple possible icons (like conditionals), we add all imports but don't transform
+              debugLog(`[mdi-auto-import] Found multiple possible icons (${processedIcons.length}), adding imports but not transforming component`);
+              console.warn(`[mdi-auto-import] Found conditional icon usage at ${path.node.loc ? `${path.node.loc.start.line}:${path.node.loc.start.column}` : 'unknown location'}. All possible icons will be imported, but the component will not be auto-transformed. Consider manual transformation if needed.`);
+            }
+          } else {
+            debugLog('[mdi-auto-import] No icon names found');
+          }
+        }
+      }
+    }
+  };
+};