New Features Described in Oracle JET's Documentation for Release 17.0.0

Here are updates to the documentation for Oracle JET to describe new features and enhancements added to Release 17.0.0.

For other changes in this release, see the product Release Notes.

Oracle JET

Documentation updates for this release of Oracle JET.

  • Progressive Web App support

    Progressive Web App support for Oracle JET web apps has been enhanced with the inclusion of an assets folder with a range of image files for splash screens and app launcher icons. See Add Progressive Web App Support to Web Apps.

  • TypeScript

    This release of JET uses version 5.4.5 of TypeScript. For more detail about TypeScript in Oracle JET apps, see Configure Oracle JET Apps for TypeScript Development.

  • Omit component version number from the output directory path

    The oraclejetconfig.json file now includes an unversioned property. When set to true, Oracle JET generates components in a directory path without the component version number when you run the Oracle JET commands that output components (build, serve). For example, with "unversioned": true, the output path for components in an Oracle JET app is as shown in the following snippet of the terminal console:

    runAllComponentHooks for component: web\components\my-component-pack\component.json finished

    Without the unversioned property in the oraclejetconfig.json file, use of the Oracle JET --omit-component-version command-line argument with the build or serve command generates components in a directory path without the component version number.

    If the oraclejetconfig.json file includes "unversioned": false, Oracle JET generates components in a directory path with the component version number when you run the build or serve command, even if you use the --omit-component-version command-line argument. For example:

    runAllComponentHooks for component: web\components\my-component-pack\1.0.0\component.json finished

    In other words, setting "unversioned" to true or false in the oraclejetconfig.json file takes precedence over the command-line argument. See Properties in the oraclejetconfig.json File.

  • Path mapping

    This release provides an expanded explanation of the path mapping process and its available configuration options. It now includes more information on using the path mapping configuration file to add third-party tools and libraries to your apps. See Add Third-Party Tools or Libraries to Your Oracle JET App and Understand the Path Mapping Script File and Configuration Options.

Migration Information

Note the following change that affect JET apps that you migrate to Release 17.0.0:

See the following sections for step-by-step information about migrating your app to this release of Oracle JET.

Oracle JET Audit Framework

Using and Extending the Oracle JET Audit Framework has been updated in the following ways.

An important change for rule writers to note is that JAF now enforces the rule that any custom configuration properties that you define for your audits must be defined under the customOpts rule property. Please scan your rules for direct access of custom options from <context>.ruleOpts, <context>.rulePack.getRuleOptions() or <context>.rulePack.getRuleOption() and amend to use the relevant custom option API. For example, <context>.rulePack.getRuleCustomOptions(). See Define the Runtime Properties of Custom Audit Rules.

New and changed JAF audit features:

  • JAF includes changes to existing rules:

    • The best-practice and redwoood-strict profiles increased the severity from major to blocker for the oj-html-style-bp-font-family and oj-css-style-bp-font-family rules with message IDs of JET-5040 and JET-6035.
    • The oj-html-style-bp-margin-padding rule uses the new stylemember registered listener type to reduce its invocation overhead.
    • The following rules now additionally check for style attribute members, such as style.borderColor="xxx" and style.minHeight="xxx".
      oj-html-style-abs-units
oj-html-style-bp-color
oj-html-style-bp-display
oj-html-style-bp-font
oj-html-style-bp-font-family
    • The following rules have been updated to support the new <oj-if> element.
      oj-html-bindif-test 
oj-html-binding-as-slot-child
oj-html-form-bindif 
oj-slot-pref-content 
oj-tsx-form-bindif

      And the following rules now recommend use of oj-if rather than oj-bind-if: 

      oj-css-style-bp-display 
oj-html-ko_databind
oj-html-ko-comment
oj-html-style-display
  • JAF includes new rules: 
    • Rule: oj-html-bp-button-xs-chroming  Severity: major  Message ID: jet-5135
Rule: oj-tsx-bp-button-xs-chroming  Severity: major  Message ID: jet-7220
For <oj-button> and <oj-c-button> property size="xs" is only supported using ghost chroming and icon
display mode. For size="xs":
  1) chroming="ghost" is required, and:
  2) display="icons" is required.
    • Rule: oj-html-bp-title-to-tooltip  Severity: major  Message ID: jet-5140
