@nx/web 17.2.0-beta.8 → 17.2.0-beta.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/web",
-  "version": "17.2.0-beta.8",
+  "version": "17.2.0-beta.9",
   "private": false,
   "description": "The Nx Plugin for Web Components contains generators for managing Web Component applications and libraries within an Nx workspace. It provides:\n\n\n- Integration with libraries such as Jest, Cypress, and Storybook.\n\n- Scaffolding for creating buildable libraries that can be published to npm.\n\n- Utilities for automatic workspace refactoring.",
   "repository": {
@@ -34,9 +34,9 @@
     "detect-port": "^1.5.1",
     "http-server": "^14.1.0",
     "tslib": "^2.3.0",
-    "@nx/devkit": "17.2.0-beta.8",
-    "@nx/js": "17.2.0-beta.8",
-    "@nrwl/web": "17.2.0-beta.8"
+    "@nx/devkit": "17.2.0-beta.9",
+    "@nx/js": "17.2.0-beta.9",
+    "@nrwl/web": "17.2.0-beta.9"
   },
   "publishConfig": {
     "access": "public"

package/src/executors/file-server/schema.d.ts

@@ -1,7 +1,7 @@
 export interface Schema {
-  host: string;
-  port: number;
-  ssl: boolean;
+  host?: string;
+  port?: number;
+  ssl?: boolean;
   sslKey?: string;
   sslCert?: string;
   proxyUrl?: string;

package/src/generators/application/application.js

@@ -9,16 +9,42 @@ const path_1 = require("path");
 const versions_2 = require("../../utils/versions");
 const init_1 = require("../init/init");
 const get_npm_scope_1 = require("@nx/js/src/utils/package-json/get-npm-scope");
+const has_webpack_plugin_1 = require("../../utils/has-webpack-plugin");
 function createApplicationFiles(tree, options) {
-    (0, devkit_1.generateFiles)(tree, (0, path_1.join)(__dirname, options.bundler === 'vite' ? './files/app-vite' : './files/app-webpack'), options.appProjectRoot, {
-        ...options,
-        ...(0, devkit_1.names)(options.name),
-        tmpl: '',
-        offsetFromRoot: (0, devkit_1.offsetFromRoot)(options.appProjectRoot),
-        rootTsConfigPath: (0, js_1.getRelativePathToRootTsConfig)(tree, options.appProjectRoot),
-    });
-    if (options.unitTestRunner === 'none') {
-        tree.delete((0, path_1.join)(options.appProjectRoot, './src/app/app.element.spec.ts'));
+    if (options.bundler === 'vite') {
+        (0, devkit_1.generateFiles)(tree, (0, path_1.join)(__dirname, './files/app-vite'), options.appProjectRoot, {
+            ...options,
+            ...(0, devkit_1.names)(options.name),
+            tmpl: '',
+            offsetFromRoot: (0, devkit_1.offsetFromRoot)(options.appProjectRoot),
+            rootTsConfigPath: (0, js_1.getRelativePathToRootTsConfig)(tree, options.appProjectRoot),
+        });
+    }
+    else {
+        (0, devkit_1.generateFiles)(tree, (0, path_1.join)(__dirname, './files/app-webpack'), options.appProjectRoot, {
+            ...options,
+            ...(0, devkit_1.names)(options.name),
+            tmpl: '',
+            offsetFromRoot: (0, devkit_1.offsetFromRoot)(options.appProjectRoot),
+            rootTsConfigPath: (0, js_1.getRelativePathToRootTsConfig)(tree, options.appProjectRoot),
+            webpackPluginOptions: (0, has_webpack_plugin_1.hasWebpackPlugin)(tree)
+                ? {
+                    target: 'web',
+                    outputPath: (0, devkit_1.joinPathFragments)('dist', options.appProjectRoot != '.'
+                        ? options.appProjectRoot
+                        : options.projectName),
+                    tsConfig: './tsconfig.app.json',
+                    main: './src/main.ts',
+                    assets: ['./src/favicon.ico', './src/assets'],
+                    index: './src/index.html',
+                    baseHref: '/',
+                    styles: [`./src/styles.${options.style}`],
+                }
+                : null,
+        });
+        if (options.unitTestRunner === 'none') {
+            tree.delete((0, path_1.join)(options.appProjectRoot, './src/app/app.element.spec.ts'));
+        }
     }
 }
 async function setupBundler(tree, options) {
@@ -41,35 +67,37 @@ async function setupBundler(tree, options) {
             skipFormat: true,
         });
         const project = (0, devkit_1.readProjectConfiguration)(tree, options.projectName);
-        const prodConfig = project.targets.build.configurations.production;
-        const buildOptions = project.targets.build.options;
-        buildOptions.assets = assets;
-        buildOptions.index = (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'src/index.html');
-        buildOptions.baseHref = '/';
-        buildOptions.styles = [
-            (0, devkit_1.joinPathFragments)(options.appProjectRoot, `src/styles.${options.style}`),
-        ];
-        // We can delete that, because this projest is an application
-        // and applications have a .babelrc file in their root dir.
-        // So Nx will find it and use it
-        delete buildOptions.babelUpwardRootMode;
-        buildOptions.scripts = [];
-        prodConfig.fileReplacements = [
-            {
-                replace: (0, devkit_1.joinPathFragments)(options.appProjectRoot, `src/environments/environment.ts`),
-                with: (0, devkit_1.joinPathFragments)(options.appProjectRoot, `src/environments/environment.prod.ts`),
-            },
-        ];
-        prodConfig.optimization = true;
-        prodConfig.outputHashing = 'all';
-        prodConfig.sourceMap = false;
-        prodConfig.namedChunks = false;
-        prodConfig.extractLicenses = true;
-        prodConfig.vendorChunk = false;
-        (0, devkit_1.updateProjectConfiguration)(tree, options.projectName, project);
+        if (project.targets.build) {
+            const prodConfig = project.targets.build.configurations.production;
+            const buildOptions = project.targets.build.options;
+            buildOptions.assets = assets;
+            buildOptions.index = (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'src/index.html');
+            buildOptions.baseHref = '/';
+            buildOptions.styles = [
+                (0, devkit_1.joinPathFragments)(options.appProjectRoot, `src/styles.${options.style}`),
+            ];
+            // We can delete that, because this projest is an application
+            // and applications have a .babelrc file in their root dir.
+            // So Nx will find it and use it
+            delete buildOptions.babelUpwardRootMode;
+            buildOptions.scripts = [];
+            prodConfig.fileReplacements = [
+                {
+                    replace: (0, devkit_1.joinPathFragments)(options.appProjectRoot, `src/environments/environment.ts`),
+                    with: (0, devkit_1.joinPathFragments)(options.appProjectRoot, `src/environments/environment.prod.ts`),
+                },
+            ];
+            prodConfig.optimization = true;
+            prodConfig.outputHashing = 'all';
+            prodConfig.sourceMap = false;
+            prodConfig.namedChunks = false;
+            prodConfig.extractLicenses = true;
+            prodConfig.vendorChunk = false;
+            (0, devkit_1.updateProjectConfiguration)(tree, options.projectName, project);
+        }
+        // TODO(jack): Flush this out... no bundler should be possible for web but the experience isn't holistic due to missing features (e.g. writing index.html).
     }
     else if (options.bundler === 'none') {
-        // TODO(jack): Flush this out... no bundler should be possible for web but the experience isn't holistic due to missing features (e.g. writing index.html).
         const project = (0, devkit_1.readProjectConfiguration)(tree, options.projectName);
         project.targets.build = {
             executor: `@nx/js:${options.compiler}`,
@@ -78,7 +106,6 @@ async function setupBundler(tree, options) {
                 main,
                 outputPath: (0, devkit_1.joinPathFragments)('dist', options.appProjectRoot),
                 tsConfig,
-                assets,
             },
         };
         (0, devkit_1.updateProjectConfiguration)(tree, options.projectName, project);
@@ -96,9 +123,6 @@ async function addProject(tree, options) {
         tags: options.parsedTags,
         targets,
     }, options.standaloneConfig);
-    if (options.bundler !== 'vite') {
-        await setupBundler(tree, options);
-    }
 }
 function setDefaults(tree, options) {
     const nxJson = (0, devkit_1.readNxJson)(tree);
@@ -127,8 +151,11 @@ async function applicationGeneratorInternal(host, schema) {
         skipFormat: true,
     });
     tasks.push(webTask);
-    createApplicationFiles(host, options);
     await addProject(host, options);
+    if (options.bundler !== 'vite') {
+        await setupBundler(host, options);
+    }
+    createApplicationFiles(host, options);
     if (options.bundler === 'vite') {
         const { viteConfigurationGenerator, createOrEditViteConfig } = (0, devkit_1.ensurePackage)('@nx/vite', versions_2.nxVersion);
         // We recommend users use `import.meta.env.MODE` and other variables in their code to differentiate between production and development.

package/src/generators/application/files/app-webpack/webpack.config.js__tmpl__

@@ -1,8 +1,38 @@
+<% if (webpackPluginOptions) { %>
+const { NxWebpackPlugin } = require('@nx/webpack');
+const { join } = require('path');
+
+module.exports = {
+  output: {
+    path: join(__dirname, '<%= offsetFromRoot %><%= webpackPluginOptions.outputPath %>'),
+  },
+  devServer: {
+    port: 4200
+  },
+  plugins: [
+    new NxWebpackPlugin({
+      tsConfig: '<%= webpackPluginOptions.tsConfig %>',
+      main: '<%= webpackPluginOptions.main %>',
+      index: '<%= webpackPluginOptions.index %>',
+      baseHref: '<%= webpackPluginOptions.baseHref %>',
+      assets: <%- JSON.stringify(webpackPluginOptions.assets) %>,
+      styles: <%- JSON.stringify(webpackPluginOptions.styles) %>,
+      outputHashing: process.env['NODE_ENV'] === 'production' ? 'all' : 'none',
+      optimization: process.env['NODE_ENV'] === 'production',
+    })
+  ],
+};
+<% } else { %>
 const { composePlugins, withNx, withWeb } = require('@nx/webpack');
 
 // Nx plugins for webpack.
-module.exports = composePlugins(withNx(), withWeb(), (config) => {
-  // Update the webpack config as needed here.
-  // e.g. `config.plugins.push(new MyPlugin())`
-  return config;
-});
+module.exports = composePlugins(
+  withNx(),
+  withWeb(),
+  (config) => {
+    // Update the webpack config as needed here.
+    // e.g. `config.plugins.push(new MyPlugin())`
+    return config;
+  }
+);
+<% } %>

package/src/utils/has-webpack-plugin.d.ts

@@ -0,0 +1,2 @@
+import { Tree } from '@nx/devkit';
+export declare function hasWebpackPlugin(tree: Tree): boolean;

package/src/utils/has-webpack-plugin.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hasWebpackPlugin = void 0;
+const devkit_1 = require("@nx/devkit");
+function hasWebpackPlugin(tree) {
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    return !!nxJson.plugins?.some((p) => typeof p === 'string'
+        ? p === '@nx/webpack/plugin'
+        : p.plugin === '@nx/webpack/plugin');
+}
+exports.hasWebpackPlugin = hasWebpackPlugin;

package/src/generators/application/files/app-webpack/src/environments/environment.prod.ts__tmpl__

@@ -1,3 +0,0 @@
-export const environment = {
-  production: true
-};

package/src/generators/application/files/app-webpack/src/environments/environment.ts__tmpl__

@@ -1,6 +0,0 @@
-// This file can be replaced during build by using the `fileReplacements` array.
-// When building for production, this file is replaced with `environment.prod.ts`.
-
-export const environment = {
-  production: false
-};