How to find core dependencies ?

[tocasu]

Can anyone help me with the following scenario:

path to Ext library: /var/ext4.1.1a/src/
path to Ext JS application: /var/webapp/app1/

I want to compile a build and extract into one JS file only classes, and their dependencies from Ext library that are used by my application, but without application specific code (without classes from /var/webapp/app1/).

I found on forum something like this:

sencha -sdk-path=/var/ext4.1.1a/src/ \ compile \ -classpath=/var/webapp/app1/ \ exclude \ -namespace=Ext \ and \ concatenate \ -out=out.js
but in this case will be included also application code (one i want to skip).

Thanks

GM.

[mberrie]

As a starter, out of my head, here some code:

sencha compile -cl /var/ext4.1.1a/src,/var/webapp/app1/ \
union -r -f  /var/webapp/app1 and \
exclude -n Ext and \
concat -compress -o ext-deps.js and \
metadata -f -o ext-deps.txt

This will first select all of you app-specific classes (union) based on a file/directory selector (-f), plus all dependencies recursively (-r),
then exclude all classes based on a namespace selector (exclude -n Ext),
then concat and compress the files into ext-deps.js,
plus create a metadata file that lists all file entries (good for debugging).

hth

[tocasu]

Hi,

thanks for suggestion, i don't know how this tool work, but using your example, even if I remove "
exclude -n Ext", my output file have 0 kb.

In my case, the difference is that I don't develop Ext widgets (i mean I don't extend
Ext components, but inside my JS classes I instantiate Ext components:

....
var dialog = new Ext.Window({

el: 'message_dialog_div',
layout: 'fit',
x: windowXCoord,
y: windowYCoord,
height: this.defaultMessageDialogHeight,
width: this.defaultMessageDialogWidth,
modal: true,
shadow: false,
autoScroll: true,
closable: true,
items: Ext.create('Ext.tab.Panel', {

el: 'message_dialog_tabs',
activeTab: 0,
autoTabs: true,
border: false,
items: tabItems

}),
buttons: [{

text: this.getLocalizedString(TITLE_CLOSE),
handler: function () {

dialog.close();
if (callback) {

callback();

}

}

}]

});
......

)
My guess is that the dependency intersection works only if classes extends Ext components,
or it's still have some bugs.
Anyway, it will be very useful to have more examples (use cases),
more than ones from here: http://docs.sencha.com/ext-js/4-1/#!...mmand_compiler

Thank you

[mberrie]

I think the compiler automatically picks up dependencies from 'Ext.create' calls in your code, but I am not absolutely sure.

In any case, it might be helpful to state any dependencies explicitly via Ext.require above the Ext.application call or in the 'uses' or 'requires' properties of your application config (that you pass to Ext.application). Doing this would also benefit when running your application with Ext.Loader during development (it will avoid synchronous loading of files).

You should also make sure that your path definitions are actually handled correctly by Sencha Cmd (not sure how it handles absolute unix paths, I am on Windows) - just a guess here.

So a simple

sencha compile -cl /var/ext4.1.1a/src,/var/webapp/app1/ \
concat -compress -o all.js and \
metadata -f -o all.txt

should include the correct files.

At the beginning 'sencha compile' will output the classpath entries. If you run 'sencha -d ...' to get debug output you will even see the files it finds in the classpath.

You mentioned a sample command in your first post - did this actually work for you?

[tocasu]

the sample from first post seems that include all classes (Ext library and application), and "exclude \ -namespace=Ext" simply remove all classes from Ext library, but only classes, not functions, closures.

So it not work for me. My classes does not extend Ext classes, so I don't have properties like extend, use, require. But even if, i use in my code Ext objects. If you use compile -debug, you can see a lot of useful messages such as:

ab-layout - is one of my custom classes.

[DBG] Detected instantiation reference to Ext.ComponentMgr in file ... ab-layout.js
[DBG] [ [1001] : Class was referenced but not explicitly required <> Ext.ComponentManager ] :: ( ...ab-layout.js => 126 : 0 )
[DBG] Adding dynamic requirement on Ext.ComponentManager to ab-layout.js as a 'requires'

so those messages suggest me that the this tool is able to find objects instantiated with new operator or using Ext.create, and it try to add a dynamic reference to parent class, but something goes wrong after ... and the tool doesn't collect all classes (with references) used in application.

maybe using Ext.require in each class, can help, but I'm not shore and i have dozens of classes ... it can take a lot of time and possible to not solve my problem.

[mberrie]

maybe using Ext.require in each class, can help, but I'm not shore and i have dozens of classes ... it can take a lot of time and possible to not solve my problem.

Just reduce your app to a smaller test scenario, then test out whether the suggested compiler statement yields the expected result. Adding explicit requirement statements should then be only a minor time investment.

the sample from first post seems that include all classes (Ext library and application), and "exclude \ -namespace=Ext" simply remove all classes from Ext library, but only classes, not functions, closures.

Not sure I get you here. Sencha Cmd works on classes and files. It will not rewrite your code.

[tocasu]

1. Yes, i will try with a small peace of code.
2. I'm talking about new generated output file, in this file when "exclude -namespace Ext" is used, all Ext classes are not included, but functions and closures are.

Thanks again.