refactor(frontend): rename .es6 to .js

.editorconfig

@@ -9,7 +9,7 @@ insert_final_newline = true
 trim_trailing_whitespace = true
 
 # 2 spaces - frontend files mostly
-[*.{es6,js,jsx,ts,tsx,coffee,scss,css,html,hbs,json,md,yml}]
+[*.{js,jsx,ts,tsx,coffee,scss,css,html,hbs,json,md,yml}]
 indent_size = 2
 
 # 4 spaces - python and others

.gitignore

@@ -8,7 +8,6 @@ misc
 jsapp/compiled
 jsapp/tmp
 jsapp/js/libs/xlform.js
-jsapp/js/refactored.es6
 *sublime-*
 ~*
 *.orig

.storybook/main.js

@@ -32,7 +32,7 @@ module.exports = {
     config.plugins.push(new webpack.ProvidePlugin({$: 'jquery'}));
     config.module.rules.push({
       resolve: {
-        extensions: ['.jsx', '.js', '.es6', '.coffee', '.ts', '.tsx', '.scss'],
+        extensions: ['.jsx', '.js', '.coffee', '.ts', '.tsx', '.scss'],
         alias: {
           app: path.join(__dirname, '../app'),
           jsapp: path.join(__dirname, '../jsapp'),

jsapp/jest/unit.config.ts

@@ -10,11 +10,11 @@ import {defaults} from 'jest-config';
 
 const config: Config = {
   // Naming convention (*.tests.*)
-  testMatch: ['**/?(*.)+(tests).(js|jsx|ts|tsx|es6|coffee)'],
+  testMatch: ['**/?(*.)+(tests).(js|jsx|ts|tsx|coffee)'],
 
   // Where to find tests. <rootDir> = 'kpi/jsapp/jest'
   roots: [
-    '<rootDir>/../js/',      // unit tests    🛠️ 'jsapp/js/**/*.tests.{ts,es6}'
+    '<rootDir>/../js/',      // unit tests    🛠️ 'jsapp/js/**/*.tests.ts'
     '<rootDir>/../../test/', // xlform/coffee ☕ 'test/**/*.tests.coffee'
   ],
 
@@ -30,11 +30,11 @@ const config: Config = {
   },
 
   // Extensions to try in order (for import statements with no extension)
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'es6', 'coffee'],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'coffee'],
 
   // Transformers (SWC for JS/TS, CoffeeScript for .coffee)
   transform: {
-    '^.+\\.(js|jsx|ts|tsx|es6)$': '@swc/jest',
+    '^.+\\.(js|jsx|ts|tsx)$': '@swc/jest',
     '^.+\\.coffee$': '<rootDir>/coffeeTransformer.js',
   },
 

jsapp/js/actions.es6 → jsapp/js/actions.js

@@ -4,7 +4,7 @@
  *
  * You can observe action result through Reflux callbacks in your component, or
  * more preferably (where applicable) use the update eveont of one of the stores
- * from `jsapp/js/stores.es6`
+ * from `jsapp/js/stores.js`
  */
 
 import alertify from 'alertifyjs';

jsapp/js/bemComponents.ts

@@ -86,12 +86,12 @@ bem.TableMeta__bulkOptions = makeBem(bem.TableMeta, 'bulk-options');
 bem.CollectionsWrapper = makeBem(null, 'collections-wrapper');
 
 bem.FormView = makeBem(null, 'form-view');
-// used in header.es6
+// used in header.js
 bem.FormView__title = makeBem(bem.FormView, 'title');
 bem.FormView__name = makeBem(bem.FormView, 'name');
 bem.FormView__description = makeBem(bem.FormView, 'description');
 bem.FormView__subs = makeBem(bem.FormView, 'subs');
-// end used in header.es6
+// end used in header.js
 bem.FormView__sidetabs = makeBem(bem.FormView, 'sidetabs');
 
 bem.FormView__label = makeBem(bem.FormView, 'label');

jsapp/js/components/common/wrappedSelect.tsx

@@ -15,7 +15,7 @@ type WrappedSelectProps = Props & {
 
 /**
  * Adds error displaying to the Select component. Largely cribbed from
- * `components/dataAttachments/connectProjects.es6` file.
+ * `components/dataAttachments/connectProjects.js` file.
  */
 class WrappedSelect extends React.Component<WrappedSelectProps> {
   render() {

jsapp/js/components/map/map.marker-colors.scss

@@ -23,7 +23,7 @@
 }
 
 /******************************************************/
-/* color sets defined in mapSettings.es6 (a, b, c, d) */
+/* color sets defined in mapSettings.js (a, b, c, d) */
 /******************************************************/
 
 // set A generated with http://tools.medialab.sciences-po.fr/iwanthue/

jsapp/js/components/submissions/tableConstants.ts

@@ -89,7 +89,7 @@ export const TEXT_FILTER_QUESTION_TYPES: AnyRowTypeName[] = [
   QuestionTypeName.range,
   QuestionTypeName.rank,
   QuestionTypeName.score,
-  // TODO: for now there is no code in `table.es6` that makes the choices from
+  // TODO: for now there is no code in `table.js` that makes the choices from
   // file available there, so we fallback to text filter
   QuestionTypeName.select_multiple_from_file,
   QuestionTypeName.select_one_from_file,

jsapp/js/components/submissions/tableStore.ts

@@ -25,7 +25,7 @@ export interface TableStoreData {
 }
 
 /**
- * NOTE: tableStore should be handling all data required by table.es6, but as
+ * NOTE: tableStore should be handling all data required by table.js, but as
  * this would mean a huge refactor (and most probably dropping react-table),
  * we will stick to providing a one way interface for changing things in asset
  * plus some utility functions.

jsapp/js/constants.ts

@@ -229,8 +229,8 @@ type QuestionTypes = {
  *   - isRowSpecialLabelHolder in assetUtils.ts
  *   - renderQuestionTypeIcon in assetUtils.ts
  * 5. If question doesn't hold data, update:
- *   - getDisplayData in bulkEditSubmissionsForm.es6
- *   - getDisplayedColumns in table.es6
+ *   - getDisplayData in bulkEditSubmissionsForm.js
+ *   - getDisplayedColumns in table.js
  * 6. Update renderResponseData in submissionDataTable.tsx
  * 7. Update getSubmissionDisplayData in submissionUtils.ts
  * 8. If it's media type update renderAttachment in submissionDataTable.tsx

jsapp/js/dataInterface.ts

@@ -1,6 +1,6 @@
 /**
  * The only file that is making calls to Backend. You shouldn't use it directly,
- * but through proper actions in `jsapp/js/actions.es6`.
+ * but through proper actions in `jsapp/js/actions.js`.
  *
  * NOTE: In future all the calls from here will be moved to appropriate stores.
  */
@@ -918,7 +918,7 @@ export interface ValidationStatusResponse {
 }
 
 // TODO: this should be moved to some better place, like
-// `…/actions/submissions.es6` after moving it to TypeScript
+// `…/actions/submissions.js` after moving it to TypeScript
 export interface GetSubmissionsOptions {
   uid: string;
   pageSize?: number;

jsapp/js/mixins.tsx

@@ -261,7 +261,7 @@ const mixins: MixinsObject = {
     // indication when the loading starts and when ends.
     componentWillUpdate(newProps: any) {
       if (this.props.params?.uid !== newProps.params?.uid) {
-        // This case is used by other components (header.es6 is one such component)
+        // This case is used by other components (header.js is one such component)
         // in a not clear way to gain a data on new asset.
         actions.resources.loadAsset({id: newProps.params.uid});
       }

jsapp/js/pageState.store.ts

@@ -18,7 +18,7 @@ export interface PageStateStoreState {
 // TODO:
 // This is some old weird store that is responsible for two things:
 // 1. toggling mobile menu - should be moved to some other place
-// 2. handling modal from `bigModal.es6` - should be moved somewhere near the modal files
+// 2. handling modal from `bigModal.js` - should be moved somewhere near the modal files
 class PageStateStore extends Reflux.Store {
   state: PageStateStoreState = {
     assetNavExpanded: false,

jsapp/js/stores.d.ts

@@ -1,4 +1,4 @@
-// TODO: either change whole `stores.es6` to `stores.ts` or crete a type
+// TODO: either change whole `stores.js` to `stores.ts` or crete a type
 // definition for a store you need.
 export namespace stores {
   const tags: any;

jsapp/js/utils.ts

@@ -198,7 +198,7 @@ declare global {
     log: () => void;
 
     // For legacy use. Instead, use `import * as Sentry from '@sentry/react';`.
-    // See note on window.Raven in main.es6
+    // See note on window.Raven in main.js
     Raven?: Sentry.BrowserClient;
   }
 }

kpi/management/commands/makemessages.py

@@ -13,6 +13,6 @@ def handle(self, *args, **options):
         options['ignore_patterns'].append('jsapp/compiled*')
         options['ignore_patterns'].append('staticfiles*')
         if options['domain'] == 'djangojs':
-            options['extensions'] = ['js', 'tsx', 'ts', 'es6']
+            options['extensions'] = ['js', 'tsx', 'ts']
 
         super().handle(*args, **options)

kpi/templates/base.html

@@ -34,6 +34,6 @@
   {% if google_analytics_token %}
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id={{google_analytics_token}}"></script>
-    <!-- The rest of the setup is in main.es6 file -->
+    <!-- The rest of the setup is in main.js file -->
   {% endif %}
 {% endblock %}

kpi/templates/index.html

@@ -47,14 +47,14 @@
 {% endblock %}
 
 {% block body %}
-  {# Here the `/jsapp/js/main.es6` file will create and inject some HTML element, so that React SPA would render inside of it. #}
+  {# Here the `/jsapp/js/main.js` file will create and inject some HTML element, so that React SPA would render inside of it. #}
 
   {# We load the main js file here, not in the head, because we need the body element to exist in order to inject stuff into it with JS. #}
   {% render_bundle 'app' 'js' %}
 
   {% if google_analytics_token %}
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id={{google_analytics_token}}"></script>
-    <!-- The rest of the GA setup is in `/jsapp/js/main.es6` file -->
+    <!-- The rest of the GA setup is in `/jsapp/js/main.js` file -->
   {% endif %}
 {% endblock %}

package.json

@@ -208,7 +208,7 @@
     "watch": "npm run hint watch && webpack-dev-server --config webpack/dev.server.js",
     "test": "jest --config ./jsapp/jest/unit.config.ts",
     "test-watch": "jest --config ./jsapp/jest/unit.config.ts --watch",
-    "lint": "eslint 'jsapp/js/**/*.{es6,js,jsx,ts,tsx}' --ext .es6,.js,.jsx,.ts,.tsx",
+    "lint": "eslint 'jsapp/js/**/*.{js,jsx,ts,tsx}' --ext .js,.jsx,.ts,.tsx",
     "lint-coffee": "coffeelint -f ./coffeelint.json jsapp/xlform/src test",
     "lint-styles": "stylelint 'jsapp/**/*.{css,scss}' --ip jsapp/compiled --ip jsapp/fonts",
     "check-types": "tsc -p tsconfig.json --noEmit",

scripts/upload_translatable_strings.bash

@@ -8,7 +8,7 @@ echo 'Extracting translatable strings from Django code.'
 (cd ${KOBOFORM_SRC_DIR} && python manage.py makemessages --locale en)
 
 echo 'Extracting translatable strings from client code.'
-(cd ${KOBOFORM_SRC_DIR} && python manage.py makemessages --locale en --domain djangojs --extension es6)
+(cd ${KOBOFORM_SRC_DIR} && python manage.py makemessages --locale en --domain djangojs --extension js)
 
 echo 'Uploading translatable strings to Transifex.'
 (cd ${KOBOFORM_SRC_DIR} && tx push -s)

webpack/dev.server.js

@@ -26,7 +26,7 @@ let devConfig = WebpackCommon({
     },
   },
   entry: {
-    app: ['./jsapp/js/main.es6'],
+    app: ['./jsapp/js/main.js'],
   },
   output: {
     library: 'KPI',

webpack/prod.config.js

@@ -29,7 +29,7 @@ const prodConfig = WebpackCommon({
     ],
   },
   entry: {
-    app: './jsapp/js/main.es6',
+    app: './jsapp/js/main.js',
   },
   output: {
     path: path.resolve(__dirname, '../jsapp/compiled/'),

webpack/webpack.common.js

@@ -39,7 +39,7 @@ const commonOptions = {
   module: {
     rules: [
       {
-        test: /\.(js|jsx|es6)$/,
+        test: /\.(js|jsx)$/,
         exclude: /node_modules/,
         use: [swcLoader],
       },
@@ -94,7 +94,7 @@ const commonOptions = {
     ],
   },
   resolve: {
-    extensions: ['.jsx', '.js', '.es6', '.coffee', '.ts', '.tsx', '.scss'],
+    extensions: ['.jsx', '.js', '.coffee', '.ts', '.tsx', '.scss'],
     alias: {
       app: path.join(__dirname, '../app'),
       jsapp: path.join(__dirname, '../jsapp'),