Ext TS maps TypeScript default imports, consisting of npm package name plus relative path, to Ext JS fully-qualified names, consisting of Ext namespace and local name, separated by a dot.

Note that whenever you see named imports in Ext TS, the source must be a non-Ext JS, standard ECMAScript module. For example, the Jangaroo Runtime utility functions are named exports and as such require named imports (see complete class example below).

For backwards-compatibility, for each npm package, the Ext package name and namespace prefix to use can be customized via the file jangaroo.config.js, which must be located next to the corresponding package.json file, like so:

const { jangarooConfig } = require("@jangaroo/core");

module.exports = jangarooConfig({
  type: "code",
  sencha: {
    name: "com.coremedia.blueprint__blueprint-forms",
    namespace: "com.coremedia.blueprint.studio",
  },
});

This example shows the (shortened) jangaroo.config.js file of npm package @coremedia-blueprint/studio-client.main.blueprint-forms, located in apps/main/blueprint/blueprint-forms/, taking care of the corresponding Ext package being called com.coremedia.blueprint__blueprint-forms (like in CoreMedia Content Cloud v10) and all Ext classes in this package using the Ext namespace prefix com.coremedia.blueprint.studio.

For example, in Ext TS, the class util/ContentInitializer.ts in the blueprint-forms package must be imported as follows:

import ContentInitializer from "@coremedia-blueprint/studio-client.main.blueprint-forms/util/ContentInitializer";

In Ext JS, using the namespace configuration from above, it is then "required" or "used" like so:

  requires: ["com.coremedia.blueprint.studio.util.ContentInitializer", ...], ...

which is exactly the former fully-qualified Ext JS name of that class in CoreMedia Content Cloud v10 (2107).