Merge pull request #157 from theKashey/lib-builder

chore: migrate to lib-builder

Author: theKashey

.size-limit.js

@@ -0,0 +1,17 @@
+module.exports = [
+  {
+    path: ['dist/es2015/index.js', 'dist/es2015/boot.js'],
+    ignore: ['tslib'],
+    limit: '3.4 KB',
+  },
+  {
+    path: 'dist/es2015/index.js',
+    ignore: ['tslib'],
+    limit: '3.1 KB',
+  },
+  {
+    path: 'dist/es2015/boot.js',
+    ignore: ['tslib'],
+    limit: '1.7 KB',
+  },
+];

.size.json

@@ -0,0 +1,17 @@
+[
+  {
+    "name": "dist/es2015/index.js, dist/es2015/boot.js",
+    "passed": true,
+    "size": 3399
+  },
+  {
+    "name": "dist/es2015/index.js",
+    "passed": true,
+    "size": 3120
+  },
+  {
+    "name": "dist/es2015/boot.js",
+    "passed": true,
+    "size": 1695
+  }
+]

__tests__/babel.spec.ts

@@ -1,48 +1,36 @@
-import {transform} from '@babel/core'
-import {join} from 'path'
-import {readdirSync, statSync, readFileSync} from 'fs';
+import { transform } from '@babel/core';
+import { readFileSync } from 'fs';
+import { join } from 'path';
 
 const FIXTURE_PATH = join(__dirname, '__fixtures__/babel');
 
-const testFolders:string[] =
-  readdirSync(FIXTURE_PATH)
-    .filter(file =>
-      statSync(join(FIXTURE_PATH, file)).isDirectory(),
-    );
-
 const testPlugin = {
   node: (code: string) => {
     const result = transform(code, {
       presets: ['@babel/preset-react'],
       plugins: [require.resolve('../dist/es5/babel'), 'dynamic-import-node'],
     });
 
-    return result.code;
+    return result!.code;
   },
   webpack: (code: string) => {
     const result = transform(code, {
       presets: ['@babel/preset-react'],
-      plugins: [require.resolve('../dist/es5/babel')]
+      plugins: [require.resolve('../dist/es5/babel')],
     });
 
-    return result.code;
-  }
+    return result!.code;
+  },
 };
 
 describe('babel', () => {
-  testFolders.forEach(folderName => {
-    const actual = readFileSync(
-      join(FIXTURE_PATH, folderName, 'actual.js'),
-      'utf8',
-    );
-    const expected = readFileSync(
-      join(FIXTURE_PATH, folderName, 'expected.js'),
-      'utf8',
-    );
+  Object.keys(testPlugin).forEach(folderName => {
+    const actual = readFileSync(join(FIXTURE_PATH, folderName, 'actual.js'), 'utf8');
+    const expected = readFileSync(join(FIXTURE_PATH, folderName, 'expected.js'), 'utf8');
 
     it(`works with ${folderName}`, () => {
-      const result = testPlugin[folderName](actual)
-      expect(result.trim()).toBe(expected.trim())
-    })
-  })
-})
+      const result = (testPlugin as any)[folderName](actual);
+      expect(result.trim()).toBe(expected.trim());
+    });
+  });
+});

__tests__/componentLoader.spec.tsx

@@ -1,32 +1,33 @@
+import '@theuiteam/lib-builder/configs/setupEnzyme';
+import { mount } from 'enzyme';
 import * as React from 'react';
-import {mount} from 'enzyme';
+
+import { ImportedComponent } from '../src/Component';
 import loader from '../src/HOC';
