Making UtilScript Optional And dynamically importing libphonenumber.j…

…s if utilscript is not there (#224) utilScript optional
patw0929 · Jul 15, 2018 · bb09300 · bb09300
1 parent bda8e94
commit bb09300
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 9 deletions.
diff --git a/__tests__/FlagDropDown.test.js b/__tests__/FlagDropDown.test.js
@@ -65,8 +65,10 @@ describe('FlagDropDown', function () { // eslint-disable-line func-names
     };
     const subject = await this.makeSubject();
 
-    expect(subject.state().countryCode).toBe('jp');
-    window.localStorage.clear();
+    subject.instance().utilsScriptDeferred.then(() => {
+      expect(subject.state().countryCode).toBe('jp');
+      window.localStorage.clear();
+    });
   });
 
   it('should has .separate-dial-code class when with separateDialCode = true', () => {
@@ -160,7 +162,9 @@ describe('FlagDropDown', function () { // eslint-disable-line func-names
     };
     const subject = await this.makeSubject();
 
-    expect(subject.state().countryCode).toBe('jp');
+    subject.instance().utilsScriptDeferred.then(() => {
+      expect(subject.state().countryCode).toBe('jp');
+    });
   });
 
   describe('with original ReactTestUtils', () => {

diff --git a/config/babel.dev.js b/config/babel.dev.js
@@ -6,9 +6,17 @@ module.exports = {
   // This is a feature of `babel-loader` for webpack (not Babel itself).
   // It enables caching results in OS temporary directory for faster rebuilds.
   cacheDirectory: true,
+  env: {
+    test: {
+      plugins: [
+        // to enable dynamic import in tests
+        require.resolve('babel-plugin-dynamic-import-node')
+      ]
+    }
+  },
   presets: [
     // Latest stable ECMAScript features
-    ['latest'],
+    ['env'],
     // JSX, Flow
     require.resolve('babel-preset-react'),
   ],
@@ -17,6 +25,8 @@ module.exports = {
     require.resolve('babel-plugin-transform-class-properties'),
     // { ...todo, completed: true }
     require.resolve('babel-plugin-transform-object-rest-spread'),
+    // to enable import() [dynamic import]
+    require.resolve('babel-plugin-syntax-dynamic-import'),
     // function* () { yield 42; yield 43; }
     [require.resolve('babel-plugin-transform-regenerator'), {
       // Async functions are converted to generators by babel-preset-latest

diff --git a/config/babel.prod.js b/config/babel.prod.js
@@ -5,7 +5,7 @@ module.exports = {
   babelrc: false,
   presets: [
     // Latest stable ECMAScript features
-    ['latest', { es2015: { 'modules': false } }],
+    ['env', { es2015: { 'modules': false } }],
     // JSX, Flow
     require.resolve('babel-preset-react')
   ],
@@ -36,5 +36,7 @@ module.exports = {
     // * https://phabricator.babeljs.io/search/query/pCNlnC2xzwzx/
     // TODO: Enable again when these issues are resolved.
     // require.resolve('babel-plugin-transform-react-constant-elements')
+    // to enable import() [dynamic import]
+    require.resolve('babel-plugin-syntax-dynamic-import'),
   ]
 };
diff --git a/package.json b/package.json
@@ -41,7 +41,9 @@
     "babel-plugin-transform-react-remove-prop-types": "^0.4.13",
     "babel-plugin-transform-regenerator": "^6.21.0",
     "babel-plugin-transform-runtime": "^6.15.0",
-    "babel-preset-latest": "^6.16.0",
+    "babel-plugin-dynamic-import-node": "^2.0.0",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
+    "babel-preset-env": "^1.1.8",
     "babel-preset-react": "^6.16.0",
     "babel-preset-react-app": "^2.0.1",
     "babel-runtime": "^6.20.0",

diff --git a/src/components/IntlTelInputApp.js b/src/components/IntlTelInputApp.js
@@ -512,7 +512,10 @@ class IntlTelInputApp extends Component {
         });
       }
     } else {
-      this.utilsScriptDeferred.resolve();
+      import('../libphonenumber').then(() => {
+        this.loadUtils();
+        this.utilsScriptDeferred.resolve();
+      });
     }
 
     if (this.tempCountry === 'auto') {

diff --git a/src/example.js b/src/example.js
@@ -79,7 +79,6 @@ class DemoComponent extends Component {
           value={ this.state.phone1 }
           geoIpLookup={ lookup }
           css={ ['intl-tel-input', 'form-control'] }
-          utilsScript="libphonenumber.js"
           format
         />
         <div>Phone Number: {this.state.phone1 }</div>
@@ -91,7 +90,6 @@ class DemoComponent extends Component {
           defaultCountry={ 'jp' }
           value={ this.state.phone2 }
           css={ ['intl-tel-input', 'form-control'] }
-          utilsScript="libphonenumber.js"
         />
         <div>Phone Number: {this.state.phone2}</div>
       </div>