Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: Add reusable frontend composables package #13077

Merged

Conversation

alexgrozav
Copy link
Member

@alexgrozav alexgrozav commented Feb 5, 2025

Summary

As part of the Frontend restructuring initiative, we're adding a separate @n8n/frontend-composables package that will contain all standalone composables. This PR also provides individual tooling packages.

  • frontend
    • composables
    • tooling
      • eslint-config
      • typescript-config
      • vitest-config

Related Linear tickets, Github issues, and Community forum posts

https://linear.app/n8n/issue/CAT-621/create-reusable-frontend-composables-package

Review / Merge checklist

  • PR title and summary are descriptive. (conventions)
  • Docs updated or follow-up ticket created.
  • Tests included.
  • PR Labeled with release/backport (if the PR is an urgent fix that needs to be backported)

@alexgrozav alexgrozav requested review from netroy and tomi February 5, 2025 13:03
@alexgrozav alexgrozav self-assigned this Feb 5, 2025
packages/frontend/composables/.vscode/extensions.json Outdated Show resolved Hide resolved
packages/frontend/composables/package.json Outdated Show resolved Hide resolved
packages/frontend/composables/package.json Outdated Show resolved Hide resolved
@@ -0,0 +1,18 @@
{
"name": "@n8n/frontend-typescript-config",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe we should create a new package for all tsconfigs, that backend and nodes packages can also benefit from?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would like that. Are you ok with doing this change for the backend in a separate PR?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should do that and the eslint changes in a separate PR.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Collaborator

@tomi tomi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very nice to see this starting to take shape 🙌 Couple comments

packages/frontend/composables/.vscode/extensions.json Outdated Show resolved Hide resolved
packages/frontend/composables/README.md Outdated Show resolved Hide resolved
packages/frontend/composables/package.json Outdated Show resolved Hide resolved
packages/frontend/composables/src/useDeviceSupport.test.ts Outdated Show resolved Hide resolved
packages/editor-ui/src/views/NodeView.vue Outdated Show resolved Hide resolved
@n8n-assistant n8n-assistant bot added n8n team Authored by the n8n team ui Enhancement in /editor-ui or /design-system labels Feb 5, 2025
netroy
netroy previously requested changes Feb 5, 2025
codecov.yml Outdated Show resolved Hide resolved
alexgrozav and others added 5 commits February 5, 2025 16:55
Co-authored-by: कारतोफ्फेलस्क्रिप्ट™ <netroy@users.noreply.github.com>
Copy link

codecov bot commented Feb 5, 2025

Codecov Report

Attention: Patch coverage is 93.33333% with 1 line in your changes missing coverage. Please review.

Files with missing lines Patch % Lines
...ckages/editor-ui/src/components/CanvasControls.vue 0.00% 1 Missing ⚠️

📢 Thoughts on this report? Let us know!

@alexgrozav alexgrozav requested review from netroy and tomi February 5, 2025 16:13
Copy link
Collaborator

@tomi tomi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 🎉 Maybe we could include this new package to the dev:fe script in root package.json? Let's do that as a followup to get this in first

Copy link
Contributor

github-actions bot commented Feb 6, 2025

Copy link
Contributor

github-actions bot commented Feb 6, 2025

✅ All Cypress E2E specs passed

Copy link

cypress bot commented Feb 6, 2025

n8n    Run #9146

Run Properties:  status check passed Passed #9146  •  git commit 9601c0f898: 🌳 🖥️ browsers:node18.12.0-chrome107 🤖 alexgrozav 🗃️ e2e/*
Project n8n
Branch Review cat-621-create-reusable-frontend-composables-package
Run status status check passed Passed #9146
Run duration 04m 25s
Commit git commit 9601c0f898: 🌳 🖥️ browsers:node18.12.0-chrome107 🤖 alexgrozav 🗃️ e2e/*
Committer Alex Grozav
View all properties for this run ↗︎

Test results
Tests that failed  Failures 0
Tests that were flaky  Flaky 1
Tests that did not run due to a developer annotating a test with .skip  Pending 5
Tests that did not run due to a failure in a mocha hook  Skipped 0
Tests that passed  Passing 433
View all changes introduced in this branch ↗︎

@netroy netroy dismissed their stale review February 6, 2025 10:03

will review later

@netroy netroy removed their request for review February 6, 2025 10:04
@alexgrozav alexgrozav merged commit ef87da4 into master Feb 6, 2025
38 checks passed
@alexgrozav alexgrozav deleted the cat-621-create-reusable-frontend-composables-package branch February 6, 2025 10:44
@github-actions github-actions bot mentioned this pull request Feb 6, 2025
@janober
Copy link
Member

janober commented Feb 6, 2025

Got released with n8n@1.78.0

@tomi tomi changed the title feat: Add reusable frontend composables package refactor: Add reusable frontend composables package Feb 7, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
n8n team Authored by the n8n team Released ui Enhancement in /editor-ui or /design-system
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants