Atom-beautify: Beautifying duplicates part of code and appends it to the file

[jaakaappi]

Description

Sometimes when I save and the plugin auto-beautifies, a part of the code from the end of the file gets duplicated and appended to the end of the file. So far this has only been observed in .js -files. Have a screenshot: http://imgur.com/a/YNU3j the selected line is the original end of file.

Steps to Reproduce

1. Add Js code to Atom editor
2. Toggle beautify-on-save on for Js and save
3. This beautified code does not look right!
   

   Debug

Here is a link to the debug.md Gist: https://gist.github.com/anonymous/a0b622887b637e6ff368ab3a7617026b

Checklist

• [x] I have tried uninstalling and reinstalling Atom Beautify to ensure it installed properly
• [x] I have reloaded (or restarted) Atom to ensure it is not a caching issue
• [x] Searched for existing Atom Beautify Issues at https://github.com/Glavin001/atom-beautify/issues
  so I know this is not a duplicate issue
• [x] Generated debugging information and added link for debug.md Gist to this issue

[bitwiseman]

@prettydiff - When I put this code into http://jsbeautifier.org/ it come out fine. I'm not sure this is js-beautifier issue.

@jaakaappi - Could you include the actual original code in this bug instead of just the debug.md. It is unclear what the original input is.

Thanks!

[prettydiff]

@jaakaappi Could you please produce Atom Beautify's debug.md file and paste it into a gist at https://gist.github.com

[bitwiseman]

@prettydiff - I think they did that: https://gist.github.com/anonymous/a0b622887b637e6ff368ab3a7617026b

The problem is I'm not sure it accurately shows the code's "before" state.

[jaakaappi]

This is the content of the code file that gets screwed up. Opening / closing it / the other files / all files / atom / windows does nothing and the bug only happens once or twice every few hours.

