nxkit / nxkit

Keyboard crafted https://nx.dev plugins for your workspace

NxKit

Keyboard crafted plugins for your Nx workspace.

NxKit is an open source set of Nx plugins, and the easiest way to use Playwright, Style Dictionary in your Nx workspace.

🔌 📦 ⚒️

---

Available plugins

🔌 Plugin	📦 Package
Playwright
Style Dictionary

NxKit & Nx Compatibility

NxKit version	Nx version
>= 4.0.0	^17.0.0
>= 3.0.0	^16.0.0
>= 2.1.2 < 3.0.0	^15.8.0
>= 1.0.0 < 2.1.2	^15.4.2

NxKit & Node Compatibility

NxKit version	Node version
>= 5.0.0	^18.0.0
>= 1.0.0	^16.0.0

Contributing

First off, thanks for taking the time to contribute! Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make will benefit everybody else and are greatly appreciated. Feel free to dive in and open an new issue or submit a Pull Request.

Read our CONTRIBUTING guide to get started.

Code of conduct

NxKit is dedicated to providing a welcoming, diverse, and harrassment-free experience for everyone. We expect everyone in the NxKit community to abide by our Code of Conduct. Please read it.

License

This project is licensed under the MIT License.

See LICENSE for more information.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Sebastian Duque Gutierrez 💻 🔧 👀 🤔 🚇 🚧 📆 📖	Andrés Valencia Díaz 📓	Dmitriy Stepanenko 💻 🐛	Joep Kockelkorn 💻 🐛	José Gregorio Rodríguez Chacón 🤔 💻	Benjamin JEGARD 💻	Jeroen Akkerman 💻
Dominykas Astrauskas 🐛	Maxime 🐛	Isaac Mann 🐛
Add your contributions

This project follows the all-contributors specification. Contributions of any kind welcome!

nxkit's Issues

Playwright: devServerTarget not working with webpack served projects

Current Behavior

When using the devServerTarget with a webpack served application, e2e tests fail as playwright cannot establish a connection with the localhost port hosting the frontend project.

If vite is used as the frontend project bundler, e2e tests work as excepted when using the devServerTarget option.

Also, when using webpack, if the frontend project is served in a separate terminal instance and the e2e tests are run using

--baseUrl http://localhost:4200 --skipServe

the tests work.

Expected Behaviour

E2E tests using the devServerTarget with a webpack served project should work as they do with a vite served project.

Github Repo

No response

Steps to Reproduce

1. npx create-nx-workspace@latest acme --nx-cloud false
2. cd acme && npm i -D @nrwl/react @nxkit/playwright
3. npx nx g @nrwl/react:app myapp --e2eTestRunner none --bundler webpack
4. npx nx g @nxkit/playwright:proj myapp-e2e --frontendProject myapp
5. npx nx e2e myapp-e2e

Nx Report

>  NX   Report complete - copy this into the issue template

   Node : 16.17.0
   OS   : darwin arm64
   pnpm : 7.14.2
   
   nx : 15.4.2
   @nrwl/angular : Not Found
   @nrwl/cypress : 15.4.2
   @nrwl/detox : Not Found
   @nrwl/devkit : 15.4.2
   @nrwl/esbuild : Not Found
   @nrwl/eslint-plugin-nx : 15.4.2
   @nrwl/expo : Not Found
   @nrwl/express : Not Found
   @nrwl/jest : 15.4.2
   @nrwl/js : 15.4.2
   @nrwl/linter : 15.4.2
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : Not Found
   @nrwl/nx-cloud : Not Found
   @nrwl/nx-plugin : Not Found
   @nrwl/react : 15.4.2
   @nrwl/react-native : Not Found
   @nrwl/rollup : 15.4.2
   @nrwl/schematics : Not Found
   @nrwl/storybook : Not Found
   @nrwl/web : 15.4.2
   @nrwl/webpack : 15.4.2
   @nrwl/workspace : 15.4.2
   @nrwl/vite : 15.4.2
   typescript : 4.8.4
   ---------------------------------------
   Local workspace plugins:
   ---------------------------------------
   Community plugins:
         @nxkit/playwright: 1.0.0

Failure Logs

pnpm nx e2e myapp-e2e

> nx run myapp2-e2e:e2e

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:4200/, http://127.0.0.1:4200/
<i> [webpack-dev-server] 404s will fallback to '/index.html'

>  NX  Web Development Server is listening at http://localhost:4200/

