Support from Acquia helps fund testing for Drupal Acquia logo

Comments

heykarthikwithu created an issue. See original summary.

heykarthikwithu’s picture

Assigned: heykarthikwithu » Unassigned
Status: Active » Needs review
FileSize
360 bytes

Status: Needs review » Needs work

The last submitted patch, 2: 2673910-2.patch, failed testing.

heykarthikwithu’s picture

Status: Needs work » Needs review
NickDickinsonWilde’s picture

Status: Needs review » Needs work

hmm I can't find this; what repository is it in? not the drupal packagist nor the standard one as far as I could find.

heykarthikwithu’s picture

Assigned: Unassigned » heykarthikwithu
heykarthikwithu’s picture

Assigned: heykarthikwithu » Unassigned
Status: Needs work » Needs review
FileSize
1.2 KB

It was a mistake, cycle doesn't exist in the packagist.org

Have an other way around, which i have implemented in Imagefield Slideshow module.
On composer update, it gets the cycle library and place in the vendor directory, which is been written in patch.

NickDickinsonWilde’s picture

I'll try it out, thanks!

NickDickinsonWilde’s picture

Oh well got a slight problem... like it won't work with that method: Composer doesn't allow it
So back to the drawing board on that one... Guess we need cycle on packagist; want to investigate that or want me to?
Thanks

NickDickinsonWilde’s picture

Status: Needs review » Needs work

  • NickWilde committed 3d25e18 on 8.x-4.x
    Revert "#2673910 further testing"
    
    This reverts commit...
  • NickWilde committed 5b09a9b on 8.x-4.x
    Revert "#2673910 further testing continued"
    
    This reverts commit...
  • NickWilde committed a3b5c2d on 8.x-4.x
    Revert "Issue #2673910 by heykarthikwithu: Add the require jquery cycle...
heykarthikwithu’s picture

Status: Needs work » Needs review
vbouchet’s picture

Will it be possible to add the source repository directly into the composer.json instead of using a third-party packagist not maintained by the Jquery cycle plugin maintainer ?
Something like:

"repositories": [
  {
    "type": "vcs",
    "url": "https://github.com/malsup/cycle"
  }
]
"require": {
  "malsup/cycle": "dev-master"
}
NickDickinsonWilde’s picture

@vbouchet: unfortunately not. Composer doesn't let packages define repositories. The reasons make sense (mostly performance), so annoying but not really work aroundable.

ashleyhazle’s picture

@nickwhilde, in my sites composer I have taken a leaf out of the webform module's book and included the following:

"repositories": {
…
"jquery.cycle": {
            "type": "package",
            "package": {
                "name": "jquery/cycle",
                "version": "3.0.3",
                "type": "drupal-library",
                "extra": {
                    "installer-name": "jquery.cycle"
                },
                "dist": {
                    "url": "https://github.com/malsup/cycle/archive/master.zip",
                    "type": "zip"
                }
            }
        },
…
},
"require": {
…
    "jquery/cycle": "^3.0",
…
}

As per @vbouchet, wouldn't something like this be preferable to a third-party packagist?

There's also something that can be done with Git using `source` instead of `dist`, but I'm not sure how that works…

NickDickinsonWilde’s picture

Unfortunately, we can't directly include a new repository definition in a composer.json that's included in other projects. As a security feature, that's blocked except in the top level composer.json

ñull’s picture

Just putting in my two cents.

