JSFiddle - React, Tailwind, and code Playground

by Gerald Gillespie

HTML

<div id="test">
hi
</div>

JavaScript

console.log($.fn.jquery);

var $$;

class CustomApp {
  constructor($) {
    $$ = $;

    $.fn.customApp = this.init;
  }

  init(options, callback) {
    var objects = [],
      return_data;
    this.each(function() {
      var object;
      //dostuff
      console.log('inside',options);

      if ($(this).data('object') === undefined) {
        //instantiate the object
        object = {};
        object.$this = $(this);
        object.next = function(event) {
        
        console.log('deeper')
          console.log('event', event);
          console.log('$this', object.$this);
          console.log('this', this)

        };
        object.$this.data('object', object);
      } else {
        //re-use what you already have
        object = $(this).data('object');
      }
      objects.push(object);
    });
    if (objects.length === 1) {
      return_data = objects[0];
    } else {
      return_data = objects;
    }
    return_data.all = function(callback) {
      $.each(objects, function(i) {
        callback.call(this, i);
      });
    };
    console.log(return_data);
    return return_data;
  }

}

new CustomApp($);

console.log($('#test').text());

var X = $('#test').customApp({
  key: 'value'
}, function() {
  console.log(this)
});
X.all()

//console.log( X.)
/*

var methods = {
  next: function($this) {
    ...
  },
  ...
};
$.fn.string_driven = function(options_or_method) {
  return this.each(function() {
    if (methods[options_or_method]) {
      return methods[method].apply(this, $(this));
    } else {
      $.extend(settings, options_or_method);
    }...
  });
};
*/