Entrypoint main [big] 1.6 MiB (1.89 MiB) = runtime.js 50.4 KiB vendor.js 1.5 MiB main.js 57.5 KiB 3 auxiliary assets
Entrypoint polyfills [big] 773 KiB (956 KiB) = runtime.js 50.4 KiB polyfills.js 723 KiB 2 auxiliary assets
Entrypoint styles [big] 436 KiB (548 KiB) = runtime.js 50.4 KiB styles.css 399 bytes styles.js 385 KiB 2 auxiliary assets
chunk (runtime: runtime) main.js (main) 49.3 KiB [initial] [rendered]
chunk (runtime: runtime) polyfills.js (polyfills) 674 KiB [initial] [rendered]
chunk (runtime: runtime) runtime.js (runtime) 33.8 KiB [entry] [rendered]
chunk (runtime: runtime) styles.css, styles.js (styles) 367 KiB (javascript) 398 bytes (css/mini-extract) [initial] [rendered]
chunk (runtime: runtime) vendor.js (vendor) (id hint: vendor) 1.48 MiB [initial] [rendered] split chunk (cache group: vendor) (name: vendor)
webpack compiled successfully (33f1f1affff67af0)
running command:  pnpm exec playwright test --output dist/apps/myapp2-e2e/test-results --config apps/myapp2-e2e/playwright.config.ts
No errors found.

