Manual theme compilation in Sencha Architect with Cmd

[dnoizet]

I have an application created with Sencha Architect (currently v4.2.1) and ExtJS 6.5.0. This application has about 20 different themes, each with an attached scss resource.

I wanted to automate the building of each theme CSS, so I thought that changing the "theme" property in app.json and doing a "sencha app refresh" followed by a "sencha ant sass" would do the trick.
It works ok most of the time, but sometimes it does not take changes in my themes. Rebuilding the app into Sencha Architect has no effect. I have to manually apply a theme and click this small button in Sencha Architect:

S00085.png

And then my changes are effectively taken into account!

I would like to know what is the difference between this button and the "sencha ant sass" command.
What would be the Sencha Cmd commands equivalent to clicking this button?

You will find below the batch I run in my attempt to build all my themes:

@ECHO OFF
SETLOCAL EnableDelayedExpansion


IF "%~1" == "" GOTO ALL
GOTO SIMPLE


:ALL
FOR /F "tokens=*" %%L IN ('jq --raw-output ".[] | .name2 + \" \" + .theme" ^< themelist.json') DO (
    
    FOR /F "tokens=1,2" %%a IN ( "%%L" ) DO (
        SET THEME=%%a
        SET ID=%%b
    )


    ECHO Theme courant : !THEME!
    ECHO            ID : !ID!


    jq ".theme=\"!ID!\"" < app.json > app2.json
    DEL app.json
    MOVE app2.json app.json
    
    sencha app refresh
    sencha ant sass


    COPY build\production\GestionInterne\resources\GestionInterne-all_*.css css\
    DEL css\GestionInterne-!THEME!_*.css
    MOVE css\GestionInterne-all_1.css css\GestionInterne-!THEME!_1.css
    MOVE css\GestionInterne-all_2.css css\GestionInterne-!THEME!_2.css
)
GOTO END


:SIMPLE
FOR /F "tokens=*" %%L IN ( 'jq --raw-output ".[] | select(.name2==\"%~1\") | .theme" ^< themelist.json' ) DO (
    SET THEME=%~1
    SET ID=%%L
)


ECHO Theme courant : !THEME!
ECHO            ID : !ID!


jq ".theme=\"!ID!\"" < app.json > app2.json
DEL app.json
MOVE app2.json app.json


sencha app refresh
sencha ant sass


COPY build\production\GestionInterne\resources\GestionInterne-all_*.css css\
DEL css\GestionInterne-!THEME!_*.css
MOVE css\GestionInterne-all_1.css css\GestionInterne-!THEME!_1.css
MOVE css\GestionInterne-all_2.css css\GestionInterne-!THEME!_2.css


GOTO END


:END

And the required themelist.json file:

