Commit f1717dc7 authored by Filipa Lacerda's avatar Filipa Lacerda

Removes ifEE example for JS code

parent a67b1c17
...@@ -933,47 +933,27 @@ import mixin from 'ee_else_ce/path/mixin'; ...@@ -933,47 +933,27 @@ import mixin from 'ee_else_ce/path/mixin';
- Since we are using the async loading to check which component to load, we'd still use the component's name, check [this example](#child-component-only-used-in-ee). - Since we are using the async loading to check which component to load, we'd still use the component's name, check [this example](#child-component-only-used-in-ee).
* **EE extra HTML** * **EE extra HTML**
- For the templates that have extra HTML in EE we will use the `ifEE` mixin with the `v-if` directive. - For the templates that have extra HTML in EE we should move it into a new component and use the `ee_else_ce` dynamic import
- You can either use the `template` tag as a wrapper or directly in the element, if there is only one element to be rendered in EE:
```html
<template v-if="ifEE">
<p>Several</p>
<p>non wrapper</p>
<p>elements</p>
<p>that are rendered</p>
<p>in EE only</p>
</template>
```
```html
<ul v-if="ifEE">
<li>One wrapped</li>
<li>element</li>
<li>that is rendered</li>
<li>in EE only</li>
</template>
```
### Non Vue Files ### Non Vue Files
For regular JS files, the approach is similar. For regular JS files, the approach is similar.
1. We will keep using the [`ee_else_ce`](https://docs.gitlab.com/ee/development/ee_features.html#javascript-code-in-assetsjavascripts) helper, this means that EE only code should be inside the `ee/` folder. 1. We will keep using the [`ee_else_ce`](https://docs.gitlab.com/ee/development/ee_features.html#javascript-code-in-assetsjavascripts) helper, this means that EE only code should be inside the `ee/` folder.
1. An EE file should be created with the EE only code, and it should extend the CE counterpart. 1. An EE file should be created with the EE only code, and it should extend the CE counterpart.
1. For code inside functions that can't be extended, we will use an `if` statement with the `ifEE` helper 1. For code inside functions that can't be extended, the code should be moved into a new file and we should use `ee_else_ce` helper:
##### Example: ##### Example:
```javascript ```javascript
import { ifEE } from '~/lib/utils/common_utils' import eeCode from 'ee_else_ce/ee_code';
if (ifEE) {
$('.js-import-git-toggle-button').on('click', () => {
const $projectMirror = $('#project_mirror');
$projectMirror.attr('disabled', !$projectMirror.attr('disabled')); function test() {
}); const test = 'a';
}
eeCode();
return test;
}
``` ```
## SCSS code in `assets/stylesheets` ## SCSS code in `assets/stylesheets`
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment