swc-plugin-component-annotate 1.0.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2020 Engineering at FullStory
+Copyright (c) 2024 Sentry
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,188 @@
+# SWC Plugin: React Component Annotate
+
+A SWC plugin that automatically annotates React components with data attributes for component tracking and debugging.
+
+## Overview
+
+This plugin transforms React components by adding data attributes that help with tracking and debugging. It automatically identifies React components (function components, arrow function components, and class components) and adds the following attributes:
+
+- `data-component`: The component name (added to root elements)
+- `data-element`: The element/component name (added to non-HTML elements)
+- `data-source-file`: The source filename
+
+## Features
+
+- ✅ **Function Components**: `function MyComponent() { ... }`
+- ✅ **Arrow Function Components**: `const MyComponent = () => { ... }`
+- ✅ **Class Components**: `class MyComponent extends Component { ... }`
+- ✅ **React Fragments**: Supports `Fragment`, `React.Fragment`, and `<>` syntax
+- ✅ **Nested Components**: Properly handles component hierarchies
+- ✅ **React Native Support**: Uses camelCase attributes when configured
+- ✅ **Configurable**: Ignore specific components, annotate fragments, etc.
+
+## Installation
+
+```bash
+npm install --save-dev swc-plugin-react-component-annotate
+# or
+yarn add -D swc-plugin-react-component-annotate
+```
+
+## Usage
+
+### Basic Configuration
+
+Add the plugin to your `.swcrc` configuration:
+
+```json
+{
+  "jsc": {
+    "experimental": {
+      "plugins": [
+        ["swc-plugin-react-component-annotate", {}]
+      ]
+    }
+  }
+}
+```
+
+### Configuration Options
+
+```json
+{
+  "jsc": {
+    "experimental": {
+      "plugins": [
+        ["swc-plugin-react-component-annotate", {
+          "native": false,
+          "annotate-fragments": false,
+          "ignored-components": ["MyIgnoredComponent"],
+          "component-attr": "data-sentry-component",
+          "element-attr": "data-sentry-element",
+          "source-file-attr": "data-sentry-source-file"
+        }]
+      ]
+    }
+  }
+}
+```
+
+#### Options
+
+- **`native`** (boolean, default: `false`): Use React Native attribute names (camelCase)
+  - `false`: `data-component`, `data-element`, `data-source-file`
+  - `true`: `dataComponent`, `dataElement`, `dataSourceFile`
+
+- **`annotate-fragments`** (boolean, default: `false`): Whether to annotate fragment children with component information
+
+- **`ignored-components`** (array, default: `[]`): List of component names to skip during annotation
+
+- **`component-attr`** (string, optional): Custom component attribute name (overrides default and native setting)
+
+- **`element-attr`** (string, optional): Custom element attribute name (overrides default and native setting)
+
+- **`source-file-attr`** (string, optional): Custom source file attribute name (overrides default and native setting)
+
+### Sentry Integration
+
+To use Sentry-specific attribute names for compatibility with Sentry's tracking:
+
+```json
+{
+  "jsc": {
+    "experimental": {
+      "plugins": [
+        ["swc-plugin-react-component-annotate", {
+          "component-attr": "data-sentry-component",
+          "element-attr": "data-sentry-element",
+          "source-file-attr": "data-sentry-source-file"
+        }]
+      ]
+    }
+  }
+}
+```
+
+This will generate attributes like:
+```jsx
+<div data-sentry-component="MyComponent" data-sentry-source-file="MyComponent.jsx">
+  <CustomButton data-sentry-element="CustomButton" data-sentry-source-file="MyComponent.jsx">
+    Click me
+  </CustomButton>
+</div>
+```
+
+## Examples
+
+### Input
+
+```jsx
+import React from 'react';
+
+const MyComponent = () => {
+  return (
+    <div>
+      <h1>Hello World</h1>
+      <button>Click me</button>
+    </div>
+  );
+};
+
+export default MyComponent;
+```
+
+### Output
+
+```jsx
+import React from 'react';
+
+const MyComponent = () => {
+  return (
+    <div data-component="MyComponent" data-source-file="MyComponent.jsx">
+      <h1>Hello World</h1>
+      <button>Click me</button>
+    </div>
+  );
+};
+
+export default MyComponent;
+```
+
+### Class Component Example
+
+```jsx
+// Input
+class MyClassComponent extends Component {
+  render() {
+    return <div><h1>Hello from class</h1></div>;
+  }
+}
+
+// Output
+class MyClassComponent extends Component {
+  render() {
+    return <div data-component="MyClassComponent" data-source-file="MyComponent.jsx">
+      <h1>Hello from class</h1>
+    </div>;
+  }
+}
+```
+
+### React Native Example
+
+With `"native": true`:
+
+```jsx
+// Output
+const MyComponent = () => {
+  return (
+    <View dataComponent="MyComponent" dataSourceFile="MyComponent.jsx">
+      <Text>Hello World</Text>
+    </View>
+  );
+};
+```
+
+## Related
+
+- [Sentry Babel Component Annotate Plugin](https://github.com/getsentry/sentry-javascript-bundler-plugins/tree/main/packages/babel-plugin-component-annotate)

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "swc-plugin-component-annotate",
+  "version": "1.0.0",
+  "description": "Use SWC to automatically annotate React components with data attributes for component tracking",
+  "author": "scttcper <scttcper@gmail.com>",
+  "license": "MIT",
+  "keywords": [
+    "swc-plugin",
+    "swc"
+  ],
+  "scripts": {
+    "build": "cargo build --target wasm32-unknown-unknown",
+    "test": "cargo test",
+    "prepack": "cp -rf target/wasm32-unknown-unknown/release/swc_plugin_component_annotate.wasm ."
+  },
+  "main": "swc_plugin_component_annotate.wasm",
+  "files": [
+    "src",
+    "swc_plugin_component_annotate.wasm"
+  ],
+  "homepage": "https://github.com/scttcper/swc-plugin-component-annotate#readme",
+  "repository": "scttcper/swc-plugin-component-annotate",
+  "bugs": {
+    "url": "https://github.com/scttcper/swc-plugin-component-annotate/issues"
+  },
+  "devDependencies": {},
+  "peerDependencies": {},
+  "packageManager": "pnpm@10.11.0"
+}

