koenbok / Framer

Framer - Design Everything
https://framer.com
MIT License
5.84k stars 477 forks source link

`Framer.Importer.load` fails when loading imported files #208

Open mooyoul opened 9 years ago

mooyoul commented 9 years ago

Hi, I'm using framer for making my service's tutorial pages (e.g. guided by coach marks) This is my first framer project which using Framer Studio.

Anyway Framer failed to load my import file from Photoshop. So, There are no preview because framer failed to load imported file.

Console says: 2015-04-27 8 18 43

Stack Trace: (for investigating)

[Error] XMLHttpRequest cannot load file:///Users/Prescott/Documents/Workspace/lawtalk-tutorial/Untitled.framer/imported/favorite/layers.json. Cross origin requests are only supported for HTTP.
    domLoadDataSync (framer.js, line 4897)
    domLoadJSONSync (framer.js, line 4910)
    _loadlayerInfo (framer.js, line 2738)
    load (framer.js, line 2713)
    load (framer.js, line 2820)
    (anonymous function) (.temp.html, line 4)
    global code (.temp.html, line 61)

When i served my project files via HTTP/HTTPS (I used node-static), It works great.

mooyoul commented 9 years ago

I just found that example projects on framerjs.com (e.g. potluck-onboarding) successfully loaded in Framer Studio even project used Framer.Importer.Load with local import file (which has file:// schema)

I deep dived entire project structure, and yes, yes, yes. I found difference!

Imported files has metadata about layers (not only layer.json but also layer.json.js), When Framer loads imported files (via Framer.Impoerter.Load), Framer hits layer.json.js, and layer.json.

In local environment (without WebServer), layer.json: cannot be loaded successfully because there are CORS Issue with file:// scheme. so, layer.json.js: will used by framer.

Anyway, I just found framer breaks filename encoding in layer.json.js. I'm Korean, and I used Korean (Hangul) in filename.

My photoshop psd filename is 테스트.psd, but key name (which located in window.__imported) in layer.json.js is NOT 테스트. Key name was broken string.

window.__imported__["�׽�Ʈ/layers.json.js"] = [
 // ...
];

I think Framer Studio doesn't handle filename through correct encoding (e.g. UTF-8, but encoding will different each file systems/OSs.)