ciena-blueplanet / ember-block-slots Goto Github PK
View Code? Open in Web Editor NEWSupport for targeted yield slots within a component block
Home Page: http://ciena-blueplanet.github.io/ember-block-slots/
License: MIT License
Support for targeted yield slots within a component block
Home Page: http://ciena-blueplanet.github.io/ember-block-slots/
License: MIT License
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
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) ✗
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.
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.
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
@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
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.
There might be more but here are some of the items to be tested:
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.
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.
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.
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'],
...
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.
Setup the code coverage reporting to coveralls
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.
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?
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-slot
s 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
Update dev dependencies:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.