[ALOY-1144] Alloy: createStyle turns proxy objects into JS objects

GitHub Issue	n/a
Type	Bug
Priority	Critical
Status	Closed
Resolution	Fixed
Resolution Date	2014-09-23T02:52:31.000+0000
Affected Version/s	Alloy 1.5.0
Fix Version/s	Alloy 1.5.0
Components	Styling
Labels	1.5.0, Alloy, blocker, createStyle, deepExtend, qe-manualtest
Reporter	Fokke Zandbergen
Assignee	Tim Poulsen
Created	2014-09-19T10:54:42.000+0000
Updated	2014-11-19T00:23:40.000+0000

Description

In Alloy 1.5.0 [Alloy.createStyle()](https://github.com/appcelerator/alloy/blob/master/Alloy/lib/alloy.js#L233) uses a new utility method [deepExtend](https://github.com/appcelerator/alloy/blob/master/Alloy/lib/alloy.js#L609) to clone the merged properties. However, because of its implementation a proxy object like the transform passed as a default in the following example [will be turned into a JS object](https://github.com/appcelerator/alloy/blob/master/Alloy/lib/alloy.js#L652):

$.someView.animate($.createStyle({
  id: 'someId',
  transform: Ti.UI.create2DMatrix().scale(.5, .5),
  duration: 500
}));

I have a PR to fix deepExtend by checking for .__prototype before cloning objects: - https://github.com/appcelerator/alloy/pull/567

Comments

Tim Poulsen 2014-09-19

Fokke's PR works as described. I've merged his PR into master. I've submitted https://github.com/appcelerator/alloy/pull/568 against the 1_5_X branch. This PR includes Fokke's fix as well as a test case app. Functional test: run the ALOY\-1144 test case app. Click the label, it should shrink by 50% in height & width. Without the fix provided by Fokke, an invalid transform option is supplied to the animate() method and nothing happens when you click the label.
Feon Sua Xin Miao 2014-09-19

PR merged.
Fokke Zandbergen 2014-09-22

There was an error in the PR causing JS objects also not to be deep extended. The fix: https://github.com/appcelerator/alloy/pull/569
Tim Poulsen 2014-09-22

PR569 did not resolve the issue. However, PR 570 did. Approved and merged to the 1_5_X branch. I've opened https://github.com/appcelerator/alloy/pull/571 to implement the same fix in the master branch. The proper functional test for this is the ALOY\-1051 test app (not the 1144 app previously mentioned). 1. Run the ALOY\-1051 test app on iOS. The text should be large (30pt) in American Typewriter font. 2. Tap the label. The alert box should show: {"font":{"fontFamily":"AmericanTypewriter", "fontSize": 30},"classes":["family","size"]} 3. Run the same app on Android. The font family is not supported on Android, and depending on the emulator size/density, the font size will probably be visually pretty small. However, if you tap the label and you should get the same output as above. Not required, but you could modify the index.tss in the test app to set the font size to '30dp' rather than 30 to confirm that font properties are being properly mixed.
Feon Sua Xin Miao 2014-09-23

PR merged.
Federico Casali 2014-09-25

Verified fixed. TiSDK 3.4.0.v20140924140915 Appcelerator Studio 3.4.0.201409231834 CLI 3.4.0-rc4 Alloy 1.5.0-rc4 Xcode6 iPad mini & iPhone 5 (iOS 8) and Android Galaxy Nexus 4.3 Closing.

JSON Source