package/src/config.rs

@@ -0,0 +1,60 @@
+use serde::{Deserialize, Serialize};
+
+#[derive(Debug, Clone, Serialize, Deserialize, Default)]
+pub struct PluginConfig {
+    /// Use React Native attribute names (camelCase) instead of web attributes (kebab-case)
+    #[serde(default)]
+    pub native: bool,
+
+    /// Whether to annotate fragment children with component information
+    #[serde(default, rename = "annotate-fragments")]
+    pub annotate_fragments: bool,
+
+    /// List of component names to ignore during annotation
+    #[serde(default, rename = "ignored-components")]
+    pub ignored_components: Vec<String>,
+
+    /// Custom component attribute name (overrides default and native setting)
+    #[serde(default, rename = "component-attr")]
+    pub component_attr: Option<String>,
+
+    /// Custom element attribute name (overrides default and native setting)
+    #[serde(default, rename = "element-attr")]
+    pub element_attr: Option<String>,
+
+    /// Custom source file attribute name (overrides default and native setting)
+    #[serde(default, rename = "source-file-attr")]
+    pub source_file_attr: Option<String>,
+}
+
+impl PluginConfig {
+    pub fn component_attr_name(&self) -> &str {
+        if let Some(ref custom) = self.component_attr {
+            custom
+        } else if self.native {
+            "dataComponent"
+        } else {
+            "data-component"
+        }
+    }
+
+    pub fn element_attr_name(&self) -> &str {
+        if let Some(ref custom) = self.element_attr {
+            custom
+        } else if self.native {
+            "dataElement"
+        } else {
+            "data-element"
+        }
+    }
+
+    pub fn source_file_attr_name(&self) -> &str {
+        if let Some(ref custom) = self.source_file_attr {
+            custom
+        } else if self.native {
+            "dataSourceFile"
+        } else {
+            "data-source-file"
+        }
+    }
+}

