Bug Fix: Merge options from the data attribute in the Splide constructor (#659).

dist/js/splide.cjs.js

@@ -8,9 +8,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const PROJECT_CODE = "splide";
-const DATA_ATTRIBUTE = `data-${PROJECT_CODE}`;
-
 const CREATED = 1;
 const MOUNTED = 2;
 const IDLE = 3;
@@ -262,6 +259,9 @@ function unit(value) {
   return isString(value) ? value : value ? `${value}px` : "";
 }
 
+const PROJECT_CODE = "splide";
+const DATA_ATTRIBUTE = `data-${PROJECT_CODE}`;
+
 function assert(condition, message = "") {
   if (!condition) {
     throw new Error(`[${PROJECT_CODE}] ${message}`);
@@ -549,11 +549,6 @@ function Options(Splide2, Components2, options) {
   let points;
   let currPoint;
   function setup() {
-    try {
-      merge(options, JSON.parse(getAttribute(Splide2.root, DATA_ATTRIBUTE)));
-    } catch (e) {
-      assert(false, e.message);
-    }
     initialOptions = merge({}, options);
     const { breakpoints } = options;
     if (breakpoints) {
@@ -2375,6 +2370,11 @@ const _Splide = class {
     this.root = root;
     merge(DEFAULTS, _Splide.defaults);
     merge(merge(this._options, DEFAULTS), options || {});
+    try {
+      merge(this._options, JSON.parse(getAttribute(root, DATA_ATTRIBUTE)));
+    } catch (e) {
+      assert(false, e.message);
+    }
   }
   mount(Extensions, Transition) {
     const { state, Components: Components2 } = this;

dist/js/splide.esm.js

@@ -4,9 +4,6 @@
  * License  : MIT
  * Copyright: 2022 Naotoshi Fujita
  */
-const PROJECT_CODE = "splide";
-const DATA_ATTRIBUTE = `data-${PROJECT_CODE}`;
-
 const CREATED = 1;
 const MOUNTED = 2;
 const IDLE = 3;
@@ -258,6 +255,9 @@ function unit(value) {
   return isString(value) ? value : value ? `${value}px` : "";
 }
 
+const PROJECT_CODE = "splide";
+const DATA_ATTRIBUTE = `data-${PROJECT_CODE}`;
+
 function assert(condition, message = "") {
   if (!condition) {
     throw new Error(`[${PROJECT_CODE}] ${message}`);
@@ -545,11 +545,6 @@ function Options(Splide2, Components2, options) {
   let points;
   let currPoint;
   function setup() {
-    try {
-      merge(options, JSON.parse(getAttribute(Splide2.root, DATA_ATTRIBUTE)));
-    } catch (e) {
-      assert(false, e.message);
-    }
     initialOptions = merge({}, options);
     const { breakpoints } = options;
     if (breakpoints) {
@@ -2371,6 +2366,11 @@ const _Splide = class {
     this.root = root;
     merge(DEFAULTS, _Splide.defaults);
     merge(merge(this._options, DEFAULTS), options || {});
+    try {
+      merge(this._options, JSON.parse(getAttribute(root, DATA_ATTRIBUTE)));
+    } catch (e) {
+      assert(false, e.message);
+    }
   }
   mount(Extensions, Transition) {
     const { state, Components: Components2 } = this;

dist/js/splide.js

@@ -13,8 +13,6 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 })(this, function () {
   'use strict';
 
-  var PROJECT_CODE = "splide";
-  var DATA_ATTRIBUTE = "data-" + PROJECT_CODE;
   var CREATED = 1;
   var MOUNTED = 2;
   var IDLE = 3;
@@ -287,6 +285,9 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     return isString(value) ? value : value ? value + "px" : "";
   }
 
+  var PROJECT_CODE = "splide";
+  var DATA_ATTRIBUTE = "data-" + PROJECT_CODE;
+
   function assert(condition, message) {
     if (message === void 0) {
       message = "";
@@ -628,12 +629,6 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     var currPoint;
 
     function setup() {
-      try {
-        merge(options, JSON.parse(getAttribute(Splide2.root, DATA_ATTRIBUTE)));
-      } catch (e) {
-        assert(false, e.message);
-      }
-
       initialOptions = merge({}, options);
       var breakpoints = options.breakpoints;
 
@@ -2884,6 +2879,12 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       this.root = root;
       merge(DEFAULTS, _Splide.defaults);
       merge(merge(this._options, DEFAULTS), options || {});
+
+      try {
+        merge(this._options, JSON.parse(getAttribute(root, DATA_ATTRIBUTE)));
+      } catch (e) {
+        assert(false, e.message);
+      }
     }
 
     var _proto = _Splide.prototype;

src/js/components/Options/Options.ts

@@ -1,9 +1,8 @@
-import { DATA_ATTRIBUTE } from '../../constants/project';
 import { DESTROYED } from '../../constants/states';
 import { Throttle } from '../../constructors';
 import { Splide } from '../../core/Splide/Splide';
 import { BaseComponent, Components, Options } from '../../types';
-import { assert, find, getAttribute, merge } from '../../utils';
+import { find, merge } from '../../utils';
 
 
 /**
@@ -50,12 +49,6 @@ export function Options( Splide: Splide, Components: Components, options: Option
    * Called when the component is constructed.
    */
   function setup(): void {
-    try {
-      merge( options, JSON.parse( getAttribute( Splide.root, DATA_ATTRIBUTE ) ) );
-    } catch ( e ) {
-      assert( false, e.message );
-    }
-
     initialOptions = merge( {}, options );
 
     const { breakpoints } = options;

src/js/components/Options/test/general.test.ts

@@ -7,17 +7,6 @@ describe( 'Options', () => {
     matches: true,
   } as MediaQueryList );
 
-  test( 'can merge options provided by the data attribute.', () => {
-    const data   = { width: 100, height: 100, type: 'loop', waitForTransition: false };
-    const splide = init( { width: 200, height: 200 }, { json: JSON.stringify( data ) } );
-    const { options } = splide;
-
-    expect( options.width ).toBe( 100 );
-    expect( options.height ).toBe( 100 );
-    expect( options.type ).toBe( 'loop' );
-    expect( options.waitForTransition ).toBe( false );
-  } );
-
   test( 'can merge options when a breakpoint matches the media query.', () => {
     const splide = init( { perPage: 2, breakpoints: { 640: { perPage: 4 } } } );
     expect( splide.options.perPage ).toBe( 4 );

src/js/core/Splide/Splide.ts

@@ -4,12 +4,13 @@ import { CLASS_INITIALIZED } from '../../constants/classes';
 import { DEFAULTS } from '../../constants/defaults';
 import { EVENT_DESTROY, EVENT_MOUNTED, EVENT_READY, EVENT_REFRESH, EVENT_UPDATED } from '../../constants/events';
 import { DEFAULT_USER_EVENT_PRIORITY } from '../../constants/priority';
+import { DATA_ATTRIBUTE } from '../../constants/project';
 import { CREATED, DESTROYED, IDLE, STATES } from '../../constants/states';
 import { FADE } from '../../constants/types';
 import { EventBus, EventBusCallback, EventBusObject, State, StateObject } from '../../constructors';
 import { Fade, Slide } from '../../transitions';
 import { ComponentConstructor, Components, EventMap, Options, SyncTarget } from '../../types';
-import { addClass, assert, assign, empty, forOwn, isString, merge, query, slice } from '../../utils';
+import { addClass, assert, assign, empty, forOwn, getAttribute, isString, merge, query, slice } from '../../utils';
 
 
 /**
@@ -87,6 +88,12 @@ export class Splide {
 
     merge( DEFAULTS, Splide.defaults );
     merge( merge( this._options, DEFAULTS ), options || {} );
+
+    try {
+      merge( this._options, JSON.parse( getAttribute( root, DATA_ATTRIBUTE ) ) );
+    } catch ( e ) {
+      assert( false, e.message );
+    }
   }
 
   /**

src/js/core/Splide/test/general.test.ts

@@ -0,0 +1,26 @@
+import { init } from '../../../test';
+import { DEFAULTS } from '../../../constants/defaults';
+
+
+describe( 'Splide', () => {
+  test( 'can merge options to defaults.', () => {
+    const splide = init( { width: 200, height: 200 } );
+    const { options } = splide;
+
+    expect( options.width ).toBe( 200 );
+    expect( options.height ).toBe( 200 );
+    expect( options.type ).toBe( DEFAULTS.type );
+    expect( options.speed ).toBe( DEFAULTS.speed );
+  } );
+
+  test( 'can merge options provided by the data attribute.', () => {
+    const data   = { width: 100, height: 100, type: 'loop', waitForTransition: false };
+    const splide = init( { width: 200, height: 200 }, { json: JSON.stringify( data ) } );
+    const { options } = splide;
+
+    expect( options.width ).toBe( 100 );
+    expect( options.height ).toBe( 100 );
+    expect( options.type ).toBe( 'loop' );
+    expect( options.waitForTransition ).toBe( false );
+  } );
+} );

src/js/test/php/examples/json.php

@@ -0,0 +1,46 @@
+<?php
+require_once '../parts.php';
+require_once '../settings.php';
+
+$settings = get_settings();
+?>
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <title>Default</title>
+
+  <link rel="stylesheet" href="../../../../../dist/css/themes/splide-<?php echo $settings['theme'] ?>.min.css">
+  <link rel="stylesheet" href="../../assets/css/styles.css">
+  <script type="text/javascript" src="../../../../../dist/js/splide.js"></script>
+
+  <script>
+    document.addEventListener( 'DOMContentLoaded', function () {
+      var splide = new Splide( '#splide01' );
+      splide.mount();
+    } );
+  </script>
+</head>
+<body>
+
+<?php
+	$options = [
+		'type' => 'fade',
+//		'perPage' => 2,
+	];
+?>
+
+<div id="splide01" class="splide" data-splide='<?php echo json_encode( $options ) ?>'>
+	<div class="splide__track">
+		<div class="splide__list">
+			<?php render_slides(); ?>
+		</div>
+	</div>
+</div>
+
+<pre></pre>
+
+</body>
+</html>