Giters

crisward / riot-routehandler

An angular-ui style minimalist route handler for riot.js

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

rendering a tag 2 times

Limycuk opened this issue · comments

commented

hello, i have next case

const routes = [
  {route: '/tax_payment', tag: 'reports-tax-payment'},
}

<app>
  <routehandler routes={opts.routes}></routehandler>
  console.debug('APP')
</app>

<reports-tax-payment>
  <script>
    console.debug('TAX PAYMENT')
  </script>
</reports-tax-payment>

riot.mount('app', {routes: routes})

and next output

APP
TAX PAYMENT
TAX PAYMENT

why is it render 2 times?

commented

Not sure, we call mount on each tag as we change it. Perhaps that's running twice. Does it do this on first load or every route change?

Probably need to step through the code to check.

commented

hello,

env

    "riot": "^3.2.0",
    "riot-route": "^3.1.0",
    "riot-routehandler": "^3.0.1",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"

index.js

window.riot = riot
window.page = require('page')

require('script!../node_modules/jquery/dist/jquery.min.js')

require('script!../node_modules/tinymce/tinymce.min.js')
require('script!../node_modules/riot-routehandler/lib/routehandler.js')

require('../src/App/App.tag')

riot.mount('app')

App.tag

<app>
  <routehandler routes={routes}></routehandler>

  <script>
    console.debug('APP')
    this.routes = [
      {route: '/cat', tag: 'cat'},
      {route: '/dog', tag: 'dog'}
    ]
  </script>
</app>

<cat>
  <div>cat</div>
  <a href="/dog">go to dog</a>
  <script>
    console.debug('CAT')
  </script>
</cat>

<dog>
  <div>dog</div>
  <a href="/cat">go to cat</a>
  <script>
    console.debug('DOG')
  </script>
</dog>

case:

  1. open /cat
  2. click go to dog
  3. click go to cat
  4. click go to dog
  5. click go to cat

result

[HMR] Waiting for update signal from WDS...
bundle.js:12401 APP
bundle.js:12406 CAT
bundle.js:12406 CAT
bundle.js:633 [WDS] Hot Module Replacement enabled.
bundle.js:12410 DOG
bundle.js:12410 DOG
bundle.js:12406 CAT
bundle.js:12406 CAT
bundle.js:12410 DOG
bundle.js:12410 DOG
bundle.js:12406 CAT
bundle.js:12406 CAT
commented

I'm testing for multiple mounts here

https://github.com/crisward/riot-routehandler/blob/master/test/routehandler.coffee#L108

My tests are run with browserify and you appear to be using webpack. I'm not sure, but the hot module reload may the culprit here.

Also try moving the routehandler to be the top level component instead of app and define your routes in your js file. That's how I'm doing in my tests. Let me know which one, if either fixes this and I can see if there is a way to test for it and perhaps fix it.

Thanks for reporting this issue BTW, hope it is just a HMR thing...

commented

i can't fix it, mb do you have one more idea?

index.html

<!doctype html>
<html>
  <head>
  </head>
  <body>
    <routehandler></routehandler>
  </body>
</html>

webpack.config.js

const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')

module.exports = {
  resolve: {
    root: path.resolve(__dirname, 'src'),
    modulesDirectories: ['node_modules']
  },
  entry: './src/index',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '/assets/bundle.js',
    publicPath: ''
  },
  module: {
    preLoaders: [
      { test: /\.tag$/, exclude: /node_modules/, loader: 'riotjs-loader', query: { type: 'none' } },
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'index.html'),
      inject: 'body'
    }),
  ],
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    host: '0.0.0.0',
    port: 3000,
    hot: false,
    inline: false,
    historyApiFallback: false,
    colors: false
  }
}

index.js

const riot = require('riot')
window.riot = riot
window.page = require('page')

require('script!../node_modules/riot-routehandler/lib/routehandler.js')

require('../src/App/App.tag')

riot.mount('routehandler',{routes:[
  {route: '/', tag: 'cat'},
  {route: '/dog', tag: 'dog'}
]})

app.tag

<cat>
  <div>cat</div>
  <a href="/dog">go to dog</a>
  <script>
    console.debug('CAT')
  </script>
</cat>

<dog>
  <div>dog</div>
  <a href="/">go to cat</a>
  <script>
    console.debug('DOG')
  </script>
</dog>

and run

"dev": "webpack-dev-server",
commented

Sorry, but without a package.json I can't recreate this project. If it is related to the hot reloader, it should go away when you bundle for production. Also you should put your console.debug code in a this.on("mount",function(){...}) callback as it's mount that gets called once.

This issue is a couple of months old now, so I'll close, feel free to re-open with more info if you haven't sorted it yet. Sorry I couldn't be more help, but webpack isn't something I use day to day.