Skip to content
This repository has been archived by the owner on Dec 11, 2023. It is now read-only.

Commit

Permalink
Merge pull request #397 from gluestack/fix/babel-plugin-edge-cases
Browse files Browse the repository at this point in the history 
Fix/babel plugin edge cases
  • Loading branch information
@ankit-tailor
ankit-tailor authored Sep 6, 2023
2 parents b9aa119 + 52ea145 commit 04fb2b2
Show file tree
Hide file tree
Showing 3 changed files with 165 additions and 141 deletions.
14 changes: 9 additions & 5 deletions example/ui-examples-babel/babel.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,22 @@ module.exports = function (api) {
{
configPath: path.join(__dirname, './gluestack-ui.config.ts'),
configThemePath: ['theme'],
components: [path.join(__dirname, './gluestack-components')],
styled: [
'@gluestack-style/react',
path.resolve(__dirname, './gluestack-ui-components/core/styled'),
],
components: ['@gluesatck-ui/themed'],
},
],
[
'module-resolver',
{
alias: {
// For development, we want to alias the library to the source
['@gluestack-style/react']: path.join(
__dirname,
'../../packages/react/src'
),
// ['@gluestack-style/react']: path.join(
// __dirname,
// '../../packages/react/src'
// ),
// ['@gluestack-style/animation-plugin']: path.join(
// __dirname,
// '../../packages/animation-plugin/src'
Expand Down
277 changes: 143 additions & 134 deletions packages/babel-plugin-styled-resolver/src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,20 @@ function addQuotesToObjectKeys(code) {

let initAst;

traverse(ast, {
ObjectProperty: (path) => {
if (types.isIdentifier(path?.node?.value)) {
path.remove();
}
if (types.isTemplateLiteral(path?.node?.value)) {
path.remove();
}
if (types.isConditionalExpression(path?.node?.value)) {
path.remove();
}
},
});

traverse(ast, {
VariableDeclarator: (path) => {
initAst = path.node.init;
Expand Down Expand Up @@ -263,6 +277,8 @@ function replaceSingleQuotes(str) {
function getObjectFromAstNode(node) {
let objectCode = generate(node).code;

objectCode = objectCode?.replace(/as const/g, '');

objectCode = addQuotesToObjectKeys(
objectCode.replace(
/\\"|"(?:\\"|[^"])*"|(\/\/.*|\/\*[\s\S]*?\*\/)/g,
Expand Down Expand Up @@ -338,19 +354,27 @@ function getIdentifiersObjectFromAstNode(node) {
);
}

function isStyledImportedFromLibrary(styled, importName) {
if (styled.includes(importName)) {
function isImportedFromLibrary(libraries, importName) {
if (libraries.includes(importName)) {
return true;
}
return false;
}

function isStyledImportFromAbsolutePath(styled, importName) {
for (const styledPath of styled) {
if (importName === styledPath) {
return true;
}
}
function isImportFromAbsolutePath(
absolutePaths,
filePath,
importedAbsolutePath
) {
filePath.pop();

const finalAbsolutePath = path.resolve(
filePath.join('/'),
importedAbsolutePath
);
if (absolutePaths.includes(finalAbsolutePath)) {
return true;
}
return false;
}

Expand Down Expand Up @@ -485,19 +509,10 @@ module.exports = function (b) {
const importName = importPath.node.source.value;

let filePath = state.file.opts.filename.split('/');
filePath.pop();

const absoluteStyledImportPath = path.resolve(
filePath.join('/'),
importName
);

if (
isStyledImportFromAbsolutePath(
components,
absoluteStyledImportPath
) ||
isStyledImportedFromLibrary(components, importName)
isImportFromAbsolutePath(components, filePath, importName) ||
isImportedFromLibrary(components, importName)
) {
importPath.traverse({
ImportSpecifier(importSpecifierPath) {
Expand All @@ -509,8 +524,8 @@ module.exports = function (b) {
}

if (
isStyledImportFromAbsolutePath(styled, absoluteStyledImportPath) ||
isStyledImportedFromLibrary(styled, importName)
isImportFromAbsolutePath(styled, filePath, importName) ||
isImportedFromLibrary(styled, importName)
) {
importPath.traverse({
ImportSpecifier(importSpecifierPath) {
Expand Down Expand Up @@ -544,139 +559,130 @@ module.exports = function (b) {
if (isValidConfig) {
let args = callExpressionPath.node.arguments;

let componentThemeNode = args[1];
// optional case
let componentConfigNode = args[2] ?? t.objectExpression([]);
let extendedThemeNode = args[3] ?? t.objectExpression([]);

if (
!(
t.isIdentifier(args[1]) &&
t.isIdentifier(args[2]) &&
t.isIdentifier(args[3])
t.isIdentifier(componentThemeNode) ||
t.isIdentifier(componentConfigNode) ||
t.isIdentifier(extendedThemeNode)
)
) {
let componentThemeNode = args[1];
// optional case
let componentConfigNode = args[2] ?? t.objectExpression([]);
let extendedThemeNode = args[3] ?? t.objectExpression([]);

if (
!(
t.isIdentifier(componentThemeNode) ||
t.isIdentifier(componentConfigNode) ||
t.isIdentifier(extendedThemeNode)
)
) {
// args[1] = t.objectExpression([]);

let extendedThemeNodeProps = [];
if (extendedThemeNode && extendedThemeNode?.properties) {
extendedThemeNode?.properties.forEach((prop) => {
if (prop.key.name === 'propertyResolver') {
tempPropertyResolverNode = prop;
} else {
extendedThemeNodeProps.push(prop);
}
});
extendedThemeNode.properties = extendedThemeNodeProps;
}
// args[1] = t.objectExpression([]);

let theme = getObjectFromAstNode(componentThemeNode);
let ExtendedConfig = getObjectFromAstNode(extendedThemeNode);
let componentConfig = getObjectFromAstNode(componentConfigNode);
let extendedThemeNodeProps = [];
if (extendedThemeNode && extendedThemeNode?.properties) {
extendedThemeNode?.properties.forEach((prop) => {
if (prop.key.name === 'propertyResolver') {
tempPropertyResolverNode = prop;
} else {
extendedThemeNodeProps.push(prop);
}
});
extendedThemeNode.properties = extendedThemeNodeProps;
}

if (extendedThemeNode && tempPropertyResolverNode) {
extendedThemeNode.properties.push(tempPropertyResolverNode);
}
let theme = getObjectFromAstNode(componentThemeNode);
let ExtendedConfig = getObjectFromAstNode(extendedThemeNode);
let componentConfig = getObjectFromAstNode(componentConfigNode);

// getExportedConfigFromFileString(ConfigDefault);
let mergedPropertyConfig = {
...ConfigDefault?.propertyTokenMap,
...propertyTokenMap,
};
let componentExtendedConfig = merge(
{},
{
...ConfigDefault,
propertyTokenMap: { ...mergedPropertyConfig },
},
ExtendedConfig
);
if (extendedThemeNode && tempPropertyResolverNode) {
extendedThemeNode.properties.push(tempPropertyResolverNode);
}

if (theme && Object.keys(theme).length > 0) {
const verbosedTheme = convertStyledToStyledVerbosed(theme);
// getExportedConfigFromFileString(ConfigDefault);
let mergedPropertyConfig = {
...ConfigDefault?.propertyTokenMap,
...propertyTokenMap,
};
let componentExtendedConfig = merge(
{},
{
...ConfigDefault,
propertyTokenMap: { ...mergedPropertyConfig },
},
ExtendedConfig
);

let componentHash = stableHash({
...theme,
...componentConfig,
...ExtendedConfig,
});
if (theme && Object.keys(theme).length > 0) {
const verbosedTheme = convertStyledToStyledVerbosed(theme);

if (outputLibrary) {
componentHash = outputLibrary + '-' + componentHash;
}
let componentHash = stableHash({
...theme,
...componentConfig,
...ExtendedConfig,
});

const { styledIds, verbosedStyleIds } =
updateOrderUnResolvedMap(
verbosedTheme,
componentHash,
'boot',
componentConfig,
BUILD_TIME_GLUESTACK_STYLESHEET,
platform
);
if (outputLibrary) {
componentHash = outputLibrary + '-' + componentHash;
}

const toBeInjected = BUILD_TIME_GLUESTACK_STYLESHEET.resolve(
styledIds,
componentExtendedConfig,
ExtendedConfig
const { styledIds, verbosedStyleIds } =
updateOrderUnResolvedMap(
verbosedTheme,
componentHash,
'boot',
componentConfig,
BUILD_TIME_GLUESTACK_STYLESHEET,
platform
);

const current_global_map =
BUILD_TIME_GLUESTACK_STYLESHEET.getStyleMap();
const toBeInjected = BUILD_TIME_GLUESTACK_STYLESHEET.resolve(
styledIds,
componentExtendedConfig,
ExtendedConfig
);

const current_global_map =
BUILD_TIME_GLUESTACK_STYLESHEET.getStyleMap();

const orderedResolvedTheme = [];
const orderedResolvedTheme = [];

current_global_map?.forEach((styledResolved) => {
if (styledIds.includes(styledResolved?.meta?.cssId)) {
orderedResolvedTheme.push(styledResolved);
}
});
current_global_map?.forEach((styledResolved) => {
if (styledIds.includes(styledResolved?.meta?.cssId)) {
orderedResolvedTheme.push(styledResolved);
}
});

let styleIdsAst = generateObjectAst(verbosedStyleIds);
let styleIdsAst = generateObjectAst(verbosedStyleIds);

let toBeInjectedAst = generateObjectAst(toBeInjected);
let toBeInjectedAst = generateObjectAst(toBeInjected);

let orderedResolvedAst =
generateArrayAst(orderedResolvedTheme);
let orderedResolvedAst = generateArrayAst(orderedResolvedTheme);

let orderedStyleIdsArrayAst = t.arrayExpression(
styledIds?.map((cssId) => t.stringLiteral(cssId))
);
let orderedStyleIdsArrayAst = t.arrayExpression(
styledIds?.map((cssId) => t.stringLiteral(cssId))
);

let resultParamsNode = t.objectExpression([
t.objectProperty(
t.stringLiteral('orderedResolved'),
orderedResolvedAst
),
t.objectProperty(
t.stringLiteral('toBeInjected'),
toBeInjectedAst
),
t.objectProperty(
t.stringLiteral('styledIds'),
orderedStyleIdsArrayAst
),
t.objectProperty(
t.stringLiteral('verbosedStyleIds'),
styleIdsAst
),
]);

while (args.length < 4) {
args.push(t.objectExpression([]));
}
if (!args[4]) {
args.push(resultParamsNode);
} else {
args[4] = resultParamsNode;
}
let resultParamsNode = t.objectExpression([
t.objectProperty(
t.stringLiteral('orderedResolved'),
orderedResolvedAst
),
t.objectProperty(
t.stringLiteral('toBeInjected'),
toBeInjectedAst
),
t.objectProperty(
t.stringLiteral('styledIds'),
orderedStyleIdsArrayAst
),
t.objectProperty(
t.stringLiteral('verbosedStyleIds'),
styleIdsAst
),
]);

while (args.length < 4) {
args.push(t.objectExpression([]));
}
if (!args[4]) {
args.push(resultParamsNode);
} else {
args[4] = resultParamsNode;
}
}
}
Expand Down Expand Up @@ -731,7 +737,10 @@ module.exports = function (b) {
const propValue = attribute.value;

if (t.isJSXExpressionContainer(propValue)) {
if (t.isIdentifier(propValue.expression)) {
if (
t.isIdentifier(propValue.expression) ||
t.isConditionalExpression(propValue.expression)
) {
propsToBePersist.push(attribute);
} else {
if (propName === 'sx') {
Expand Down
Loading

0 comments on commit 04fb2b2

Please sign in to comment.