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

Unify declaration of third-party dependencies #2991

Merged
merged 15 commits into from
Aug 12, 2024
Merged

Unify declaration of third-party dependencies #2991

merged 15 commits into from
Aug 12, 2024

Conversation

falkoschindler
Copy link
Contributor

@falkoschindler falkoschindler commented Apr 30, 2024

Currently there are three ways to include JavaScript libraries when subclassing UI elements: libraries, exposed_libraries and extra_libraries. This PR experiments with using exposed_libraries only, which seems to work for all elements. A new "signature pad" example demonstrates how to use NPM to define and install JavaScript dependencies in a NiceGUI project.

Open tasks:

  • deprecate libraries and extra_libraries parameters
  • replace exposed_libraries with a more intuitive name, like dependencies
  • demonstrate a more complex NPM example, like vue-signature-pad, which has other dependencies? --> No, there's currently no point in trying to integrate third-party Vue components since we're not able to support Vue 3 components at the moment.
  • demonstrate a more complex NPM example, like is-odd, using a bundler (see the new "is even" example)
  • add some documentation about custom UI elements with third-party dependencies --> I updated the readme files in the "is_even" and "signature_pad" examples. But where would be a good place in the documentation to add a pointer to these examples?

@falkoschindler falkoschindler added the enhancement New feature or request label Apr 30, 2024
@falkoschindler falkoschindler added this to the 2.0.0 milestone Apr 30, 2024
@falkoschindler
Copy link
Contributor Author

falkoschindler commented Jun 28, 2024

Here's an attempt to summaries the different kind of dependencies (current main branch):

cls.component (.js)   -> js_imports                       -> import statements + app.component
cls.component (.vue)  -> vue_scripts, vue_style, vue_html -> body HTML
cls.libraries         -> js_imports                       -> import statements
cls.extra_libraries   -> (registered on server, but not automatically requested by client)
cls.libraries-exposed -> imports                          -> importmap
add_resource()        -> resources                        -> await loadResource()

# Conflicts:
#	nicegui/elements/echart.py
@falkoschindler falkoschindler modified the milestones: 2.0.0, 2.x Aug 6, 2024
@falkoschindler falkoschindler modified the milestones: 2.x, 2.0.0 Aug 7, 2024
@falkoschindler falkoschindler marked this pull request as ready for review August 7, 2024 06:36
@falkoschindler
Copy link
Contributor Author

@rodja I decided to include this PR in 2.0.0, because it will probably add a deprecation warning for using the old library parameters, which is kind of a breaking change. Releasing it in 2.0.0 allows for user code and other packages like nicegui-highcharts to adopt while upgrading from NiceGUI 1.x to 2.x.

Do you have an idea where to put information about custom elements in the documentation?

And what do you think about the deprecation warning? I find it a bit annoying if you, e.g., have something like nicegui-highcharts installed, which still uses the old parameters. On the other hand, it requires NiceGUI 1.x at the moment, so there is an incompatibility that needs to be resolved. So the warning seems appropriate.

@falkoschindler falkoschindler changed the base branch from main to 2.0 August 7, 2024 06:45
Copy link
Member

@rodja rodja left a comment

Choose a reason for hiding this comment

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

Looks good to me.
About the documentation: The example "is_even" is not very descriptive. Maybe we should rename it to "node_module_integration"? And we need to add both examples to examples.py. And maybe a brief part in "Configuration & Deployment" could describe the general idea and provide links to the two examples...

@rodja rodja merged commit baa97ac into 2.0 Aug 12, 2024
6 of 7 checks passed
@rodja rodja deleted the dependencies branch August 12, 2024 16:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants