Leosvel Pérez Espinosa dc67660fec

fix(misc): update artifact generator option descriptions and cleanup leftovers (#29077 )

- Update artifact generator schemas:
- Clarify `path` is the artifact file path relative to the current
working directory
  - Clarify `name` is the artifact symbol name
- Remove prompt for `name` and remove it from the important options
(won't be displayed by default in Nx Console generation UI, it will be
part of the collapsed options) given that most of the time, it's meant
to match the filename (last segment of the `path`)
- Remove some leftover options related to the name and path formats that
were previously missed
- Fix an issue with NestJS generators
- Fix an issue with Next `page` generator

<!-- Please make sure you have read the submission guidelines before
posting an PR -->
<!--
https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr
-->

<!-- Please make sure that your commit message follows our format -->
<!-- Example: `fix(nx): must begin with lowercase` -->

<!-- If this is a particularly complex change or feature addition, you
can request a dedicated Nx release for this pull request branch. Mention
someone from the Nx team or the `@nrwl/nx-pipelines-reviewers` and they
will confirm if the PR warrants its own release for testing purposes,
and generate it for you if appropriate. -->

## Current Behavior
<!-- This is the behavior we have today -->

## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #

2024-11-28 09:44:44 -05:00

6.0 KiB

Raw Blame History

Add a New Lit Project

The code for this example is available on GitHub:

{% github-repository url="https://github.com/nrwl/nx-recipes/tree/main/lit" /%}

Supported Features

Because we are not using an Nx plugin for Lit, there are few items we'll have to configure manually. We'll have to configure our own build system. There are no pre-created Lit-specific code generators. And we'll have to take care of updating any framework dependencies as needed.

{% pill url="/features/run-tasks" %}✅ Run Tasks{% /pill %} {% pill url="/features/cache-task-results" %}✅ Cache Task Results{% /pill %} {% pill url="/ci/features/remote-cache" %}✅ Share Your Cache{% /pill %} {% pill url="/features/explore-graph" %}✅ Explore the Graph{% /pill %} {% pill url="/ci/features/distribute-task-execution" %}✅ Distribute Task Execution{% /pill %} {% pill url="/getting-started/editor-setup" %}✅ Integrate with Editors{% /pill %} {% pill url="/features/automate-updating-dependencies" %}✅ Automate Updating Nx{% /pill %} {% pill url="/features/enforce-module-boundaries" %}✅ Enforce Module Boundaries{% /pill %} {% pill url="/features/generate-code" %}🚫 Use Code Generators{% /pill %} {% pill url="/features/automate-updating-dependencies" %}🚫 Automate Updating Framework Dependencies{% /pill %}

Install Lit and Other Dependencies

Install all the dependencies we need:

{% tabs %} {%tab label="npm"%}

nx add @nx/node
npm add -D lit http-server

{% /tab %} {%tab label="yarn"%}

nx add @nx/node
yarn add -D lit http-server

{% /tab %} {%tab label="pnpm"%}

nx add @nx/node
pnpm add -D lit http-server

{% /tab %}

{% tab label="bun" %}

nx add @nx/node
bun add -D lit http-server

{% /tab %} {% /tabs %}

Create an Application

We'll start with a node application and then tweak the settings to match what we need. Add a new node application to your workspace with the following command:

nx g @nx/node:app apps/my-lit-app

Choose none for the node framework, since we won't be using this as a node app.

Turn the Application into a Lit Application

Update main.ts:

import { LitElement, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';

@customElement('my-element')
export class MyElement extends LitElement {
  @property()
  version = 'STARTING';

  render() {
    return html`
      <p>Welcome to the Lit tutorial!</p>
      <p>This is the ${this.version} code.</p>
    `;
  }
}

Create index.html:

<!DOCTYPE html>
<html>
  <head>
    <script type="module" src="main.js"></script>
    <style>
      body {
        font-family: 'Open Sans', sans-serif;
        font-size: 1.5em;
        padding-left: 0.5em;
      }
    </style>
  </head>
  <body>
    <my-element></my-element>
  </body>
</html>

Update the Build Task

In the project.json file update the options under the build target. The properties that need to change are format, bundle, thirdParty, and assets:

{
  "targets": {
    "build": {
      "executor": "@nx/esbuild:esbuild",
      "outputs": ["{options.outputPath}"],
      "defaultConfiguration": "production",
      "options": {
        "outputPath": "dist/apps/my-lit-app",
        "format": ["esm"],
        "bundle": true,
        "thirdParty": true,
        "main": "apps/my-lit-app/src/main.ts",
        "tsConfig": "apps/my-lit-app/tsconfig.app.json",
        "assets": ["apps/my-lit-app/src/assets", "apps/my-lit-app/index.html"],
        "generatePackageJson": true,
        "esbuildOptions": {
          "sourcemap": true,
          "outExtension": {
            ".js": ".js"
          }
        }
      }
    }
  }
}

Now, when you run the build, there should be index.html, main.js and package.json under dist/apps/my-lit-app. Try it out:

nx build my-lit-app

Update the Serve Task

To serve the app, we'll completely overwrite the existing serve task. Change it to this:

{
  "targets": {
    "serve": {
      "dependsOn": ["build"],
      "executor": "nx:run-commands",
      "options": {
        "commands": [
          "http-server dist/apps/my-lit-app",
          "nx watch --projects=my-lit-app --includeDependentProjects -- nx build my-lit-app"
        ]
      }
    }
  }
}

"dependsOn": ["build"] will ensure that the build task is always run before the serve task. The entries under commands will each be run in parallel. The http-server line serves the build output with a simple server. The nx watch line will automatically re-run the build task any time the application code or any project it depends on changes.

Run the serve task and see your Lit app in action:

nx serve my-lit-app

Create a Library

Let's create a library that our Lit application is going to consume. To create a new library, install the @nx/js package and run:

nx g @nx/js:lib libs/my-lib

Once the library is created, update the following files.

export function someFunction(): string {
  return 'some function';
}

import { LitElement, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { someFunction } from '@my-org/my-lib';

@customElement('my-element')
export class MyElement extends LitElement {
  @property()
  version = 'STARTING';

  render() {
    return html`
      <p>Welcome to the Lit tutorial!</p>
      <p>This is the ${this.version} code.</p>
      <p>Imported from a library: ${someFunction()}.</p>
    `;
  }
}

Now when you serve your application, you'll see the content from the library being displayed.

6.0 KiB Raw Blame History