fix: use file extensions in all imports

Author: nolimits4web

.eslintrc.js

@@ -63,16 +63,19 @@ module.exports = {
       files: ['**/*.jsx', '**/*.js', '**/*.ts'],
       extends: ['plugin:react/recommended', 'airbnb-base', 'plugin:prettier/recommended'],
       plugins: ['react'],
-      rules: { ...rules },
+      rules: {
+        ...rules,
+        'import/extensions': [2, { js: 'always', jsx: 'always', json: 'always' }],
+      },
     },
     {
       files: ['**/*.jsx', 'src/react/shared/*.js'],
       rules: {
         ...rules,
         'import/no-unresolved': ['off'],
         'import/no-extraneous-dependencies': ['off'],
-        'import/extensions': ['off'],
         'no-dupe-keys': ['off'],
+        'import/extensions': [2, { js: 'always' }],
       },
     },
     // Core
@@ -84,8 +87,10 @@ module.exports = {
         ...rules,
         'react/no-unknown-property': ['off'],
         'react/jsx-key': ['off'],
+        'import/extensions': [2, { js: 'always' }],
       },
     },
+
     // REACT KITCHEN_SINK
     {
       files: ['kitchen-sink/react/src/**/*.jsx', 'kitchen-sink/react/src/**/*.js'],

gulpfile.js

@@ -1 +1 @@
-require('./scripts/gulpfile');
+require('./scripts/gulpfile.js');

kitchen-sink/core/index.html

@@ -10,7 +10,7 @@
   <meta name="theme-color" content="#fff">
   <meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap:">
   <title>Framework7</title>
-  <link rel="stylesheet" href="../../packages/core/framework7-bundle.min.css">
+  <link rel="stylesheet" href="../../build/core/framework7-bundle.css">
   <link rel="stylesheet" href="css/app.css">
   <link rel="apple-touch-icon" href="img/f7-icon-square.png">
   <link rel="icon" href="img/f7-icon.png">
@@ -104,7 +104,7 @@
     </div>
     <div class="view view-main view-init safe-areas" data-master-detail-breakpoint="768" data-url="/"></div>
   </div>
-  <script src="../../packages/core/framework7-bundle.min.js"></script>
+  <script src="../../build/core/framework7-bundle.js"></script>
   <script src="js/routes.js"></script>
   <script src="js/store.js"></script>
   <script src="js/app.js"></script>

kitchen-sink/react/src/app.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { App, Panel, View } from 'framework7-react';
-import routes from './routes';
-import store from './store';
+import routes from './routes.js';
+import store from './store.js';
 
 export default () => {
   let theme = 'auto';

scripts/build-clean.js

@@ -1,6 +1,6 @@
 /* eslint import/no-extraneous-dependencies: ["error", {"devDependencies": true}] */
 const exec = require('exec-sh');
-const getOutput = require('./get-output');
+const getOutput = require('./get-output.js');
 
 async function buildClean(project, cb) {
   if (process.env.NODE_ENV === 'development' && project !== 'core') {

scripts/build-core-components.js

@@ -5,8 +5,8 @@
 const fsNative = require('fs');
 const path = require('path');
 const glob = require('glob');
-const getOutput = require('./get-output');
-const fs = require('./utils/fs-extra');
+const getOutput = require('./get-output.js');
+const fs = require('./utils/fs-extra.js');
 
 function base64Encode(file) {
   // read binary data

scripts/build-core-js.js

@@ -10,10 +10,10 @@ const { default: babel } = require('@rollup/plugin-babel');
 const { nodeResolve } = require('@rollup/plugin-node-resolve');
 const { minify } = require('terser');
 const commonjs = require('@rollup/plugin-commonjs');
-const getConfig = require('./get-core-config');
-const banner = require('./banners/core');
-const getOutput = require('./get-output');
-const fs = require('./utils/fs-extra');
+const getConfig = require('./get-core-config.js');
+const banner = require('./banners/core.js');
+const getOutput = require('./get-output.js');
+const fs = require('./utils/fs-extra.js');
 
 let cache;
 async function modular({ components }) {
@@ -36,7 +36,7 @@ async function modular({ components }) {
       .replace('//INSTALL_COMPONENTS\n', '')
       .replace(
         '//IMPORT_HELPERS',
-        "import request from './shared/request';\nimport * as utils from './shared/utils';\nimport { getSupport } from './shared/get-support';\nimport { getDevice } from './shared/get-device';",
+        "import request from './shared/request.js';\nimport * as utils from './shared/utils.js';\nimport { getSupport } from './shared/get-support.js';\nimport { getDevice } from './shared/get-device.js';",
       )
       .replace(
         '//NAMED_EXPORT',
@@ -61,7 +61,7 @@ async function modular({ components }) {
         comps
           .map(
             (component) =>
-              `import ${component.capitalized} from './components/${component.name}/${component.name}';`,
+              `import ${component.capitalized} from './components/${component.name}/${component.name}.js';`,
           )
           .join('\n'),
       )
@@ -71,7 +71,7 @@ async function modular({ components }) {
       )
       .replace(
         '//IMPORT_HELPERS',
-        "import request from './shared/request';\nimport * as utils from './shared/utils';\nimport { getSupport } from './shared/get-support';\nimport { getDevice } from './shared/get-device';",
+        "import request from './shared/request.js';\nimport * as utils from './shared/utils.js';\nimport { getSupport } from './shared/get-support.js';\nimport { getDevice } from './shared/get-device.js';",
       )
       .replace(
         '//NAMED_EXPORT',
@@ -159,7 +159,7 @@ async function umdBundle({ components } = {}) {
         '//IMPORT_COMPONENTS': components
           .map(
             (component) =>
-              `import ${component.capitalized} from './components/${component.name}/${component.name}';`,
+              `import ${component.capitalized} from './components/${component.name}/${component.name}.js';`,
           )
           .join('\n'),
         '//INSTALL_COMPONENTS': components.map((component) => component.capitalized).join(',\n  '),

scripts/build-core-lazy-components.js

@@ -11,13 +11,13 @@ const { nodeResolve } = require('@rollup/plugin-node-resolve');
 const commonjs = require('@rollup/plugin-commonjs');
 const replace = require('@rollup/plugin-replace');
 const { minify } = require('terser');
-const less = require('./utils/less');
-const autoprefixer = require('./utils/autoprefixer');
-const cleanCSS = require('./utils/clean-css');
-const getConfig = require('./get-core-config');
-const getOutput = require('./get-output');
-const coreComponents = require('./core-components-list');
-const fs = require('./utils/fs-extra');
+const less = require('./utils/less.js');
+const autoprefixer = require('./utils/autoprefixer.js');
+const cleanCSS = require('./utils/clean-css.js');
+const getConfig = require('./get-core-config.js');
+const getOutput = require('./get-output.js');
+const coreComponents = require('./core-components-list.js');
+const fs = require('./utils/fs-extra.js');
 
 const intro = `
 function framework7ComponentLoader(Framework7, Framework7AutoInstallComponent) {

scripts/build-core-styles.js

@@ -5,13 +5,13 @@
 
 const path = require('path');
 const glob = require('glob');
-const less = require('./utils/less');
-const autoprefixer = require('./utils/autoprefixer');
-const cleanCSS = require('./utils/clean-css');
-const getConfig = require('./get-core-config');
-const getOutput = require('./get-output');
-const banner = require('./banners/core');
-const fs = require('./utils/fs-extra');
+const less = require('./utils/less.js');
+const autoprefixer = require('./utils/autoprefixer.js');
+const cleanCSS = require('./utils/clean-css.js');
+const getConfig = require('./get-core-config.js');
+const getOutput = require('./get-output.js');
+const banner = require('./banners/core.js');
+const fs = require('./utils/fs-extra.js');
 
 // Copy LESS
 function copyLess(config, components, cb) {

scripts/build-core-typings.js

@@ -5,8 +5,8 @@
 
 const path = require('path');
 const glob = require('glob');
-const getOutput = require('./get-output');
-const fs = require('./utils/fs-extra');
+const getOutput = require('./get-output.js');
+const fs = require('./utils/fs-extra.js');
 
 function capitalize(name) {
   return name