[NPMCLI-38] Use resources from other npm packages in one module Created: 20/Jul/16  Updated: 27/Feb/17  Resolved: 14/Feb/17

Status: Closed
Project: Magnolia CLI
Component/s: None
Affects Version/s: None
Fix Version/s: None

Type: Improvement Priority: Neutral
Reporter: Christopher Zimmermann Assignee: Robert Kowalski
Resolution: Fixed Votes: 0
Labels: None
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Issue Links:
relation
is related to NPMCLI-33 lightDevCopyResources concept is brok... Closed
is related to NPMCLI-79 Light Project support Closed
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Epic Link: CLI: Resource handling
Sprint: Basel 83
Story Points: 1

 Description   

It should be easy to setup a single light module so that it uses web resources from other npm packages.

For example if I want to create a light module which provides a component which provides a carousel based on "slick-carousel" (https://www.npmjs.com/package/slick-carousel), my new component should not need to copy and include the web resources of this other module - it should be able to simply depend on this other package, and somehow specify which of its resources it needs.

Reasoning:
A key benefit and principle of npm, is that a package can depend on others so that it does not duplicate what is already available elsewhere. If we do not adhere to this principle, developers will be confused and dissapointed.

Example of a light module that could use this: https://www.npmjs.com/package/responsive-image-component
It includes the lazySizes.js file - but it should not. It should simply depend on the lazy-sizes npm package.
(https://www.npmjs.com/package/lazysizes)

Background:
Previously this was solved with the lightDevCopyResources configuration - but that has issues now that mgnl is installed globally. See linked ticket.

Note:
resfn (available since Magnoila 5.5.1) makes it easy for a template to include resources in the light modules. It may be part of the solution here, but by itself it does not address the issue of resources from other npm packages.

Conclusion:
Use standard frontend build tool such as webpack to bundle dependent resources and place them in webresources.
This is done with pre-publish hook so that the npm package has all resources necessary - ready to go.
We provide advice on which common large libraries should rather not be automatically bundled in the interest of saving space (but the downside of additional complexity for consumer of package.) (We are not talking about the project here.)
If that is too complicated, users can grab the dependency manually.



 Comments   
Comment by Christopher Zimmermann [ 20/Jul/16 ]

Its also possible that a solution could be implemented in magnolia itself, or via a new special resources function - ie perhaps the CLI does not need to perform a task.

Comment by Christopher Zimmermann [ 20/Jul/16 ]

For example - what if a module configured the location of the needed resources in the node_modules directory, and a resources templating function read that configuration and inserted proper HTML for them.
ie

js:
    jquery: node_modules/jquery/dist/jquery.js
Comment by Christopher Zimmermann [ 14/Feb/17 ]

Conclusion in description.

Generated at Mon Feb 12 04:45:55 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.