[
    {
        "id"   : "8b14fbe5-50bb-486e-a1c1-360c3afdd558",
        "theme": "theme-crisp-8b14fbe5-50bb-486e-a1c1-360c3afdd558",
        "name" : "CGOCrispWhite",
        "name2": "cgocrispwhite"
    },
    {
        "id"   : "ea804d2b-a761-43d3-a3c9-93f35c276fc5",
        "theme": "theme-triton-ea804d2b-a761-43d3-a3c9-93f35c276fc5",
        "name" : "CGOTritonDarkBlue",
        "name2": "cgotritondarkblue"
    },
    {
        "id"   : "ec103876-e981-4700-bcaf-802d834b6b4a",
        "theme": "theme-triton-ec103876-e981-4700-bcaf-802d834b6b4a",
        "name" : "CGOTritonYellow",
        "name2": "cgotritonyellow"
    },
    {
        "id"   : "a757a8ca-0236-41db-aa42-45f21285d3c1",
        "theme": "theme-triton-a757a8ca-0236-41db-aa42-45f21285d3c1",
        "name" : "CGOTritonRed",
        "name2": "cgotritonred"
    },
    {
        "id"   : "076c1ae3-04a0-477c-ac1d-f9e0757006e5",
        "theme": "theme-triton-076c1ae3-04a0-477c-ac1d-f9e0757006e5",
        "name" : "CGOTritonGreen",
        "name2": "cgotritongreen"
    },
    {
        "id"   : "0bd64722-006e-4463-a02d-85e403e5b53f",
        "theme": "theme-triton-0bd64722-006e-4463-a02d-85e403e5b53f",
        "name" : "CGOTritonBlue",
        "name2": "cgotritonblue"
    },
    {
        "id"   : "75cbbe39-333b-467e-81e3-0ee011f3c81c",
        "theme": "theme-aria-75cbbe39-333b-467e-81e3-0ee011f3c81c",
        "name" : "CGOContrast",
        "name2": "cgocontrast"
    },
    {
        "id"   : "108c8c3c-f024-48aa-934b-104bb28f6fb6",
        "theme": "theme-neptune-108c8c3c-f024-48aa-934b-104bb28f6fb6",
        "name" : "CGONeptuneGray",
        "name2": "cgoneptunegray"
    },
    {
        "id"   : "21a9af74-0fa6-43cc-8b79-2e7ec74885bd",
        "theme": "theme-neptune-21a9af74-0fa6-43cc-8b79-2e7ec74885bd",
        "name" : "CGONeptunePurple",
        "name2": "cgoneptunepurple"
    },
    {
        "id"   : "00ee47e4-0c0e-4f38-935c-83f278671877",
        "theme": "theme-neptune-00ee47e4-0c0e-4f38-935c-83f278671877",
        "name" : "CGONeptuneYellow",
        "name2": "cgoneptuneyellow"
    },
    {
        "id"   : "fe3bc81e-feda-4b99-84cf-28345337ff30",
        "theme": "theme-neptune-fe3bc81e-feda-4b99-84cf-28345337ff30",
        "name" : "CGONeptuneGreen",
        "name2": "cgoneptunegreen"
    },
    {
        "id"   : "8162e6cd-a604-466e-a5b0-8defd2ac5d75",
        "theme": "theme-neptune-8162e6cd-a604-466e-a5b0-8defd2ac5d75",
        "name" : "CGONeptuneRed",
        "name2": "cgoneptunered"
    },
    {
        "id"   : "80a44274-cdf4-4972-a7d3-4d86768ae9b9",
        "theme": "theme-neptune-80a44274-cdf4-4972-a7d3-4d86768ae9b9",
        "name" : "CGONeptuneBlue",
        "name2": "cgoneptuneblue"
    },
    {
        "id"   : "3e5fe652-32b6-4263-b991-8c4cb5655fb5",
        "theme": "theme-gray-3e5fe652-32b6-4263-b991-8c4cb5655fb5",
        "name" : "CGOClassicGray",
        "name2": "cgoclassicgray"
    },
    {
        "id"   : "f4fe0326-ecc2-4569-a9ff-2cfb12cf4bf2",
        "theme": "theme-classic-f4fe0326-ecc2-4569-a9ff-2cfb12cf4bf2",
        "name" : "CGOClassicPurple",
        "name2": "cgoclassicpurple"
    },
    {
        "id"   : "cf6acda0-6635-4d13-88e5-6f827e435d5e",
        "theme": "theme-classic-cf6acda0-6635-4d13-88e5-6f827e435d5e",
        "name" : "CGOClassicYellow",
        "name2": "cgoclassicyellow"
    },
    {
        "id"   : "2cd57ced-de8b-42ac-91b1-5c3ea2291773",
        "theme": "theme-classic-2cd57ced-de8b-42ac-91b1-5c3ea2291773",
        "name" : "CGOClassicGreen",
        "name2": "cgoclassicgreen"
    },
    {
        "id"   : "5a57cec9-edb7-4f00-8343-ee2ca2708412",
        "theme": "theme-classic-5a57cec9-edb7-4f00-8343-ee2ca2708412",
        "name" : "CGOClassicRed",
        "name2": "cgoclassicred"
    },
    {
        "id"   : "296ee59d-dddd-4014-a331-f6c4a777ca3f",
        "theme": "theme-classic-296ee59d-dddd-4014-a331-f6c4a777ca3f",
        "name" : "CGOClassicBlue",
        "name2": "cgoclassicblue"
    }
]

