Skip to content

feat: simplify importCss & trans arrow func import #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
caoren merged 2 commits into from
Dec 3, 2018
Merged

feat: simplify importCss & trans arrow func import #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
269195d
feat: simplify importCss & trans arrow func import
shizhipeng Dec 3, 2018
e2fee70
update version
shizhipeng Dec 3, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions packages/asyncmodule-import/demo/asyncImport.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,14 @@ const AsyncComponent = AsyncModule({
delay: 300
});
const Home = AsyncComponent(import('./views/home'));
const Side = AsyncComponent(import('./views/side'));

import rand_AsyncModule from 'react-asyncmodule';
const rand_Component = rand_AsyncModule({
delay: 300
});

export const A = AsyncImport({
load: ()=>import('./a')
});
const Homex = rand_Component(import(/*webpackChunkName: "arandomname"*/'./views/homex'));
90 changes: 62 additions & 28 deletions packages/asyncmodule-import/dist/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,54 @@ exports.default = function (_ref) {
var buildChunkName = function buildChunkName(chunkNameCmt) {
return t.objectProperty(t.identifier('chunk'), t.arrowFunctionExpression([], t.stringLiteral(chunkNameCmt.value.split('"')[1])));
};
var getProgramPath = function getProgramPath(path) {
return path.find(function (p) {
return t.isProgram(p.node);
});
};

var handleImportCss = function handleImportCss(path, importCss) {
if (importCss) {
var declaration = t.importDeclaration([t.importDefaultSpecifier(t.identifier('ImportCss'))], t.stringLiteral('react-asyncmodule-tool/dist/importcss'));
var programPath = getProgramPath(path);
var fstLn = programPath.node.body[0];

if (!(t.isImportDeclaration(fstLn) && fstLn.specifiers[0].local.name === 'ImportCss' && fstLn.source.value === 'react-asyncmodule-tool/dist/importcss')) {
programPath.unshiftContainer('body', declaration);
}
}
};
var astParser = function astParser(path, importCss) {
handleImportCss(path, importCss);
// add leadingComments to the import argument module
var nodeType = path.node.type;

var importPath = '';
var module = '';
if (nodeType === 'CallExpression') {
importPath = path.get('arguments.0');
}
if (nodeType === 'ArrowFunctionExpression') {
importPath = path.get('body');
}

var _importPath$node$argu = _slicedToArray(importPath.node.arguments, 1);

module = _importPath$node$argu[0];

var _addComments = addComments(module),
modulePath = _addComments.modulePath,
moduleName = _addComments.moduleName;

var load = buildLoad(importPath, moduleName, importCss);
var resolveWeak = buildResolveWeak(modulePath);
var chunkNameCmt = module.leadingComments.find(function (cmt) {
return cmt.value.includes('webpackChunkName');
});
var chunk = buildChunkName(chunkNameCmt);

importPath.replaceWith(t.objectExpression([load, resolveWeak, chunk]));
};
return {
visitor: {
CallExpression: function CallExpression(path, _ref2) {
Expand All @@ -53,35 +100,22 @@ exports.default = function (_ref) {
var node = path.node;
var importCss = opts.importCss;

if (!node) {
return;
}
if (!node) return;

if (t.isCallExpression(node.arguments[0]) && t.isImport(node.arguments[0].callee)) {
if (importCss) {
var declaration = t.importDeclaration([t.importDefaultSpecifier(t.identifier('ImportCss'))], t.stringLiteral('react-asyncmodule-tool/dist/importcss'));
var programPath = path.find(function (p) {
return t.isProgram(p.node);
});
programPath.unshiftContainer('body', declaration);
}
// add leadingComments to the import argument module
var importPath = path.get('arguments.0');

var _importPath$node$argu = _slicedToArray(importPath.node.arguments, 1),
module = _importPath$node$argu[0];

var _addComments = addComments(module),
modulePath = _addComments.modulePath,
moduleName = _addComments.moduleName;

var load = buildLoad(importPath, moduleName, importCss);
var resolveWeak = buildResolveWeak(modulePath);
var chunkNameCmt = module.leadingComments.find(function (cmt) {
return cmt.value.includes('webpackChunkName');
});
var chunk = buildChunkName(chunkNameCmt);

importPath.replaceWith(t.objectExpression([load, resolveWeak, chunk]));
astParser(path, importCss);
}
},
ArrowFunctionExpression: function ArrowFunctionExpression(path, _ref3) {
var _ref3$opts = _ref3.opts,
opts = _ref3$opts === undefined ? {} : _ref3$opts;
var node = path.node;
var importCss = opts.importCss;

if (!node) return;

if (t.isCallExpression(node.body) && t.isImport(node.body.callee)) {
astParser(path, importCss);
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion packages/asyncmodule-import/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "babel-plugin-asyncmodule-import",
"version": "0.1.4",
"version": "0.1.5",
"description": "",
"main": "dist/index.js",
"scripts": {
Expand Down
84 changes: 52 additions & 32 deletions packages/asyncmodule-import/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,46 +68,66 @@ export default function(_ref) {
)
)
)
const getProgramPath = path => path.find((p) => t.isProgram(p.node));

const handleImportCss = (path, importCss) => {
if (importCss) {
const declaration = t.importDeclaration(
[t.importDefaultSpecifier(t.identifier('ImportCss'))],
t.stringLiteral('react-asyncmodule-tool/dist/importcss')
);
const programPath = getProgramPath(path)
const fstLn = programPath.node.body[0];

if (!(t.isImportDeclaration(fstLn) && fstLn.specifiers[0].local.name === 'ImportCss' && (fstLn.source.value === 'react-asyncmodule-tool/dist/importcss'))) {
programPath.unshiftContainer('body', declaration);
}
}
}
const astParser = (path, importCss) => {
handleImportCss(path, importCss);
// add leadingComments to the import argument module
const {type: nodeType} = path.node;
let importPath = '';
let module='';
if (nodeType === 'CallExpression') {
importPath = path.get('arguments.0');
}
if (nodeType === 'ArrowFunctionExpression') {
importPath = path.get('body');
}
[module] = importPath.node.arguments;
const { modulePath, moduleName } = addComments(module);

const load = buildLoad(importPath, moduleName, importCss);
const resolveWeak = buildResolveWeak(modulePath);
const chunkNameCmt = module.leadingComments.find(cmt=>(cmt.value.includes('webpackChunkName')));
const chunk = buildChunkName(chunkNameCmt);

importPath.replaceWith(t.objectExpression([load, resolveWeak, chunk]));
}
return {
visitor: {
CallExpression(path, {
opts = {}
}) {
const {
node
} = path;
const {
importCss
} = opts;
if (!node) {
return;
}
if (t.isCallExpression(node.arguments[0]) && t.isImport(node.arguments[0].callee)) {
if (importCss) {
const declaration = t.importDeclaration(
[t.importDefaultSpecifier(t.identifier('ImportCss'))],
t.stringLiteral('react-asyncmodule-tool/dist/importcss')
);
const programPath = path.find((p) => {
return t.isProgram(p.node);
});
programPath.unshiftContainer('body', declaration);
}
// add leadingComments to the import argument module
const importPath = path.get('arguments.0');
const [module] = importPath.node.arguments;
const {
modulePath,
moduleName
} = addComments(module);
const { node } = path;
const { importCss } = opts;
if (!node) return;

const load = buildLoad(importPath, moduleName, importCss);
const resolveWeak = buildResolveWeak(modulePath);
const chunkNameCmt = module.leadingComments.find(cmt=>(cmt.value.includes('webpackChunkName')));
const chunk = buildChunkName(chunkNameCmt);
if (t.isCallExpression(node.arguments[0]) && t.isImport(node.arguments[0].callee)) {
astParser(path, importCss);
}
},
ArrowFunctionExpression(path, {
opts={}
}) {
const { node } = path;
const { importCss } = opts;
if (!node) return;

importPath.replaceWith(t.objectExpression([load, resolveWeak, chunk]));
if (t.isCallExpression(node.body) && t.isImport(node.body.callee)) {
astParser(path, importCss);
}
}
}
Expand Down
5 changes: 5 additions & 0 deletions packages/asyncmodule-import/test/cases/arrowCall.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
export const A = AsyncImport({
load: ()=>import('./a'),
loading: 'LoadingView',
error: 'ErrorView'
});
9 changes: 9 additions & 0 deletions packages/asyncmodule-import/test/cases/arrowCall_res.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
export const A = AsyncImport({
load: () => ({
load: () => Promise.all([import( /*webpackChunkName: "a"*/'./a')]).then(jsprim => jsprim[0]),
resolveWeak: () => require.resolveWeak('./a'),
chunk: () => 'a'
}),
loading: 'LoadingView',
error: 'ErrorView'
});
3 changes: 3 additions & 0 deletions packages/asyncmodule-import/test/cases/simplifyImportCss.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
const Home = AsyncComponent(import('./views/home'));
const Side = AsyncComponent(import('./views/side'));
const Footer = AsyncComponent(import('./views/footer'));
16 changes: 16 additions & 0 deletions packages/asyncmodule-import/test/cases/simplifyImportCss_res.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import ImportCss from 'react-asyncmodule-tool/dist/importcss';
const Home = AsyncComponent({
load: () => Promise.all([import( /*webpackChunkName: "home"*/'./views/home'), ImportCss('home')]).then(jsprim => jsprim[0]),
resolveWeak: () => require.resolveWeak('./views/home'),
chunk: () => 'home'
});
const Side = AsyncComponent({
load: () => Promise.all([import( /*webpackChunkName: "side"*/'./views/side'), ImportCss('side')]).then(jsprim => jsprim[0]),
resolveWeak: () => require.resolveWeak('./views/side'),
chunk: () => 'side'
});
const Footer = AsyncComponent({
load: () => Promise.all([import( /*webpackChunkName: "footer"*/'./views/footer'), ImportCss('footer')]).then(jsprim => jsprim[0]),
resolveWeak: () => require.resolveWeak('./views/footer'),
chunk: () => 'footer'
});
24 changes: 20 additions & 4 deletions packages/asyncmodule-import/test/test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,21 @@ import asyncModuleImport from '../src/index';
var babel = require("babel-core");

describe('asyncmodule import', () => {
test('rename names import', () => {
test('rename', () => {
const { code: srcCode } = babel.transformFileSync(path.join(__dirname, 'cases/rename.js'), {
plugins: ['syntax-dynamic-import', asyncModuleImport]
});
const { code: expectCode } = babel.transformFileSync(path.join(__dirname, 'cases/rename_res.js'));
expect(srcCode).toBe(expectCode);
});
test('rename names import', () => {
test('common', () => {
const { code: srcCode } = babel.transformFileSync(path.join(__dirname, 'cases/common.js'), {
plugins: ['syntax-dynamic-import', asyncModuleImport]
});
const { code: expectCode } = babel.transformFileSync(path.join(__dirname, 'cases/common_res.js'));
expect(srcCode).toBe(expectCode);
});
test('rename names import', () => {
test('importCss', () => {
const { code: srcCode } = babel.transformFileSync(path.join(__dirname, 'cases/importCss.js'), {
plugins: ['syntax-dynamic-import',[asyncModuleImport, {
importCss: true
Expand All @@ -26,11 +26,27 @@ describe('asyncmodule import', () => {
const { code: expectCode } = babel.transformFileSync(path.join(__dirname, 'cases/importCss_res.js'));
expect(srcCode).toBe(expectCode);
});
test('rename names import', () => {
test('defaultcomment', () => {
const { code: srcCode } = babel.transformFileSync(path.join(__dirname, 'cases/defaultcomment.js'), {
plugins: ['syntax-dynamic-import', asyncModuleImport]
});
const { code: expectCode } = babel.transformFileSync(path.join(__dirname, 'cases/defaultcomment_res.js'));
expect(srcCode).toBe(expectCode);
});
test('arrowCall', () => {
const { code: srcCode } = babel.transformFileSync(path.join(__dirname, 'cases/arrowCall.js'), {
plugins: ['syntax-dynamic-import', asyncModuleImport]
});
const { code: expectCode } = babel.transformFileSync(path.join(__dirname, 'cases/arrowCall_res.js'));
expect(srcCode).toBe(expectCode);
});
test('simplifyImportCss', () => {
const { code: srcCode } = babel.transformFileSync(path.join(__dirname, 'cases/simplifyImportCss.js'), {
plugins: ['syntax-dynamic-import', [asyncModuleImport, {
importCss: true
}]]
});
const { code: expectCode } = babel.transformFileSync(path.join(__dirname, 'cases/simplifyImportCss_res.js'));
expect(srcCode).toBe(expectCode);
});
});