3 of the 4 libraries appear as Bower assets that can be installed and maintained in composer with the fxp/composer-asset-plugin:

    "require": {
..
        "fxp/composer-asset-plugin": "^1.4",
..
        "bower-asset/jquery-cycle": "^3.0",
        "bower-asset/jquery-json": "^2.6",
        "bower-asset/jquery-hoverintent": "^1.9"
    },
    "extra": {
        "installer-types": ["npm-asset-library", "bower-asset-library"],
        "installer-paths": {
            "web/core": ["type:drupal-core"],
            "web/libraries/{$name}": ["type:drupal-library","type:npm-asset-library","type:bower-asset-library"],
            "web/modules/contrib/{$name}": ["type:drupal-module"],
            "web/profiles/contrib/{$name}": ["type:drupal-profile"],
            "web/themes/contrib/{$name}": ["type:drupal-theme"],
            "drush/contrib/{$name}": ["type:drupal-drush"]
        },

Unfortunately the last library, tobia/Pause , is missing. May be because it is already 8 years old? May be time to either choose an alternative that is available as npm or bower asset? Or may be someone who knows how to do can make it available as such?

auxiliaryjoel’s picture

Is there currently any way to use composer to manage/install the 4 javascript libraries ?
e.g.:
jQuery Cycle 3.x in /libraries/jquery.cycle
JSON2 in /libraries/json2
jQuery HoverIntent in /libraries/jquery.hoverIntent
jQuery Pause in /libraries/jquery.pause

or do I have to install them via other methods?

(note: I'm using Drupal 8, subtheme of Bootstrap 4 with composer controlling drupal/modules)

ñull’s picture

@auxiliaryjoel like said, three are possible with the #20 indicated method, but pause would need to be added like in #18. It does not stop there however. The use of dots is not standard composer paths. So the module needs to be patched to (also) recognise these newer library paths.

ñull’s picture

Based on version 4.6 of this module, here a fragment of my composer.json that works fine here to include the libraries, where the dotted lines indicate the parts I have removed for clarity.

{
    "name": "drupal-composer/drupal-project",
    "description": "Project template for Drupal 8 projects with composer",
    "type": "project",
    "license": "GPL-2.0+",
    "authors": [
        {
            "name": "",
            "role": ""
        }
    ],
    "repositories": [
        {
            "type": "composer",
            "url": "https://packages.drupal.org/8"
        },
        {
            "type": "package",
            "package": {
                "name": "malsup/cycle",
                "version": "dev-master",
                "type":"drupal-library",
                "source": {
                    "url": "https://github.com/malsup/cycle",
                    "type": "git",
                    "reference": "master"
                }
            }
        },
        {
            "type": "package",
            "package": {
                "name": "douglascrockfordmalsup/json-js",
                "version": "dev-master",
                "type":"drupal-library",
                "source": {
                    "url": "https://github.com/douglascrockford/JSON-js",
                    "type": "git",
                    "reference": "master"
                }
            }
        },
        {
            "type": "package",
            "package": {
                "name": "briancherne/jquery-hoverintent",
                "version": "dev-master",
                "type":"drupal-library",
                "source": {
                    "url": "https://github.com/briancherne/jquery-hoverIntent",
                    "type": "git",
                    "reference": "master"
                }
            }
        }
    ],
    "require": {
        "cweagans/composer-patches": "^1.6",
        "composer/installers": "^1.2",
        "oomphinc/composer-installers-extender": "^1.1",
.
.
.
        "drupal/views_slideshow": "^4.6",
        "malsup/cycle": "dev-master",
        "briancherne/jquery-hoverintent": "dev-master",
        "douglascrockfordmalsup/json-js": "dev-master"
    },
.
.
.
    "extra": {
        "installer-types": ["npm-asset-library", "bower-asset-library"],
        "installer-paths": {
            "web/libraries/jquery.cycle": ["malsup/cycle"],
            "web/libraries/jquery.hoverIntent": ["briancherne/jquery-hoverintent"],
            "web/libraries/json2": ["douglascrockfordmalsup/json-js"],
            "web/core": ["type:drupal-core"],
            "web/libraries/{$name}": ["type:drupal-library"],
            "web/modules/contrib/{$name}": ["type:drupal-module"],
            "web/profiles/contrib/{$name}": ["type:drupal-profile"],
            "web/themes/contrib/{$name}": ["type:drupal-theme"],
            "drush/contrib/{$name}": ["type:drupal-drush"]
        },

    }
}
auxiliaryjoel’s picture

@ñull Thanks for the info ñull I will try and wrap my head around this and see if I can get it working as per your suggestion.

Petr Illek’s picture

@ñull Thank you for the snippet.

Few question though:

* What is the "oomphinc/composer-installers-extender": "^1.1" for? It is working without it for me.
* Are the lines in installer-path section "web/libraries/jquery.cycle": ["malsup/cycle"], "web/libraries/jquery.hoverIntent": ["briancherne/jquery-hoverintent"], "web/libraries/json2": ["douglascrockfordmalsup/json-js"] necessary? They all have specified "type":"drupal-library" in the repository part, so they will follow "web/libraries/{$name}": ["type:drupal-library"], and end up in libraries?

ñull’s picture

@Petr Illek you are probably right that both are not needed and left overs from former attempts. Please test your second assumption for me and I will clean up my post accordingly!

sitiveni’s picture

@Petr Illek Yes, the installer-path section is necessary. If not there it'll install the libraries using the name of the repository library. This would end up like this:

web/libraries/cycle
web/libraries/json-js
web/libraries/jquery-hoverintent

Adding the installer paths let's us control the names of directory so it matches with what the code expects.
To clarify, this is the intended library folder structure for the 3 libraries:

web/libraries/jquery.cycle
web/libraries/json2
web/libraries/jquery.hoverIntent
Petr Illek’s picture

@sitiveni Thank you for the explanation.

tamerzg’s picture

FileSize
1003 bytes

Currently most popular way to load 3rd party libraries while using composer is asset packagist which allow us to add bower and npm assets (more about that: https://drupalize.me/tutorial/composer-configuration-drupal?p=3233). As mentioned by @null in #20 there are 3 out of the 4 libraries appear as Bower assets that can be installed and maintained in composer.

Missing library is tobia/Pause, because it doesn't have github realease or the tag (it also must be per semantic versioning). Since this library is 8 years old, I forked it, created proper tag and then registered it on Bower.

Therefore now its possible to install all 4 required libraries via composer:

composer require bower-asset/jquery-cycle
composer require bower-asset/jquery-hoverintent
composer require bower-asset/json2
composer require bower-asset/jquery.pause

However another issue arise, its the directory naming for jquery-cycle and jquery-hoverintent. This module is looking for those libraries in these directories:

/libraries/jquery.cycle
/libraries/jquery.hoverIntent

but composer installs them in these:
/libraries/jquery-cycle
/libraries/jquery-hoverintent

Since those namings are coming from authors themselves and are registered like that on bower, I think we need to change it in this module.
https://asset-packagist.org/package/bower-asset/jquery-cycle
https://asset-packagist.org/package/bower-asset/jquery-hoverintent

Therefore I attached a patch.

RedEight’s picture

I ran into an issue while following the steps in #29. When running composer require bower-asset/json2 I get the following error

- Installing bower-asset/json2 (dev-master 594c8fa): The authenticity of host 'github.com (140.82.113.4)' can't be established.
RSA key fingerprint is SHA256:nThbg6kXUpJWGl7E1IGOCspRomTxdCARLviKw6E5SY8.
Are you sure you want to continue connecting (yes/no)?

Any idea what could be causing this? It seems like it went ahead and installed it when I said yes.

RedEight’s picture

[removed duplicate]

allella’s picture

I was able to resolve the following issues using the steps below.

Issues Resolved

  1. the #23 issue of having to manually define each JS package as a manual repository can be avoided using Asset Packagist, via #29's suggestion.
  2. the #29 issue of Drupal Views Slideshow using differently spelled libraries/ paths can be fixed using an advanced 'installer-paths' + "installer-types" configuration.

Step 1 - General Notes About Editing composer.json

  • Be aware of the JSON syntax requirements of the composer.json. For instance, trailing commas, missing brackets, or extra braces can lead to syntax errors.
  • If you installed Drupal using the drupal-composer/drupal-project, then adjust as needed because your target composer.json will be in the non-public root directory below the public web/ directory.

Step 2 - "installer-types" and "installer-paths" Modifications in composer.json

We update the composer.json file (in the same directory as vendor/) "extra" section to include custom "installer-types" and "installer-paths" below.

If you have an existing "extra" section then merge these "installer-paths" additions ABOVE the existing "installer-paths" lines to avoid potentially conflicting definitions, as described in mautumn's comment #33.

You should adjust the paths if your public Drupal doesn't exist in web/ directory . For example, you likely need to remove the "web/" part of the installer-paths if you didn't use drupal-composer/drupal-project to install your site.

    "extra": {
        "installer-types": ["bower-asset", "npm-asset"],
        "installer-paths": {
            "web/libraries/jquery.cycle/": ["bower-asset/jquery-cycle"],
            "web/libraries/jquery.hoverIntent/": ["bower-asset/jquery-hoverintent"],
            "web/libraries/json2/": ["bower-asset/json2"],
            "web/libraries/jquery.pause/": ["bower-asset/jquery.pause"]
        }
    }

This will fix the path directory issue (using . instead of -) mentioned in #29, but these changes don't do anything until we install the associated packages in a later step.

The renaming trick is made possible by composer/installers (installed below) + oomphinc/composer-installers-extender (installed below) + the tweak outlined under "Installing a custom path".

Step 3 - "repositories" Section Modifications in composer.json

We will now register Asset Packagist as a new Composer repository. This avoids having to manually register and maintain every JS package as its own repository, as proposed in #23.

This example assumes your composer.json file (in same directory as vendor/) already had 1 existing repository, called https://packages.drupal.org/8. If so, then merging in a second under repositories would look like:

    "repositories": [
        {
            "type": "composer",
            "url": "https://packages.drupal.org/8"
        },
	{
            "type": "composer",
            "url": "https://asset-packagist.org"
        }
    ],

Step 4 - Install Required, Support Packages via Composer

The following Composer packages are needed before we actually are able to download the Javascript packages and do the install directory / path renaming tricks.

In the command line project root directory (where vendor/ exists), run:

composer require "composer/installers:^1.2"
composer require "oomphinc/composer-installers-extender"
composer require "bower-asset/bootstrap:^3.3"
composer require "npm-asset/jquery:^2.2"

Step 5 - Making composer.json Recognize the New 'Asset Packagist' Bower Repository

I tried a bunch of things, but it was necessary to delete the composer.lock and re-install before Composer would recognize the new https://asset-packagist.org repository.

In the command line project root directory (where vendor/ exists), run:

rm composer.lock
composer install

Step 6 - Use Composer to Install Views Slide and Its Required Javascript Packages

If everything above worked, then it's now possible to install the Bower-based Javascript packages through Composer, via the new Asset Packagist repository.

The packages will be installed in a custom, public Drupal libraries/ directory using the renaming tricks described above.

Create a libraries/ directory (web/libraries/ for drupal-composer/drupal-project users), which is where Composer will install the Javascript packages.

On the command line, in the public Drupal directory run:
mkdir libraries/

On the command line, in the project root directory (where vendor/ exists), run:

composer require 'drupal/views_slideshow'
composer require 'bower-asset/jquery-cycle'
composer require 'bower-asset/jquery-hoverintent'
composer require 'bower-asset/json2'
composer require 'bower-asset/jquery.pause'

When the installs finish these JS packages should be in the public Drupal libraries/ directory, NOT vendor/.

You can check by running the following (from the public Drupal directory) and you should see directories for each of the 4 bower-asset packages above.

ls -la libraries/

drwxrwxr-x 6 user user 4096 Dec  9 20:17 .
drwxrwxr-x 8 user user 4096 Dec  9 19:52 ..
drwxrwxr-x 2 user user 4096 Dec  9 20:10 jquery.cycle
drwxrwxr-x 2 user user 4096 Dec  9 20:11 jquery.hoverIntent
drwxrwxr-x 2 user user 4096 Dec  9 20:17 jquery.pause
drwxrwxr-x 3 user user 4096 Dec  9 20:13 json2

It's important the first 3 directories here show a . (period) in the name, because this Drupal Views Slideshow module expects periods, not dashes.

Step 7 - Enable Views Slideshow

This assumes you're using Drush on the command line. I used "default" as the URI, but you'll need to use your domain if you have a custom configuration directory besides the default /sites/default/.

On the command line, in the project root directory (where vendor/ exists), do the following:

Enable the Views Slideshow modules

drush en views_slideshow --uri=default
drush en views_slideshow_cycle --uri=default

Clear the Drupal cache if you have any issues.

drush updb --uri=default
drush cache-rebuild --uri=default
mautumn’s picture

Hi @allella, thanks very much for your very detailed and useful write up in #32. It worked for me except for one tiny assumption that didn't hold with my composer.json file. I'll share it here in case it helps others.

The extras -> installer-paths of my composer.json looked like this initially :-

        "installer-paths": {
            "web/core": ["type:drupal-core"],
            "web/libraries/{$name}": [
                "type:drupal-library",
                "type:bower-asset",
                "type:npm-asset"
            ],
            "web/modules/contrib/{$name}": ["type:drupal-module"],
            "web/profiles/contrib/{$name}": ["type:drupal-profile"],
            "web/themes/contrib/{$name}": ["type:drupal-theme"],
            "drush/Commands/{$name}": ["type:drupal-drush"]
        },

and I simply added the required libraries at the end like this :-

        "installer-paths": {
            "web/core": ["type:drupal-core"],
            "web/libraries/{$name}": [
                "type:drupal-library",
                "type:bower-asset",
                "type:npm-asset"
            ],
            "web/modules/contrib/{$name}": ["type:drupal-module"],
            "web/profiles/contrib/{$name}": ["type:drupal-profile"],
            "web/themes/contrib/{$name}": ["type:drupal-theme"],
            "drush/Commands/{$name}": ["type:drupal-drush"],
            "web/libraries/jquery.cycle/": ["bower-asset/jquery-cycle"],
            "web/libraries/jquery.hoverIntent/": ["bower-asset/jquery-hoverintent"],
            "web/libraries/json2/": ["bower-asset/json2"],
            "web/libraries/jquery.pause/": ["bower-asset/jquery.pause"]
        },

However, his didn't work for me because both composer require 'bower-asset/jquery-hoverintent' and composer require 'bower-asset/jquery-cycle' ended up in dash-named libraries directories - rather than the required dot-named directories.

The cause of this was simply due to the presence of the wildcard libraries directive "web/libraries/{$name}" taking precedence over the new lines I naively appended to the end. These later lines were never reached (composer resolved these libraries via the earlier wildcard directive) and so the default name of the original library names were used.

The solution was simply to place the new library directives above the wildcard section as follows :-

        "installer-paths": {
            "web/core": ["type:drupal-core"],
            "web/libraries/jquery.cycle/": ["bower-asset/jquery-cycle"],
            "web/libraries/jquery.hoverIntent/": ["bower-asset/jquery-hoverintent"],
            "web/libraries/json2/": ["bower-asset/json2"],
            "web/libraries/jquery.pause/": ["bower-asset/jquery.pause"],
            "web/libraries/{$name}": [
                "type:drupal-library",
                "type:bower-asset",
                "type:npm-asset"
            ],
            "web/modules/contrib/{$name}": ["type:drupal-module"],
            "web/profiles/contrib/{$name}": ["type:drupal-profile"],
            "web/themes/contrib/{$name}": ["type:drupal-theme"],
            "drush/Commands/{$name}": ["type:drupal-drush"]
        },

Many thanks to all who have worked on this great module.

allella’s picture

@mautumn, yes, that makes sense, except I don't think it would be an issue if the following were removed:

                "type:bower-asset",
                "type:npm-asset"

from composer.json

            "web/libraries/{$name}": [
                "type:drupal-library",
                "type:bower-asset",
                "type:npm-asset"
            ],

My composer.json is based on drupal-composer/drupal-project and doesn't map bower-asset or npm-asset to libraries,

   "web/libraries/{$name}": ["type:drupal-library"],

so I didn't experience this issue.

Out of curiosity, were those extra types copied from #20?

Nonetheless, I've added a word of caution to #32.

Thanks

mautumn’s picture

Hi @allella,

Yes, I didn't expect everyone to experience the issue I had - it obviously depends on one's composer.json contents - and there are probably as many different flavours of these as there are Drupal developers!

No I didn't copy anything from #20. Mine is a relatively new site and I can't remember where I picked up

                "type:bower-asset",
                "type:npm-asset"

The fact that I had these two lines and #20 did as well suggests that it is not particularly uncommon - hence why I posted my piece. And, yes, without these two lines, there shouldn't be a problem and my work-around shouldn't be necessary.

Your word of caution in #32 is good advice.

Thanks

natts’s picture

#32 has generally worked for me, but I needed to modify this:

composer require "oomphinc/composer-installers-extender:^1.1"

to simply this:

composer require "oomphinc/composer-installers-extender"

which installed v1.1.2 instead, due to this version conflict:

Your requirements could not be resolved to an installable set of packages.

  Problem 1
    - Can only install one of: composer/installers[v1.7.0, 1.0.x-dev].
    - Can only install one of: composer/installers[1.0.x-dev, v1.7.0].
    - Can only install one of: composer/installers[1.0.x-dev, v1.7.0].
    - oomphinc/composer-installers-extender v1.1 requires composer/installers ~1.0.22 -> satisfiable by composer/installers[1.0.x-dev].
    - Installation request for oomphinc/composer-installers-extender 1.1 -> satisfiable by oomphinc/composer-installers-extender[v1.1].
    - Installation request for composer/installers (locked at v1.7.0, required as ^1.2) -> satisfiable by composer/installers[v1.7.0].

Installation failed, reverting ./composer.json to its original content.
allella’s picture

Thanks Natt #32 has been updated.

AlexBorsody’s picture

This patch also changes the paths to what is used when required by composer, I am also removing jquery-hoverintent, it's extra js that just slows my page and isn't needed. Otherwise It's similar to #29 where . is replaced with - in the path.

dhim712’s picture

Here a patch with the composer.libraries.json solution.
Here the process to follow up: https://www.drupal.org/docs/8/modules/webform/webform-frequently-asked-q...

Matt B’s picture

Following #32, I kept getting:

[InvalidArgumentException]                   
  Package type "bower-asset" is not supported

So I removed the line "installer-types": ["bower-asset", "npm-asset"], and it then worked fine, but the JS was not in the libraries folder.

I tried making the change in #32:

            "web/libraries/{$name}": [
                "type:drupal-library",
                "type:bower-asset",
                "type:npm-asset"
            ],

I also tried removing the bower-asset packages and adding them again, and it's still not putting the JS in the libraries folder.

zrodimel’s picture

I'm getting the same error as #40 when following #32. Does anyone know of an updated solution to this?

allella’s picture

@zrodimel I don't recall everything about how this works, but here are earlier notes I shared about the overall process
https://www.drupal.org/project/entityqueue/issues/2638682#comment-12294259

munchmunch’s picture

@zrodimel @Matt B I ran into the same issue when following #32 and found the problem to be related to #33. For me, I needed to have both the wildcard and the explicit installer-paths:

            "web/libraries/jquery.cycle/": ["bower-asset/jquery-cycle"],
            "web/libraries/jquery.hoverIntent/": ["bower-asset/jquery-hoverintent"],
            "web/libraries/{$name}": [
                "type:drupal-library",
                "type:bower-asset",
                "type:npm-asset"
            ]

(json2 and jquery.pause don't need to be explicitly listed since they aren't being renamed)

My guess is that composer refuses to continue without a way to handle generic bower-assets and npm-assets. This is also the official suggestion by Drupal by the way: https://www.drupal.org/docs/develop/using-composer/manage-dependencies#t...

secondly, for whatever reason my site appears to work fine without bower-asset/bootstrap or npm-asset/jquery--i do have these drupal/jquery_* modules installed though:

        "drupal/jquery_ui": "^1.4",
        "drupal/jquery_ui_accordion": "^1.1",
        "drupal/jquery_ui_datepicker": "^1.4",
        "drupal/jquery_ui_slider": "^1.1",
        "drupal/jquery_ui_touch_punch": "^1.1",

lastly, i had to specify the json2 dev version:

composer require 'bower-asset/json2:*@dev'

speaking of which, i wonder if it'd be a good idea to switch the bower packages to npm versions.. though at least for json2 that isn't currently possible since asset-packagist.org seems to ignore case sensitivity (npm-asset/json is not differentiated from npm-asset/JSON even though they are different packages on npmjs.com).

allella’s picture

It may be the case the bower-asset/json2 package only has a dev branch now.
https://asset-packagist.org/package/bower-asset/json2

Also, the top of the Bower site says

...psst! While Bower is maintained, we recommend using Yarn and Webpack or Parcel for front-end projects read how to migrate!

so it would seem Bower is depreciating itself and the #43 suggest to switch to another package source or repo, perhaps yarn over npm, may resolve the issue.

If that's the case, I can update #32 to reflect the change if someone wants to test and post a suggestion. This is for an old client site that I no longer support, so I don't have an easy way to validate the changes.

NickDickinsonWilde’s picture

Version: 8.x-4.x-dev » 5.0.x-dev
Status: Needs review » Fixed

I've gone the same way as webform - composer merge plugin - https://git.drupalcode.org/project/views_slideshow/-/blob/5.0.x/README.m.... There is a breaking change from libraries/jquery.hoverIntent to libraries/jquery.hover-intent for the one library.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.