We Keep Coding

Instantiate WebComponent "easily"

I have created a simple Web Component to add in a parent (say "div#left" in this example). The component do nothing, except showing a text (it will be more elaborate later).
It's working if I do:
in html
<my-comp text="TEST"></my-comp>
in JS
document.getElementById("left").innerHTML += '<my-comp text="bar"></my-comp>';
or
var c = document.createElement("my-comp");
c.setAttribute("text", "buzz");
document.getElementById("left").appendChild(c);
But, I want something more "easy" to instantiate it (more "natural" for me...), via a method like
const gb = new MyComp({ text: "foo" });
gb.addInParent("#left")
or via a generic function (to instantiate any component), like:
const gb = new MyComp({ text: "foo" });
addInParent("#left", gb)
It may be simple, but I can't find how to implement the method/function addInParent... (all my research leads me to React or equivalent, which I don't use for this specific case)
Thank's in advance

I'm not sure if i got it right but you only want to change de inner part of the component to the received prop, right?
Have you tried slots?
https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots
for example in your web component render method
<div>
<slot>Slotted text</slot>
</div>
and then in your page you call your component and pass the text like
<my-comp>My text here</my-comp>

How do I access object property in Handlebars template?

My Ember component JS looks like below;
row = {};
Ember.set(row[my.constants.fieldKey], "cssType", 'leftPadding')
and my component HBS looks like below;
{{my-field cssType=(get row (concat (my-field-key 'SECTION_ID' 'FIELD_ID') '.cssType'))}}
To summarize, I only wanted to understand how can I achieve the equivalent of following JS code in hbs dynamically ?
row['my-field-key'].cssType

Your composition of get and concat template helpers is absolutely fine. I've setup an ember-twiddle to verify that this approach is working. You could find it here.
You might have an issue with your my-field-key template helper but it's hard to tell cause that code is missing. Also a reproduction in an ember-twiddle would be very helpfull.

Creating a calendar component with moment and react

I was searching for React Calendar component I found this fiddle however I am not understanding some part of code in that, below is the link
JSFiddle Link for calendar component code
I did not understand below part
monthRange.by('days', function(moment) {
var ref;
if (ref = moment.week(), indexOf.call(weeks, ref) < 0) {
return weeks.push(moment.week());
}
});
which lib is that ".by" using, I ve included moments, moment-range, react-with-addons, but the above method is returning weeks with length 0.
when I debug, I am not able to go into that method.

Don't reinvent the wheel, if you are looking for a ready solution use react-big-calendar. If you want to build a calendar as a part of a project to learn React look at a simpler code like holiday-calendar

You can just use react-big-calender, personally I feel this is much better than create your own.

How can I append a {{link-to}} helper to my template dynamically in ember.js? (Functionality similiar to $compile in angular)

I am using ember 2.0 with ember-cli. All the other answers that come close to addressing this all use deprecated methods.
Currently I have some code that looks like this inside a component called object-form that I use in several places:
saveObject(newObject) {
newObject.save().then((object) => {
this.$('.success-message')
.html('Object "' + object.get('name') +
'" successfully added.')
}
}
This works fine, but now I'd have to also have something like:
$('.success-message').append('{{link-to object.name "object.show" object}}')
However, as expected, the text is added exactly as written instead of being added as an actual {{link-to}} helper.
In angular, which I'm more familiar with, you used something called the $compile service to dynamically add directives, the equivalent of ember components.
If link-to existed in angular, for example, the pseudocode would look like something like this:
var directive = $compile('<link-to ng-href="/object/{{object.id}} ng-model=object">{{object.name}}</link-to>')($scope);
$('.success-message').append(directive);
So is there an equivalent method of parsing the handlebars inside a string you want to append?

Instead of dynamically appending the {{link-to}} it makes much more sense to just put it under an if statement, which behind the scenes is really doing the same thing I intended.

True custom attributes (e.g. Microdata) in React

The site I am developing makes use of Microdata (using schema.org). As we are shifting development over to use React to render our views I have hit a blocker where React will only render attributes in the HTML spec however Microdata specifies custom attributes such as itemscope.
As I'm relatively new to React and haven't had chance to fully understand the core just yet, my question is what would be the best way to extend the functionality of react.js to allow for defined custom attributes, e.g., Microdata?
Is there a way of extending the attributes/props parser or is it a job for a mixin which checks all passed props and modifies the DOM element directly?
(Hopefully we'll be able to put together a drop in extension for everyone to provide support for this when a solution is clear.)

You can also use "is" attribute. It will disable the attribute white-list of React and allow every attribute. But you have to write class instead of className and for instead of htmlFor if you use is.
<div is my-custom-attribute="here" class="instead-of-className"></div>
Update React 16 custom attributes are now possible
In react 16 custom attributes are now possible
React 16 custom attributes

It looks like these non-standard properties have been added to React
itemProp: MUST_USE_ATTRIBUTE, // Microdata: http://schema.org/docs/gs.html
itemScope: MUST_USE_ATTRIBUTE | HAS_BOOLEAN_VALUE, // Microdata: http://schema.org/docs/gs.html
itemType: MUST_USE_ATTRIBUTE, // Microdata: http://schema.org/docs/gs.html
Note that properties have capital letter in the middle:
<div itemProp="whatever..." itemScope itemType="http://schema.org/Offer">
will generate proper lowercase attributes as result.

You should be able to do it with componentDidMount:
...
componentDidMount: function() {
if (this.props.itemtype) {
this.getDOMNode().setAttribute('itemscope', true)
this.getDOMNode().setAttribute('itemtype', this.props.itemtype)
}
if (this.props.itemprop) {
this.getDOMNode().setAttribute('itemprop', this.props.itemprop)
}
}
...
The whole check for Microdata attributes can be wrapped into a mixin for convenient. The problem with this approach is that it won't work for built-in React component (components created by React.DOM). Update: Looking closer at React.DOM, I come up with this http://plnkr.co/edit/UjXSveVHdj8T3xnyhmKb?p=preview. Basically we wrap the built-in components in a custom component with our mixin. Since your components are built upon React 's built-in DOM components, this would work without you having to include the mixin in the components.
The real solution would be injecting a custom config instead of React's DefaultDOMPropertyConfig, however I can't find a way to do so in a drop-in manner (DOMProperty is hidden by the module system).

For those who's still looking for answers:
https://facebook.github.io/react/docs/tags-and-attributes.html
Example:
<div itemScope itemType="http://schema.org/Article"></div>

So far, the best method I've found is based off of some Amp interop code linked from a comment on react's bug tracker thread on the subject. I modified it slightly to work with a newer version of React (15.5.4) and TypeScript.
For regular ES6, you can just remove the type annotation for attributeName. Using require was needed in TS since DOMProperty isn't exposed in react's index.d.ts, but again import could be used in regular ES6.
// tslint:disable-next-line:no-var-requires
const DOMProperty = require("react-dom/lib/DOMProperty");
if (typeof DOMProperty.properties.zz === "undefined") {
DOMProperty.injection.injectDOMPropertyConfig({
Properties: { zz: DOMProperty.MUST_USE_ATTRIBUTE },
isCustomAttribute: (attributeName: string) => attributeName.startsWith("zz-")
});
}
Now you can use any attribute starting with zz-
<div zz-context="foo" />
Normally it'd be a bad idea to use internal parts of react like this, but I think it is better than any of the other methods. It works the same way as existing open-ended attributes like data- and the JSX is even type safe in TS. I believe the next major version of react is going to do away with the whitelist anyway, so hopefully changes won't be needed before we can remove this shim entirely.