Remove jQuery dependency

npm/.npmignore

@@ -0,0 +1,2 @@
+/__tests__/*
+/package.json.erb

npm/README.md

@@ -8,8 +8,6 @@ Cocooned is form builder-agnostic: it works with standard Rails (>= 5.0, < 7.0)
 
 This package aims to ease cocooned integration with projects that use npm/Yarn to manage non-ruby dependencies and/or use webpacker to build their assets.
 
-Cocooned depends on jQuery, Ruby (>= 2.5) and Rails (>= 5.0, < 7.0).
-
 ## Installation
 
 With npm:
@@ -26,45 +24,65 @@ You should specify the same version (and version contraints) as in your `Gemfile
 
 ## Usage
 
-### With Sprockets
+To use Cocooned, import it in one of your JavaScript file with:
+
+```javascript
+import Cocooned from '@notus.sh/cocooned'
+
+// Detect, create and setup all your Cocooned container at once
+Cocooned.start()
+
+// Or initialize them individually
+// Without options
+const cocooned = new Cocooned(document.querySelector('a selector to match container'))
+// With options
+const cocooned = new Cocooned(document.querySelector('a selector to match container'), { limit: 12 })
+```
+
+Options can also be provided as a JSON string in a `data-cocooned-options` on your container HTML tag. This is the recommended way to pass options from Ruby-land.
+
+### Supported options
+
+* `limit: {Integer}`: Set maximum number of items in your container to the specified limit.
+* `reorderable`: Allow items in your container to be reordered (with their respective `position` field updated)  
+  Can be specified as a boolean (`reorderable: true`) or with a `startAt` value updated positions will be counted from (`reorderable: { startAt: 0 }`, defaults to 1)
+
+For more documentation, please look at the [cocooned Ruby gem](https://rubygems.org/gems/cocooned).
+
+### Sprockets integration
 
 In `config/initializers/assets.rb`, be sure you have something like this:
 
 ```ruby
 Rails.configuration.tap do |config|
-  # [...]
-
   # Ask Sprockets to load files in ./node_modules
   config.assets.paths << Rails.root.join('node_modules')
-  # If you use sass-rails, ask Sass to do the same
-  config.sass.load_paths << Rails.root.join('node_modules')
-
-  # [...]
 end
 ```
 
-Then load Cocooned with:
+Then load Cocooned in one of your JavaScript file with:
 
 ```javascript
-// In a javascript file
 //= require '@notus.sh/cocooned/cocooned'
-```
 
-```css
-/* In a stylesheet */
-/*
- *= require '@notus.sh/cocooned/cocooned'
- */
+Cocooned.start()
 ```
 
-### With Webpacker
+### jQuery integration
+
+Cocooned does not require jQuery but can integrates with it.
 
 ```javascript
-// In a javascript file
-var Cocooned = require('@notus.sh/cocooned');
+import Cocooned from '@notus.sh/cocooned/jquery'
+// Cocooned.start() is already bound on jQuery ready event.
 ```
 
-```css
-/* In a stylesheet */
-@import '@notus.sh/cocooned/cocooned';
+Once loaded, you can use Cocooned as a jQuery plugin:
+
+```javascript
+// Without options
+$('a selector to match container').cocooned()
+
+// With options
+$('a selector to match container').cocooned({ limit: 12 })
 ```

npm/__tests__/features/cocooned.js

@@ -1,6 +1,6 @@
 /* global given */
 
-import Cocooned from '@notus.sh/cocooned/cocooned'
+import Cocooned from '@notus.sh/cocooned'
 import { jest } from '@jest/globals'
 import { clickEvent } from '@cocooned/tests/support/helpers'
 import { getItem, getItems, getAddLink, getRemoveLink } from '@cocooned/tests/support/selectors'
