imports.qdoc

Go to the documentation of this file.

// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
/*!
\page qtqml-javascript-imports.html
\meta {keywords} {qmltopic}
\title Importing JavaScript Resources in QML
\brief Description of how to import and use JavaScript resources in QML documents
 
\l{qtqml-javascript-resources.html}{JavaScript resources} may be imported by
QML documents and other JavaScript resources.  JavaScript resources may be
imported via either relative or absolute URLs.  In the case of a relative URL,
the location is resolved relative to the location of the \l {QML Documents}{QML document} or
\l{qtqml-javascript-resources.html}{JavaScript Resource} that contains the
import.  If the script file is not accessible, an error will occur.  If the
JavaScript needs to be fetched from a network resource, the component's
\l {QQmlComponent::status()}{status} is set to "Loading" until the script has
been downloaded.
 
JavaScript resources may also import QML modules and other JavaScript
resources.  The syntax of an import statement within a JavaScript resource
differs slightly from an import statement within a QML document, which is
documented thoroughly below.
 
\section1 Importing a JavaScript Resource from a QML Document
 
A QML document may import a JavaScript resource with the following syntax:
\code
import "ResourceURL" as Qualifier
\endcode
For example:
\code
import "jsfile.js" as Logic
\endcode
 
Imported JavaScript resources are always qualified using the "as" keyword.  The
qualifier for JavaScript resources must start with an uppercase letter, and must
be unique, so there is always a one-to-one mapping between qualifiers and JavaScript
files. (This also means qualifiers cannot be named the same as built-in JavaScript
objects such as \c Date and \c Math).
 
The functions defined in an imported JavaScript file are available to objects
defined in the importing QML document, via the
\c{"Qualifier.functionName(params)"} syntax.  Functions in JavaScript resources
may take parameters whose types can be any QML value types or
object types, as well as normal JavaScript types.  The normal
\l{qtqml-cppintegration-data.html}{data type conversion rules} will apply to
parameters and return values when calling such functions from QML.
 
\section1 Imports Within JavaScript Resources
 
In \c {QtQuick 2.0}, support has been added to allow JavaScript resources to import
other JavaScript resources and also QML type namespaces using a variation of
the standard QML import syntax (where all of the previously described rules and
qualifications apply).
 
Due to the ability of a JavaScript resource to import another script or QML
module in this fashion in \c {QtQuick 2.0}, some extra semantics are defined:
\list
\li a script with import statements will not inherit the imports from the QML document that imported it (accessing Component.errorString will fail, for example)
\li a script without import statements will inherit the imports from the QML document that imported it (accessing Component.errorString will succeed, for example)
\li a shared script (defined as .pragma library) will not inherit the imports from QML documents even if the script does not import other scripts or modules
\endlist
 
The first semantic is conceptually correct, given that a particular script
might be imported by any number of QML files.  The second semantic is retained
for the purposes of backwards-compatibility.  The third semantic remains
unchanged from the current semantics for shared scripts, but is clarified here
in respect to the newly possible case (where the script imports other scripts
or modules).
 
\section2 Importing a JavaScript Resource from Another JavaScript Resource
 
A JavaScript resource may import another in the following fashion:
\code
import * as MathFunctions from "factorial.mjs";
\endcode
Or:
\code
.import "filename.js" as Qualifier
\endcode
 
The former is standard ECMAScript syntax for importing ECMAScript modules, and
only works from within ECMAScript modules as denoted by the \c mjs file
extension. The latter is an extension to JavaScript provided by the \c QML
engine and will work also with non-modules. As an extension superseded by the
ECMAScript standard, its usage is discouraged.
 
When a JavaScript file is imported this way, it is imported with a qualifier.
The functions in that file are then accessible from the importing script via the
qualifier (that is, as \tt{Qualifier.functionName(params)}).
 
Sometimes it is desirable to have the functions made available in the importing
context without needing to qualify them. In this case ECMAScript modules and the
JavaScript \c import statement should be used without the \c as qualifier.
 
For example, the QML code below left calls \c showCalculations() in \c script.mjs,
which in turn can call \c factorial() in \c factorial.mjs, as it has included
\c factorial.mjs using \c import.
 
\table
\row
\li {1,2} \snippet qml/integrating-javascript/includejs/app.qml 0
\li \snippet qml/integrating-javascript/includejs/script.mjs 0
\row
\li \snippet qml/integrating-javascript/includejs/factorial.mjs 0
\endtable
 
The \l{QtQml::Qt::include()} {Qt.include()} function includes one JavaScript
file from another without using ECMAScript modules and without qualifying the
import. It makes all functions and variables from the other file available in
the current file's namespace, but ignores all pragmas and imports defined in
that file. This is not a good idea as a function call should never modify the
caller's context.
 
\l{QtQml::Qt::include()} {Qt.include()} is deprecated and should be avoided. It
will be removed in a future version of Qt.
 
\section2 Importing a QML Module from a JavaScript Resource
 
A JavaScript resource may import a QML module in the following fashion:
\code
.import TypeNamespace MajorVersion.MinorVersion as Qualifier
\endcode
 
Below you can see an example that also shows how to use the QML types from a
module imported in javascript:
 
\code
.import Qt.test 1.0 as JsQtTest
 
var importedEnumValue = JsQtTest.MyQmlObject.EnumValue3
\endcode
 
In particular, this may be useful in order to access functionality provided
via a singleton type; see QML_SINGLETON for more information.
 
Your JavaScript resource by default can access all imports of the component
that imports the resource. It does not have access to the components's imports
if it is declared as a stateless library (using \c{.pragma library}) or contains
an explicit \c{.import} statement.
 
\note The .import syntax doesn't work for scripts used in \l {WorkerScript}
 
\sa {Defining JavaScript Resources in QML}
 
*/