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

NPM install package within a plugin #19705

Closed
jorgeuos opened this issue Sep 2, 2022 · 4 comments
Closed

NPM install package within a plugin #19705

jorgeuos opened this issue Sep 2, 2022 · 4 comments
Assignees
Labels
answered For when a question was asked and we referred to forum or answered it. c: APIs For bugs and features in the Matomo HTTP and plugin APIs. c: Documentation For issues related to in-app product help messages, or to the Matomo knowledge base.

Comments

@jorgeuos
Copy link

jorgeuos commented Sep 2, 2022

Hi,

I'm currently working on a plugin and I need to add(import) a package with NPM. I've read through the documentation, but I can't find any way to do from a plugin.

So here's some background info.

I generate a new Vue component with the ./console generate:vue-component command. I tweak it to my needs and now I want to import or require a package from NPM. Usually I would do a npm install <package_name> intuitively I would do it from my plugin folder. So I can run the ./console vue:build PluginName command, so I don't get weird dependency issues.

What is the best practice around this?

I'm sorry if I couldn't find the info in the docs. Very thankful for any help or pointer I could get.

/Jorge

@Findus23 Findus23 added c: Documentation For issues related to in-app product help messages, or to the Matomo knowledge base. c: APIs For bugs and features in the Matomo HTTP and plugin APIs. labels Sep 3, 2022
@peterhashair
Copy link
Contributor

HI, @jorgeuos I don't think we support package.json on the plugin level yet. ping @diosmosis

@diosmosis diosmosis self-assigned this Sep 5, 2022
@diosmosis
Copy link
Member

hi @jorgeuos, this is possible and we do it in a couple premium plugins. Your instincts are correct, you would run npm install in the plugin directory, then just import the code as usual from within your plugin's Vue code. If you need to add more type declarations to typescript, however, you'll also have to add another tsconfig.json file in the plugin directory:

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "typeRoots": [
      "../../node_modules/@types",
      "../../plugins/CoreVue/types/index.d.ts",
      "./node_modules/@types"
    ],
    "types": [
      "angular",
      "jquery",
      "my-new-dependency",
      "..."
    ]
  }
}

I'll add docs for this soon.

@jorgeuos
Copy link
Author

jorgeuos commented Sep 5, 2022

Hi @diosmosis && @peterhashair

Thank you for your reply.
I did a lot of trial-n-error over the weekend and you are correct. I happened to have an own .eslintrc.json file in my plugin. That was giving me compilation errors.

I deleted it and got other compilation errors, so I copy-pasted the one from the matomo root folder: .eslintrc.js.
And now it works.

I'll look into that tsconfig.json thing, it might help me with some VS Code quirks that I'm experiencing.

Thanks!

@sgiehl
Copy link
Member

sgiehl commented Sep 5, 2022

This should now be included in our docs with: matomo-org/developer-documentation#660
@jorgeuos If you have further questions related to that, let us know so we can extend the documentation.

@sgiehl sgiehl closed this as completed Sep 5, 2022
@sgiehl sgiehl added the answered For when a question was asked and we referred to forum or answered it. label May 16, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
answered For when a question was asked and we referred to forum or answered it. c: APIs For bugs and features in the Matomo HTTP and plugin APIs. c: Documentation For issues related to in-app product help messages, or to the Matomo knowledge base.
Projects
None yet
Development

No branches or pull requests

5 participants