[ALOY-389] TiStudio code completion for Alloy style files (TSS)

GitHub Issuen/a
TypeNew Feature
Resolution Date2013-01-14T11:47:35.000+0000
Affected Version/sAlloy 0.3.1
Fix Version/sAlloy 1.1.0, 2013 Sprint 03
ComponentsTitanium Studio
ReporterTony Lukasavage
AssigneeTony Lukasavage


Alloy style files, which are in a custom TSS format, need TiStudio code completion. Since TSS is a brand new format, TiStudio is going to need an actual specification for the TSS format. For this I have started constructing a [true grammar](https://github.com/appcelerator/alloy/blob/master/Alloy/grammar/tss.pegjs) in [pegjs](http://pegjs.majda.cz/) for the TSS format. The work on that is being logged in ALOY-272. This grammar will need to be completed, tested to ensure that replaces the current logic effectively, and then inserted as a replacement to the custom logic code in Alloy now. No small feat, so resolving ALOY-272 will be a big hurdle to jump before getting style code completion. Once a grammar has been established, there area few ways in which TiStudio code completion would be useful in style files, all of which will occur as a developer is typing the property key names inside the style definition:

If the style in question refers to a Titanium API, code completion based on the Titanium API type. For example:

"Window": {
    backgroundColor: '#fff'
as a developer is typing "backgroundColor' above, TiStudio should be helping code complete based on the fact that the style is for a Ti.UI.Window.

If the style refers to an ID, code completion based on the type of the IDed component as identified in the corresponding view XML.

<!-- index.xml -->
<Label id="myLabel"/>
// index.tss
"#myLabel": {
    text: 'some text'
TiStudio should see *#myLabel*, understand that it is an ID style, find the UI component that it corresponds to in index.xml (in this a Ti.UI.Label), and then do code completion based on the determined type of Titanium API.

If the style refers to a class, code completion will work just as it does in the case of IDs, but the code completion will give a listing that is the intersection of all the properties that apply to any UI components given this class.

One final note is the handling of the global style app.tss. Since the app.tss has no associated view, it might make sense to only do code completion in the case of #1 where a Titanium API is given. I would imagine it would be a little to resource intensive to inspect all files in a project to look for IDs and classes in the cases of #2 and #3.


  1. Tony Lukasavage 2012-12-17 As it stands, not much work will need to be done on the alloy side after the TiStudio team is provided with the parsing grammar from ALOY-272. I will adjust the ticket, or create new ones, if necessary.
  2. Tony Lukasavage 2013-01-08 @Chris, The new TSS grammar, which creates a parser with [pegjs](http://pegjs.majda.cz/), can be found here: https://github.com/appcelerator/alloy/blob/master/Alloy/grammar/tss.pegjs Let me know if you need anything else to get started handling TSS files on your end.
  3. Tony Lukasavage 2013-01-14 Confirmed with Chris Williams that the current grammar is sufficient for the TiStudio team to start generating the necessary parsers on their end for TSS file processing and code assist. New tickets will be created if further work is needed to be done here.
  4. Federico Casali 2013-04-09 Code completion for TSS files being verified as working ad expected with: Appcelerator Studio Alloy 1.1.0-cr Closing.

JSON Source