-import {ImportedComponent} from '../src/Component';
-import {toLoadable} from '../src/loadable';
+import { toLoadable } from '../src/loadable';
 
 describe('Async Component', () => {
-
   describe('loader', () => {
-    it('should load component', (done) => {
-      const TargetComponent = ({payload}: any) => <div>{payload}</div>;
-      const Component = loader(() => TargetComponent);
+    it('should load component', done => {
+      const TargetComponent = ({ payload }: any) => <div>{payload}</div>;
+      const Component = loader(() => Promise.resolve(TargetComponent));
 
-      const wrapper = mount(<Component payload={42}/>);
+      const wrapper = mount(<Component payload={42} />);
 
-      expect(wrapper.find(TargetComponent)).toHaveLength(0)
+      expect(wrapper.find(TargetComponent)).toHaveLength(0);
       setImmediate(() => {
         wrapper.update();
-        expect(wrapper.find(TargetComponent).html()).toContain("42");
+        expect(wrapper.find(TargetComponent).html()).toContain('42');
         wrapper.unmount();
         done();
       });
     });
 
-    it('forwardRef', (done) => {
-      const TargetComponent = React.forwardRef<any, any>(({payload}, ref) => <div ref={ref}>{payload}</div>);
-      const Component = loader(() => TargetComponent);
+    it('forwardRef', done => {
+      const TargetComponent = React.forwardRef<any, any>(({ payload }, fref) => <div ref={fref}>{payload}</div>);
+      const Component = loader(() => Promise.resolve(TargetComponent));
       const ref = React.createRef();
-      mount(<Component payload={42} ref={ref}/>);
+      mount(<Component payload={42} ref={ref} />);
 
       setImmediate(() => {
         expect(ref.current).not.toBe(null);
@@ -35,23 +36,18 @@ describe('Async Component', () => {
     });
   });
 
-  describe("SSR", () => {
-
+  describe('SSR', () => {
     it('should precache Components', async () => {
-      const TargetComponent = ({payload}) => <div>{payload}</div>;
+      const TargetComponent = ({ payload }: any) => <div>{payload}</div>;
       const LoadingComponent = () => <div>loading</div>;
-      const loader = toLoadable(() => Promise.resolve(TargetComponent));
-      await loader.load();
+      const loadable = toLoadable(() => Promise.resolve(TargetComponent));
+      await loadable.load();
 
       const wrapper = mount(
-        <ImportedComponent
-          loadable={loader}
-          LoadingComponent={LoadingComponent}
-          forwardProps={{payload: 42}}
-        />
+        <ImportedComponent loadable={loadable} LoadingComponent={LoadingComponent} forwardProps={{ payload: 42 }} />
       );
       expect(wrapper.find(LoadingComponent)).toHaveLength(0);
       expect(wrapper.find(TargetComponent).html()).toContain('42');
     });
   });
-});
+});

__tests__/module.spec.tsx

@@ -1,25 +1,25 @@
+import '@theuiteam/lib-builder/configs/setupEnzyme';
+import { mount } from 'enzyme';
 import * as React from 'react';
-import {mount} from 'enzyme';
-import {act} from "react-dom/test-utils";
+import { act } from 'react-dom/test-utils';
 
-import {importedModule, ImportedModule} from '../src/Module';
-import {done} from "../src/loadable";
+import { done } from '../src/loadable';
+import { importedModule, ImportedModule } from '../src/Module';
 
 describe('Module Component', () => {
-
   describe('hoc', () => {
     it('should load component', async () => {
       const Component = importedModule(() => Promise.resolve((x: number) => x + 42));
 
-      const wrapper = mount(<Component fallback={"loading"}>{(fn) => <span>{fn(42)}</span>}</Component>);
+      const wrapper = mount(<Component fallback={'loading'}>{fn => <span>{fn(42)}</span>}</Component>);
 
-      expect(wrapper.update().html()).toContain("loading");
+      expect(wrapper.update().html()).toContain('loading');
 
       await act(async () => {
         await done();
       });
 
-      expect(wrapper.update().html()).toContain("84");
+      expect(wrapper.update().html()).toContain('84');
     });
   });
 
@@ -28,21 +28,18 @@ describe('Module Component', () => {
       const importer = () => Promise.resolve((x: number) => x + 42);
 
       const wrapper = mount(
-        <ImportedModule
-          import={importer}
-          fallback={"loading"}
-        >
-          {(fn) => <span>{fn(42)}</span>}
+        <ImportedModule import={importer} fallback={'loading'}>
+          {fn => <span>{fn(42)}</span>}
         </ImportedModule>
       );
 
-      expect(wrapper.update().html()).toContain("loading");
+      expect(wrapper.update().html()).toContain('loading');
 
       await act(async () => {
         await done();
       });
 
-      expect(wrapper.update().html()).toContain("84");
+      expect(wrapper.update().html()).toContain('84');
     });
-  })
-});
+  });
+});