fix: isFragment get wrong result

feat: PatchFlag will be bail when has container

chore: remove npmignore
This commit is contained in:
Amour1688 2020-06-16 19:12:17 +08:00
parent 65a1912809
commit 8a6c8a7ca2
4 changed files with 45 additions and 39 deletions

View File

@ -1,4 +0,0 @@
example
index.html
webpack.config.js
test

View File

@ -19,6 +19,9 @@
"bugs": { "bugs": {
"url": "https://github.com/vueComponent/jsx/issues" "url": "https://github.com/vueComponent/jsx/issues"
}, },
"files": [
"dist"
],
"dependencies": { "dependencies": {
"@ant-design-vue/babel-helper-vue-compatible-props": "^1.0.0", "@ant-design-vue/babel-helper-vue-compatible-props": "^1.0.0",
"@ant-design-vue/babel-helper-vue-transform-on": "^1.0.0", "@ant-design-vue/babel-helper-vue-transform-on": "^1.0.0",

View File

@ -30,10 +30,10 @@ const transformJSXSpreadAttribute = (t, path, mergeArgs) => {
} }
}; };
const getJSXAttributeValue = (t, path) => { const getJSXAttributeValue = (t, path, state) => {
const valuePath = path.get('value'); const valuePath = path.get('value');
if (valuePath.isJSXElement()) { if (valuePath.isJSXElement()) {
return transformJSXElement(t, valuePath); return transformJSXElement(t, valuePath, state);
} }
if (valuePath.isStringLiteral()) { if (valuePath.isStringLiteral()) {
return valuePath.node; return valuePath.node;
@ -97,7 +97,7 @@ const dedupeProperties = (t, properties = []) => {
return deduped; return deduped;
}; };
const buildProps = (t, path, state) => { const buildProps = (t, path, state, hasContainer) => {
const tag = getTag(t, path); const tag = getTag(t, path);
const isComponent = checkIsComponent(t, path.get('openingElement')); const isComponent = checkIsComponent(t, path.get('openingElement'));
const props = path.get('openingElement').get('attributes'); const props = path.get('openingElement').get('attributes');
@ -108,6 +108,8 @@ const buildProps = (t, path, state) => {
if (isFragment(t, path.get('openingElement.name'))) { if (isFragment(t, path.get('openingElement.name'))) {
patchFlag |= PatchFlags.STABLE_FRAGMENT; patchFlag |= PatchFlags.STABLE_FRAGMENT;
} else if (hasContainer) {
patchFlag |= PatchFlags.BAIL;
} }
if (props.length === 0) { if (props.length === 0) {
@ -316,12 +318,16 @@ const buildProps = (t, path, state) => {
* @param paths Array<JSXText | JSXExpressionContainer | JSXSpreadChild | JSXElement> * @param paths Array<JSXText | JSXExpressionContainer | JSXSpreadChild | JSXElement>
* @returns Array<Expression | SpreadElement> * @returns Array<Expression | SpreadElement>
*/ */
const getChildren = (t, paths) => paths const getChildren = (t, paths, state) => {
let hasContainer = false;
return {
children: paths
.map((path) => { .map((path) => {
if (path.isJSXText()) { if (path.isJSXText()) {
return transformJSXText(t, path); return transformJSXText(t, path);
} }
if (path.isJSXExpressionContainer()) { if (path.isJSXExpressionContainer()) {
hasContainer = true;
return transformJSXExpressionContainer(path); return transformJSXExpressionContainer(path);
} }
if (path.isJSXSpreadChild()) { if (path.isJSXSpreadChild()) {
@ -331,25 +337,27 @@ const getChildren = (t, paths) => paths
return path.node; return path.node;
} }
if (path.isJSXElement()) { if (path.isJSXElement()) {
return transformJSXElement(t, path); return transformJSXElement(t, path, state);
} }
throw new Error(`getChildren: ${path.type} is not supported`); throw new Error(`getChildren: ${path.type} is not supported`);
}).filter((value) => ( }).filter((value) => (
value !== undefined value !== undefined
&& value !== null && value !== null
&& !t.isJSXEmptyExpression(value) && !t.isJSXEmptyExpression(value)
)); )),
hasContainer,
};
};
const transformJSXElement = (t, path, state) => { const transformJSXElement = (t, path, state) => {
const children = t.arrayExpression(getChildren(t, path.get('children'))); const { children, hasContainer } = getChildren(t, path.get('children'), state);
const { const {
tag, tag,
props, props,
directives, directives,
patchFlag, patchFlag,
dynamicPropNames, dynamicPropNames,
} = buildProps(t, path, state); } = buildProps(t, path, state, hasContainer);
const flagNames = Object.keys(PatchFlagNames) const flagNames = Object.keys(PatchFlagNames)
.map(Number) .map(Number)
@ -358,8 +366,8 @@ const transformJSXElement = (t, path, state) => {
.join(', '); .join(', ');
const isComponent = checkIsComponent(t, path.get('openingElement')); const isComponent = checkIsComponent(t, path.get('openingElement'));
const child = children.elements.length === 1 && t.isStringLiteral(children.elements[0]) const child = children.length === 1 && t.isStringLiteral(children[0])
? children.elements[0] : children; ? children[0] : t.arrayExpression(children);
if (state.opts.compatibleProps && !state.get('compatibleProps')) { if (state.opts.compatibleProps && !state.get('compatibleProps')) {
state.set('compatibleProps', addDefault( state.set('compatibleProps', addDefault(
path, '@ant-design-vue/babel-helper-vue-compatible-props', { nameHint: '_compatibleProps' }, path, '@ant-design-vue/babel-helper-vue-compatible-props', { nameHint: '_compatibleProps' },
@ -369,7 +377,7 @@ const transformJSXElement = (t, path, state) => {
const createVNode = t.callExpression(createIdentifier(t, state, 'createVNode'), [ const createVNode = t.callExpression(createIdentifier(t, state, 'createVNode'), [
tag, tag,
state.opts.compatibleProps ? t.callExpression(state.get('compatibleProps'), [props]) : props, state.opts.compatibleProps ? t.callExpression(state.get('compatibleProps'), [props]) : props,
children.elements[0] children[0]
? ( ? (
isComponent isComponent
? t.objectExpression([ ? t.objectExpression([

View File

@ -50,7 +50,7 @@ const isDirective = (src) => src.startsWith('v-')
* @returns boolean * @returns boolean
*/ */
const isFragment = (t, path) => t.isJSXMemberExpression(path) const isFragment = (t, path) => t.isJSXMemberExpression(path)
&& path.node.property.name; && path.node.property.name === 'Fragment';
/** /**
* Check if a JSXOpeningElement is a component * Check if a JSXOpeningElement is a component
@ -268,7 +268,7 @@ const parseDirectives = (t, {
return { return {
directiveName, directiveName,
modifiers: new Set(modifiers), modifiers: modifiersSet,
directive: hasDirective ? [ directive: hasDirective ? [
resolveDirective(t, path, state, tag, directiveName), resolveDirective(t, path, state, tag, directiveName),
value, value,
@ -285,7 +285,6 @@ const parseDirectives = (t, {
}; };
}; };
export { export {
createIdentifier, createIdentifier,
isDirective, isDirective,