> For the complete documentation index, see [llms.txt](https://docs.mosaic.js.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.mosaic.js.org/develop-an-extension/namespaces.md).

# 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 %}

##