package/src/constants.rs

@@ -0,0 +1,125 @@
+use rustc_hash::FxHashSet;
+
+pub fn default_ignored_elements() -> FxHashSet<&'static str> {
+    let mut set = FxHashSet::default();
+    let elements = [
+        "a",
+        "abbr",
+        "address",
+        "area",
+        "article",
+        "aside",
+        "audio",
+        "b",
+        "base",
+        "bdi",
+        "bdo",
+        "blockquote",
+        "body",
+        "br",
+        "button",
+        "canvas",
+        "caption",
+        "cite",
+        "code",
+        "col",
+        "colgroup",
+        "data",
+        "datalist",
+        "dd",
+        "del",
+        "details",
+        "dfn",
+        "dialog",
+        "div",
+        "dl",
+        "dt",
+        "em",
+        "embed",
+        "fieldset",
+        "figure",
+        "footer",
+        "form",
+        "h1",
+        "h2",
+        "h3",
+        "h4",
+        "h5",
+        "h6",
+        "head",
+        "header",
+        "hgroup",
+        "hr",
+        "html",
+        "i",
+        "iframe",
+        "img",
+        "input",
+        "ins",
+        "kbd",
+        "keygen",
+        "label",
+        "legend",
+        "li",
+        "link",
+        "main",
+        "map",
+        "mark",
+        "menu",
+        "menuitem",
+        "meter",
+        "nav",
+        "noscript",
+        "object",
+        "ol",
+        "optgroup",
+        "option",
+        "output",
+        "p",
+        "param",
+        "pre",
+        "progress",
+        "q",
+        "rb",
+        "rp",
+        "rt",
+        "rtc",
+        "ruby",
+        "s",
+        "samp",
+        "script",
+        "section",
+        "select",
+        "small",
+        "source",
+        "span",
+        "strong",
+        "style",
+        "sub",
+        "summary",
+        "sup",
+        "table",
+        "tbody",
+        "td",
+        "template",
+        "textarea",
+        "tfoot",
+        "th",
+        "thead",
+        "time",
+        "title",
+        "tr",
+        "track",
+        "u",
+        "ul",
+        "var",
+        "video",
+        "wbr",
+    ];
+
+    for element in elements {
+        set.insert(element);
+    }
+
+    set
+}

package/src/jsx_utils.rs

@@ -0,0 +1,74 @@
+use std::borrow::Cow;
+use swc_core::ecma::ast::*;
+
+/// Check if a JSX element is a React Fragment
+#[inline]
+pub fn is_react_fragment(element: &JSXElementName) -> bool {
+    match element {
+        JSXElementName::Ident(ident) => ident.sym.as_ref() == "Fragment",
+        JSXElementName::JSXMemberExpr(member_expr) => {
+            // Check for React.Fragment
+            if let JSXObject::Ident(obj) = &member_expr.obj {
+                if obj.sym.as_ref() == "React" {
+                    return member_expr.prop.sym.as_ref() == "Fragment";
+                }
+            }
+            false
+        }
+        _ => false,
+    }
+}
+
+/// Extract the element name from a JSX element
+#[inline]
+pub fn get_element_name(element: &JSXElementName) -> Cow<str> {
+    match element {
+        JSXElementName::Ident(ident) => Cow::Borrowed(ident.sym.as_ref()),
+        JSXElementName::JSXMemberExpr(member_expr) => {
+            Cow::Owned(get_member_expression_name(member_expr))
+        }
+        JSXElementName::JSXNamespacedName(namespaced) => {
+            Cow::Owned(format!("{}:{}", namespaced.ns.sym, namespaced.name.sym))
+        }
+    }
+}
+
+/// Recursively build the name for member expressions (e.g., "Components.UI.Button")
+fn get_member_expression_name(member_expr: &JSXMemberExpr) -> String {
+    let obj_name = match &member_expr.obj {
+        JSXObject::Ident(ident) => ident.sym.as_ref(),
+        JSXObject::JSXMemberExpr(nested_member) => {
+            return format!(
+                "{}.{}",
+                get_member_expression_name(nested_member),
+                member_expr.prop.sym
+            );
+        }
+    };
+
+    format!("{}.{}", obj_name, member_expr.prop.sym)
+}
+
+/// Check if a JSX element already has an attribute with the given name
+#[inline]
+pub fn has_attribute(element: &JSXOpeningElement, attr_name: &str) -> bool {
+    element.attrs.iter().any(|attr| {
+        matches!(attr, JSXAttrOrSpread::JSXAttr(jsx_attr) 
+            if matches!(&jsx_attr.name, JSXAttrName::Ident(ident) 
+                if ident.sym.as_ref() == attr_name))
+    })
+}
+
+/// Create a JSX attribute with a string value
+#[inline]
+pub fn create_jsx_attr(name: &str, value: &str) -> JSXAttrOrSpread {
+    JSXAttrOrSpread::JSXAttr(JSXAttr {
+        span: Default::default(),
+        name: JSXAttrName::Ident(IdentName::new(name.into(), Default::default())),
+        value: Some(JSXAttrValue::Lit(Lit::Str(Str {
+            span: Default::default(),
+            value: value.into(),
+            raw: None,
+        }))),
+    })
+}