@@ -34,7 +34,7 @@ describe('A basic Cocooned setup', () => {
   })
 
   it('add a class to container', () => {
-    expect(given.container).toHaveClass('cocooned-container')
+    expect(given.container.classList).toContain('cocooned-container')
   })
 
   describe('when add link is clicked', () => {

npm/__tests__/features/plugins/limit.js

@@ -1,6 +1,6 @@
 /* global given */
 
-import Cocooned from '@notus.sh/cocooned/cocooned'
+import Cocooned from '@notus.sh/cocooned'
 import { jest } from '@jest/globals'
 import { faker } from '@cocooned/tests/support/faker'
 import { clickEvent } from '@cocooned/tests/support/helpers'

npm/__tests__/features/plugins/reorderable.js

@@ -1,6 +1,6 @@
 /* global given */
 
-import Cocooned from '@notus.sh/cocooned/cocooned'
+import Cocooned from '@notus.sh/cocooned'
 import { jest } from '@jest/globals'
 import { faker } from '@cocooned/tests/support/faker'
 import { clickEvent } from '@cocooned/tests/support/helpers'

npm/__tests__/integration/cocoon/classes.js

@@ -1,6 +1,6 @@
 /* global given */
 
-import Cocooned from '@notus.sh/cocooned/cocooned'
+import Cocooned from '@notus.sh/cocooned'
 import { jest } from '@jest/globals'
 import { setup, clickEvent } from '@cocooned/tests/support/helpers'
 

npm/__tests__/integration/cocoon/events.js

@@ -1,6 +1,6 @@
 /* global given */
 
-import Cocooned from '@notus.sh/cocooned/cocooned'
+import Cocooned from '@notus.sh/cocooned'
 import { jest } from '@jest/globals'
 import { setup, clickEvent } from '@cocooned/tests/support/helpers'
 import { getAddLink, getRemoveLink } from '@cocooned/tests/support/selectors'

npm/__tests__/integration/jquery.js

@@ -0,0 +1,47 @@
+/* global given */
+
+import jQuery from 'jquery'
+import { jest } from '@jest/globals'
+import { clickEvent } from '@cocooned/tests/support/helpers'
+import { getAddLink } from '@cocooned/tests/support/selectors'
+
+describe('A Cocooned setup with jQuery integration', () => {
+  given('html', () => `
+    <section data-cocooned-options="{}">
+      <div>
+        <a class="cocooned-add" href="#"
+           data-association="items"
+           data-template="template">Add</a>
+        <template data-name="template">${given.template}</template>
+      </div>
+    </section>
+  `)
+  given('template', () => '<div class="cocooned-item"></div>')
+  given('container', () => document.querySelector('section'))
+
+  beforeEach(async () => {
+    document.body.innerHTML = given.html
+
+    // Expose jQuery globally and call auto-start as Jquery ready event does not fire in jest-dom
+    window.$ = window.jQuery = jQuery
+    await import('@notus.sh/cocooned/jquery').then(({ cocoonedAutoStart }) => cocoonedAutoStart())
+  })
+
+  it('add a method to jQuery', () => {
+    expect(jQuery.fn).toEqual(expect.objectContaining({ cocooned: expect.any(Function) }))
+  })
+
+  it('instanciates Cocooned instances on startup', () => {
+    expect(given.container.classList).toContain('cocooned-container')
+  })
+
+  describe('when an event is fired', () => {
+    it('triggers jQuery event listeners', () => {
+      const listener = jest.fn()
+      $(given.container).on('cocoon:before-insert', listener)
+      getAddLink(given.container).dispatchEvent(clickEvent())
+
+      expect(listener).toHaveBeenCalled()
+    })
+  })
+})

npm/__tests__/integration/rails.js

@@ -1,6 +1,6 @@
 /* global given */
 
-import Cocooned from '@notus.sh/cocooned/cocooned'
+import Cocooned from '@notus.sh/cocooned'
 import { jest } from '@jest/globals'
 import { faker } from '@cocooned/tests/support/faker'
 import { setup, clickEvent } from '@cocooned/tests/support/helpers'

npm/__tests__/jest.config.js

@@ -153,11 +153,7 @@ export default {
 
   // A list of paths to modules that run some code to configure or set up the
   // testing framework before each test
-  setupFilesAfterEnv: [
-    'givens/setup.js',
-    './support/jquery.js',
-    './support/matchers.js'
-  ],
+  setupFilesAfterEnv: ['givens/setup.js'],
 
   // The number of seconds after which a test is considered as slow and reported
   // as such in the results.