IBX-8365: Use babel to automatic refactor frontend code

.eslintrc.json

@@ -1,3 +1,3 @@
 {
-  "extends": "eslint-config-ibexa/eslint"
+    "extends": "eslint-config-ibexa/eslint"
 }

babel.config.js

@@ -0,0 +1,24 @@
+const { getModifyMethod } = require('./js/helpers.js');
+
+module.exports = function (api) {
+    const modifyPlugins = getModifyMethod('plugins');
+
+    const ibexaPlugins = [
+        './js/ibexa-rename-ez-global.js',
+        './js/ibexa-rename-variables.js',
+        './js/ibexa-rename-string-values.js',
+        './js/ibexa-rename-trans-id.js',
+        './js/ibexa-rename-in-translations.js',
+    ];
+    const finalPlugins = modifyPlugins(ibexaPlugins);
+
+    api.cache(true);
+
+    const presets = [];
+    const plugins = ['@babel/plugin-syntax-jsx', ...finalPlugins];
+
+    return {
+        presets,
+        plugins,
+    };
+};

js/README.md

@@ -0,0 +1,193 @@
+# How to run
+```
+REMOVEEZ_CONFIG=./config.js INPUT=input OUTPUT=output RUN_ESLINT=1  yarn --cwd ./vendor/ibexa/rector/js transform
+```
+`--cwd` argument should point to directory where JS transform module is installed (for example `./vendor/ibexa/rector/js`).
+
+## Customizable variables
+### REMOVEEZ_CONFIG
+**Required**: no
+
+**Default**: `removeez.config.js`/`none`
+
+Points to configuration file, where you can modify plugins and transformers config. 
+
+### INPUT
+**Required**: no
+
+**Default**: `src/bundle/Resources/public`
+
+Used to point which directory should be parsed.
+
+### OUTPUT
+**Required**: no
+
+**Default**: copied from `INPUT`
+
+Used to point where files should be saved.
+
+### RUN_ESLINT
+**Required**: no
+
+**Default**: 0
+
+Eslint parsing is switched off by default, because older code (below 4.1) was using obsolete eslint config, and in between 4.1 and current version there were different iterations, this package uses `eslint-config-ibexa` in version **1.1.1**
+
+## Configuration file
+If you need to modify default plugins or configuration for rules, put `removeez.config.js` in main directory.
+```
+module.exports = {
+    plugins: (plugins) => {
+        // modify enabled plugins
+
+        return plugins;
+    },
+    config: (config) => {
+        // modify plugins config
+
+        return config;
+    }
+};
+```
+
+## Plugins config
+Example config:
+```
+{
+    "ibexa-rename-string-values": {
+        "ezform-error": "ibexaform-error",
+        "ezselection-settings": {
+            "to": "ibexaselection-settings",
+            "fullMatch": true
+        },
+        "(^|\\s)\\.ez-": {
+            "to": ".ibexa-",
+            "regexp": true
+        },
+        "ibexa-field-edit--ez([A-Za-z0-9]+)": {
+            "to": "ibexa-field-edit--ibexa$1",
+            "regexp": true
+        }
+    }
+}
+```
+Plugin config is kept as object with key being plugin name (`ibexa-rename-string-values` in example).
+
+Property key inside this object is string that is supposed to be changed, can be either standard string or regex (`(^|\\s)\\.ez-`, `ezform-error"` in example)
+
+### Shorthand expression
+
+`"ezform-error": "ibexaform-error"` - change all `ezform-error` occurences to `ibexaform-error`
+
+### Full object config properties
+
+`"to": "ibexaselection-settings"` - what string should be replaced with
+
+`"regexp": true/false` - should config use regexp to match original value
+
+`"fullMatch": true` - should match only full values, using example config, this won't change `ezselection-settings__field` as `ezselection-settings` is not exact match.
+
+
+## Default plugins
+### Rename eZ global variables
+This plugin changes all `eZ` variables to `ibexa`.
+
+**Plugin name in config:** `./ibexa-rename-ez-global.js`
+
+**Example config:** none
+
+### Rename variables
+This plugin allows to change any variable to any other value.
+
+**Plugin name in config:** `./ibexa-rename-variables.js`
+
+**Example config:**
+```
+{
+    "^Ez(.*?)Validator$": {
+        "to": "Ibexa$1Validator",
+        "regexp": true
+    },
+    "^EZ_": {
+        "to": "IBEXA_",
+        "regexp": true
+    }
+}
+```
+
+**Example output:**
+
+`class EzBooleanValidator extends eZ.BaseFieldValidator` => `class IbexaBooleanValidator extends ibexa.BaseFieldValidator`
+
+`const EZ_INPUT_SELECTOR = 'ezselection-settings__input';` => `const IBEXA_INPUT_SELECTOR = 'ezselection-settings__input';`
+
+### Rename string values
+This plugin allows to change any string value - except translations. Can be used to transform selectors etc.
+
+**Plugin name in config:** `./ibexa-rename-string-values.js`
+
+**Example config:**
+```
+{
+    "(^|\\s)\\.ez-": {
+        "to": ".ibexa-",
+        "regexp": true
+    },
+    "ibexa-field-edit--ez([A-Za-z0-9]+)": {
+        "to": "ibexa-field-edit--ibexa$1",
+        "regexp": true
+    },
+    "ezselection-settings": "ibexaselection-settings"
+}
+```
+
+**Example output:**
+
+`const SELECTOR_FIELD = '.ez-field-edit--ezboolean';` => `const SELECTOR_FIELD = ".ibexa-field-edit--ezboolean"`
+
+`const SELECTOR_FIELD = '.ibexa-field-edit--ezboolean';` => `const SELECTOR_FIELD = '.ibexa-field-edit--ibexaboolean';`
+
+### Rename translation IDs
+This plugin allows to change translation ids. Remember to extract translations afterwards!
+
+**Plugin name in config:** `./ibexa-rename-trans-id.js`
+
+**Example config:**
+```
+{
+    "^ez": {
+        "to": "ibexa",
+        "regexp": true
+    }
+}
+```
+
+**Example output:**
+
+`'ez_boolean.limitation.pick.ez_error'` => `'ibexa_boolean.limitation.pick.ez_error'`
+
+### Rename translation strings
+This plugin allows to change translations. Remember to extract translations afterwards!
+
+**Plugin name in config:** `./ibexa-rename-in-translations.js`
+
+**Example config:**
+```
+{
+    "to": "ibexa-not-$1--show-modal",
+    "regexp": true,
+    "selectors-only": true
+}
+```
+
+**selectors-only config:** 
+
+If this property is set to `true`, this plugin changes only strings inside html tags (like classes and other html parameters). Set to `false` or remove property to change also normal strings as well.
+
+**Example output with selectors-only=true:**
+
+`/*@Desc("<p class='ez-not-error--show-modal'>Show message</p> for ez-not-error--show-modal")*/` => `/*@Desc("<p class='ibexa-not-error--show-modal'>Show message</p> for ez-not-error--show-modal")*/`
+
+**Example output with selectors-only=false:**
+
+`/*@Desc("<p class='ez-not-error--show-modal'>Show message</p> for ez-not-error--show-modal")*/` => `/*@Desc("<p class='ibexa-not-error--show-modal'>Show message</p> for ibexa-not-error--show-modal")*/`

