fix: morph/react fix issue preventing using condition based on data

* issue caused because it didn't check data usage in when conditions as those are part of scopes instead of block's properties
viewstools · Jun 18, 2021 · 8a8c07f · 8a8c07f
1 parent 5a48561
commit 8a8c07f
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 18 deletions.
diff --git a/morph/react-dom/get-value-for-property.js b/morph/react-dom/get-value-for-property.js
@@ -93,7 +93,7 @@ export default function getValueForProperty(node, parent, state) {
     }
   } else if (getScopedCondition(node, parent, state)) {
     return {
-      [node.name]: safe(getScopedCondition(node, parent, state)),
+      [node.name]: `{${getScopedCondition(node, parent, state)}}`,
     }
   } else if (/^on[A-Z]/.test(node.name) && node.slotName === 'setFlowTo') {
     let flowPath = getFlowPath(node, parent, state)

diff --git a/morph/react/properties-design-token.js b/morph/react/properties-design-token.js
@@ -1,11 +1,11 @@
-import { getVariableName, transformToCamelCase } from '../utils.js'
+import {
+  getVariableName,
+  mergeBlockPropertiesAndScopes,
+  transformToCamelCase,
+} from '../utils.js'
 
 export function enter(node, parent, state) {
-  let properties = [
-    ...node.properties,
-    ...node.scopes.flatMap((scope) => scope.properties),
-  ]
-  properties
+  mergeBlockPropertiesAndScopes(node)
     .filter((prop) => prop.tags.designToken)
     .forEach((prop) => {
       let name = prop.tags.slot

diff --git a/morph/utils.js b/morph/utils.js
@@ -690,6 +690,13 @@ export function maybeGetUseDataForValue(p) {
   }
 }
 
+export function mergeBlockPropertiesAndScopes(block) {
+  return [
+    ...block.properties,
+    ...block.scopes.flatMap((scope) => scope.properties),
+  ].sort((a, b) => a.loc.start.line - b.loc.start.line)
+}
+
 export function getImportNameForSource(source, state) {
   let filePath = getFilePath(source)
   if (state.usedImports[filePath]) {

diff --git a/parse/index.js b/parse/index.js
@@ -33,7 +33,10 @@ import { isGoogleFont } from '../morph/fonts.js'
 import getLoc from './get-loc.js'
 import getTags from './get-tags.js'
 import path from 'path'
-import { maybeGetUseDataForValue } from '../morph/utils.js'
+import {
+  maybeGetUseDataForValue,
+  mergeBlockPropertiesAndScopes,
+} from '../morph/utils.js'
 
 export default ({
   convertSlotToProps = true,
@@ -423,11 +426,12 @@ export default ({
   }
 
   function parseData(block) {
+    let properties = mergeBlockPropertiesAndScopes(block)
     let data = []
     let index = 0
     let currentDataGroup = null
-    while (index < block.properties.length) {
-      let p = block.properties[index]
+    while (index < properties.length) {
+      let p = properties[index]
       if (p.name === 'data' && !p.tags.slot) {
         let currentData = getData(p)
         currentData.loc = p.loc
@@ -440,21 +444,21 @@ export default ({
 
         do {
           index++
-          if (index === block.properties.length) {
+          if (index === properties.length) {
             if (
               'validate' in currentData &&
               !('type' in currentData.validate)
             ) {
               // required keyword without validate
               delete currentData.validate
             }
-            currentData.loc.end = block.properties[index - 1].loc.end
-            currentDataGroup.loc.end = block.properties[index - 1].loc.end
+            currentData.loc.end = properties[index - 1].loc.end
+            currentDataGroup.loc.end = properties[index - 1].loc.end
             currentDataGroup = null
             break
           }
 
-          p = block.properties[index]
+          p = properties[index]
           if (p.name === 'format') {
             currentData.format = getDataFormat(p)
           } else if (p.name === 'formatOut') {
@@ -474,7 +478,7 @@ export default ({
             currentDataGroup.aggregate = getDataAggregate(p)
           } else if (p.name === 'data') {
             // data section finished - setting end line
-            currentData.loc.end = block.properties[index - 1].loc.end
+            currentData.loc.end = properties[index - 1].loc.end
 
             if (
               'validate' in currentData &&
@@ -483,11 +487,11 @@ export default ({
               // required keyword without validate
               delete currentData.validate
             }
-            currentData.loc.end = block.properties[index - 1].loc.end
+            currentData.loc.end = properties[index - 1].loc.end
             if (currentData.uses.size) {
               // if current data has an assignment then set currentDataGroup to null
               // else leave it as probably is part of aggregate data group
-              currentDataGroup.loc.end = block.properties[index - 1].loc.end
+              currentDataGroup.loc.end = properties[index - 1].loc.end
               currentDataGroup = null
             }
           } else {
@@ -506,7 +510,7 @@ export default ({
               currentData.uses.add(value)
             }
           }
-        } while (index < block.properties.length && p.name !== 'data')
+        } while (index < properties.length && p.name !== 'data')
       } else {
         index++
       }