minutebase / ember-sanitize Goto Github PK

I installed and ran the generator. Now when running the app, I get:

Uncaught TypeError: container.optionsForType is not a function in /initializers/setup-sanitizers.js.

This is in an Ember 2.1.0 project. I have successfully used this addon with a 1.13.x project.

I have a component that uses the helper with a custom config. It works perfectly in the app but now I am trying to write an integration test for it.

My first stab got me this: Failed to create an instance of 'sanitizer:links-only'. Most likely an improperly defined class or an invalid module export.

So I figured I need to run the initializer. My test now looks something like this:

import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';
import initializer from 'my-app/initializers/setup-sanitizers';

moduleForComponent('my-component', 'Integration | Component | my component', {
  integration: true,

  setup() {
    // manually invoke the ember-sanitize initializer
    initializer.initialize(this);
    //initializer.initialize(this.container);
  }
});

test('it renders', function(assert) {
  ...
});

But now I get container.registerOptionsForType is not a function coming out of the initializer. I think I'm on the right track but I'm not sure what to pass to the initializer. Any suggestions? Thanks.

Still looking into why this is a problem, but using the latest Engines beta, when I use this addon from within the engine (this is not an issue in a normal addon though), including it in the dependencies list in package.json, I get the following error during the build

Livereload server on http://localhost:49153
Serving on http://localhost:4200/
The Broccoli Plugin: [SourceMapConcat: Concat: Vendor /assets/engine-vendor.js] failed with:
Error: ENOENT: no such file or directory, open '/Users/dbouwman/dev/ember-bugs/arcgis-items-engine/tmp/source_map_concat-input_base_path-nWYI0dJZ.tmp/undefined/sanitize.js/lib/sanitize.js'
    at Error (native)
    at Object.fs.openSync (fs.js:640:18)
    at Object.fs.readFileSync (fs.js:508:33)
    at SourceMap.addFile (/Users/dbouwman/dev/ember-bugs/arcgis-items-engine/node_modules/fast-sourcemap-concat/lib/source-map.js:75:31)
    at /Users/dbouwman/dev/ember-bugs/arcgis-items-engine/node_modules/broccoli-concat/concat.js:200:16
    at Array.forEach (native)
    at Concat.<anonymous> (/Users/dbouwman/dev/ember-bugs/arcgis-items-engine/node_modules/broccoli-concat/concat.js:198:24)
    at /Users/dbouwman/dev/ember-bugs/arcgis-items-engine/node_modules/fast-sourcemap-concat/lib/source-map.js:393:12
    at initializePromise (/Users/dbouwman/dev/ember-bugs/arcgis-items-engine/node_modules/rsvp/dist/rsvp.js:588:5)
    at new Promise (/Users/dbouwman/dev/ember-bugs/arcgis-items-engine/node_modules/rsvp/dist/rsvp.js:1076:31)

The broccoli plugin was instantiated at:
    at Concat.Plugin (/Users/dbouwman/dev/ember-bugs/arcgis-items-engine/node_modules/broccoli-plugin/index.js:7:31)
    at new Concat (/Users/dbouwman/dev/ember-bugs/arcgis-items-engine/node_modules/broccoli-concat/concat.js:38:10)
    at module.exports (/Users/dbouwman/dev/ember-bugs/arcgis-items-engine/node_modules/broccoli-concat/index.js:26:10)
    at Class.buildVendorJSWithImports (/Users/dbouwman/dev/ember-bugs/arcgis-items-engine/node_modules/ember-engines/lib/engine-addon.js:149:7)
    at Class.treeForPublic (/Users/dbouwman/dev/ember-bugs/arcgis-items-engine/node_modules/ember-engines/lib/engine-addon.js:436:59)
    at Class._treeFor (/Users/dbouwman/dev/ember-bugs/arcgis-items-engine/node_modules/ember-cli/lib/models/addon.js:362:33)
    at Class.treeFor (/Users/dbouwman/dev/ember-bugs/arcgis-items-engine/node_modules/ember-engines/lib/engine-addon.js:643:23)
    at /Users/dbouwman/dev/ember-bugs/arcgis-items-engine/node_modules/ember-cli/lib/broccoli/ember-app.js:522:20
    at Array.map (native)

I found a workaround by changing how the included hook in index.js works:

  included: function(app, parentAddon) {
    var current = this;
    do {
      app = current.app || app;
    } while (current.parent.parent && (current = current.parent));
    app.import(app.bowerDirectory + '/sanitize.js/lib/sanitize.js');
  }

Again - not vouching for this as the best way to solve the problem, just that this is working for me, and may be helpful to others.

The latest version doesn't work on 1.13 because of the changes made for it to work on 2.0.

Hi,

Ember 2.11+ no longer requires to use bower so I am moving all my dependencies to npm. Unfortunately there are no published Sanitize.js at npm. But seems original repo is dead and I think it is ok to copy original repo to vendor folder.

You can check it at my repo and I can submit PR if you are ok with this. All original tests passed after my changes.

Also I fixed ember-getowner-polyfill warning since it is now polyfill and do not requires to import directly.

Let me know what you think.
Thanks!

Hi there @rlivsey,

Started using this addon last week. Been a great help to get Sanitize wired up and working in our app. As I've been using it I found a few places where it's a little difficult to navigate and I was wondering if you'd be interested in (a) feedback and (b) changes in the form of pull requests.

For feedback (a):

• testing: I would like to unit test my sanitizers but the need for a container makes it cumbersome in tests. I have a little fake container I inject but it's quite a bit of set up for a little test. Which brings me to -
• sanitizers: I was a little surprised that it's the sanitizer config that is stored in the container rather than a sanitizer [Object] I could call and pass in the HTML. I did make the built-in sanitizer configs of [BASIC, RELAXED, and RESTRICTED] available using the container as well, which was nice!

Not coincidentally, the changes I would recommend would be related to these two items:

• sanitizers: I think it would be neat to create an Ember Sanitizer Object that could get registered in the store and used throughout the codebase. Something like:

// sanitizer.js
export default Ember.Object.extend({
  config: null,

  sanitizeElement() {
    // ...
  },

  sanitizeHTML() {
    // ...
  }
});

// sanitizers/foo.js
import Sanitizer from 'ember-sanitize';

export default Sanitizer.extend({
  config: Sanitize.Config.BASIC;  
});

// somewhere else
this.container.lookup('sanitizer:foo').sanitizeHTML(myHTML);

• testing: this change would mean that sanitizers could be tested without the container and would be self contained, it would be trivial to use this setup in the mixin as well.
• blueprints: once you have objects like that you could create some blueprints to allow the creation of new serializers

I'll stop now. 😄 If you're interested in any of this I can put together a pull request or two and get moving.

Thanks for the project and for your time!

While it is possible to just copy the three files from sanitize.js to app/sanitizers/ (don't know why they are not included by default) it would be very useful to have those configurations in the global Sanitize object.

I know ember-sanitize is meant to be used as a template helper, but as it's already importing sanitize.js and it is possible to use the sanitizer from a Javascript file normally, for example to clean the user input before storing it in the database:

const s = new Sanitize( basic );
let div = document.createElement( "DIV" );
div.innerHTML = model.get( "long_text_field" );

const clean = s.clean_node( div );

div = document.createElement( "DIV" );
div.appendChild( clean );

model.set( "long_text_field", Ember.String.htmlSafe( div.innerHTML ) );

(If there is an easier way to use sanitize.js, please let me know)

By using files for configuration, every component/route/controller/service using the sanitizer would be required to navigate the paths to include the files (e.g. import basic from "../../../sanitizers/basic") with an added cost to maintain.