I would like to integrate react-table which is a React Component (can be seen in action here) in a Binding.scala application. I am however fairly new to both React and Binding.scala, and as such was wondering if there were any guides out there on how to proceed? Or if anyone has already done something similar?
PS: note that the gitter channel for Binding.scala specifically asks for general questions to be asked on here
I recently created some adapters for React and Binding.scala Interoperability. See https://github.com/Atry/ReactToBindingHtml.scala
The usage is basically as simple as import com.yang_bo.ReactToBindingHtml.Implicits._
import com.yang_bo.ReactToBindingHtml.Implicits._
val reactElement: ReactElement = ???
#html val realDom: Binding[Node] = {
// real DOM fieldset element
<fieldset>
<legend>
I am an `#html` literal that contains a React component
</legend>
{ reactElement }
</fieldset>
}
Related
Note: There is a GitHub issue open on the Svelte repo for this very question.
https://github.com/sveltejs/svelte/issues/4838
While I understand that this may or may not someday become a feature of Svelte, what I am asking is how I can create a workaround today to support a third-party web component library like Shoelace or UI5, or Ionic with two-way binding?
Synopsis:
I have set up a Svelte app and successfully added a Web Component Library (Ex: Shoelace).
I write a line of code that uses two-way binding like:
<sl-input name="name" type="text" label="Name" bind:value={name}/>
I cannot two-way bind (bind:value={}) because the Svelte compiler doesn't recognize the valid bindings for the custom web components.
If there were a wrapper library that you know of, or some other thing I could do to make it work, that would be great.
I am not sure if this will work with libraries but it is worth a shot. For my custom component I just followed this answer.
Add this in your custom component:
<script>
export let onValueChange;
export let value;
$: onValueChange(value);
</script>
And add this when using the component (it will give an error until you add this)
<custom-component onValueChange="{(x) => value = x}"/>
Im using the login example from the Meteor React Tutorial
meteor add accounts-ui accounts-password
Its all ok but Im trying to find the file and change it but I dont know where is it.
This is my code:
import { Blaze } from 'meteor/blaze';
export default class AccountsUIWrapper extends Component {
componentDidMount(){
this.view = Blaze.render(Template.loginButtons,
ReactDOM.findDOMNode(this.refs.container));
}
componentWillUnmount(){
Blaze.remove(this.view);
}
render(){
return <span ref="container"/>
}
}
And i have installed meteor add useraccounts:materialize
How can I put the template on this?
You need to put your component inside /imports/ui/ directory and name the file as AccountsUIWrapper.jsx
So it will be saved as /imports/ui/AccountsUIWrapper.jsx.
Then you can import your wrapped component inside /imports/ui/App.jsx file with:
import AccountsUIWrapper from './AccountsUIWrapper.jsx';
And then use it in your React render function in the same file as:
<AccountsUIWrapper />
The tutorial lays it out pretty clearly, including all the filenames and locations. You should be able to access their GitHub repository for the same.
If you want, for reference, you can also take a look at my code at this particular step back when when I did this tutorial myself.
Update: For useraccounts:materialize
The useraccounts:materialize package that you have mentioned depends on useraccounts:core package as its base. So you cannot apply useraccounts:materialize to default meteor accounts package directly.
Follow the instructions on useraccounts:core to set it up. You may need to remove accounts-ui as well, as it would likely clash with the above packages.
Then, go through the documentation for useraccounts that shows how to render their accounts template in Blaze.
After that, using the same way as shown in the tutorial, you should be able to create a new React wrapper for useraccounts:materialize Blaze template.
Here are links to boilerplate useraccounts:materialize code for Iron Router and Flow Router. From these you can take reference for the Blaze template code, which you can then wrap in React:
Boilerplate with iron:router
Boilerplate with FlowRouter
I am looking for an example about combining the four technologies in the title :) I have a working ReactJS application using Play, Scala and WebJars, it's here on GitHub.
Now I would like to add RequireJS, but I'm not sure how to go, especially because it seems to require a different JSXTransformer? If anybody has a pointer (or even a PR) it would be very appreciated.
This is not the easiest thing to do, but I was able to pull it off. I will give you some tips here. I also uploaded my own project to github. This is a very simple snake game built using React and RequireJs. It based on Webjars and Play Framework.
Remember that RequireJs is part of Play Framework. Here's a step by step guide to create React/RequireJs/WebJars/Play integration:
In your plugins.sbt add addSbtPlugin("com.github.ddispaltro" % "sbt-reactjs" % "0.5.2"). This is a plugin which transforms JSXes into JSes and also strips flow types if you want that.
In your main scala.html file add #helper.requireJs(core = routes.WebJarAssets.at(WebJarAssets.locate("require.js")).url, module = routes.Assets.at("javascripts/main").url). This will add add a script tag with data-main and src attributes that are used to bootstrap your RequireJs app.
Create react.js file in your assets/javascripts folder:
define(['../lib/react/react-with-addons'], function(React) {
window.React = React;
return React;
});
Create main.jsx file in your assets/javascripts folder:
require.config({
// standard requirejs config here
});
require(['react', 'components/YourComponent'], function(React, YourComponent) {
'use strict';
$(document).ready(function() {
React.render(<YourComponent />, document.getElementById('container'));
});
});
Your standard React component goes to assets/javascripts/components/YourComponent.jsx and is defined like standard RequireJs module. Remember to return a React class:
define(function(require) {
var React = require('react');
var AnotherComponent = require('components/AnotherComponent');
return React.createClass({ ... });
}
I hope that helps. If you have any questions, please let me know.
Someone said to have got the text plugin working with sbt-rjs: https://groups.google.com/forum/#!topic/play-framework/F789ZzTOthc
I would attempt with the text plugin first, as it's the simplest plugin of all, right? Once this is successful, move on to the JSX plugin:
https://github.com/philix/jsx-requirejs-plugin
Have a look at: https://github.com/nemoo/democratizer
This is an example project that uses play framework, scala, slick, mysql as a restful backend.
The client is a javascript single page application (SPA) written in react. It uses react router for client site routing and ES6 javascript.
The build process combines webpack and play activator which enables simple automatic browser refresh for server and client side code.
I started experimenting with Wicket AJAX functionality and wanted to implement an AjaxLink.
This is the associated markup/java-code:
<a wicket:id="testlink"></a>
---
AjaxLink<Component> link = new AjaxLink<Component>("testlink") {
#Override
public void onClick(AjaxRequestTarget target) {
System.out.println("called");
}
};
add(link);
But the onClick-method is never called, I guess because the generated HTML looks like this:
<a wicket:id="testlink" id="testlink7" href="javascript:;"></a>
Any ideas on what I am doing wrong?
This href="javascript:;" works because Wicket 6 uses JavaScript Event registration. Look at your webpage in some browser dev tool like in firefox. Point the inspector to the link and read it's id, then go the the head section and expand one of the <script type= text/javascript></script> tags. There you should find the id of the link and see that there is an line where a click event is attached to the id of the link. The URL there is executed when you click the link.
Thanks Robert for clarifying the ajax mechanisms of Wicket 6 - I'm rather new to this topic and the insights you gave me helped solve the problem.
Actually it was caused by some jQuery inconsistency I still haven't fully untangled, apparently coworkers used different jQuery-versions within different of our Wicket modules and somehow Wicket used not the one it was shipped with but a wrong one when trying to attach the event listener to the component.
When removing the unneccessary old jQuery libraries Wicket started to work fine - now I just have to get the components depending on the other jQuery libraries working again, but thats a different story :)
In my situation, I removed the following onload on body tag and the AjaxLink onclick function worked again.
<body onLoad="MM_preloadImages('template-image/searchbto.png');">
The following types of tags in Lift do not seem to work for me:
<lift:snippet type="MyClass:render" />
<lift:MyClass.render/>
<lift:MyClass/>
Using these tags results in a Class Not Found error. If I attempt to call a class using
<div class=lift:myclass.mymethod />
it can work. Or if I call it using span tags. For instance, the Hello World example in Pollak's Simply Lift works for me, successfully displaying the Howdy method with the following code:
<span class="lift:helloWorld.howdy">
Welcome to your Lift app at <span id="time">Time goes here</span>
</span>
Currently, my problem is coming from attempting to implement Exploring Lift's (aka The Lift Book) OpenID example in Chapter 13.1. I have downloaded OpenID4Java using sbt as well as the lift-openid library. That example can be found at http://exploring.liftweb.net/master/index-13.html. I have implemented the change to the Boot class, and created the OpenID class and the SimpleOpenIDVendor class. But creating an html file containing
<lift:OpenID.form>
<openId:renderForm/>
</lift:OpenID.form>
causes the following error to be displayed in the browser:
Error processing snippet: openid.form
Reason: Class Not Found
XML causing this error:
<lift:openid.form xmlns="http://www.w3.org/1999/xhtml">
<openid:renderform>
</openid:renderform></lift:openid.form>
The class OpenID was placed in a package that starts with the package code, which is being implicitly found by Lift. It is included in the Boot.scala file with the line
LiftRules.addToPackages("code")
So, I am at a loss. Any ideas?
Note that other lift tags such as lift:bind-at and lift:surround and the like work fine.
As dave posted under my original comment, the problem was the HTML5 parser. Lift is case-sensitive, and cannot find a class with varying case. Since the HTML5 parser automatically makes tags lowercase, you can't use custom lift tags anymore. Instead, you have to use something like
<div class="Lift:MyClass.render"></div>
Note that you CANNOT have
<div class="Lift:MyClass.render" />
as HTML5 apparently does not support such tags.
My OpenID4Java problem is therefore resolved by using:
<div class="lift:OpenID.renderForm">
</div>
Why I don't need to use openid.form still is uncertain. It could be possible I'm implementing it slightly off, but I confirmed that it will take me to an openid login page if I put in the openid link, so it is indeed functional.
Sources:
http://groups.google.com/forum/#!topic/liftweb/H-xe1uRLW1c
https://groups.google.com/group/liftweb/browse_thread/thread/3948df1eee6ec271/ (thanks fmpwizard)