ciena-blueplanet / ember-block-slots Goto Github PK

Recently ember-prop-types upgraded from version 2.0.1 to version 2.0.0 which stopped including ember-lodash as a dependency in favor of providing ember-lodash-shim via blueprints. This project should be using blueprints and include ember-prop-types in it's blueprints which will make is so running ember install ember-block-slots will run the ember install of ember-prop-types, causing the consumer to also get ember-lodash-shim which is required for that project to work.

In Ember-beta, new assertions were introduced to align the behavior of handlebars to that of glimmer. The new assertions enforced that attributeBindings cannot be used on tagless components.

https://github.com/emberjs/ember.js/blame/3d25f9805cf1eb37a3f5ae6e05e3e2646b4f6175/packages/ember-htmlbars/lib/system/build-component-template.js#L47-L50

assert('You cannot use `attributeBindings` on a tag-less component: ' + component.toString(), (() => {
  let { attributeBindings } = component;
  return tagName !== '' || !attributeBindings || attributeBindings.length === 0;
})());

This causes a problem with using ember-hook in a testing/development environment since ember-hook sets attributeBindings: https://github.com/Ticketfly/ember-hook/blob/master/addon/mixins/hook.js#L17

export default Mixin.create({
  attributeBindings: ['_hookName:data-test'],
...

• Setup the github pages and place the demo app there.
• Update the README with a link to the github pages demo app.

The Bower package https://github.com/utatti/perfect-scrollbar-bower has been deprecated in favor of an updated NPM one - https://github.com/utatti/perfect-scrollbar

The examples are fairly abstract and could definitely be more clear

There might be more but here are some of the items to be tested:

• Named block-slot
• Default block-slot
• object/string yielding (pass through)

Should following usecase work ?

  {{#block-slot 'row' as |user|}}

    {{#packages/commons/grid/components/row/grid-row-cmp}}

      {{packages/commons/grid/components/column/string-column-body-cmp value=user.id}}
      {{packages/commons/grid/components/column/user-column-body-cmp user=user}}

      {{#yield-slot 'actions' (block-params user)}}
        {{yield}}
      {{/yield-slot}}

    {{/packages/commons/grid/components/row/grid-row-cmp}}

  {{/block-slot}}

All components in nesting chain has SlotsMixin applied. Yielded slot actions is not propagated upwards.

This looks incredible. Very eager to use it, however, for my simplest of test, it doesn't seem to work. I'm pretty sure I've implemented this correctly, but would be happy for you to point out a mistake on my part to make this work. :)

components/header-page/component.js

import Ember from 'ember';
import SlotsMixin from 'ember-block-slots';

export default Ember.Component.extend(SlotsMixin, {});

components/page-header/template.hbs

<h2>
  {{#yield-slot 'title'}}
    Yes: {{yield}}
  {{else}}
    No: Default Title
  {{/yield-slot}}
</h2>

index/template.hbs

{{#header-page}}
  {{#block-slot 'title'}}My Title{{/block-slot}}
{{/header-page}}

The result is always: "No: Default Title", if #block-slot 'title' exists or not. Any help is much appreciated.

Remove the Array.from and instead define each computed property so that we avoid the issues with Array.from not being inside the version of Firefox that travis uses to run tests.

I'm trying to use this addon in conjunction with ember-wormhole, and Line 56 of yield-slot.js is throwing a TypeError as parentView._slots is undefined. I suspect parentView is resolving to the ember-wormhole component rather than my SlotsMixin-derived custom component, hence why it can't find _slots.

Apologies for the vagueness; just have time to drop a quick note. I'll see if I can come up with a better test case, since this likely isn't really a wormhole-specific thing but more a general issue with trying to put the yield-slots inside a component block.

Babel 5 support is going to be removed in ember-cli so it would be helpful to update the ember-cli-babel dependency this addon has to >= 6 so consumers won't be blocked

Add note to README for testing instructions that you will need to add an entry: to the travis.yml file to prevent an error saying that Array.from is not a function:

not ok 6 Firefox 31.0 - Integration | Component
  ---
       message: >
           Array.from is not a function
       stack: >
           componentInit@http://localhost:7357/assets/vendor.js:158407:7
           init@http://localhost:7357/assets/vendor.js:158381:7

This occurs because travis uses the default Firefox 31 as seen above to run the tests and that version does not have the Array.from function.

I tried to use block slots and I'm seeing this error:

Uncaught TypeError: Cannot read property 'includes' of undefined

Maybe I just don't understand how the API works

Update dev dependencies:

• ember-ajax
• ember-frost-core
• ember-lodash
• eslint
• eslint-config-frost-standard

I've run into a pretty critical issue surrounding the fact _slots is a plain property in the slots.js mixin even though that's a complex object.

The way this issue manifests itself, is that multiple instances of the same component can collide with each other. If two instances of the same component are rendered, and one is destroyed, the remaining components slot can also get destroyed.

I'm trying to pass params to #block-slot like in this contrived example:

sample-component.hbs

{{#yield-slot 'slot' (block-params title)}}
  <div data-role={{role}}>
    {{yield}}
  </div>
{{/yield-slot}}

block-slots.hbs

{{#sample-component}}
  {{#block-slot 'slot' role='row' as |title|}}
    <h4>{{title}}</h4>
  {{/block-slot}}
{{/sample-component}}

And expecting:

<div data-role="row">
  <h4>My Title</h4
</div>

I know you can pass block-params from #yield-slot to #block-slot, but can it go the other way around?

We are experiencing this issue: highlightjs/highlight.js#1130 open against highlight.js that causes our htmlbars block quotes to not display correctly in the demo app.

@thoov and I came across a case where ember-block-slots is not compatible with Ember 2.10.0. It seems that yielding a set of arguments to a block slot through block-params, when once of those params is a hash, causes the following issue on browsers that do not have a native WeakMap implementation (yeah, it took a while to get to the bottom of this 😉 )

TypeError: Attempting to define property on object that is not extensible.

I created a demo repo here that reproduces the issue. Basically, run the tests in Phantom and you'll see a failure, but in Chrome you will not. Just running ember test will show a message that isn't helpful, an error about an assertion that is just a symptom of the real problem. If you do ember test --serve you'll see both that error, plus an additional message about the "real" one.

Output from ember test

Output from ember test --serve

Setup the code coverage reporting to coveralls

Just ran ember new plz, installed block slots, and then get the following:

➜  plz git:(master) cat package.json
{
  "name": "plz",
  "version": "0.0.0",
  "description": "Small description for plz goes here",
  "private": true,
  "directories": {
    "doc": "doc",
    "test": "tests"
  },
  "scripts": {
    "build": "ember build",
    "start": "ember server",
    "test": "ember test"
  },
  "repository": "",
  "engines": {
    "node": ">= 0.10.0"
  },
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "broccoli-asset-rev": "^2.4.2",
    "ember-ajax": "^2.0.1",
    "ember-cli": "2.7.0-beta.5",
    "ember-cli-app-version": "^1.0.0",
    "ember-cli-babel": "^5.1.6",
    "ember-cli-dependency-checker": "^1.2.0",
    "ember-cli-htmlbars": "^1.0.3",
    "ember-cli-htmlbars-inline-precompile": "^0.3.1",
    "ember-cli-inject-live-reload": "^1.4.0",
    "ember-cli-jshint": "^1.0.0",
    "ember-cli-qunit": "^2.0.0",
    "ember-cli-release": "^0.2.9",
    "ember-cli-sri": "^2.1.0",
    "ember-cli-test-loader": "^1.1.0",
    "ember-cli-uglify": "^1.2.0",
    "ember-data": "^2.7.0-beta.1",
    "ember-export-application-global": "^1.0.5",
    "ember-load-initializers": "^0.5.1",
    "ember-resolver": "^2.0.3",
    "ember-welcome-page": "^1.0.1",
    "loader.js": "^4.0.1"
  }
}
➜  plz git:(master) ember install ember-block-slots
Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info.
Installed packages for tooling via npm.
installing ember-block-slots
  install addon ember-prop-types@^2.0.0
Installed packages for tooling via npm.
Installed addon package.
Installed addon package.
➜  plz git:(master) ✗ ember s
Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info.
Cannot read property 'app' of undefined
TypeError: Cannot read property 'app' of undefined
    at CoreObject.extend.import (/Users/istorz/Desktop/plz/node_modules/ember-cli/lib/models/addon.js:424:15)
    at CoreObject.extend.import (/Users/istorz/Desktop/plz/node_modules/ember-cli/lib/models/addon.js:427:15)
    at CoreObject.module.exports.importPolyfill (/Users/istorz/Desktop/plz/node_modules/ember-cli-babel/index.js:35:18)
    at CoreObject.module.exports.included (/Users/istorz/Desktop/plz/node_modules/ember-cli-babel/index.js:65:12)
    at CoreObject.superWrapper [as included] (/Users/istorz/Desktop/plz/node_modules/ember-cli/node_modules/core-object/lib/assign-properties.js:32:18)
    at /Users/istorz/Desktop/plz/node_modules/ember-cli/lib/models/addon.js:258:34
    at Array.map (native)
    at CoreObject.eachAddonInvoke (/Users/istorz/Desktop/plz/node_modules/ember-cli/lib/models/addon.js:256:24)
    at CoreObject.extend.included (/Users/istorz/Desktop/plz/node_modules/ember-cli/lib/models/addon.js:408:10)
    at CoreObject.superWrapper [as included] (/Users/istorz/Desktop/plz/node_modules/ember-cli/node_modules/core-object/lib/assign-properties.js:32:18)
➜  plz git:(master) ✗