migration to TS

.gitignore

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

.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

__tests__/babel.spec.ts

@@ -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/cjs/babel'), 'dynamic-import-node'],
+    });
+
+    return result.code;
+  },
+  webpack: (code: string) => {
+    const result = transform(code, {
+      presets: ['@babel/preset-react'],
+      plugins: [require.resolve('../dist/cjs/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__/componentLoader.spec.tsx

@@ -0,0 +1,60 @@
+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.skip('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)).toBe(undefined);
+      setImmediate(() => {
+        wrapper.update();
+        expect(wrapper.find(TargetComponent)).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', (done) => {
+      const TargetComponent = ({payload}) => <div>{payload}</div>;
+      const LoadingComponent = () => <div>loading</div>;
+      const loader = toLoadable(() => Promise.resolve(TargetComponent));
+
+      setImmediate(() => {
+
+        const wrapper = mount(
+          <ImportedComponent
+            loadable={loader}
+            LoadingComponent={LoadingComponent}
+            forwardProps={{payload: 42}}
+          />
+        );
+        expect(wrapper.find(LoadingComponent)).toEqual(null);
+        expect(wrapper.find(TargetComponent)).toContain('42');
+        done();
+      });
+    });
+  });
+});

__tests__/loadable.spec.ts

@@ -0,0 +1,63 @@
+import {getLoadable, importMatch} from "../src/loadable";
+
+describe('getLoadable', () => {
+  const importedWrapper = (_: any, b: any) => b;
+
+  it('cache test - should use mark', () => {
+    const l1 = getLoadable(() => importedWrapper('imported_mark1_component', Promise.resolve(42)));
+    const l2 = getLoadable(() => importedWrapper('imported_mark1_component', Promise.resolve(42)));
+
+    expect(l1).toEqual(l2)
+  });
+
+  it('cache test - no mark present', () => {
+    const l1 = getLoadable(() => Promise.resolve(42));
+    const l2 = getLoadable(() => Promise.resolve(42));
+
+    expect(l1).not.toEqual(l2)
+  });
+});
+
+describe('importMatch', () => {
+  it('standard', () => {
+    expect(
+      importMatch(`() => importedWrapper('imported_mark1_component', Promise.resolve(TargetComponent)), true)`)
+    ).toEqual(['mark1']);
+  });
+
+  it('webpack', () => {
+    expect(
+      importMatch(`() => importedWrapper('imported_mark1_component', __webpack_require__.e(/*! import() */ 0).then(__webpack_require__.bind(null, /*! ./components/Another */ "./app/components/Another.tsx")))`)
+    ).toEqual(['mark1']);
+  });
+
+  it('webpack-prod', () => {
+    expect(
+      importMatch(`() => importedWrapper('imported_mark1_component',__webpack_require__.e(/*! import() */ 0).then(__webpack_require__.bind(null, /*! ./components/Another */ "./app/components/Another.tsx")))`)
+    ).toEqual(['mark1']);
+  });
+
+  it('functional', () => {
+    expect(importMatch(`"function loadable() {
+        return importedWrapper('imported_1ubbetg_component', __webpack_require__.e(/*! import() | namedChunk-1 */ "namedChunk-1").then(__webpack_require__.t.bind(null, /*! ./DeferredRender */ "./src/DeferredRender.js", 7)));
+      }"`)).toEqual(['1ubbetg']);
+  });
+
+  it('parcel', () => {
+    expect(importMatch(`function _() {
+        return importedWrapper('imported_mark1_component', require("_bundle_loader")(require.resolve('./HelloWorld3')));
+    }`)).toEqual(['mark1']);
+  });
+
+  it('ie11 uglify', () => {
+    expect(importMatch(`function _() {
+        var t = 'imported_mark1_component';
+    }`)).toEqual(['mark1']);
+  });
+
+  it('multiple imports in one line', () => {
+    expect(importMatch(`function _() {
+        "imported_1pn9k36_component", blablabla- importedWrapper("imported_-1556gns_component")
+    }`)).toEqual(['1pn9k36', '-1556gns']);
+  })
+});