ssorallen / turbo-react Goto Github PK

Hi I'm currently using Turbolinks with webpack as described here - https://github.com/turbolinks/turbolinks#installation-using-npm

// main.js
import Turbolinks from 'turbolinks'
Turbolinks.start()

How can I fit in turbo-react in the file?

Should turbo react render with no problems also react components? Currently after page switch I can't get components to load. Is there a solution for that?

I am trying to use turbolinks in our rails application. The gems that I was initially using are jquery-turbolinks and turbolinks. But my react component does not show up after adding them into my application. So I went ahead and added turbo_react-rails into my app(in addition to jquery-turbolinks and turbolinks), but it throws 'global is not defined error'. What am I doing wrong?

@ssorallen continuation from turbolinks/turbolinks-classic#491

This was built with React 0.4.0, and the library has changed significantly since then.

My portfolio site uses quite a few SVGs inline, this breaks with the error...

Uncaught Error: Namespace attributes are not supported. ReactJSX is not XML.

I can get away with removing the namespace on the actual SVG itself, but I'm using

<a xlink:href="/">

To create a linkable logo.

Any way around this? Love the script!

If Reactize throws an exception at any point, it should defer to a full page load. Currently an exception will keep the page in the previous state and make the page appear unresponsive.

The master branch of turbolinks includes internal stylesheets which break the HTML to JSX parser, effectively disabling turbo-react. see reactjs/react-magic#35

It's awkward that Turbolinks is bundled in turbo-react but is not modified. Also the docs suggest interacting with the Turbolinks global... two globals exposed? All signs point to letting Turbolinks be an external / peer dependency, making turbo-react a Turbolinks "plugin".

The following rules are affecting <textarea> and <pre> when the page renders:

All lines having leading or trailing whitespace are trimmed, all newlines are
removed, adjacent text separated by newlines become separated by a single
space. Any whitespace tabs are replaced with spaces. Strings inside
expressions are unaffected.

Summarized from this pull request. I was originally looking for a way to opt-out a specific element from this, but after reading how react normally works with JSX components I'm not sure how to address this if you're building your UI with something else.

TurboReact monkeypatches document.documentElement.replaceChild because Turbolinks (at least prior to v3) provides no way to intervene in the replacement process.

Monkeypatching the DOM is a Bad Thing:registered: and needs to be removed before this can graduate from an experiment. This might mean a new API in Turbolinks or using the v3 partial replacement API.

The React team started an HTML -> JSX converter called htmltojsx.js that could replace the rudimentary conversion currently done by Reactize.

This would also fix many as of yet untested cases like script elements and null elements other than inputs like <br> and <hr>.

This would address #7 by properly converting input elements.

I have a form, and depending on which link I click, form fields are pre-filled with different values. When using turbo-react, the form fields (input[type=text]) don't get updated. Is this just an artifact of how React treats forms or is there a way that turbo-react can also update those values?

Is this possible, I can't seem to hook into them at the moment? For example I want to use

data-no-turbolink

And the ProgressBar

Features of Turbolinks that require calling the global Turbolinks object, like enabling the progress bar as mentioned in issue #14, are currently not possible to configure. Expose the object or somehow enable the configuration of Turbolinks.

Once your page has been "reactized" any mutations to the page will not be synced to the virtual dom. And when a new page is loaded in react will apply changes to the page as it was when first loaded not as it is currently.

This means given an initial page load of:

<div class="hello world">
    <a href="#" onclick="$(this).parent().removeClass('hello)">Click me</a>
    <a href="/secondpage">And then me</a>
</div>

Click on the first link, and then the second which loads:

<div class="hello world">
    Second page
</div>

What will end up in the browser is:

<div class="world">
    Second page
</div>

Because react is unaware that the hello class has been removed and thinks the elements class in consistent with the new page.

I'm not sure what the solution is? Is it as simple as reactizing the page again before a new page load?

Click a link on a turbo-react page and then use the back button in the browser. The previous page is not put in place as expected.

This is a blockbuster.

The demo page does not work in Chrome on iOS (although works fine in Safari on iOS). No other debug info available yet.

This is a strange one, and I'm having trouble finding the solution.

I have a Responsive menu which I call by adding an eventListener to a menu link and setting a body class.

<%= link_to("Menu", "#", class: 'resp-nav', data: { no_turbolink: true }) %>

var ready;
ready = function() {
   var menuLink = document.querySelector('.resp-nav')
   menuLink.addEventListener("click", function(e) {
      e.preventDefault();
      console.log('clicked');
      if (hasClass(html, 'resp')) {
        removeClass(html, 'resp')
        removeClass(menuLink, 'open')
      }
      else {
        addClass(html, 'resp')
        addClass(menuLink, 'open')
      }
    }, false);
}

document.addEventListener("DOMContentLoaded", function() {
    ready();
  }, false);

document.addEventListener("page:load", function() {
    ready();
  });

Yet this click event is never fired, I have other functions in ready that work fine. I've tried all manner of workarounds to get it to work but can't find a solution. I've added it as an issue here because if I turn off reactize and just use vanilla turbolinks the above works which leads me to believe it's ether a problem with reactize or maybe react. Once I've navigated to another page and page:load is fired it works as well. Any ideas?

JSXTransformer.transform expect all tags to end with a slash </> or a closing tag <></> but the element.innerHTML will transform a input tag to a single <input> tag with no ending / that will fail in the transform method. => Expected corresponding XJS closing tag for input

I don´t know if the issue is in the .innerHTML method or that JSXTransformer.transform should handle the <input> tag?

When clicking "Re-request this page", the page is scrolled to the top after the page updates. It should retain the current scroll position.

When an inline element is on a new line after a block of text or there is a block of text after an inline element and a new line, the white space between is lost.

Example:

<p>
  Howdy there, buddy. Check out my
  <a href="#">website</a>.
</p>

Output:

Howdy there, buddy. Check out my<a>website</a>.

Ideally the source HTML would not have to be modified to maintain the white space.

I remember when first tinkering with this project, I was super excited about the concept. Turbolinks 5 is basically dancing behind the curtain now just itching to be unveiled. Have you taken a look at it lately to see about re-writing turbo-react for the latest Turbolinks?

I'm trying to animate body colours between pages but my body CSS classes are not being updated.

e.g. this code won't work

<body <%= page_classes %>>
  Content
</body>

It only seems to work if I add a wrapper div inside the body as this is replaced.

<body>
  <div id="wrapper" <%= page_classes %>>
    Content
  </div>
</body>

Is this expected behaviour, I thought it looked for differences on the body and applied these?