fix: fix imports extensions

.eslintrc.js

@@ -29,5 +29,6 @@ module.exports = {
     'react/prop-types': 'off',
     'react/jsx-props-no-spreading': 'off',
     'no-console': 'off',
+    'import/extensions': [2, { js: 'always', jsx: 'always', json: 'always' }],
   },
 };

build/core.js

@@ -1,7 +1,7 @@
-const copyUtils = require('./shared/copy-utils');
-const copyFonts = require('./shared/copy-fonts');
-const copySCSS = require('./shared/copy-scss');
-const scss = require('./shared/scss');
+const copyUtils = require('./shared/copy-utils.js');
+const copyFonts = require('./shared/copy-fonts.js');
+const copySCSS = require('./shared/copy-scss.js');
+const scss = require('./shared/scss.js');
 
 function build() {
   copyUtils();

build/svelte.js

@@ -1,5 +1,6 @@
 const fs = require('fs');
 const path = require('path');
+// eslint-disable-next-line
 const svelte = require('svelte/compiler');
 const babel = require('@babel/core');
 

demo/react/App.js

@@ -4,7 +4,7 @@ import {
   SkeletonBlock,
   SkeletonImage,
   SkeletonAvatar,
-} from '../../src/react';
+} from '../../src/react/index.js';
 
 const App = () => {
   const [effect, setEffect] = useState(null);

demo/react/main.js

@@ -5,6 +5,6 @@ import 'normalize.css';
 import '../../src/scss/skeleton-elements.scss';
 import '../demo.scss';
 
-import App from './App';
+import App from './App.js';
 
 ReactDOM.render(React.createElement(App), document.getElementById('app'));

src/react/SkeletonAvatar.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import multiplySvgPoints from '../utils/multiply-svg-points';
+import multiplySvgPoints from '../utils/multiply-svg-points.js';
 
 const SkeletonAvatar = ({
   tag: Tag = 'span',

src/react/SkeletonImage.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import multiplySvgPoints from '../utils/multiply-svg-points';
+import multiplySvgPoints from '../utils/multiply-svg-points.js';
 
 const SkeletonImage = ({
   tag: Tag = 'span',

src/react/index.js

@@ -1,6 +1,6 @@
-import SkeletonBlock from './SkeletonBlock';
-import SkeletonText from './SkeletonText';
-import SkeletonImage from './SkeletonImage';
-import SkeletonAvatar from './SkeletonAvatar';
+import SkeletonBlock from './SkeletonBlock.js';
+import SkeletonText from './SkeletonText.js';
+import SkeletonImage from './SkeletonImage.js';
+import SkeletonAvatar from './SkeletonAvatar.js';
 
 export { SkeletonBlock, SkeletonText, SkeletonImage, SkeletonAvatar };

src/svelte/SkeletonAvatar.svelte

@@ -23,7 +23,7 @@
   <slot />
 </span>
 <script>
-  import multiplySvgPoints from '../utils/multiply-svg-points';
+  import multiplySvgPoints from '../utils/multiply-svg-points.js';
 
   export let size = 48;
 

src/svelte/SkeletonImage.svelte

@@ -22,7 +22,7 @@
   <slot />
 </span>
 <script>
-  import multiplySvgPoints from '../utils/multiply-svg-points';
+  import multiplySvgPoints from '../utils/multiply-svg-points.svelte';
 
   export let width = 1200;
   export let height = 600;

src/vue/SkeletonAvatar.js

@@ -1,5 +1,5 @@
 import { h } from 'vue';
-import multiplySvgPoints from '../utils/multiply-svg-points';
+import multiplySvgPoints from '../utils/multiply-svg-points.js';
 
 export default {
   name: 'skeleton-avatar',

src/vue/SkeletonImage.js

@@ -1,5 +1,5 @@
 import { h } from 'vue';
-import multiplySvgPoints from '../utils/multiply-svg-points';
+import multiplySvgPoints from '../utils/multiply-svg-points.js';
 
 export default {
   name: 'skeleton-image',

src/vue/index.js

@@ -1,6 +1,6 @@
-import SkeletonBlock from './SkeletonBlock';
-import SkeletonText from './SkeletonText';
-import SkeletonImage from './SkeletonImage';
-import SkeletonAvatar from './SkeletonAvatar';
+import SkeletonBlock from './SkeletonBlock.js';
+import SkeletonText from './SkeletonText.js';
+import SkeletonImage from './SkeletonImage.js';
+import SkeletonAvatar from './SkeletonAvatar.js';
 
 export { SkeletonBlock, SkeletonText, SkeletonImage, SkeletonAvatar };