package/src/lib.rs

@@ -0,0 +1,329 @@
+pub mod config;
+mod constants;
+mod jsx_utils;
+
+use config::PluginConfig;
+use jsx_utils::*;
+use rustc_hash::FxHashSet;
+use swc_core::{
+    common::FileName,
+    ecma::{
+        ast::*,
+        visit::{noop_visit_mut_type, VisitMut, VisitMutWith},
+    },
+    plugin::{plugin_transform, proxies::TransformPluginProgramMetadata},
+};
+
+pub struct ReactComponentAnnotateVisitor {
+    config: PluginConfig,
+    source_file_name: Option<String>,
+    current_component_name: Option<String>,
+    ignored_elements: FxHashSet<&'static str>,
+    ignored_components_set: FxHashSet<String>,
+}
+
+impl ReactComponentAnnotateVisitor {
+    pub fn new(config: PluginConfig, filename: &FileName) -> Self {
+        let source_file_name = extract_filename(filename);
+
+        // Pre-compute ignored components set for O(1) lookups
+        let ignored_components_set: FxHashSet<String> =
+            config.ignored_components.iter().cloned().collect();
+
+        Self {
+            config,
+            source_file_name,
+            current_component_name: None,
+            ignored_elements: constants::default_ignored_elements(),
+            ignored_components_set,
+        }
+    }
+
+    #[inline]
+    fn should_ignore_component(&self, component_name: &str) -> bool {
+        self.ignored_components_set.contains(component_name)
+    }
+
+    #[inline]
+    fn should_ignore_element(&self, element_name: &str) -> bool {
+        self.ignored_elements.contains(element_name)
+    }
+
+    fn process_jsx_element(&mut self, element: &mut JSXElement) {
+        self.add_attributes_to_element(&mut element.opening);
+
+        // Process children
+        for child in &mut element.children {
+            match child {
+                JSXElementChild::JSXElement(jsx_element) => {
+                    // Children don't get component name, only element name
+                    let prev_component = self.current_component_name.take();
+                    jsx_element.visit_mut_with(self);
+                    self.current_component_name = prev_component;
+                }
+                JSXElementChild::JSXFragment(jsx_fragment) => {
+                    let prev_component = if self.config.annotate_fragments {
+                        // Keep component name for first child of fragment
+                        self.current_component_name.clone()
+                    } else {
+                        self.current_component_name.take()
+                    };
+                    jsx_fragment.visit_mut_with(self);
+                    self.current_component_name = prev_component;
+                }
+                _ => {}
+            }
+        }
+    }
+
+    fn process_jsx_fragment(&mut self, fragment: &mut JSXFragment) {
+        // Process children
+        let mut first_element_processed = false;
+        for child in &mut fragment.children {
+            match child {
+                JSXElementChild::JSXElement(jsx_element) => {
+                    if self.config.annotate_fragments && !first_element_processed {
+                        // First child of fragment gets component name
+                        first_element_processed = true;
+                        jsx_element.visit_mut_with(self);
+                    } else {
+                        // Other children don't get component name
+                        let prev_component = self.current_component_name.take();
+                        jsx_element.visit_mut_with(self);
+                        self.current_component_name = prev_component;
+                    }
+                }
+                JSXElementChild::JSXFragment(jsx_fragment) => {
+                    let prev_component =
+                        if self.config.annotate_fragments && !first_element_processed {
+                            first_element_processed = true;
+                            self.current_component_name.clone()
+                        } else {
+                            self.current_component_name.take()
+                        };
+                    jsx_fragment.visit_mut_with(self);
+                    self.current_component_name = prev_component;
+                }
+                _ => {}
+            }
+        }
+    }
+
+    fn add_attributes_to_element(&self, opening_element: &mut JSXOpeningElement) {
+        let element_name = get_element_name(&opening_element.name);
+
+        // Skip React fragments
+        if is_react_fragment(&opening_element.name) {
+            return;
+        }
+
+        // Check if component should be ignored
+        if let Some(ref component_name) = self.current_component_name {
+            if self.should_ignore_component(component_name) {
+                return;
+            }
+        }
+
+        // Check if element should be ignored
+        if self.should_ignore_component(&element_name) {
+            return;
+        }
+
+        let is_ignored_html = self.should_ignore_element(&element_name);
+
+        // Add element attribute (for non-HTML elements or when component name differs)
+        if !is_ignored_html
+            && !has_attribute(opening_element, self.config.element_attr_name())
+            && (self.config.component_attr_name() != self.config.element_attr_name()
+                || self.current_component_name.is_none())
+        {
+            opening_element.attrs.push(create_jsx_attr(
+                self.config.element_attr_name(),
+                &element_name,
+            ));
+        }
+
+        // Add component attribute (only for root elements)
+        if let Some(ref component_name) = self.current_component_name {
+            if !has_attribute(opening_element, self.config.component_attr_name()) {
+                opening_element.attrs.push(create_jsx_attr(
+                    self.config.component_attr_name(),
+                    component_name,
+                ));
+            }
+        }
+
+        // Add source file attribute
+        if let Some(ref source_file) = self.source_file_name {
+            if (self.current_component_name.is_some() || !is_ignored_html)
+                && !has_attribute(opening_element, self.config.source_file_attr_name())
+            {
+                opening_element.attrs.push(create_jsx_attr(
+                    self.config.source_file_attr_name(),
+                    source_file,
+                ));
+            }
+        }
+    }
+
+    fn find_jsx_in_function_body(&mut self, func: &mut Function, component_name: String) {
+        if let Some(body) = &mut func.body {
+            self.current_component_name = Some(component_name);
+
+            // Look for return statements
+            for stmt in &mut body.stmts {
+                if let Stmt::Return(return_stmt) = stmt {
+                    if let Some(arg) = &mut return_stmt.arg {
+                        self.process_return_expression(arg);
+                    }
+                }
+            }
+
+            self.current_component_name = None;
+        }
+    }
+
+    fn process_return_expression(&mut self, expr: &mut Expr) {
+        match expr {
+            Expr::JSXElement(jsx_element) => {
+                jsx_element.visit_mut_with(self);
+            }
+            Expr::JSXFragment(jsx_fragment) => {
+                jsx_fragment.visit_mut_with(self);
+            }
+            Expr::Cond(cond_expr) => {
+                // Handle ternary expressions
+                self.process_return_expression(&mut cond_expr.cons);
+                self.process_return_expression(&mut cond_expr.alt);
+            }
+            Expr::Paren(paren_expr) => {
+                self.process_return_expression(&mut paren_expr.expr);
+            }
+            _ => {}
+        }
+    }
+}
+
+impl VisitMut for ReactComponentAnnotateVisitor {
+    noop_visit_mut_type!();
+
+    fn visit_mut_fn_decl(&mut self, func_decl: &mut FnDecl) {
+        let component_name = func_decl.ident.sym.to_string();
+        self.find_jsx_in_function_body(&mut func_decl.function, component_name);
+        func_decl.visit_mut_children_with(self);
+    }
+
+    fn visit_mut_var_declarator(&mut self, var_declarator: &mut VarDeclarator) {
+        // Handle arrow functions and function expressions assigned to variables
+        if let Pat::Ident(ident) = &var_declarator.name {
+            let component_name = ident.id.sym.to_string();
+
+            if let Some(init) = &mut var_declarator.init {
+                match init.as_mut() {
+                    Expr::Arrow(arrow_func) => {
+                        self.current_component_name = Some(component_name);
+
+                        match arrow_func.body.as_mut() {
+                            BlockStmtOrExpr::BlockStmt(block) => {
+                                // Look for return statements in block
+                                for stmt in &mut block.stmts {
+                                    if let Stmt::Return(return_stmt) = stmt {
+                                        if let Some(arg) = &mut return_stmt.arg {
+                                            self.process_return_expression(arg);
+                                        }
+                                    }
+                                }
+                            }
+                            BlockStmtOrExpr::Expr(expr) => {
+                                // Direct expression return
+                                self.process_return_expression(expr);
+                            }
+                        }
+
+                        self.current_component_name = None;
+                    }
+                    Expr::Fn(func_expr) => {
+                        self.find_jsx_in_function_body(&mut func_expr.function, component_name);
+                    }
+                    _ => {}
+                }
+            }
+        }
+
+        var_declarator.visit_mut_children_with(self);
+    }
+
+    fn visit_mut_class_decl(&mut self, class_decl: &mut ClassDecl) {
+        let component_name = class_decl.ident.sym.to_string();
+
+        // Look for render method
+        for member in &mut class_decl.class.body {
+            if let ClassMember::Method(method) = member {
+                if let PropName::Ident(ident) = &method.key {
+                    if ident.sym.as_ref() == "render" {
+                        if let Some(body) = &mut method.function.body {
+                            self.current_component_name = Some(component_name.clone());
+
+                            // Look for return statements
+                            for stmt in &mut body.stmts {
+                                if let Stmt::Return(return_stmt) = stmt {
+                                    if let Some(arg) = &mut return_stmt.arg {
+                                        self.process_return_expression(arg);
+                                    }
+                                }
+                            }
+
+                            self.current_component_name = None;
+                        }
+                    }
+                }
+            }
+        }
+
+        class_decl.visit_mut_children_with(self);
+    }
+
+    fn visit_mut_jsx_element(&mut self, jsx_element: &mut JSXElement) {
+        self.process_jsx_element(jsx_element);
+    }
+
+    fn visit_mut_jsx_fragment(&mut self, jsx_fragment: &mut JSXFragment) {
+        self.process_jsx_fragment(jsx_fragment);
+    }
+}
+
+fn extract_filename(filename: &FileName) -> Option<String> {
+    match filename {
+        FileName::Real(path) => path
+            .file_name()
+            .and_then(|name| name.to_str())
+            .map(|s| s.to_string()),
+        FileName::Custom(custom) => {
+            if custom.contains('/') {
+                custom.split('/').last().map(|s| s.to_string())
+            } else if custom.contains('\\') {
+                custom.split('\\').last().map(|s| s.to_string())
+            } else {
+                Some(custom.clone())
+            }
+        }
+        _ => None,
+    }
+}
+
+#[plugin_transform]
+pub fn process_transform(
+    mut program: Program,
+    metadata: TransformPluginProgramMetadata,
+) -> Program {
+    let config = if let Some(config_str) = metadata.get_transform_plugin_config() {
+        serde_json::from_str::<PluginConfig>(&config_str).unwrap_or_default()
+    } else {
+        PluginConfig::default()
+    };
+
+    let mut visitor =
+        ReactComponentAnnotateVisitor::new(config, &FileName::Custom("unknown".to_string()));
+    program.visit_mut_with(&mut visitor);
+    program
+}