Release 11.1.0

README.md

@@ -1,12 +1,12 @@
-# @oracle/oraclejet-tooling 11.0.0
+# @oracle/oraclejet-tooling 11.1.0
 
 ## About the tooling API
 This tooling API contains methods to build and serve Oracle JET web and hybrid mobile apps. It is intended to be used with task running tools such as grunt or gulp. The APIs can also be invoked directly. 
 
 This is an open source project maintained by Oracle Corp.
 
 ## Installation
-This module will be automatically installed when you scaffold a web or hybrid mobile app following the [Oracle JET Developers Guide](http://www.oracle.com/pls/topic/lookup?ctx=jet1100&id=homepage).
+This module will be automatically installed when you scaffold a web or hybrid mobile app following the [Oracle JET Developers Guide](http://www.oracle.com/pls/topic/lookup?ctx=jet1110&id=homepage).
 
 ## [Contributing](https://github.com/oracle/oraclejet-tooling/blob/master/CONTRIBUTING.md)
 Oracle JET is an open source project.  Pull Requests are currently not being accepted. See 

RELEASENOTES.md

@@ -1,6 +1,6 @@
 ## Release Notes for oraclejet-tooling ##
 
-### 11.0.0
+### 11.1.0
 * oraclejet-tooling now requires node 12.21 or later
 
 ### 5.2.0

lib/addwebpack.js

@@ -16,7 +16,7 @@ const exec = require('child_process').exec;
 function updateOraclejetConfig() {
   return new Promise((resolve) => {
     util.log('Adding bundler and bundlerName properties to oraclejetconfig.json');
-    const oraclejetConfigJson = util.readJsonAndReturnObject(CONSTANTS.ORACLE_JET_CONFIG_JSON);
+    const oraclejetConfigJson = util.getOraclejetConfigJson();
     oraclejetConfigJson.bundler = 'webpack';
     oraclejetConfigJson.bundleName = CONSTANTS.DEFAULT_BUNDLE_NAME;
     util.writeObjectAsJsonFile(CONSTANTS.ORACLE_JET_CONFIG_JSON, oraclejetConfigJson);
@@ -31,7 +31,7 @@ function updateOraclejetConfig() {
 function installWebpack() {
   return new Promise((resolve) => {
     util.log('Installing webpack and required loaders');
-    exec('npm i -D webpack text-loader style-loader css-loader', {
+    exec(`npm i -D webpack@${CONSTANTS.WEBPACK_VERSION} text-loader@${CONSTANTS.TEXT_LOADER_VERSION} style-loader@${CONSTANTS.STYLE_LOADER_VERSION} css-loader@${CONSTANTS.CSS_LOADER_VERSION} --save-dev --save-exact`, {
       env: {
         ...process.env,
         // speed up npm install when on vpn

lib/buildCommon.js

@@ -51,14 +51,21 @@ function _isSvgFile(fileName) {
   return path.extname(fileName) === '.svg';
 }
 
+function _getThemePlatform(themePlatform, themeName) {
+  // No platform other than web for redwood, stable themes
+  return (themeName !== CONSTANTS.DEFAULT_PCSS_THEME && themeName !== CONSTANTS.DEFAULT_STABLE_THEME) ? themePlatform : 'web';
+}
+
 function _getThemeSrcPath(theme) {
-  return `${config('paths').staging.themes}/${theme.name}/${theme.platform}`;
+  const themePlatform = _getThemePlatform(theme.platform, theme.name);
+  return `${config('paths').staging.themes}/${theme.name}/${themePlatform}`;
 }
 
 function _getThemeDestPath(theme, stagingPath, ext, cssonly, servePlatform, serveDestination) {
   let dest;
   let base;
   const stylePath = config('paths').src.styles;
+  const themePlatform = _getThemePlatform(theme.platform, theme.name);
   if (cssonly) {
     if (servePlatform === 'web') {
       base = path.resolve(stagingPath);
@@ -69,9 +76,9 @@ function _getThemeDestPath(theme, stagingPath, ext, cssonly, servePlatform, serv
     } else {
       base = path.resolve(stagingPath, '..', 'platforms', servePlatform, 'app/src/main/assets', 'www');
     }
-    dest = util.destPath(path.join(base, stylePath, theme.name, theme.version, theme.platform, '/'));
+    dest = util.destPath(path.join(base, stylePath, theme.name, theme.version, themePlatform, '/'));
   } else {
-    dest = util.destPath(path.join(stagingPath, stylePath, theme.name, theme.version, theme.platform, '/'));
+    dest = util.destPath(path.join(stagingPath, stylePath, theme.name, theme.version, themePlatform, '/'));
   }
   return dest;
 }
@@ -101,23 +108,22 @@ function _copyDefaultResourcesToStaging(theme, stagingPath, themeName) {
   const srcBase = `${config('paths').staging.themes}/${themeName}`;
   const destBase = util.destPath(path.join(stagingPath, config('paths').src.styles, themeName, util.getJETVersion()));
 
-  const defaultFontsSrc = path.join(srcBase, theme.platform, 'fonts');
-  const defaultImagesSrc = path.join(srcBase, theme.platform, 'images');
-
-  const defaultFontsDest = path.join(destBase, theme.platform, 'fonts');
-  const defaultImagesDest = path.join(destBase, theme.platform, 'images');
+  const themePlatform = _getThemePlatform(theme.platform, themeName);
+  const defaultFontsSrc = path.join(srcBase, themePlatform, 'fonts');
+  const defaultImagesSrc = path.join(srcBase, themePlatform, 'images');
 
+  const defaultFontsDest = path.join(destBase, themePlatform, 'fonts');
+  const defaultImagesDest = path.join(destBase, themePlatform, 'images');
   if (config('defaultTheme') === CONSTANTS.DEFAULT_THEME && themeName !== CONSTANTS.DEFAULT_PCSS_THEME && themeName !== CONSTANTS.DEFAULT_STABLE_THEME) {
     const commonSrc = path.join(srcBase, CONSTANTS.COMMON_THEME_DIRECTORY);
     const commonDest = path.join(destBase, CONSTANTS.COMMON_THEME_DIRECTORY);
     fs.copySync(commonSrc, commonDest);
   }
-
   fs.copySync(defaultFontsSrc, defaultFontsDest);
   fs.copySync(defaultImagesSrc, defaultImagesDest);
 }
 
-function _copyComponentsToStaging(componentsSource) {
+function _copyExchangeComponentsToStaging({ context, componentsSource }) {
   return new Promise((resolve) => {
     if (util.isObjectEmpty(componentsSource)) {
       // No component source present, continue...
@@ -132,11 +138,15 @@ function _copyComponentsToStaging(componentsSource) {
             componentDirPath, CONSTANTS.JET_COMPONENT_JSON);
           if (fs.existsSync(componentJsonPath)) {
             const componentJson = util.readJsonAndReturnObject(componentJsonPath);
-            const destBase = path.join(config('paths').staging.stagingPath, config('paths').src.javascript, config('paths').components);
             if (!util.hasProperty(componentJson, 'version')) {
               util.log.error(`Missing property 'version' in '${component}' component's/pack's definition file.`);
             }
-            const destPath = path.join(destBase, component, componentJson.version);
+            const destPath = util.generatePathToComponentRoot({
+              context,
+              component,
+              root: context.opts.stagingPath,
+              scripts: configPaths.src.javascript
+            });
             fs.copySync(componentDirPath, destPath);
             resolve();
           } else {
@@ -175,8 +185,10 @@ function _copySrcResourcesToThemes(theme) {
   const srcBase = `${config('paths').src.common}/${config('paths').src.themes}/${theme.name}`;
   const destBase = util.destPath(path.join(config('paths').staging.themes, theme.name));
   const srcCommon = path.join(srcBase, CONSTANTS.COMMON_THEME_DIRECTORY);
+  const themePlatform = _getThemePlatform(theme.platform, theme.name);
+
   _copyFilesExcludeScss(srcCommon, path.join(destBase, CONSTANTS.COMMON_THEME_DIRECTORY));
-  _copyFilesExcludeScss(path.join(srcBase, theme.platform), path.join(destBase, theme.platform));
+  _copyFilesExcludeScss(path.join(srcBase, themePlatform), path.join(destBase, themePlatform));
 }
 
 function _copyMultiThemesSrcResourcesToThemes(themes) {
@@ -192,8 +204,10 @@ function _copyMultiThemesToStaging(opts, stagingPath, livereload) {
     const srcBase = config('paths').staging.themes;
     opts.themes.forEach((singleTheme) => {
       // copy css
-      const src = path.join(srcBase, singleTheme.name, singleTheme.platform);
-      const dest = util.destPath(path.join(stagingPath, config('paths').src.styles, singleTheme.name, singleTheme.version, singleTheme.platform, '/'));
+      const themePlatform = _getThemePlatform(singleTheme.platform, singleTheme.name);
+
+      const src = path.join(srcBase, singleTheme.name, themePlatform);
+      const dest = util.destPath(path.join(stagingPath, config('paths').src.styles, singleTheme.name, singleTheme.version, themePlatform, '/'));
       fs.copySync(src, dest);
 
       // copy common dir
@@ -217,25 +231,23 @@ function _copyThemesToStaging(context) {
   // copy the entire theme/platform folder during build
   const ext = util.getThemeCssExtention(buildType);
   const src = _getThemeSrcPath(theme, ext, livereload);
+
   const dest = _getThemeDestPath(theme, stgPath, ext, livereload, platform, opts.destination);
   const rwood = Object.assign({},
-    { name: 'redwood', platform: 'web', compile: false, version: util.getJETVersion() },
-    { name: 'stable', platform: 'web', compile: false, version: util.getJETVersion() });
-
-  if (opts.theme.cssGeneratedType === 'add-on' || (config('defaultTheme') === CONSTANTS.DEFAULT_PCSS_THEME || config('defaultTheme') === CONSTANTS.DEFAULT_STABLE_THEME)) {
+    { name: 'redwood', platform: 'web', compile: false, version: util.getJETVersion() });
+  if (opts.theme.cssGeneratedType === 'add-on' && opts.theme.basetheme === CONSTANTS.DEFAULT_PCSS_THEME) {
     const rwsrc = _getThemeSrcPath(rwood, ext, livereload);
     const rwdest = _getThemeDestPath(rwood, stgPath, ext, livereload, platform, opts.destination);
     fs.copySync(rwsrc, rwdest);
   }
 
   const stable = Object.assign({},
     { name: 'stable', platform: 'web', compile: false, version: util.getJETVersion() });
-  if (opts.theme.cssGeneratedType === 'add-on' || (config('defaultTheme') === CONSTANTS.DEFAULT_PCSS_THEME || config('defaultTheme') === CONSTANTS.DEFAULT_STABLE_THEME)) {
+  if (opts.theme.cssGeneratedType === 'add-on' && opts.theme.basetheme === CONSTANTS.DEFAULT_STABLE_THEME) {
     const stsrc = _getThemeSrcPath(stable, ext, livereload);
     const stdest = _getThemeDestPath(stable, stgPath, ext, livereload, platform, opts.destination);
     fs.copySync(stsrc, stdest);
   }
-
   return new Promise((resolve, reject) => {
     // copy to themes
     if ((theme.name !== CONSTANTS.DEFAULT_THEME || theme.name !== CONSTANTS.DEFAULT_PCSS_THEME ||
@@ -407,7 +419,10 @@ module.exports = {
     const fileResult = util.getFileList(context.buildType, srcFileList);
 
     return _copyFileToStaging(fileResult)
-      .then(() => _copyComponentsToStaging(componentsSource[0]))
+      .then(() => (_copyExchangeComponentsToStaging({
+        context,
+        componentsSource: componentsSource[0]
+      })))
       .then(() => {
         util.log('Copy finished.');
         return context;

lib/buildCommon/minifyComponent.js

@@ -29,28 +29,32 @@ class ComponentMinifier {
     );
   }
   getExtraEmpties() {
-    const componentsCache = util.getComponentsCache();
     const extraEmpties = new Set();
     const { componentJson } = this;
-    if (util.hasProperty(componentJson, 'dependencies')) {
-      let componentCache;
-      Object.keys(componentJson.dependencies).forEach((dependency) => {
-        componentCache = componentsCache[dependency];
-        if (componentCache) {
-          if (componentCache.componentJson.type === 'pack') {
-            util.log.error(`Cannot have a dependency on a pack (${dependency}).`);
+    ComponentMinifier.addComponentDependenciesToExtraEmpties({ extraEmpties, componentJson });
+    return Array.from(extraEmpties);
+  }
+  static addComponentDependenciesToExtraEmpties({ extraEmpties, componentJson }) {
+    const DEPENDENCIES = 'dependencies';
+    if (util.hasProperty(componentJson, DEPENDENCIES)) {
+      const componentsCache = util.getComponentsCache();
+      Object.keys(componentJson[DEPENDENCIES])
+        .forEach((dependency) => {
+          const componentCache = componentsCache[dependency];
+          if (componentCache) {
+            if (componentCache.componentJson.type === 'pack') {
+              util.log.error(`Cannot have a dependency on a pack (${dependency}).`);
+            } else {
+              extraEmpties.add(componentCache.importName);
+              extraEmpties.add(`${CONSTANTS.PATH_MAPPING_PREFIX_TOKEN}${componentCache.importName}`);
+            }
           } else {
-            extraEmpties.add(componentCache.importName);
-            extraEmpties.add(`${CONSTANTS.PATH_MAPPING_PREFIX_TOKEN}${componentCache.importName}`);
+            // eslint-disable-next-line prefer-template
+            const output = `${dependency} is an invalid dependency in component ${componentJson.name}. Please make sure that it is available in your application.\ndependencies: ` + JSON.stringify(componentJson.dependencies);
+            util.log.error(output);
           }
-        } else {
-          // eslint-disable-next-line prefer-template
-          const output = `${dependency} is an invalid dependency in component ${componentJson.name}. Please make sure that it is available in your application.\ndependencies: ` + JSON.stringify(componentJson.dependencies);
-          util.log.error(output);
-        }
-      });
+        });
     }
-    return Array.from(extraEmpties);
   }
 }
 
@@ -172,7 +176,8 @@ class ResourceComponentMinifier extends PackComponentMinifier {
           context,
           rjsOptions: this.generateRjsOptions({ publicModule }),
           root: packName,
-          extraExcludes: this.getExtraExcludes({ publicModule })
+          extraExcludes: this.getExtraExcludes({ publicModule }),
+          extraEmpties: this.getExtraEmpties()
         });
       });
     }
@@ -268,10 +273,36 @@ class PackBundlesMinifier extends ComponentMinifier {
         },
         root: packName,
         tempBundleFile,
+        extraEmpties: this.getExtraEmpties(bundleKey)
       });
     });
     return config;
   }
+  getExtraEmpties(bundleKey) {
+    const extraEmpties = new Set();
+    const componentsCache = util.getComponentsCache();
+    const { packComponentJson } = this;
+    // Loop through the list of bundle contents
+    packComponentJson.bundles[bundleKey]
+      .forEach((bundlePath) => {
+        // Bundle paths are of the form <pack>/<component>/file. Use that
+        // to construct the full component name for look up in the cache
+        const [pack, component] = path.normalize(bundlePath).split(path.sep);
+        const fullComponentName = `${pack}-${component}`;
+        if (componentsCache[fullComponentName]) {
+          // Check if the component being bundled has dependencies. If it does,
+          // add them to the empty / exclusion list for the bundle. This makes
+          // sure that r.js recognizes the dependencies when creating the bundle
+          // and does not add their contents to the it.
+          const { componentJson } = componentsCache[fullComponentName];
+          ComponentMinifier.addComponentDependenciesToExtraEmpties({
+            extraEmpties,
+            componentJson
+          });
+        }
+      });
+    return Array.from(extraEmpties);
+  }
 }
 
 /**

lib/buildCommon/optimizeComponent.js

@@ -80,7 +80,7 @@ function optimizeComponentSetup({
         separateCSS: context.opts.requireJsComponent.separateCSS,
         generateSourceMaps: context.opts.requireJsComponent.generateSourceMaps
       };
-      const exclude = ['css', 'ojcss', 'ojL10n', 'text', 'normalize', 'css-builder'];
+      const exclude = ['css', 'ojcss', 'ojs/ojcss', 'ojL10n', 'text', 'normalize', 'ojs/normalize', 'css-builder'];
       if (extraExcludes) {
         extraExcludes.forEach((extraExclude) => {
           pathMappings[extraExclude] = 'empty:';
@@ -186,24 +186,36 @@ async function ojcssPatchBeforeOptimize({ root, context }) {
           .substring(CONSTANTS.PATH_MAPPING_PREFIX_TOKEN.length);
         // Split path mapping by path seperator
         const pathMappingParts = path.normalize(unprefixedPathMapping).split(path.sep);
-        // If split contains two entries, path mapping corresponds to a pack component. If
-        // it contains one entry, path mapping corresponds to a singleton component
-        const componentPath = pathMappingParts.length === 2 ?
-          util.generatePathToComponentRoot({
-            context,
-            pack: pathMappingParts[0],
-            component: pathMappingParts[1],
-            root: context.opts.stagingPath,
-            scripts: configPaths.src.javascript
-          })
-          :
-          util.generatePathToComponentRoot({
-            context,
-            component: pathMappingParts[0],
-            root: context.opts.stagingPath,
-            scripts: configPaths.src.javascript
-          });
-        componentRequireJs.paths[prefixedPathMapping] = path.resolve(componentPath);
+        let componentPath;
+        if (pathMappingParts.length === 2) {
+          // If split contains two entries and is a component, path mapping
+          // corresponds to a pack component.
+          const [pack, component] = pathMappingParts;
+          componentPath = util.isWebComponent({ pack, component }) ?
+            util.generatePathToComponentRoot({
+              context,
+              pack,
+              component,
+              root: context.opts.stagingPath,
+              scripts: configPaths.src.javascript
+            }) :
+            null;
+        } else if (pathMappingParts.length === 1) {
+          // If split contains one entry and is a component, path mapping corresponds
+          // to a singleton component.
+          const [component] = pathMappingParts;
+          componentPath = util.isWebComponent({ component }) ?
+            util.generatePathToComponentRoot({
+              context,
+              component,
+              root: context.opts.stagingPath,
+              scripts: configPaths.src.javascript
+            }) :
+            null;
+        }
+        if (componentPath) {
+          componentRequireJs.paths[prefixedPathMapping] = path.resolve(componentPath);
+        }
       });
     // Check *.js files in the component folder for ojcss imports
     getJavascriptFilesInComponentFolder({ context })

lib/buildCommon/webpack.js

@@ -48,7 +48,8 @@ function _createConfig(context) {
       alias: {
         ojL10n: 'ojL10n-loader',
         text: 'text-loader',
-        css: 'style-loader'
+        css: 'style-loader',
+        ojcss: 'style-loader'
       }
     },
     resolve: {

lib/constants.js

@@ -105,5 +105,9 @@ module.exports = {
   WEBPACK_TOOLS_PATH: 'dist/webpack-tools',
   VDOM_ARCHITECTURE: 'vdom',
   DEFAULT_BUNDLE_NAME: 'bundle.js',
-  PATH_MAPPING_PREFIX_TOKEN: '@'
+  PATH_MAPPING_PREFIX_TOKEN: '#',
+  WEBPACK_VERSION: '5.44.0',
+  TEXT_LOADER_VERSION: '0.0.1',
+  CSS_LOADER_VERSION: '6.0.0',
+  STYLE_LOADER_VERSION: '3.1.0'
 };