Running 3 tests using 3 workers
  1) [webkit] › app.spec.ts:3:5 › myapp2 ===========================================================

    page.goto: Could not connect to the server.
    =========================== logs ===========================
    navigating to "http://localhost:4200/", waiting until "load"
    ============================================================

      2 |
      3 | test('myapp2', async ({ page }) => {
    > 4 |   await page.goto('/');
        |              ^
      5 |
      6 |   const greeting = page.locator('h1');
      7 |   await expect(greeting).toContainText('Welcome  myapp2');

        at /Users/sduque/dev/playground/acme/apps/myapp2-e2e/src/e2e/app.spec.ts:4:14
        at /Users/sduque/dev/playground/acme/node_modules/.pnpm/@[email protected]/node_modules/@playwright/test/lib/workerRunner.js:376:15
        at TestInfoImpl._runFn (/Users/sduque/dev/playground/acme/node_modules/.pnpm/@[email protected]/node_modules/@playwright/test/lib/testInfo.js:144:7)
        at /Users/sduque/dev/playground/acme/node_modules/.pnpm/@[email protected]/node_modules/@playwright/test/lib/workerRunner.js:331:26
        at TimeoutManager.runWithTimeout (/Users/sduque/dev/playground/acme/node_modules/.pnpm/@[email protected]/node_modules/@playwright/test/lib/timeoutManager.js:62:7)
        at TestInfoImpl._runWithTimeout (/Users/sduque/dev/playground/acme/node_modules/.pnpm/@[email protected]/node_modules/@playwright/test/lib/testInfo.js:133:26)
        at WorkerRunner._runTest (/Users/sduque/dev/playground/acme/node_modules/.pnpm/@[email protected]/node_modules/@playwright/test/lib/workerRunner.js:312:5)
        at WorkerRunner.runTestGroup (/Users/sduque/dev/playground/acme/node_modules/.pnpm/@[email protected]/node_modules/@playwright/test/lib/workerRunner.js:192:11)
        at process.<anonymous> (/Users/sduque/dev/playground/acme/node_modules/.pnpm/@[email protected]/node_modules/@playwright/test/lib/worker.js:74:5)

  2) [chromium] › app.spec.ts:3:5 › myapp2 =========================================================

    page.goto: net::ERR_CONNECTION_REFUSED at http://localhost:4200/
    =========================== logs ===========================
    navigating to "http://localhost:4200/", waiting until "load"
    ============================================================

      2 |
      3 | test('myapp2', async ({ page }) => {
    > 4 |   await page.goto('/');
        |              ^
      5 |
      6 |   const greeting = page.locator('h1');
      7 |   await expect(greeting).toContainText('Welcome  myapp2');

        at /Users/sduque/dev/playground/acme/apps/myapp2-e2e/src/e2e/app.spec.ts:4:14
        at /Users/sduque/dev/playground/acme/node_modules/.pnpm/@[email protected]/node_modules/@playwright/test/lib/workerRunner.js:376:15
        at TestInfoImpl._runFn (/Users/sduque/dev/playground/acme/node_modules/.pnpm/@[email protected]/node_modules/@playwright/test/lib/testInfo.js:144:7)
        at /Users/sduque/dev/playground/acme/node_modules/.pnpm/@[email protected]/node_modules/@playwright/test/lib/workerRunner.js:331:26
        at TimeoutManager.runWithTimeout (/Users/sduque/dev/playground/acme/node_modules/.pnpm/@[email protected]/node_modules/@playwright/test/lib/timeoutManager.js:62:7)

Additional Information

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Add option to choose linter

Is your feature request related to a problem?

No

Describe the solution or feature you'd like

Add the --linter option to the plugins' project generators in order to be able to choose linting or not, or to choose from the different Nx supported linters.

Describe alternatives you've considered

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

How to delete previous output before new build

What type of documentation issue are you reporting?

Documentation improvement

Is there a specific documentation page you are reporting? Enter the URL here.

No response

Additional context

Hi,

I'm trying to work out how to delete a previous build as part of the usual build command but cannot work out how to go about it.

I can see from the code that it looks for options.deleteOutputPath however when I add the following the my style-dictionary.config.ts it fails with The "path" argument must be of type string. Received undefined.

platforms: {
    options: {
      deleteOutputPath: true
    },
}

This is on latest version.

Could you please document how to go about doing a clean before build? Does it belong in the project.json or the style dictionary config?

TIA!

Code of Conduct

• I agree to follow this project's Code of Conduct

`@nxkit/style-dictionary` broken as of `[email protected]`

Current Behavior

Getting an empty build after upgrading to [email protected] with [email protected]

Expected Behaviour

Should get a working build

Github Repo

No response

Steps to Reproduce

1. Create a fresh nx repo
2. Setup style-dictionary as described inside the readme
3. Run build
4. Get empty build

Nx Report

>  NX   Report complete - copy this into the issue template

   Node   : 20.9.0
   OS     : win32-x64
   npm    : 9.5.1
   
   nx                 : 17.2.4
   @nx/js             : 17.2.4
   @nx/jest           : 17.2.4
   @nx/linter         : 17.2.4
   @nx/eslint         : 17.2.4
   @nx/workspace      : 17.2.4
   @nx/devkit         : 17.2.4
   @nx/eslint-plugin  : 17.2.4
   @nx/next           : 17.2.4
   @nx/react          : 17.2.4
   @nrwl/tao          : 17.2.4
   @nx/web            : 17.2.4
   typescript         : 5.2.2
   ---------------------------------------
   Community plugins:
   @nxkit/style-dictionary : 4.0.0

Failure Logs

> nx run my-tokens:build

scss
No properties for _variables.scss. File not created.
android
No properties for font_dimens.xml. File not created.
No properties for colors.xml. File not created.
compose
No properties for StyleDictionaryColor.kt. File not created.
No properties for StyleDictionarySize.kt. File not created.
ios
No properties for StyleDictionaryColor.h. File not created.
No properties for StyleDictionaryColor.m. File not created.
No properties for StyleDictionarySize.h. File not created.
No properties for StyleDictionarySize.m. File not created.
ios-swift
No properties for StyleDictionary+Class.swift. File not created.
No properties for StyleDictionary+Enum.swift. File not created.
No properties for StyleDictionary+Struct.swift. File not created.
ios-swift-separate-enums
No properties for StyleDictionaryColor.swift. File not created.
No properties for StyleDictionarySize.swift. File not created.
✅ Successfully built design tokens

Additional Information

After investigation it appears that format function does not get triggered.

Let's say I have the following setup , minifyDictionary function does not get triggered,

// style-dictionary.config.ts
const config: Config | Config[] = [
  {
    source: ['src/tokens/**/*.json'],
    platforms: {
      ts: {
        transformGroup: 'js',
        buildPath: 'typescript/',
        files: [
          {
            destination: 'design-tokens.ts',
            format: 'minifyDictionary',
          },
        ],
      },
    },
  },
];

// src/extensions/formats/index.ts

const customFormatsBuilder: CustomFormatsBuilder = (
  extensionContext: ExtensionContext
) => {
console.log('builder gets called')
  return {
    minifyDictionary: function ({ dictionary }) {
       console.log('minifyDictionary call')
       ...
     }
};

export default customFormatsBuilder;

// project.json
{
...
  "targets": {
    "build": {
      "executor": "@nxkit/style-dictionary:build",
      "outputs": ["{options.outputPath}"],
      "options": {
        "outputPath": "libs/my-tokens/src/build",
        "styleDictionaryConfig": "libs/my-tokens/style-dictionary.config.ts",
        "tsConfig": "libs/my-tokens/tsconfig.json",
        "customActions": "libs/my-tokens/src/extensions/actions/index.ts",
        "customFormats": "libs/my-tokens/src/extensions/formats/index.ts"
      }
    },
...
}

Code of Conduct

• I agree to follow this project's Code of Conduct

Create project doesn't work

Current Behavior

While running: npx nx generate @nxkit/playwright:project some-project

It fails with this error:

>  NX  Generating @nxkit/playwright:project


 >  NX   (0 , js_1.initGenerator) is not a function

   Pass --verbose to see the stacktrace.

Expected Behaviour

It shoudl work and create the project

Github Repo

No response

Steps to Reproduce

1. Install the dependency: npm i -D @nxkit/playwright
2. Try to run the command to create the project: npx nx generate @nxkit/playwright:project some-project

Nx Report

>  NX  Generating @nxkit/playwright:project


 >  NX   (0 , js_1.initGenerator) is not a function

   Pass --verbose to see the stacktrace.

Failure Logs

No response

Additional Information

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Style-Dictionary: Clean build path directories before generating files.

Current Behavior

In a configuration without the outputPath option configured, the buildPath's for each platform are not getting properly cleaned before a new build.

Expected Behaviour

buildPath's for each platform should be cleaned before a new build.

Github Repo

No response

Steps to Reproduce

Nx Report

pnpm nx report
>  NX  Falling back to ts-node for local typescript execution. This may be a little slower.
  - To fix this, ensure @swc-node/register and @swc/core have been installed

 >  NX   Report complete - copy this into the issue template

   Node : 18.14.0
   OS   : darwin arm64
   pnpm : 7.30.5
   
   nx                      : 15.8.9
   @nrwl/js                : 15.8.9
   @nrwl/jest              : 15.8.9
   @nrwl/linter            : 15.8.9
   @nrwl/workspace         : 15.8.9
   @nrwl/cli               : 15.8.9
   @nrwl/cypress           : 15.8.9
   @nrwl/devkit            : 15.8.9
   @nrwl/esbuild           : 15.8.9
   @nrwl/eslint-plugin-nx  : 15.8.9
   @nrwl/next              : 15.8.9
   @nrwl/node              : 15.8.9
   @nrwl/react             : 15.8.9
   @nrwl/rollup            : 15.8.9
   @nrwl/storybook         : 15.8.9
   @nrwl/tao               : 15.8.9
   @nrwl/vite              : 15.8.9
   @nrwl/web               : 15.8.9
   @nrwl/webpack           : 15.8.9
   @nrwl/nx-cloud          : 15.3.2
   typescript              : 4.9.5
   ---------------------------------------
   Community plugins:
   @nx-tools/nx-container  : 4.0.3
   @nxext/stencil          : 15.6.0
   @nxkit/playwright       : 2.3.0
   @nxkit/style-dictionary : 2.3.0

Failure Logs

No response

Additional Information

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Include @nx/devkit as a dependency

Current Behavior

Both plugins (playwright and style-dictionary) don't have an Nx version listed in the Nx Plugin Registry because the plugins don't include @nx/devkit as a dependency. Could you please release a version that fixes that?

Thanks,
Isaac (Nx Team)

Expected Behaviour

Add @nx/devkit as a dependency in package.json

Github Repo

No response

Steps to Reproduce

1. Check for an Nx version for the package on the Nx Plugin Registry

Nx Report

n/a

Failure Logs

No response

Additional Information

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Playwright: rename project option as is reserved by Nx

Current Behavior

When a e2e target is run for a project and the --project option is used, one would expect to only the specified playwright project. Instead, Nx parses the --project option as if it was related to an Nx project, failing with not finding that project in the workspace.

Expected Behaviour

We should have another option name for this purpose in order to choose which project from the playwright config to use for that run.

Probably --pwProject can be a good option.

Github Repo

No response

Steps to Reproduce

1. pnpm nx g @nxkit/playwright:proj my-app-e2e
2. pnpm nx e2e my-app-e2e --project chromium

Nx Report

pnpm nx report                                                 

 >  NX   Report complete - copy this into the issue template

   Node : 18.13.0
   OS   : darwin arm64
   pnpm : 7.24.3
   
   nx : 15.5.1
   @nrwl/angular : Not Found
   @nrwl/cypress : 15.5.1
   @nrwl/detox : Not Found
   @nrwl/devkit : 15.5.1
   @nrwl/esbuild : Not Found
   @nrwl/eslint-plugin-nx : 15.5.1
   @nrwl/expo : Not Found
   @nrwl/express : Not Found
   @nrwl/jest : 15.5.1
   @nrwl/js : 15.5.1
   @nrwl/linter : 15.5.1
   @nrwl/nest : Not Found
   @nrwl/next : 15.5.1
   @nrwl/node : 15.5.1
   @nrwl/nx-cloud : 15.0.2
   @nrwl/nx-plugin : Not Found
   @nrwl/react : 15.5.1
   @nrwl/react-native : Not Found
   @nrwl/rollup : 15.5.1
   @nrwl/schematics : Not Found
   @nrwl/storybook : 15.5.1
   @nrwl/web : 15.5.1
   @nrwl/webpack : 15.5.1
   @nrwl/workspace : 15.5.1
   @nrwl/vite : 15.5.1
   typescript : 4.8.4
   ---------------------------------------
   Local workspace plugins:
   ---------------------------------------
   Community plugins:
         @nxkit/playwright: 2.0.1

Failure Logs

>  NX   Cannot find project 'chromium'

Additional Information

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Style Dictionary extension generators override existing files

Current Behavior

When the extensions generator is executed and the custom extension property does not exist in the project.json but the files are present in the file system, the generators still writes the extension path to the file.

Expected Behaviour

The extension generators should check for the file to be written that there is no file under the target path.

Github Repo

No response

Steps to Reproduce

1. nx g @nxkit/style-dictionary:lib tokens
2. nx g @nxkit/style-dictionary:extension --project tokens --extensions actions
3. Delete the customActions option in the project.json file build target
4. Modify the libs/tokens/src/extensions/actions/index.ts file
5. nx g @nxkit/style-dictionary:extension --project tokens --extensions actions
6. Changes made before were overwritten

Nx Report

>  NX   Report complete - copy this into the issue template

   Node : 18.13.0
   OS   : darwin arm64
   pnpm : 7.24.3
   
   nx : 15.5.1
   @nrwl/angular : 15.5.1
   @nrwl/cypress : 15.5.1
   @nrwl/detox : Not Found
   @nrwl/devkit : 15.5.1
   @nrwl/esbuild : Not Found
   @nrwl/eslint-plugin-nx : 15.5.1
   @nrwl/expo : Not Found
   @nrwl/express : Not Found
   @nrwl/jest : 15.5.1
   @nrwl/js : 15.5.1
   @nrwl/linter : 15.5.1
   @nrwl/nest : 15.5.1
   @nrwl/next : 15.5.1
   @nrwl/node : 15.5.1
   @nrwl/nx-cloud : Not Found
   @nrwl/nx-plugin : Not Found
   @nrwl/react : 15.5.1
   @nrwl/react-native : Not Found
   @nrwl/rollup : 15.5.1
   @nrwl/schematics : Not Found
   @nrwl/storybook : Not Found
   @nrwl/web : 15.5.1
   @nrwl/webpack : 15.5.1
   @nrwl/workspace : 15.5.1
   @nrwl/vite : 15.5.1
   typescript : 4.8.4
   ---------------------------------------
   Local workspace plugins:
   ---------------------------------------
   Community plugins:
         @nxkit/playwright: 2.0.1
         @nxkit/style-dictionary: 2.0.1

Failure Logs

No response

Additional Information

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Playwright project.json outputPath and actual path of output don't match

Current Behavior

Generating a new project doesn't set the proper outputPath in the project.json (which leads to the e2e output not being recovered from cache in CI). When generating an e2e app for 'my-app' and running the e2e target, the actual outputPath is dist/apps/my-app-e2e/playwright-report while the config in the project.json points to dist/apps/my-app-e2e/test-results.

Expected Behaviour

The output path of the reporters in the playwright.config.ts should match the outputpath in the e2e and debug targets in the project.json.

Github Repo

https://github.com/JoepKockelkorn/nxkit-playwright-outputpath-bug

Steps to Reproduce

1. run npx nx generate @nxkit/playwright:project my-app-e2e --frontendProject=my-app --no-interactive
2. run npx nx e2e my-app-e2e
3. see dist/apps/my-app-e2e/playwright-report folder is populated
4. delete that folder
5. rerun npx nx e2e my-app-e2e
6. see that the output is not recovered from cache because of the wrong outputpath in project.json

Nx Report

Node : 16.16.0
OS   : darwin x64
npm  : 8.11.0

nx                      : 15.8.6
@nrwl/js                : 15.8.6
@nrwl/linter            : 15.8.6
@nrwl/workspace         : 15.8.6
@nrwl/cli               : 15.8.6
@nrwl/cypress           : 15.8.6
@nrwl/devkit            : 15.8.6
@nrwl/eslint-plugin-nx  : 15.8.6
@nrwl/react             : 15.8.6
@nrwl/tao               : 15.8.6
@nrwl/vite              : 15.8.6
typescript              : 4.9.5
---------------------------------------
Community plugins:
@nxkit/playwright : 2.1.2

Failure Logs

No response

Additional Information

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Add playwright plugin preset

Is your feature request related to a problem?

No

Describe the solution or feature you'd like

Add the option to use playwright's plugin as a workspace preset when using create-nx-workspace.

The command would be:

npx create-nx-workspace@latest myorg --preset @nxkit/playwright

Describe alternatives you've considered

N/A

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Add style directory plugin preset

Is your feature request related to a problem?

No

Describe the solution or feature you'd like

Add the option to use style directory's plugin as a workspace preset when using create-nx-workspace.

The command would be:

npx create-nx-workspace@latest myorg --preset @nxkit/style-directory

Describe alternatives you've considered

N/A

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Expose plugins API's for programatic use.

Is your feature request related to a problem?

No

Describe the solution or feature you'd like

Expose all plugins executors, generators and public types so they can be programmatically invoked.

Describe alternatives you've considered

export definitions in each plugin's index.ts file.

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Playwright: dirname for generated projects not consistent for nested frontend projects

Current Behavior

When generating a playwright project for a nested frontend project, the resulting project directory name contains the full project name instead of keeping the directory naming structure from the original frontend project.

Given this frontend project:

apps
  nested
    subdir
      my-app

The generated project is:

apps
  nested
    subdir
      my-app
  nested-subdir-my-app-e2e

Expected Behaviour

For a give frontend project:

apps
  nested
    subdir
      my-app

The generated project should be:

apps
  nested
    subdir
      my-app
      my-app-e2e

Github Repo

No response

Steps to Reproduce

1. nx g @nrwl/react:app my-app --directory nested/subdir --e2eTestRunner none
2. nx g @nxkit/playwright:project --frontendProject nested-subdir-my-app

Nx Report

pnpm nx report                                                           

 >  NX   Report complete - copy this into the issue template

   Node : 18.13.0
   OS   : darwin arm64
   pnpm : 7.24.3
   
   nx : 15.5.2
   @nrwl/angular : Not Found
   @nrwl/cypress : 15.5.2
   @nrwl/detox : Not Found
   @nrwl/devkit : 15.5.2
   @nrwl/esbuild : Not Found
   @nrwl/eslint-plugin-nx : 15.5.2
   @nrwl/expo : Not Found
   @nrwl/express : Not Found
   @nrwl/jest : 15.5.2
   @nrwl/js : 15.5.2
   @nrwl/linter : 15.5.2
   @nrwl/nest : Not Found
   @nrwl/next : 15.5.2
   @nrwl/node : Not Found
   @nrwl/nx-cloud : Not Found
   @nrwl/nx-plugin : Not Found
   @nrwl/react : 15.5.2
   @nrwl/react-native : Not Found
   @nrwl/rollup : 15.5.2
   @nrwl/schematics : Not Found
   @nrwl/storybook : Not Found
   @nrwl/web : 15.5.2
   @nrwl/webpack : 15.5.2
   @nrwl/workspace : 15.5.2
   @nrwl/vite : Not Found
   typescript : 4.8.4
   ---------------------------------------
   Local workspace plugins:
   ---------------------------------------
   Community plugins:
         @nxkit/playwright: 2.0.1

Failure Logs

N/A

Additional Information

N/A

Code of Conduct

• I agree to follow this project's Code of Conduct

Can't create style-dictionary library with nx 17

Current Behavior

Can't create a new style-dictionary library with nx 17

NX Generating @nxkit/style-dictionary:library
NX Cannot find module '@nx/workspace/src/utilities/run-tasks-in-serial'
Require stack:

• C:\path\to\repo\node_modules@nxkit\style-dictionary\src\generators\library\generator.js

Expected Behaviour

Generator would work

Github Repo

No response

Steps to Reproduce

have a repo using at least nx 17.0.2 and try creating a library

Nx Report

NX   Report complete - copy this into the issue template

   Node   : 20.9.0
   OS     : win32-x64
   npm    : 10.1.0

   nx (global)        : 17.0.2
   nx                 : 17.0.2
   @nx/js             : 17.0.2
   @nx/jest           : 17.0.2
   @nx/linter         : 17.0.2
   @nx/eslint         : 17.0.2
   @nx/workspace      : 17.0.2
   @nx/cypress        : 17.0.2
   @nx/devkit         : 17.0.2
   @nx/eslint-plugin  : 17.0.2
   @nx/nest           : 17.0.2
   @nx/next           : 17.0.2
   @nx/node           : 17.0.2
   @nx/react          : 17.0.2
   @nx/storybook      : 17.0.2
   @nrwl/tao          : 17.0.2
   @nx/web            : 17.0.2
   typescript         : 5.2.2
   ---------------------------------------
   Community plugins:
   @nx-tools/nx-container  : 5.1.0
   @nx-tools/nx-prisma     : 5.1.0
   @nxkit/style-dictionary : 3.0.2
   nx-stylelint            : 17.0.1

Failure Logs

No response

Additional Information

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Multi brand / theme support on Style Dictionary config

Is your feature request related to a problem?

No

Describe the solution or feature you'd like

I'd like to have the possibility to add multiple configurations depends on brand or theme that i am build.

Describe alternatives you've considered

I found this example from Style Dictionary oficial repository, you could have something similar using an array of configuration instead of only one configuration object in style-dictionary.config.ts.

Later you could use that array of configuration to build something similar to the example.

Additional context

This is a feature that i need to build different folders depending on which brand and theme those tokens belong.

Code of Conduct

• I agree to follow this project's Code of Conduct

Rename directory's -d alias as this is reserved by Nx for --dryRun

Current Behavior

The generators with a --directory option alias it to -d but this doesn't work as -d is reserved by Nx for the --dryRun option.

Expected Behaviour

We should have a --directory alias such as --dir that do not collide with Nx reserved options.

Github Repo

No response

Steps to Reproduce

1. nx g @nxkit/style-dictionary:lib my-tokens -d my-dir

Or.

1. nx g @nxkit/playwright:project my-app-e2e -d my-dir

Those will end being run in dry run mode.

Nx Report

➜ pnpm nx report                                                                     

 >  NX   Report complete - copy this into the issue template

   Node : 18.13.0
   OS   : darwin arm64
   pnpm : 7.24.3
   
   nx : 15.5.2
   @nrwl/angular : Not Found
   @nrwl/cypress : 15.5.2
   @nrwl/detox : Not Found
   @nrwl/devkit : 15.5.2
   @nrwl/esbuild : Not Found
   @nrwl/eslint-plugin-nx : 15.5.2
   @nrwl/expo : Not Found
   @nrwl/express : Not Found
   @nrwl/jest : 15.5.2
   @nrwl/js : 15.5.2
   @nrwl/linter : 15.5.2
   @nrwl/nest : 15.5.2
   @nrwl/next : 15.5.2
   @nrwl/node : 15.5.2
   @nrwl/nx-cloud : Not Found
   @nrwl/nx-plugin : Not Found
   @nrwl/react : 15.5.2
   @nrwl/react-native : Not Found
   @nrwl/rollup : 15.5.2
   @nrwl/schematics : Not Found
   @nrwl/storybook : Not Found
   @nrwl/web : 15.5.2
   @nrwl/webpack : 15.5.2
   @nrwl/workspace : 15.5.2
   @nrwl/vite : Not Found
   typescript : 4.8.4
   ---------------------------------------
   Local workspace plugins:
   ---------------------------------------
   Community plugins:
         @nxkit/playwright: 2.0.1

Failure Logs

n/a

Additional Information

n/a

Code of Conduct

• I agree to follow this project's Code of Conduct

Style-Dictionary: Support generating output in different paths, and optionally, for different configs.

Is your feature request related to a problem?

No.

Describe the solution or feature you'd like

Having in mind #70. Being able to output the generated files to different locations could ease setting up a group of publishable libraries in charge of packaging/publishing the generated tokens separate from the tokens generation itself.

One could have the following projects:

Path	Workspace alias	Import path (public)
libs/tokens/source	@acme/tokens/source	N/A (non-publishable)
libs/tokens/js	@acme/tokens/js	@acme/tokens
libs/tokens/css	@acme/tokens/css	@acme/tokens-css
libs/tokens/scss	@acme/tokens/scss	@acme/tokens-scss

And the tokens-source would be the style-dictionary project outputting files into the other projects source code (implicit dependencies to the tokens-source project) so that they can build, package and publish respectively.

This behavior could be extended beyond NPM, delivering Android, iOS, etc compatible tokens.

Describe alternatives you've considered

N/A.

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Style Dictionary: cannot generate project with complete preset in subdir

Current Behavior

Whe generating a library using the --preset complete option under a subdir, Nx fails trying to find a project called that does not exist. nx g @nxkit/style-dictionary:lib tokens --preset complete.

Expected Behaviour

The library should be successfully created.

Github Repo

No response

Steps to Reproduce

1. nx g @nxkit/style-dictionary:lib tokens --directory my/dir --preset complete

Nx Report

pnpm nx report                                                                                                                       

 >  NX   Report complete - copy this into the issue template

   Node : 18.13.0
   OS   : darwin arm64
   pnpm : 7.24.3
   
   nx : 15.5.1
   @nrwl/angular : Not Found
   @nrwl/cypress : 15.5.1
   @nrwl/detox : Not Found
   @nrwl/devkit : 15.5.1
   @nrwl/esbuild : Not Found
   @nrwl/eslint-plugin-nx : 15.5.1
   @nrwl/expo : Not Found
   @nrwl/express : Not Found
   @nrwl/jest : 15.5.1
   @nrwl/js : 15.5.1
   @nrwl/linter : 15.5.1
   @nrwl/nest : Not Found
   @nrwl/next : 15.5.1
   @nrwl/node : 15.5.1
   @nrwl/nx-cloud : 15.0.2
   @nrwl/nx-plugin : Not Found
   @nrwl/react : 15.5.1
   @nrwl/react-native : Not Found
   @nrwl/rollup : 15.5.1
   @nrwl/schematics : Not Found
   @nrwl/storybook : 15.5.1
   @nrwl/web : 15.5.1
   @nrwl/webpack : 15.5.1
   @nrwl/workspace : 15.5.1
   @nrwl/vite : 15.5.1
   typescript : 4.8.4
   ---------------------------------------
   Local workspace plugins:
   ---------------------------------------
   Community plugins:
         @nxext/stencil: 15.0.0
         @nxkit/playwright: 2.0.1
         @nxkit/style-dictionary: 2.0.1

Failure Logs

>  NX  Generating @nxkit/style-dictionary:library

✔ Which project preset would you like to use? · complete

 >  NX   Cannot find configuration for 'tokens'

   Pass --verbose to see the stacktrace

Additional Information

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Missing unit tests for Style Dictionary plugin generators

Is your feature request related to a problem?

No

Describe the solution or feature you'd like

The @nxkit/style-dictionary plugin generators lacks unit tests covering the different scenarios where they can be used. Adding them will increase confidence on changes made to the plugin.

Describe alternatives you've considered

N/A

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Error while running `nx generate @nxkit/playwright:project` command

Current Behavior

Error after running the command yarn nx generate @nxkit/playwright:project test-e2e-app command.

Expected Behaviour

Should generate a playwright project inside the apps directory instead of throwing an error.

Github Repo

No response

Steps to Reproduce

Run yarn nx generate @nxkit/playwright:project test-e2e-app command.

Nx Report

>  NX   Report complete - copy this into the issue template

   Node : 16.17.1
   OS   : linux x64
   yarn : 1.22.17
   
   nx                      : 15.7.2
   @nrwl/jest              : 15.8.6
   @nrwl/linter            : 15.6.3
   @nrwl/workspace         : 15.6.3
   @nrwl/cli               : 15.7.2
   @nrwl/cypress           : 15.8.5
   @nrwl/detox             : 15.7.2
   @nrwl/devkit            : 15.8.6
   @nrwl/eslint-plugin-nx  : 15.6.3
   @nrwl/js                : 15.8.6
   @nrwl/next              : 15.8.6
   @nrwl/react             : 15.8.6
   @nrwl/react-native      : 15.8.6
   @nrwl/tao               : 15.7.2
   @nrwl/vite              : 15.8.6
   @nrwl/webpack           : 15.8.6
   typescript              : 4.9.5
   ---------------------------------------
   Community plugins:
   @nx-extend/playwright : 1.2.0
   @nxkit/playwright     : 2.2.0
   ---------------------------------------
   The following packages should match the installed version of nx
     - @nrwl/[email protected]
     - @nrwl/[email protected]
     - @nrwl/[email protected]
     - @nrwl/[email protected]
     - @nrwl/[email protected]
     - @nrwl/[email protected]
     - @nrwl/[email protected]
     - @nrwl/[email protected]
     - @nrwl/[email protected]
     - @nrwl/[email protected]
     - @nrwl/[email protected]
     - @nrwl/[email protected]
   
   To fix this, run `nx migrate [email protected]`

Failure Logs

No response

Additional Information

Code of Conduct

• I agree to follow this project's Code of Conduct

Is the playwright test generator part of this package? - https://playwright.dev/docs/codegen#running-codegen

Is the playwright test generator part of this package? - https://playwright.dev/docs/codegen#running-codegen

Playwright component testing support

Is your feature request related to a problem?

No

Describe the solution or feature you'd like

Provide support to run component tests using playwright, similar to component tests using @nrwl/cypress.

Describe alternatives you've considered

Additional context

Playwright Component testing docs
https://playwright.dev/docs/test-components

@nrwl/cypress component testing implementation
https://github.com/nrwl/nx/blob/master/packages/cypress/src/generators/cypress-component-project/cypress-component-project.ts

Code of Conduct

• I agree to follow this project's Code of Conduct

Playwright: remove playwright.base.config.ts from workspace root

Current Behavior

The generated base config (meant to be shared across different playwright projects) do not have a specific tsconfig. Making this to fail for IDE linters as the node typings are not configured for that file.

Expected Behaviour

We can just have separate configurations and each user can opt to create a shared @nrwl/node lib exporting a base Playwright configuration.

Github Repo

No response

Steps to Reproduce

1. pnpm nx g @nxkit/playwright:proj my-app-e2e
2. Open the ./playwright.config.base.ts file in an IDE like vscode.

Nx Report

pnpm nx report                                                 

 >  NX   Report complete - copy this into the issue template

   Node : 18.13.0
   OS   : darwin arm64
   pnpm : 7.24.3
   
   nx : 15.5.1
   @nrwl/angular : Not Found
   @nrwl/cypress : 15.5.1
   @nrwl/detox : Not Found
   @nrwl/devkit : 15.5.1
   @nrwl/esbuild : Not Found
   @nrwl/eslint-plugin-nx : 15.5.1
   @nrwl/expo : Not Found
   @nrwl/express : Not Found
   @nrwl/jest : 15.5.1
   @nrwl/js : 15.5.1
   @nrwl/linter : 15.5.1
   @nrwl/nest : Not Found
   @nrwl/next : 15.5.1
   @nrwl/node : 15.5.1
   @nrwl/nx-cloud : 15.0.2
   @nrwl/nx-plugin : Not Found
   @nrwl/react : 15.5.1
   @nrwl/react-native : Not Found
   @nrwl/rollup : 15.5.1
   @nrwl/schematics : Not Found
   @nrwl/storybook : 15.5.1
   @nrwl/web : 15.5.1
   @nrwl/webpack : 15.5.1
   @nrwl/workspace : 15.5.1
   @nrwl/vite : 15.5.1
   typescript : 4.8.4
   ---------------------------------------
   Local workspace plugins:
   ---------------------------------------
   Community plugins:
         @nxkit/playwright: 2.0.1

Failure Logs

No response

Additional Information

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Add documentation website

What type of documentation issue are you reporting?

Documentation improvement

Is there a specific documentation page you are reporting? Enter the URL here.

No response

Additional context

We should create a documentation website describing the overall NxKit project and each plugin documentation, with descriptions, references, examples/recipes & additional resources.

Code of Conduct

• I agree to follow this project's Code of Conduct