I am working on an react terminal app using xtermjs 3.14 before, and it's working ok. But when I want to update it to xtermjs 4.1.0 and add new addons, it's broken and reply different types errors. I follow the steps from the release notes.
import {Terminal} from 'xterm';
import {FitAddon} from 'xterm-addon-fit';
var term = new Terminal({cursorBlink: true});
var fitAddon = new FitAddon();
term.loadAddon(fitAddon)
class TerminalPage extends Component {
componentDidMount(){
term.open(document.getElementById('terminal'));
}
}
terminalapp startup failed TypeError: R.on is not a function
or
x is not defined
Related
I need to add a react custom control in a grid column. Can I do it without make a custom grid from scratch?
What I'm thinking about is something like this ReactPeoplePicker, but added to an existing grid.
Three weeks later I can answer myself: yes, I can. This is what I did:
Create a PCF with Powerapps CLI (I choose dataset template) and installs dependencies:
npm install
npm install react #types/react react-dom #types/react-dom #fluentui/react
Create a peoplepicker.tsx and copy-paste react component code from https://developer.microsoft.com/es-ES/fluentui#/controls/web/peoplepicker.
In index.ts file I import react, react-dom and component:
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { picker } from './components/peoplepicker'
Define and initialize context and container variables:
export class PeoplePicker implements ComponentFramework.StandardControl<IInputs, IOutputs> {
private context:ComponentFramework.Context<IInputs>;
private container:HTMLDivElement;
/**
* Empty constructor.
*/
constructor() { }
public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container: HTMLDivElement)
{
// Add control initialization code
this.context = context;
this.container = container;
Render the react component and append to container:
public updateView(context: ComponentFramework.Context<IInputs>): void
{
ReactDOM.render(
React.createElement(PeoplePicker),
this.container);
Build solution and import to Power Apps portal:
npm run build
pac pcf push --publisher-prefix myPrefix
Finally, in Power Apps Portal, navigate to grid (or subgrid) properties and add a custom control. Keep in mind may be classic mode will be required.
I would like to create a custom page using react but I cannot find the documentation to do this. On the Sonarqube documentation, there only the way to create a custom page using javascript only and I don’t understand how the example plugin works with react.
Can you tell me if there is a documentation that I can use.
Short answer: There isn't. There is barely anyone (no one in fact, as far as I've seen) using custom pages currently.
However, it IS possible. You need to create a react project with Webpack (or a similar JS packager).
I also recommend using Create-React-App. This fixes a lot of the setup for you. After that, in your index.js you use the example code from the SonarQube wiki.
Here is an example:
/*
PRODUCTION ENTRYPOINT
*/
import React from 'react';
import ReactDOM from 'react-dom';
import Project from './components/Project';
import './main.css';
window.registerExtension('myplugin/coverage', function (options) {
appendCustomCSS();
let isDisplayed = true;
window.SonarRequest.getJSON('/api/measures/component', {
component: options.component.key,
metricKeys: 'coverage'
}).then(function (response) {
if (isDisplayed) {
let obj = JSON.parse(response.component.measures[0].value);
let div = document.createElement('div');
render(obj, div);
options.el.appendChild(div);
}
});
return function () {
isDisplayed = false;
};
});
function appendCustomCSS() {
let fileref = document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", "/static/myplugin/coverage.css");
document.head.append(fileref);
}
function render(objectArray, container) {
ReactDOM.render(<div className="Coverage"><Project objects={objectArray}/></div>, container);
}
I had a project which used youtube-api-search in it. it works there fine.
I have created a sharepoint framework template with yeoman "yo #microsoft/sharepoint" and installed youtube api package as I did in previous project. but when I run this project I encounter an error like below;
Cannot find module 'youtube-api-search'
as I said its working in other react project do i need something specially to make it work here ?
I installed api via "npm i youtube-api-search --save-dev" command
here main component content;
import * as React from 'react';
import { css } from 'office-ui-fabric-react';
import styles from './Announcements.module.scss';
import { IAnnouncementsProps } from './IAnnouncementsProps';
//I have added only these 2 lines to default code
import YTSearch from 'youtube-api-search';
const YOUTUBE_API_KEY = "AIzaSyCI9gcceui5zcQDAEwbyv...";
export default class Announcements extends React.Component<IAnnouncementsProps, void> {
public render(): React.ReactElement<IAnnouncementsProps> {
return (
...
);
}
}
we can import modules in three methods
FIRST::Using Config-->config.json and change
"externals": {
"jquery": "https://code.jquery.com/jquery-3.1.0.min.js",
"OwlCarousel":{
"path":"./node_modules/react-owl-carousel/lib/OwlCarousel.min.js",
"globalName":"OwlCarousel"
},
"Slider":{"path":"./node_modules/react-slick/lib/slider.js",
"globalName":"Sliders"}
},
SECOND:: npm install #types/youtube-api-search --save
THIRD ::
`npm install typings`
`typings install dt~youtube-api-search -global --save`
sometimes dt~ is neccessary sometimes it is not necessaary
I am quite new to reacjs and stuggle to create a reactjs component for paypal's in-context express checkout windows - it is simple to do in plain javascript but not sure how I can create a component and use it in similar way as react-stripe-checkout? thanks
Please use react-paypal-express-checkout (I'm the author):
Install:
npm install --save react-paypal-express-checkout
Simplest Example (but it will show the Paypal express check out button):
import React from 'react';
import PaypalExpressBtn from 'react-paypal-express-checkout';
export default class MyApp extends React.Component {
render() {
const client = {
sandbox: 'YOUR-SANDBOX-APP-ID',
production: 'YOUR-PRODUCTION-APP-ID',
}
return (
<PaypalExpressBtn client={client} currency={'USD'} total={1.00} />
);
}
}
==========
There is also a full example, in which you can have all types of callback function (e.g. completed payment-ID, return-URL etc.)
For full detailed document (as well as official guides from Paypal,) please go here:
https://github.com/thinhvo0108/react-paypal-express-checkout
Using React 13.2 and looking to test lifecyles with a setup like the one shown on this gist. If I don't stop subsequent renders (via the shouldComponentUpdate method) then anything causes a render (after the initial) explodes with a DOMException Wrong Document:
DOMException: Wrong document
at core.Node.insertBefore (D:\development\projects\fsm\node_modules\jsdom\lib\jsdom\level1\core.js:583:13)
at core.Node.insertBefore (D:\development\projects\fsm\node_modules\jsdom\lib\jsdom\level2\events.js:326:32)
at insertChildAt (D:\development\projects\fsm\node_modules\react\lib\DOMChildrenOperations.js:34:14)
at Object.DOMChildrenOperations.processUpdates (D:\development\projects\fsm\node_modules\react\lib\DOMChildrenOpertions.js:106:11)
JSDOM bails because the parent node is not a document and it don't share the same owner document as the child being inserted. Yeah. How could the owning document be anything other than that the global unless React is doing something funky under the hood.
Just surprised that I don't see more people having a similar problem? There is nothing odd-ball with my Mocha setup nor the JSX components being rendered. Plus the initial render goes fine.
Update for node 4
With node 4 we can use the latest jsdom and solve this issue in a better way, e.g. using testdom.
This is how I test a React 0.13 component with mocha on node 4:
import testDom from "testdom";
import { expect } from "chai";
testDom("<html><body></body></html>");
const React = require("react/addons");
const MyTestableComponent = require("../src/MyTestableComponent");
const ExecutionEnvironment = require("react/lib/ExecutionEnvironment");
ExecutionEnvironment.canUseDOM = true;
describe("MyTestableComponent", () => {
it("works!", () => {
const component = <MyTestableComponent />;
expect(true).to.equal(true);
})
})
Note that we should require rather than import React and the component.
Previous answer
I could fix this issue by following the OP's own comment to the question.
Since React stores the document in an internal variable when it is required, we need to remove React from the require.cache object, before requiring it again:
var jsdom = require("jsdom").jsdom;
var React, TestUtils;
describe("Example", function() {
beforeEach(function() {
// remove react from the require cache
for (var key in require.cache) {
if (key.match(/\/node_modules\/react\//)) {
delete require.cache[key];
}
}
// init the DOM
global.document = jsdom("<html><head><script></script></head><body></body></html>");
global.window = document.parentWindow;
// require react again
React = require("react/addons");
TestUtils = React.addons.TestUtils;
});
// my tests...
});