Rule: oj-tsx-bp-title-to-tooltip  Severity: major  Message ID: jet-7230
The 'tooltip' attribute matches the Redwood specification, but 'title' does not. Additionally, 
there are accessibility issues with 'title' that are solved using 'tooltip'.
Action: replace attribute 'title' with 'tooltip'.
    • Rule: oj-acc-button-label  Severity: blocker  Message ID: jet-2185
Rule: oj-tsx-acc-button-label  Severity: blocker  Message ID: jet-7225
For button accessibility, the 'label' attribute should be applied to the following button
components: <oj-c-button>, <oj-c-menu-button> and <oj-c-split-menu-button>.
    • Rule: oj-tsx-style-bp-margin-padding  Severity: major¹  Message ID's: jet-7200, 7201, 7202
Rule: oj-html-style-bp-margin-padding  Severity: major¹  Message ID's: jet-5120, 5121, 5122
For best practices, margin/padding classes such as 'oj-sm-margin-4x' and 'oj-sm-padding-4x' are
preferred over numeric values. See the Margins & Padding demo category in the JET cookbook under
the Framework Utility CSS category.
Negative values are not supported.
The currently supported values are 4px - 48px, 0.25rem - 12rem, and 0.25em - 12em.
¹ Possibility of more than 1 severity since there are 3 message ID's
    • Rule: oj-tsx-button-size-chroming  Severity: major¹  Message ID's: jet-7215, 7216
Rule: oj-html-button-size-chroming  Severity: major¹  Message ID's: jet-5130, 5131
The Redwood input designs require the use of small buttons. Please update the button attributes in
the 'start' or 'end' slot:
 1) For <oj-button>, use class="oj-button-sm"
 2) For <oj-c-button>, set size="sm" and chroming="ghost"
¹ Possibility of more than 1 severity since there are 2 message ID's
    • Rule: oj-tsx-style-abs-units  Severity: major¹  Message ID's: jet-7210, 7211, 7212
In general it is preferable to use relative length units in place of absolute units. Specifically,
'rem' units are recommended because they proportionately adjust to the root font size. 'rem' can be
used for anything that takes a length unit - e.g. font-size, line-height, width, height, padding,
margin, etc. However, there are cases where absolute units are required. This project is configured
to allow absolute units in selector names that include one of the following terms: 'image, and
'picture'.
¹ Possibility of more than 1 severity since there are 3 message ID's

    • The following new rules are only active if the configuration file inherits from the redwood-strict profile using the extends configuration property. 

      Rule: oj-html-redwood-clear-icon  Severity: blocker  Message ID: jet-0535
For JET components <oj-input-text>, <oj-c-input-text>, <oj-c-input-password>, and
<oj-c-input-sensitive>, the 'clear-icon' attribute value 'always' is not permitted using the
'redwood-strict' profile'. Only Typing, Focus, and Selection states
can show the Clear button. Other states don't show the Clear button since there is no active value
to clear or delete. The value 'always' would keep the icon showing at all times, while 'conditional'
behaves in the manner above.

Rule: oj-tsx-redwood-clear-icon  Severity: blocker  Message ID: jet-8000
For JET components <oj-input-text>, <oj-c-input-text>, <oj-c-input-password>, and
<oj-c-input-sensitive>, the 'clear-icon' attribute value 'always' is not permitted using the
'redwood-strict' profile'. Only Typing, Focus, and Selection states can show the Clear button. 
Other states don't show the Clear button since there is no active value
to clear/delete. The value 'always' would keep the icon showing at all times, while 'conditional'
behaves in the manner above.

Changes for rule writers:

  • New utility library context.utils.configUtils which contains configuration convenience methods. For example, the getExtendsProfileName() method returns the profile name from which the current active configuration was extended. See ConfigLib: Configuration Library.

  • New rule registration listener type, stylemember. Listeners of this type fire when a style attribute and a member reference are declared. For example, style.marginTop="4px".
  • Walkthrough of a Sample Virtual DOM TSX Audit Rule has been added to illustrate how to write audit rules for the TSX files of an Oracle JET virtual DOM app.
  • Fixed failure in metaLib.getPropStatus() if the specified user component has no properties.

Documentation Accessibility

For information about Oracle's commitment to accessibility, visit the Oracle Accessibility Program website at http://www.oracle.com/pls/topic/lookup?ctx=acc&id=docacc.

Access to Oracle Support

Oracle customer access to and use of Oracle support services will be pursuant to the terms and conditions specified in their Oracle order for the applicable services.