Skip to content

Commit

Permalink
fix: change mark generation principle, fixes #57
Browse files Browse the repository at this point in the history
  • Loading branch information
@theKashey
theKashey committed Jan 17, 2019
1 parent 572cc41 commit 5ad7b11
Show file tree
Hide file tree
Showing 5 changed files with 39 additions and 40 deletions.
14 changes: 7 additions & 7 deletions _tests/__fixtures__/babel/node/expected.js
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
function importedWrapper(marker, name, realImport) {
function importedWrapper(marker, realImport) {
if (typeof __deoptimization_sideEffect__ !== 'undefined') {
__deoptimization_sideEffect__(marker, name, realImport);
__deoptimization_sideEffect__(marker, realImport);
}

return realImport;
}

import imported from 'react-imported-component';

const AsyncComponent0 = imported(() => importedWrapper('imported-component', '18g2v0c', Promise.resolve().then(() => require('./MyComponent'))));
const AsyncComponent0 = imported(() => importedWrapper('imported_18g2v0c_component', Promise.resolve().then(() => require('./MyComponent'))));

const AsyncComponent1 = imported(() => importedWrapper('imported-component', '18g2v0c', Promise.resolve().then(() => require('./MyComponent'))));
const AsyncComponent1 = imported(() => importedWrapper('imported_18g2v0c_component', Promise.resolve().then(() => require('./MyComponent'))));

const AsyncComponent2 = imported(async () => await importedWrapper('imported-component', '18g2v0c', Promise.resolve().then(() => require('./MyComponent'))));
const AsyncComponent2 = imported(async () => await importedWrapper('imported_18g2v0c_component', Promise.resolve().then(() => require('./MyComponent'))));

const AsyncComponent3 = imported(() => Promise.all([importedWrapper('imported-component', '18g2v0c', Promise.resolve().then(() => require('./MyComponent'))), importedWrapper('imported-component', '18g2v0c', Promise.resolve().then(() => require('./MyComponent')))]));
const AsyncComponent3 = imported(() => Promise.all([importedWrapper('imported_18g2v0c_component', Promise.resolve().then(() => require('./MyComponent'))), importedWrapper('imported_18g2v0c_component', Promise.resolve().then(() => require('./MyComponent')))]));

const AsyncComponent4 = imported(async () => (await Promise.all([importedWrapper('imported-component', '-1qs8n90', Promise.resolve().then(() => require('./MyComponent1'))), importedWrapper('imported-component', '9j5sqq', Promise.resolve().then(() => require('./MyComponent2')))]))[0]);
const AsyncComponent4 = imported(async () => (await Promise.all([importedWrapper('imported_-1qs8n90_component', Promise.resolve().then(() => require('./MyComponent1'))), importedWrapper('imported_9j5sqq_component', Promise.resolve().then(() => require('./MyComponent2')))]))[0]);

export default AsyncComponent1;
14 changes: 7 additions & 7 deletions _tests/__fixtures__/babel/webpack/expected.js
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
function importedWrapper(marker, name, realImport) {
function importedWrapper(marker, realImport) {
if (typeof __deoptimization_sideEffect__ !== 'undefined') {
__deoptimization_sideEffect__(marker, name, realImport);
__deoptimization_sideEffect__(marker, realImport);
}

return realImport;
}

import imported from 'react-imported-component';

const AsyncComponent0 = imported(() => importedWrapper('imported-component', '18g2v0c', import( /* webpackChunkName:namedChunk */'./MyComponent')));
const AsyncComponent0 = imported(() => importedWrapper('imported_18g2v0c_component', import( /* webpackChunkName:namedChunk */'./MyComponent')));

const AsyncComponent1 = imported(() => importedWrapper('imported-component', '18g2v0c', import('./MyComponent')));
const AsyncComponent1 = imported(() => importedWrapper('imported_18g2v0c_component', import('./MyComponent')));

const AsyncComponent2 = imported(async () => await importedWrapper('imported-component', '18g2v0c', import('./MyComponent')));
const AsyncComponent2 = imported(async () => await importedWrapper('imported_18g2v0c_component', import('./MyComponent')));

const AsyncComponent3 = imported(() => Promise.all([importedWrapper('imported-component', '18g2v0c', import('./MyComponent')), importedWrapper('imported-component', '18g2v0c', import('./MyComponent'))]));
const AsyncComponent3 = imported(() => Promise.all([importedWrapper('imported_18g2v0c_component', import('./MyComponent')), importedWrapper('imported_18g2v0c_component', import('./MyComponent'))]));

const AsyncComponent4 = imported(async () => (await Promise.all([importedWrapper('imported-component', '-1qs8n90', import('./MyComponent1')), importedWrapper('imported-component', '9j5sqq', import('./MyComponent2'))]))[0]);
const AsyncComponent4 = imported(async () => (await Promise.all([importedWrapper('imported_-1qs8n90_component', import('./MyComponent1')), importedWrapper('imported_9j5sqq_component', import('./MyComponent2'))]))[0]);

export default AsyncComponent1;
36 changes: 18 additions & 18 deletions _tests/rehydrate.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ chai.use(chaiEnzyme());
describe('SSR Component', () => {
const TargetComponent = ({payload}) => <div>42 - payload</div>;

function importedWrapper(marker, name, realImport) {
function importedWrapper(marker, realImport) {
return realImport;
}

Expand All @@ -33,26 +33,26 @@ describe('SSR Component', () => {
});

it('standard', () => {
expect(importMatch(`() => importedWrapper('imported-component', 'mark1', Promise.resolve(TargetComponent)), true)`)).to.be.deep.equal(['mark1']);
expect(importMatch(`() => importedWrapper('imported_mark1_component', Promise.resolve(TargetComponent)), true)`)).to.be.deep.equal(['mark1']);
});

it('webpack', () => {
expect(importMatch(`() => importedWrapper('imported-component', 'mark1', __webpack_require__.e(/*! import() */ 0).then(__webpack_require__.bind(null, /*! ./components/Another */ "./app/components/Another.tsx")))`)).to.be.deep.equal(['mark1']);
expect(importMatch(`() => importedWrapper('imported_mark1_component', __webpack_require__.e(/*! import() */ 0).then(__webpack_require__.bind(null, /*! ./components/Another */ "./app/components/Another.tsx")))`)).to.be.deep.equal(['mark1']);
});

it('webpack-prod', () => {
expect(importMatch(`() => importedWrapper('imported-component','mark1',__webpack_require__.e(/*! import() */ 0).then(__webpack_require__.bind(null, /*! ./components/Another */ "./app/components/Another.tsx")))`)).to.be.deep.equal(['mark1']);
expect(importMatch(`() => importedWrapper('imported_mark1_component',__webpack_require__.e(/*! import() */ 0).then(__webpack_require__.bind(null, /*! ./components/Another */ "./app/components/Another.tsx")))`)).to.be.deep.equal(['mark1']);
});

it('functional', () => {
expect(importMatch(`"function loadable() {
return importedWrapper('imported-component', '1ubbetg', __webpack_require__.e(/*! import() | namedChunk-1 */ "namedChunk-1").then(__webpack_require__.t.bind(null, /*! ./DeferredRender */ "./src/DeferredRender.js", 7)));
return importedWrapper('imported_1ubbetg_component', __webpack_require__.e(/*! import() | namedChunk-1 */ "namedChunk-1").then(__webpack_require__.t.bind(null, /*! ./DeferredRender */ "./src/DeferredRender.js", 7)));
}"`)).to.be.deep.equal(['1ubbetg']);
});

it('parcel', () => {
expect(importMatch(`function _() {
return importedWrapper('imported-component', 'mark1', require("_bundle_loader")(require.resolve('./HelloWorld3')));
return importedWrapper('imported_mark1_component', require("_bundle_loader")(require.resolve('./HelloWorld3')));
}`)).to.be.deep.equal(['mark1']);
});
});
Expand Down Expand Up @@ -135,7 +135,7 @@ describe('SSR Component', () => {
describe('marks', () => {
it('SSR Marks without stream', (done) => {
expect(drainHydrateMarks()).to.have.length(0);
const loader1 = toLoadable(() => importedWrapper('imported-component', 'mark1', Promise.resolve(TargetComponent)), true);
const loader1 = toLoadable(() => importedWrapper('imported_mark1_component', Promise.resolve(TargetComponent)), true);
// await loaders to load
setTimeout(() => {
expect(drainHydrateMarks()).to.have.length(0);
Expand All @@ -150,7 +150,7 @@ describe('SSR Component', () => {

it('SSR Marks with stream', (done) => {
expect(drainHydrateMarks()).to.have.length(0);
const loader1 = toLoadable(() => importedWrapper('imported-component', 'mark1', Promise.resolve(TargetComponent)), true);
const loader1 = toLoadable(() => importedWrapper('imported_mark1_component', Promise.resolve(TargetComponent)), true);
// await loaders to load
setTimeout(() => {
expect(drainHydrateMarks()).to.have.length(0);
Expand All @@ -171,10 +171,10 @@ describe('SSR Component', () => {

it('should generate marks', (done) => {
expect(drainHydrateMarks()).to.have.length(0);
const loader1 = toLoadable(() => importedWrapper('imported-component', 'mark1', Promise.resolve(TargetComponent)), true);
const loader1 = toLoadable(() => importedWrapper('imported_mark1_component', Promise.resolve(TargetComponent)), true);
const loader2 = toLoadable(() => {
importedWrapper('imported-component', 'mark2-1', Promise.resolve(TargetComponent))
return importedWrapper('imported-component', 'mark2-2', Promise.resolve(TargetComponent));
importedWrapper('imported_mark2-1_component', Promise.resolve(TargetComponent))
return importedWrapper('imported_mark2-2_component', Promise.resolve(TargetComponent));
}, true);
const loader3 = toLoadable(() => Promise.resolve(TargetComponent), true);

Expand All @@ -195,7 +195,7 @@ describe('SSR Component', () => {

it('should render async', (done) => {
expect(drainHydrateMarks()).to.have.length(0);
const loader = toLoadable(() => importedWrapper('imported-component', 'mark1', Promise.resolve(TargetComponent)), false);
const loader = toLoadable(() => importedWrapper('imported_mark1_component', Promise.resolve(TargetComponent)), false);
setImmediate(() => {
expect(drainHydrateMarks()).to.have.length(0);
const wrapper1 = mount(<HotComponentLoader loadable={loader}/>);
Expand All @@ -211,7 +211,7 @@ describe('SSR Component', () => {

it('should render sync', (done) => {
expect(drainHydrateMarks()).to.have.length(0);
const loader = toLoadable(() => importedWrapper('imported-component', 'mark1', Promise.resolve(TargetComponent)));
const loader = toLoadable(() => importedWrapper('imported_mark1_component', Promise.resolve(TargetComponent)));
rehydrateMarks(['mark1']);
setImmediate(() => {
expect(drainHydrateMarks()).to.have.length(0);
Expand All @@ -225,9 +225,9 @@ describe('SSR Component', () => {
describe('stream marks', () => {
it('multy stream render', () => {
expect(drainHydrateMarks()).to.have.length(0);
const loader1 = toLoadable(() => importedWrapper('imported-component', 'mark1', Promise.resolve(TargetComponent)));
const loader2 = toLoadable(() => importedWrapper('imported-component', 'mark2', Promise.resolve(TargetComponent)));
const loader3 = toLoadable(() => importedWrapper('imported-component', 'mark3', Promise.resolve(TargetComponent)));
const loader1 = toLoadable(() => importedWrapper('imported_mark1_component', Promise.resolve(TargetComponent)));
const loader2 = toLoadable(() => importedWrapper('imported_mark2_component', Promise.resolve(TargetComponent)));
const loader3 = toLoadable(() => importedWrapper('imported_mark3_component', Promise.resolve(TargetComponent)));

let uid2 = 0;
let uid3 = 0;
Expand Down Expand Up @@ -266,7 +266,7 @@ describe('SSR Component', () => {
const loader1 = toLoadable(() => new Promise(resolve => setImmediate(() => resolve(TargetComponent))), false);
const loader2 = toLoadable(() => {
loader1.load();
return importedWrapper('imported-component', 'mark2', Promise.resolve(TargetComponent))
return importedWrapper('imported_mark2_component', Promise.resolve(TargetComponent))
}, false);
expect(loader1.done).to.be.equal(false);
expect(loader2.done).to.be.equal(false);
Expand All @@ -288,7 +288,7 @@ describe('SSR Component', () => {
const loader1 = toLoadable(() => new Promise(resolve => setImmediate(() => resolve(TargetComponent))), false);
const loader2 = toLoadable(() => {
loader1.load();
return importedWrapper('imported-component', 'mark2', Promise.resolve(TargetComponent))
return importedWrapper('imported_mark2_component', Promise.resolve(TargetComponent))
}, false);
expect(loader1.done).to.be.equal(false);
expect(loader2.done).to.be.equal(false);
Expand Down
11 changes: 5 additions & 6 deletions src/babel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,15 +26,15 @@ const templateOptions = {
};

export default function ({types: t, template}) {
var headerTemplate = template(`function importedWrapper(marker, name, realImport) {
var headerTemplate = template(`function importedWrapper(marker, realImport) {
if (typeof __deoptimization_sideEffect__ !== 'undefined') {
__deoptimization_sideEffect__(marker, name, realImport);
__deoptimization_sideEffect__(marker, realImport);
}
return realImport;
}`, templateOptions);

const importRegistration = template(
'importedWrapper(MARK, FILE, IMPORT)',
'importedWrapper(MARK, IMPORT)',
templateOptions,
);

Expand All @@ -61,13 +61,12 @@ export default function ({types: t, template}) {
if (!importName) {
return;
}
const requiredFile = encipherImport(resolveImport(importName, localFile));
const requiredFileHash = encipherImport(resolveImport(importName, localFile));

let replace = null;

replace = importRegistration({
MARK: t.stringLiteral("imported-component"),
FILE: t.stringLiteral(requiredFile),
MARK: t.stringLiteral(`imported_${requiredFileHash}_component`),
IMPORT: newImport
});

Expand Down
4 changes: 2 additions & 2 deletions src/loadable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ const removeFromPending = promise => pending = pending.filter(a => a !== promise
const trimImport = str => str.replace(/['"]/g, '');

export const importMatch = functionString => {
const markMatches = functionString.match(/\(['"]imported-component['"],\s?['"](.*),/g) || [];
return markMatches.map(match => trimImport(match.match(/\(['"]imported-component['"],\s?['"]([^'"]*)['"],/i)[1]));
const markMatches = functionString.match(/\(['"]imported_(.*)_component['"]/g) || [];
return markMatches.map(match => trimImport(match.match(/\(['"]imported_(.*)_component['"]/i)[1]));
}

const toLoadable = (importFunction, autoImport = true) => {
Expand Down

0 comments on commit 5ad7b11

Please sign in to comment.