Merge pull request #116 from theKashey/type-friends

Migrate to TypeScript and Refactor All The Things

Author: theKashey

.gitignore

@@ -2,4 +2,6 @@ node_modules/
 /lib/
 /dist/
 .DS_Store
-.nyc_output
+.nyc_output
+yarn-error.log
+*.tgz

.nvmrc

@@ -0,0 +1 @@
+8.5.0

.travis.yml

@@ -0,0 +1,9 @@
+language: node_js
+node_js:
+  - '8'
+cache: yarn
+script:
+  - yarn
+  - yarn test:ci
+notifications:
+  email: false

README.md

@@ -4,9 +4,9 @@
   <img src="./assets/imported-logo.png" alt="imported components" width="409" align="center">
   <br/>
   <br/>
-   SSR-friendly code splitting made easier for any platform.
+   SSR-friendly code splitting compatible with any platform.
   <br/>
-   Deliver a better experience with a single import.
+   Deliver a better experience within a single import.
   <br/>
   <br/>
 

_tests/__fixtures__/babel/node/actual.js …ests__/__fixtures__/babel/node/actual.js_tests/__fixtures__/babel/node/actual.js renamed to __tests__/__fixtures__/babel/node/actual.js _tests/__fixtures__/babel/node/actual.js renamed to __tests__/__fixtures__/babel/node/actual.js

@@ -0,0 +1,48 @@
+import {transform} from '@babel/core'
+import {join} from 'path'
+import {readdirSync, statSync, readFileSync} from 'fs';
+
+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;
+  },
+  webpack: (code: string) => {
+    const result = transform(code, {
+      presets: ['@babel/preset-react'],
+      plugins: [require.resolve('../dist/es5/babel')]
+    });
+
+    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',
+    );
+
+    it(`works with ${folderName}`, () => {
+      const result = testPlugin[folderName](actual)
+      expect(result.trim()).toBe(expected.trim())
+    })
+  })
+})

__tests__/__fixtures__/babel/node/expected.js

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import {mount} from 'enzyme';
+import loader from '../src/HOC';
+import {ImportedComponent} from '../src/Component';
+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);
+
+      const wrapper = mount(<Component payload={42}/>);
+
+      expect(wrapper.find(TargetComponent)).toHaveLength(0)
+      setImmediate(() => {
+        wrapper.update();
+        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);
+      const ref = React.createRef();
+      mount(<Component payload={42} ref={ref}/>);
+
+      setImmediate(() => {
+        expect(ref.current).not.toBe(null);
+        done();
+      });
+    });
+  });
+
+  describe("SSR", () => {
+
+    it('should precache Components', async () => {
+      const TargetComponent = ({payload}) => <div>{payload}</div>;
+      const LoadingComponent = () => <div>loading</div>;
+      const loader = toLoadable(() => Promise.resolve(TargetComponent));
+      await loader.load();
+
+      const wrapper = mount(
+        <ImportedComponent
+          loadable={loader}
+          LoadingComponent={LoadingComponent}
+          forwardProps={{payload: 42}}
+        />
+      );
+      expect(wrapper.find(LoadingComponent)).toHaveLength(0);
+      expect(wrapper.find(TargetComponent).html()).toContain('42');
+    });
+  });
+});