search

KlausSchaefers / vue-low-code

Quant-UX standalone
MIT License
364 stars 42 forks source link

Design system mode not compatible with 1.0.8 #7

Closed ryanmoore-SM closed 3 years ago

ryanmoore-SM commented 3 years ago

Problem

Trying to use design system mode results in parsing errors and runtime errors in the console

Details

We downloaded the figma-design-system-example and made no modifications and it ran as expected. We then updated to 1.0.8 and the example continued to work. Using the download.js referenced in the README, we attempted to import our own Figma project which resulted in parse errors shown below.

figma-design-system-example
vue-low-code version 1.0.8

node download.js <APIKEY> <FILEID>

Download Figma file...
parse image 1 false
parse TopRibbon false
parse Frame 38 false
parse Overview false
...

We then reverted back to vue-low-code 0.4.46 and the download.js was successful leading us to believe that the download.js is not compatible with 1.0.8.

Based on this success we installed vue-low-code version 0.4.46 in our main project, copied over download.js, ran download.js and it didn't report any parsing errors.

We then used the source code provided in the figma-design-system-example main.js file which resulted in the page loading, however we saw all of these errors in the console indicating the import was not successful.

image

We then tried the main.js code from the README and encountered the exact same problem.

Is there any guidance you can provide to help us use the design system mode with the latest version of vue-low-code?

Versions

Node: v14.16.0 npm: 6.14.11 Vue: 2.6.12 Vue-low-code: 1.0.8

KlausSchaefers commented 3 years ago

Hi,

thanks for contacting me! It seems something changed in the Figma file format. I will have to take a deeper look!

KlausSchaefers commented 3 years ago

I see there are some problems with variants... Can you share your Figma file with me Klaus.schaefers@gmail.com?

KlausSchaefers commented 3 years ago

I think I found the bug. Can you try to update to 1.0.10?

ryanmoore-SM commented 3 years ago

Thanks for the reply! After updating to 1.0.10, I was able to successfully use download.js. I am still seeing errors in the console, but I think we may need to rename things to be valid html element names. We are doing that now.

ryanmoore-SM commented 3 years ago

We are seeing these errors in the console, but do not seem to have anything with those names (_1, _2, etc). I am emailing you our .fig file now.

image

ryanmoore-SM commented 3 years ago

Turns out we had some characters as names in Figma. We have fixed those.

I am seeing this output in the console. I see multiple duplicates. Is this normal?

image

I am also not seeing an element called SignInCard which exists in our figma file. Is there a reason why some elements would not be imported into the app.json?

KlausSchaefers commented 3 years ago

Hi,

the lib expects that all components are directly nested in a root frame. Then I would expect that all instances are found. I am not sure why you have multiple instances. Are you using variants?

Klaus

KlausSchaefers commented 3 years ago

Was this helping?

ryanmoore-SM commented 3 years ago

Sorry for the delay in response. Putting all the components in a root frame fixed my issue. Thank you so much for your quick responses!