We Keep Coding

In Vue 3, what is the correct type for a Vue component property?

Some of our components use other components as property.
A trivial example: <my-interface-component :popup="myPopup"/>
Where myPopup will be a component with a open method that allows to open this external popup component with a message.
In Vue 2 we used to set this property like this:
/**
* #prop {Vue} popup A root popup component to use
*/
popup: {
type: Vue
},
And we could give either a component definition or an existing component reference.
But in Vue 3 there is no more such Vue object. Should I just use Object or is there a more explicit way?
We use the CDN version of Vue 3 with Vanilla JS.
Many thanks

The right type of a component is ComponentOptions|ComponentOptions['setup'] which are simplified for readability as mentioned here:
import {ComponentOptions, PropType } from 'vue'
props:{
popup: {
type: Object as PropType<ComponentOptions|ComponentOptions['setup']>
},
}
However it's recommended to pass components/elements as slots not as props :
Child component :
<template>
<div>
<slot name="popup" />
</div>
</template>
In parent :
<template>
<div>
<template #popup>
<MyPopup />
</template>
</div>
</template>

When mixing Blaze with React, is there a way to pass in code from the html file as a react child?

I have an app that uses both Blaze and React, and we are slowly refactoring out the Blaze, but for the foreseeable future we will still have both.
I currently have a simple blaze template which has been changed into a React component. The template looks something like this:
<template name="myTemplate">
<div>
<h1>{{someTitle}}</h1>
<div>
{{> Template.contentBlock}}
</div>
</div>
</template>
The equivalent component currently looks like this:
export default class MyComponent extends React.Component {
static propTypes = {
someTitle: PropTypes.string.isRequired
}
render () {
return (
<div>
<h1>{this.props.someTitle}</h1>
<div>
{this.props.children}
</div>
</div>
)
}
}
The usage of the Template within another html file looks something like this:
<div>
Some Stuff
<div>
{{#myTemplate someTitle="Some Title"}}
<div>
More stuff within to go within my template
</div>
{{/myTemplate}}
</div>
</div>
What I am currently trying to do is get rid of myTemplate and replace it with MyComponent. Usually this could easily be done by simply putting in {{> React component=MyComponent someTitle="Some Title"}}, but for this case since I have content within the template that probably has to be passed in as the component's children, I am not sure how it should be done.
So the question becomes, how can I pass in that content that is to be rendered within the template to the React component? Is there any way around this?

How to render a component through the id is stored in variable?

I have two components. 1. App component, 2. child component.
For better understanding, the code and output is here in stackblitz: https://stackblitz.com/edit/angular-j9cwzl
app.component.ts:
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
template: `
<div id="child"></div>
<div id="{{childComponent}}"></div>
`
})
export class AppComponent {
childComponent='child';
}
child.component.ts
import { Component } from '#angular/core';
#Component({
selector: '[id=child]',
template: '<div>I am child</div>'
})
export class ChildComponent { }
When I write the id of the child component directly in the template of the App component it renders nicely. but when I write the id of the child component through a variable, it just creates a div element with an id="child".
My question is Why does this happen? How can I render the child with id through a variable in the script file dynamically?

I have a suggestion why your interpolation {{ childComponent }} is not working. In my view, Angular works something in the following order:
At first, it sees all your HTML and then tries to find attributes or selectors which can be evaluated as component or directive
Then the second step is when we found a component or directive, then {{ }} interpolation is applied
So maybe it is reason why your interpolation is not evaluated in your selector. Because evaluation of selectors are completed and then evaluation of directives started.
If you want to make a decision what component should be rendered, then you can use *ngIf statement:
<ng-container *ngIf="childComponentl else anotherComponent">
<div id="child"></div>
</ng-container>
<ng-template #anotherComponent>
test
</ng-template>
TypeScript:
childComponent='"child1"';
UPDATE:
If you want to avoid hard code, then you can load component dynamically:
Dynamically add components to the DOM with Angular
Angular 2.1.0 create child component on the fly, dynamically
Insert a dynamic component as child of a container in the DOM

How to apply CSS style to custom React component

I created a demo react app with 'npx create-react-app my-app'. When I try to apply style to React component nothing happens, but when I apply it to a normal HTML tag like <div or <p> it works. I do not why.
I also tried adding :local in the css file like: :local(.taken-frame)
// index.js =================
import './style.css';
ReactDOM.render(
<TakenFrame className="taken-frame"/>,
document.getElementById('root')
);
// style.css ===============
.taken-frame{
color: blue;
}

Css styles are applied to JSX elements in react but not to the component
Wrong way of applying css styles but className is still a valid prop to the component. You can access this using this.props.className and pass to the div as className like I mentioned in right way example
<TakenFrame className="taken-frame" />
Right way of applying css styles
class TakenFrame extends React.Component {
render(){
return(
<div className="taken-frame">
</div>
//OR
<div className={this.props.className}>
</div>
)
}
}

I use the following style:
import styles from 'yourstyles.css'
...
class TakenFrame extends React.Component {
render(){
return(
<div className={styles.classNameDeclaredInCssFile}>
</div>
)
}
}
yourstyles.css file should look something like:
.classNameDeclaredInCssFile{
//... your styles here
}
In your case you are simply passing a property called "className" to your component but not using it. In your component if you did something like:
class TakenFrame extends React.Component {
render(){
return(
<div className={this.props.className}>
</div>
)
}
}
It would work I expect but I prefer to keep my styles assigned to each component, I find it adds confusion for me as a developer when I am passing styles around the component hierarchy a lot. I hope this helps.

You could use styled components as-well. Please refer https://glamorous.rocks/basics

Using Custom HTML Properties in Meteor with React

Using React with Meteor, how can I render a HTML tag with custom properties?
For example,
<div class="page-header-image" data-parallax="true" filter-color="orange" style="background-image: url('./assets/img/header.jpg');">
has custom property filter-color="orange" which we want to render using the render function of a Reat.Component:
import React from 'react';
export default class Home extends React.Component {
render() {
return (
<div className="page-header-image" filter-color="orange" style={ {backgroundImage: "url('./assets/img/header.jpg')"} }></div>
);
}
}
Also, is there a neat way to include these properties especially when you have many tags with custom HTML properties?