# Namespaces

## What is this

**Namespace** marks a place that is available for the plugin system, and hence can be modified by plugins. In Mosaic-friendly application, it is advised to have as many namespaces as possible.

This directive accepts a **string** value, as shown below (as opposed to directives which accept object parts).

{% tabs %}
{% tab title="class" %}

```javascript
/** @namespace Some/Namespace/Here */
class A {
    ...
}
```

{% endtab %}

{% tab title="function" %}

```javascript
/** @namespace Some/Namespace/Here */
function some() {
    ...
}
```

{% endtab %}

{% tab title="arrow" %}

```javascript
/** @namespace Some/Namespace/Here */
const some = () => {
    ...
}

fetch(something).then(
    /** @namespace Some/Other/Namespace */
    (data) => ...
);
```

{% endtab %}

{% tab title="export" %}

```javascript
/** @namespace Some/Namespace/Here */
export const some = () => {
    ...
}

/** @namespace Some/Other/Here */
export class Other {
    ...
}

/** @namespace Some/Other/More */
export default class OneMore {
    ...
}
```

{% endtab %}
{% endtabs %}

Mosaic started in [ScandiPWA](https://github.com/scandipwa/scandipwa) - extensible React storefront. As you can see, **each** and every class and function throughout the application **has a namespace** and hence is absolutely **plugin-friendly**.

Plugins use namespaces to **intercept** operations with things the namespaces belong to.

## How does it work

For namespace comments to work, Mosaic requires `babel-plugin-mosaic-middleware-decorator` plugin. It can be found [here](https://github.com/tilework/mosaic/tree/master/core/babel-plugin-mosaic-middleware-decorator). This plugin processes the code during the build and transforms the logic as seen below.

{% hint style="warning" %}
If you don't use the Babel plugin mentioned above - the namespace comments will not work properly. Be aware of that - if you are willing to use Typescript, you will need to migrate build process to [Webpack + Babel](/getting-started/webpack.md) stack (or [Create React App](/getting-started/create-react-app.md)). 

All of the instructions in the Getting Started guides handle this for you.
{% endhint %}

{% tabs %}
{% tab title="Before" %}

```javascript
/** @namespace Some/Namespace */
class SomeClass extends SomeParent {
    ...
} 
```

{% endtab %}

{% tab title="After" %}

```javascript
/** #namespace Some/Namespace */
const SomeClass = Mosaic.middleware(
    class SomeClass extends Mosaic.Extensible(SomeParent) {
        ...
    },
    'Some/Namespace'
);
```

{% endtab %}
{% endtabs %}

Hence, it is possible to use Mosaic without Babel, but strongly not recommended.

{% hint style="info" %}
Any package containing`@namespace` magic comments **must** have a `mosaic` block declared in its package.json file. Otherwise,`@namespace` magic comments will not be handled correctly during the build time, hence will not work.
{% endhint %}

##


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.mosaic.js.org/develop-an-extension/namespaces.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.