` define(function(require) {
'use strict';

var $ = require('jquery');
var _ = require('underscore');
var Backbone = require('backbone');
var template = require('');
var ResourceParser = require('');
var SelectActionView = require('');
var state = require('');
var bubbles = require('');
var animator = require('');

return Backbone.View.extend({

    el: $('#copy_to_dialog')[0],

    events: {
        'click #destination_items_list .shared': 'toggleCheckbox',
        'click #destination_items_list li': 'toggleCheckboxFromRow',
        'keyup #destionation_filter': 'searchDestinations',
        'click #select_items_where_exists': 'selectItemsWhereExists',
        'click #copy_sharing_options': 'toggleCheckbox',
        'click #use_destination_name': 'toggleCheckbox',
        'click #select_all': 'toggleSelectAll'
    },

    template: _.template(template),

    render: function() {
        var self = this;
        this.$el.html(this.template(this.model.toJSON()));

        var type = this.model.get('type');
        var title = this.model.get('title');
        var id = this.model.get('id');
        var resourceId = this.model.get('resourceId');

        var list = this.$el.find('#destination_items_list');

        var itemTemplate = _.template('<li data-resource="<%- id %>" data-parent="<%- parent %>" class="<%- disabled ? "disabled" : "" %>"><div class="shared"></div><span style="margin-left: <%- indent * 16 %>px;"><%- title %></span></li>');

        state.getResources().done(function(resources) {
            var items = ResourceParser.parseTree(resources.models);
            list.empty();
            _.forEach(items, function(i) {
                i.disabled = !i.accessRights.create;
                if (i.id != resourceId) // don't add the copy source item to the list
                    list.append(itemTemplate(i));
            });

            self.$el.show().dialog({
                modal: true,
                title: 'Copy ' + type + ' to',
                width: 450,
                buttons: [{
                    id: 'btn-dlg-copy-to-ok',
                    text: 'Copy',
                    click: function() {
                        var copyshare = $('#copy_sharing_options').hasClass('checked');
                        var copyname = $('#use_destination_name').hasClass('checked');
                        var destinations = self.getDesitionations();

                        if (destinations.length) {
                            if (self.nameCollisions(resources, title, type, copyname)) {
                                var view = new SelectActionView({
                                    model: new Backbone.Model({
                                        type: type,
                                        title: title,
                                        id: id,
                                        destinations: destinations,
                                        copyshare: copyshare,
                                        copyname: copyname,
                                        resourceId: resourceId,
                                        copysuffix: (($('#copy_suffix').val()).trim().length > 0 ? " " + ($('#copy_suffix').val()).trim() : "")
                                    })
                                });
                                view.render();
                            } else {
                                var apiType;

                                switch (type.toLowerCase()) {
                                    case 'dashboard':
                                    case 'desktop':
                                        apiType = 'desktop';
                                        break;
                                    case 'report':
                                        apiType = 'report';
                                        break;
                                }

                                animator.showLoader();

                                $.ajax({
                                    url: '',
                                    type: '',
                                    dataType: 'text'
                                }).done(function() {
                                    animator.hideLoader();
                                    bubbles.confirm(type + ' copied', type + ' was successfully copied.');
                                }).fail(function() {
                                    animator.hideLoader();
                                    bubbles.error('Unable to copy ' + type, 'The request to copy a ' + type + ' failed.');
                                });
                            }
                        }

                        $(this).dialog('close');
                    }
                }, {
                    id: 'btn-dlg-copy-to-cancel',
                    text: 'Cancel',
                    click: function() {
                        $(this).dialog('close');
                    }
                }],
                close: function() {
                    $(this).dialog("destroy");
                    self.remove();
                }
            });
        });

        return this;
    },

    remove: function() {
        $('#copy_to_dialog').empty();
    },

    toggleCheckbox: function(event) {
        event.stopPropagation();

        var target = $(event.target);
        target.toggleClass('checked');

        if (!target.is('#copy_sharing_options')) {
            // Remove checkbox if user selects something else
            this.$('#select_items_where_exists').removeClass('checked');
        }
        if (target.is('#use_destination_name')) {
            this.$('#copy_suffix_div').css('display', ($('#use_destination_name').hasClass('checked') ? 'block' : 'none'));
        }
    },

    toggleCheckboxFromRow: function() {
        $(event.target).find('.shared').click();
    },

    selectItemsWhereExists: function(event) {
        var target = $(event.target);
        target.toggleClass('checked');
        var isChecked = target.hasClass('checked');
        var method = isChecked ? 'addClass' : 'removeClass';
        var type = this.model.get('type');
        var title = this.model.get('title');
        var $list = $('#destination_items_list');
        var $items = $list.find('li');
        var listResources = $items.map(function() {
            return $(this).data('resource');
        });

        state.getResources().done(function(resources) {
            $items.each(function() {
                var $item = $(this);
                var resourceId = $item.data('resource');
                var resource = resources.get(resourceId);

                if (resource) {
                    var titles;

                    if (type === 'Dashboard') {
                        var desktops = resource.get('desktops');
                        titles = desktops.map(function(desktop) {
                            return desktop.get('title');
                        });
                    } else {
                        var reports = resource.get('reports');
                        titles = reports.map(function(report) {
                            return report.get('name');
                        });
                    }

                    if (_.contains(titles, title)) {
                        $item.find('.shared')[method]('checked');
                    } else if (isChecked) {
                        $item.find('.shared').removeClass('checked');
                    }
                }
            });
        });
    },

    toggleSelectAll: function(event) {
        var $target = $(event.target);
        $target.toggleClass('checked');

        var $list = $('#destination_items_list');
        var $items = $list.find('li:visible .shared');

        if ($target.hasClass('checked')) {
            $items.addClass('checked');
        } else {
            $items.removeClass('checked');
        }

        this.$('#select_items_where_exists').removeClass('checked'); // Remove checkbox if user selects something else
    },

    searchDestinations: function(event) {
        var query = event.target.value.trim().toLowerCase();
        var $list = $('#destination_items_list');
        var $items = $list.find('li');
        var parents = [];

        var showParent = function(parent) {
            var parentEl = $items.filter(function() {
                return $(this).data('resource') === parent;
            });

            if (parentEl.length) {
                var parentOfParent = parentEl.data('parent');
                if (parentOfParent) {
                    showParent(parentOfParent);
                }

                parents.push(parentEl);
            }
        };

        _.forEach($items, function(i) {
            var $item = $(i);
            var text = $item.find('span').text().toLowerCase();

            if (query.length === 0 || text.indexOf(query) !== -1) {
                $item.show();
                showParent($item.data('parent'));
            } else {
                $item.hide();
            }
        });

        _.each(parents, function(parentEl) {
            parentEl.show();
        });
    },

    getDesitionations: function() {
        var $elems = $('#destination_items_list li div.checked').parent();
        return _.map($elems, function(el) {
            return $(el).data('resource');
        });
    },

    getDestinationNames: function() {
        var $elems = $('#destination_items_list li div.checked').parent();
        return _.map($elems, function(el) {
            return escape($(el).text()) + (escape($('#copy_suffix').val()).length > 0 ? " " + escape($('#copy_suffix').val()) : ""); // return asset/enterprise name + possible suffix with a space between
        });
    },

    nameCollisions: function(resources, title, type, copyname) {
        // fetch selections
        var $list = $('#destination_items_list');
        var $items = $list.find('li div.checked');

        var names = _.map($items, function(i) {
            return $(i.parentElement).text();
        });

        var items = [];
        var titles;
        // iterate over selections' desktops or reports
        var resourceIds = this.getDesitionations();
        var selectedModels = _.filter(resources.models, function(i) {
            return _.contains(resourceIds, i.get('id'));
        });

        // if we are using the destinations' names as the name of the dashboards being copied, check if any destinations have a conflicting item.
        if (copyname) {
            var conflictFound = false;
            _.forEach(selectedModels, function(child) {
                if (_.contains(_.map(child.attributes.desktops.models, function(grandchild) {
                        return (grandchild.attributes.title);
                    }), child.attributes.name)) {
                    conflictFound = true;
                }
            });
            if (conflictFound) {
                return true;
            }
        }

        if (type === 'Dashboard') {
            var desktopsCollectionsJson = _.map(selectedModels, function(i) {
                return i.get('desktops').toJSON();
            });
            var desktops = _.flatten(desktopsCollectionsJson);
            titles = _.pluck(desktops, 'title');
            if (!_.contains(titles, title)) {
                return false;
            }
        } else {
            var reportsCollectionsJson = _.map(selectedModels, function(i) {
                return i.get('reports').toJSON();
            });
            var reports = _.flatten(reportsCollectionsJson);
            titles = _.pluck(reports, 'name');
            if (!_.contains(titles, title)) {
                return false;
            }
        }
        // at least one duplicate title was found
        return true;
    }
});

});`