js/config.json

@@ -0,0 +1,63 @@
+{
+    "ibexa-rename-variables": {
+        "^Ez(.*?)Validator$": {
+            "to": "Ibexa$1Validator",
+            "regexp": true
+        },
+        "^Ez(.*?)Field$": {
+            "to": "Ibexa$1Field",
+            "regexp": true
+        },
+        "_EZ_": {
+            "to": "_IBEXA_",
+            "regexp": true
+        },
+        "ez": {
+            "to": "ibexa",
+            "fullMatch": true
+        },
+        "ezSiteLocationId": {
+            "to": "ibexaSiteLocationId",
+            "fullMatch": true
+        }
+    },
+    "ibexa-rename-string-values": {
+        "\\.ez-": {
+            "to": ".ibexa-",
+            "regexp": true
+        },
+        "#ez-": {
+            "to": "#ibexa-",
+            "regexp": true
+        },
+        "^ez-": {
+            "to": "ibexa-",
+            "regexp": true
+        },
+        "^ezplatform-": {
+            "to": "ibexa-",
+            "regexp": true
+        },
+        "^ezplatform.": {
+            "to": "ibexa.",
+            "regexp": true
+        },
+        "ibexa-field-edit--ez([A-Za-z0-9]+)": {
+            "to": "ibexa-field-edit--ibexa$1",
+            "regexp": true
+        }
+    },
+    "ibexa-rename-trans-id": {
+        "^ez": {
+            "to": "ibexa",
+            "regexp": true
+        }
+    },
+    "ibexa-rename-in-translations": {
+        "ez-": {
+            "to": "ibexa-",
+            "regexp": true,
+            "selectors-only": true
+        }
+    }
+}