[dnoizet]

I understand this is summer and many people take vacations, but any help would be appreciated...

[dnoizet]

Anyone? Petr.vecera maybe? Just want to know the CMD equivalent of clicking the compile button... Should I use a credit?

[petr.vecera]

Hi

Unfortunately I am no familiar with the theming source code in SA. It's supper complicated. I asked few days back a dev who knows a lot about theming if he could take a look at this but he's really busy with fixing some serious problems.

I check which command is send to Cmd on the button click and it's

sencha ant -Dbuild.environment=development sass


I would say that your approach and steps are correct. So I am not sure what could be missing.


Btw I checked the Sencha Cmd help and I think you should be able build the theme directly.
Check this command:
sencha help package build

[dnoizet]

Hi Petr, thanks!

I check which command is send to Cmd on the button click and it's
sencha ant -Dbuild.environment=development sass

I don't know then... Maybe something special is happening in development builds.

Btw I checked the Sencha Cmd help and I think you should be able build the theme directly.
Check this command:
sencha help package build

I already tried, but it gives me an error whatever I try:

C:\Users\ghautclocq\wrkgit\wui>sencha package build cgotritondarkblue
Wat!
configFile: C:\Users\ghautclocq\bin\Sencha\Architect\Cmd\6.5.0.180\sencha.cfg
Sencha Cmd v6.5.0.180
[ERR] Command must be run from a package folder

C:\Users\ghautclocq\wrkgit\wui>cd packages\local\CGOTritonDarkBlue

C:\Users\ghautclocq\wrkgit\wui\packages\local\CGOTritonDarkBlue>sencha package build cgotritondarkblue
Wat!
configFile: C:\Users\ghautclocq\bin\Sencha\Architect\Cmd\6.5.0.180\sencha.cfg
Sencha Cmd v6.5.0.180
[ERR] Unknown positional argument cgotritondarkblue

C:\Users\ghautclocq\wrkgit\wui\packages\local\CGOTritonDarkBlue>sencha package build
Wat!
configFile: C:\Users\ghautclocq\bin\Sencha\Architect\Cmd\6.5.0.180\sencha.cfg
Sencha Cmd v6.5.0.180
[INF] Processing Build Descriptor : default
[ERR] Cannot satisfy requirements for "classic"!
[ERR]    The following versions cannot be satisfied:
[ERR]       CGOTritonDarkBlue: classic (No matches!)
[ERR] Cannot satisfy requirements for "theme-triton"!
[ERR]    The following versions cannot be satisfied:
[ERR]       CGOTritonDarkBlue: theme-triton (No matches!)
[ERR] Cannot resolve package requirements

[petr.vecera]

Hm I am able to build the theme package when I go into that folder

[email protected] C:\Users\Petr\Documents\ArchitectProjects\fsdafsdfsadgaherhrthnrth\packages\local\theme-triton-09845777-d
1f0-4238-ac8a-5b7bc35bb032
> sencha package build
Sencha Cmd v6.5.0.180
[INF] Processing Build Descriptor : default
[INF] Loading compiler context
[INF] Writing concatenated output to file C:\Users\Petr\Documents\ArchitectProjects\fsdafsdfsadgaherhrthnrth\packages\lo
cal\theme-triton-09845777-d1f0-4238-ac8a-5b7bc35bb032\build\theme-triton-09845777-d1f0-4238-ac8a-5b7bc35bb032-debug.js
[INF] Processing data with CmdJavascriptCompressor
[INF] Writing concatenated output to file C:\Users\Petr\Documents\ArchitectProjects\fsdafsdfsadgaherhrthnrth\packages\lo
cal\theme-triton-09845777-d1f0-4238-ac8a-5b7bc35bb032\build\theme-triton-09845777
....

[dnoizet]

The themes are created with Sencha Themer. Could that be the issue?

And could you share the package.json of the theme you built?