[prettydiff]

I am having trouble reproducing. I tried in both jsbeautifier.org and in Atom. My Atom is out of date though, so I will try again later once everything is updated.

[bitwiseman]

@prettydiff - so, this issue is not a jsbeautify issue, right?

[prettydiff]

@bitwiseman Let's presume its not a JSBeautify issue. Once I can reproduce the problem then I will investigate further and reopen the JSBeautify issue if necessary.

[isherwood]

I also see this problem regularly and assumed it was a atom-beautify issue as it seems to happen on autosave, when the beautification takes place. I'm currently using v0.29.12.

[maartenpeels]

It happens to me also, but only if I copy a code snippet from a website(has to be from a website, other editors won't reproduce the bug). Maybe this helps for finding it out. As far as I can see it is only with js.

[prettydiff]

@maartenpeels Could you attempt to reproduce this problem with http://jsbeautifier.org/ instead of Atom? I want to rule out JS Beautify as the cause.

[maartenpeels]

I did some more testing. When I run it in Atom it all goes haywire. In JS beautify(the website) it works perfectly. So I changed the Beautifier( Image ). And then it's working fine..

So:

• JS-Beautify -> website = OK

• JS-Beautify -> Atom = Haywire

• The other 2 Beautifiers -> Atom = OK

[remillc]

It happens to me too, only on Atom, and I think only on save.

Needless to say that Atom Beautiry > Settings > JavaScript > Beautify On Save is checked.

Hope this helps...

[Glavin001]

@maartenpeels could you confirm changing from JS Beautify to Pretty Diff beautifier resolved this issue for you?

---

This issue is likely related to https://github.com/Glavin001/atom-beautify/issues/1213
If so, I do suspect it is an issue with Beautify On Save specifically and will not be reproducible on JS Beautify's website.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. If this is still an issue, please add a comment. It will be closed if no further activity occurs. Thank you for your contributions.