js/helpers.js

@@ -0,0 +1,85 @@
+const fs = require('fs');
+const path = require('path');
+
+const DEFAULT_CONFIG_FILE = 'removeez.config.js';
+
+const getModifyMethod = (method) => {
+    const { INIT_CWD, REMOVEEZ_CONFIG } = process.env;
+    const configPath = path.join(INIT_CWD, REMOVEEZ_CONFIG ?? DEFAULT_CONFIG_FILE);
+    const defaultModifyMethod = (config) => config;
+
+    if (fs.existsSync(configPath)) {
+        const modifyMethods = require(configPath);
+
+        return modifyMethods[method] ?? defaultModifyMethod;
+    }
+
+    return defaultModifyMethod;
+};
+
+const getConfig = (name) => {
+    const modifyConfig = getModifyMethod('config');
+    const configPath = path.join(__dirname, 'config.json');
+    const rawData = fs.readFileSync(configPath);
+    const parsedData = JSON.parse(rawData);
+    const modifiedData = modifyConfig(parsedData);
+    const sharedConfig = modifiedData.shared ?? {};
+    const namedConfig = modifiedData[name] ?? {};
+
+    return {
+        ...sharedConfig,
+        ...namedConfig,
+    };
+};
+
+const shouldReplace = (original, oldValue, newValueConfig) => {
+    if (newValueConfig.fullMatch) {
+        return original === oldValue;
+    } else if (newValueConfig.regexp) {
+        return !!original.match(oldValue);
+    }
+
+    return true;
+};
+
+const getValues = (oldValue, newValueConfig) => {
+    if (newValueConfig.regexp) {
+        return {
+            oldValue: new RegExp(oldValue, 'g'),
+            newValue: newValueConfig.to,
+        };
+    }
+
+    return {
+        oldValue,
+        newValue: newValueConfig.to ?? newValueConfig,
+    };
+};
+
+const traverse = (moduleConfig, originalValue, replaceData) => {
+    // should it end after first replace to avoid nested replace?
+    Object.entries(moduleConfig).forEach(([oldValueRaw, newValueConfig]) => {
+        if (shouldReplace(originalValue, oldValueRaw, newValueConfig)) {
+            const { oldValue, newValue } = getValues(oldValueRaw, newValueConfig);
+
+            replaceData(oldValue, newValue, newValueConfig);
+        }
+    });
+};
+
+const isFunctionArgument = ({ parentPath }, functionName) => {
+    if (!parentPath?.isCallExpression()) {
+        return false;
+    }
+
+    return parentPath.node.callee.property?.name === functionName;
+};
+
+module.exports = {
+    getModifyMethod,
+    getConfig,
+    shouldReplace,
+    getValues,
+    traverse,
+    isFunctionArgument,
+};

js/ibexa-rename-ez-global.js

@@ -0,0 +1,16 @@
+module.exports = function ({ types: t }) {
+    return {
+        visitor: {
+            Identifier(path) {
+                if (path.node.name === 'eZ') {
+                    path.node.name = t.toIdentifier('ibexa');
+                }
+            },
+            JSXIdentifier(path) {
+                if (path.node.name === 'eZ') {
+                    path.node.name = t.toIdentifier('ibexa');
+                }
+            },
+        },
+    };
+};