Thanks.

[dnoizet]

Okay, about theme building issue, found the culprit!

For some reason, themes generated by Sencha Themer have the following line in their package.json file:

"framework": "--name",

where it should be :

"framework": "ext",

Then I can build the package with sencha package build!

Below is an example of package.json generated by Sencha Themer:

{
    /**
     * The name of the package.
     */
    "name": "CGOTritonGreen",

    "sencha": {
        /**
         * Alternate names for this package.
         *
         *    "alternateName": [],
         */

         /**
          * The namespace of this package.
          *
          * As a general rule, all classes that belong to this package should be under this namespace
          * if multiple namespaces are part of this package, set this to "".
          */
         "namespace": "Ext",

        /**
         * The package type.
         *
         * Sencha Cmd understands the following types of packages:
         *  - code : An arbitrary package of code for use by applications or other packages.
         *  - theme : A package to be used as an application’s theme.
         *  - locale : A package containing localization strings or locale-specific code.
         *  - template : A package containing one or more templates.
         */
        "type": "theme",

        /**
         * The parent theme package (only for "theme" package type).
         *
         * Themes can also use extend to inherit Sass and resources from another theme package.
         *
         *    "extend": "parent-theme-package",
         */
        "extend": "theme-triton",

        /**
         * The toolkit used by this theme (only for "theme" package type).
         *
         * Themes can specify the toolkit they apply to ("classic" or "modern").
         *
         *    "toolkit": "classic",
         */
        "toolkit": "classic",

         /**
          * The author of the package.
          *
          * Required only if you are distributing this package through a Sencha Cmd repository,
          * in which case it should match the name you assign to your local package repository.
          */
        "creator": "anonymous",

        /**
         * A summarized description of this package.
         */
        "summary": "Short summary",

        /**
         * A detailed description of this package.
         */
        "detailedDescription": "Long description of package",

        /**
         * The package version.
         *
         * Typically, changes to the package should come along with changes to the version.
         * This number should be in this format: d+(.d+)*
         */
        "version": "1.0.0",

        /**
         * The version that users can transparently update from without requiring code changes.
         *
         * In addition the version property, packages can also indicate the degree to which
         * they are backward compatible using the compatVersion property.
         */
        "compatVersion": "1.0.0",

        /**
         * Spec. version of this package.json file.
         * This is set automatically by Sencha Cmd when first generating this file
         */
        "format": "1",

        /**
         * Additional resources used during theme slicing operations
         */
        "slicer": {
            "js": [
                {
                    "path": "${package.dir}/sass/example/custom.js",
                    "isWidgetManifest": true
                }
            ]
        },

        /**
         * Controls the output directory.
         */
        "output": "${package.dir}/build",

        /**
         * Indicates whether this is a locally developed package or downloaded form a repository.
         * Defaults to true on newly generated packages, should not be changed.
         */
        "local": true,

        /**
         * The theme (package) this package will use (e.g., "ext-theme-neptune", etc.).
         * This is only needed if the built package will be used by a non-Cmd application.
         *
         *     "theme": "ext-theme-classic",
         */

        /**
         * Sass configuration properties.
         */
        "sass" : {
            "save":"${toolkit.name}/sass/save.scss",

            /**
             * The namespace to which this package's SASS corresponds. The default value of
             * "Ext" means that the files in ./sass/src (and ./sass/var) match classes in
             * the Ext" root namespace. In other words, "Ext.panel.Panel" maps to
             * ./sass/src/panel/Panel.scss.
             *
             * To style classes from any namespace, set this to blank. If this is blank,
             * then to style "Ext.panel.Panel" you would put SASS in
             * ./sass/src/Ext/panel/Panel.scss.
             */
            "namespace": "",

            /**
             * Comma-separated list of files or folders containing extra Sass. These
             * files are automatically included in the Sass compilation. By default this
             * is just "etc/all.scss" to allow import directives to control the order
             * other files are included.
             *
             * All "etc" files are included at the top of the Sass compilation in their
             * dependency order:
             *
             *      +-------+---------+
             *      |       | base    |
             *      | theme +---------+
             *      |       | derived |
             *      +-------+---------+
             *      | packages        |  (in package dependency order)
             *      +-----------------+
             *      | application     |
             *      +-----------------+
             */
            "etc": [
            "${package.dir}/sass/etc/all.scss",
            "${package.dir}/${toolkit.name}/sass/etc/sencha-themer-defaults.scss"
        ],

            /**
             * Comma-separated list of folders containing Sass variable definitions
             * files. These file can also define Sass mixins for use by components.
             *
             * All "var" files are included after "etc" files in the Sass compilation in
             * dependency order:
             *
             *      +-------+---------+
             *      |       | base    |
             *      | theme +---------+
             *      |       | derived |
             *      +-------+---------+
             *      | packages        |  (in package dependency order)
             *      +-----------------+
             *      | application     |
             *      +-----------------+
             *
             * The "sass/var/all.scss" file is always included at the start of the var
             * block before any files associated with JavaScript classes.
             */
            "var": [
            "${package.dir}/sass/var",
            "${package.dir}/${toolkit.name}/sass/var/sencha-themer-defaults.scss",
            "${package.dir}/${toolkit.name}/sass/var/themer-ui-variables.scss"
        ],

            /**
             * Comma-separated list of folders containing Sass rule files.
             *
             * All "src" files are included after "var" files in the Sass compilation in
             * dependency order (the same order as "etc"):
             *
             *      +-------+---------+
             *      |       | base    |
             *      | theme +---------+
             *      |       | derived |
             *      +-------+---------+
             *      | packages        |  (in package dependency order)
             *      +-----------------+
             *      | application     |
             *      +-----------------+
             */
            "src": [
            "${package.dir}/sass/src",
            "${package.dir}/${toolkit.name}/sass/save",
            "${package.dir}/${toolkit.name}/sass/src/sencha-themer-defaults.scss"
        ]
        },

        /**
         * This is the comma-separated list of folders where classes reside. These
         * classes must be explicitly required to be included in the build.
         */
        "classpath": [
            "${package.dir}/src"
        ],

        /**
         * Comma-separated string with the paths of directories or files to search. Any classes
         * declared in these locations will be automatically required and included in the build.
         * If any file defines an Ext JS override (using Ext.define with an "override" property),
         * that override will in fact only be included in the build if the target class specified
         * in the "override" property is also included.
         */
        "overrides": [
            "${package.dir}/overrides"
        ],

        "example": {
            /**
             * One or more folders that contain example applications for this package.
             */
            "path": [
                "${package.dir}/examples"
            ]

            /**
             * You can list apps specifically.
             *
             *      "apps": [
             *          "demo1",
             *          "demo2"
             *      ]
             *
             * By default, all subfolders in the path are considered example applications.
             */
        },

        /**
         * The framework this package will use (i.e., "ext" or "touch").
         * This is only needed if the built package will be used by a non-Cmd application.
         *
         *     "framework": "ext",
         */
        "framework": "--name",

        /**
         * Packages can require other packages in the same way that applications can require
         * packages.
         *
         * Can be specified as an array of package names or configuration objects.
         *
         *      "requires": [
         *          "foo",
         *          "[email protected]",
         *          {
         *              "name": "baz"
         *              "version": "1.5"
         *          }
         *      ]
         *
         * Can also be specified as an object:
         *
         *      "requires": {
         *          "foo": "2.2",
         *          "bar": {
         *              "minVersion": "1.1",
         *              "version": "2.0"
         *          }
         *      }
         */
        "requires": []
    }
}

[petr.vecera]

Oh nice findings, the --name looks like a bug in the old Themer. I checked it and it's no longer happening in the new Themer, which will be released soon.

Let us know if it the builds of themes are better or if the problems still persists.

Thanks

[dnoizet]

Hi Petr,

Now that I can build each theme, it's easier. But I see that building a theme wastes time to build the rtl, debug and rtl-debug versions of the theme. Can it be avoided and only build the production non-rtl version of a theme?