Meteor!



  • @rstoenescu For when you get a moment:

    I may have got somewhere with this problem. (Unfortunately however it’s revealed another one!)
    Meteor is presumably considered a common.js environment and it’s calling dist/quasar.common.js

    quasar.common.js is failing at line 6413 where we have this code:

    if (Platform.has.touch) {
        FastClick.attach(document.body);
    }
    

    From the FastClick docs:
    If you’re using Browserify or another CommonJS-style module system, the FastClick.attach function will be returned when you call require(‘fastclick’). As a result, the easiest way to use FastClick with these loaders is as follows:

    var attachFastClick = require('fastclick');
    attachFastClick(document.body);
    

    So presumably, and just in the quasar.common.js code, we can do something similar:

    if (Platform.has.touch) {
        //FastClick.attach(document.body);
        var attachFastClick = FastClick;
        attachFastClick(document.body);
    }
    

    So far, so good.
    However unfortunately document.body is null here, just like in our first problem.


  • Admin

    Untested, but in order to ensure document.body is available, try this:

    var Utils = require('../utils)
    
    if (Platform.has.touch) {
       Utils.dom.ready(function () {
          var attachFastClick = FastClick;
          attachFastClick(document.body);
      })
    }
    


  • @rstoenescu It’s working… I have a result on an IPhone, which is great!
    There was no need for the require(‘utils’) line. A Utils variable was available.

    There were two places where a null document.body was causing errors and where I’ve added your code.

    Line 1220:

    function install$2(_Vue) {
       Utils.dom.ready(function () {
          var node = document.createElement('div');
          document.body.appendChild(node);
          toast = new _Vue(Toast$1).$mount(node);
      })
    }
    

    and Line 6413, which is the one we were talking about before

    if (Platform.has.touch) {
       Utils.dom.ready(function () {
          var attachFastClick = FastClick;
          attachFastClick(document.body);
      })
    }
    

  • Admin

    @mwarren2 ok, great. Will make a patch for Quasar tomorrow regarding this. Thanks for the feedback!



  • @rstoenescu Great thanks!

    Now that it’s working with Meteor, if there are other issues not actually regarding just Meteor (there’s one on IPhone in this app), would you prefer I open an issue, or carry on on this page?


  • Admin

    @mwarren2 currently carry on here until I’ll have time to fully focus on meteor. Thx for your help!



  • @rstoenescu Ok, here’s the little problem I’ve encountered:

    Everything works fine on Android, but not on IOS on my IPhone 5.
    On IOS I’m having problems with touch actions. For example the q-tabs in this code don’t respond properly. The background of the tab goes grey when you touch it but then nothing happens.
    If you hold your finger down long enough for IOS to open one of its little black menus, then touching one of the other q-tabs will work.

        <!-- Navigation Tabs -->
        <q-tabs slot="navigation">
            <q-tab icon="mail" route="/" exact>Mails</q-tab>
            <q-tab icon="alarm" route="/clockalarm" exact>Alarms</q-tab>
            <q-tab icon="help" route="/help" exact>Help</q-tab>
        </q-tabs>
    

    The same for the menu icons that open the right- and left- drawers.

            <!-- opens left-side drawer using its ref -->
            <button class="hide-on-drawer-visible" @click="$refs.leftDrawer.open()">
                <i>menu</i>
            </button>
    

    However these q-drawer-links in the drawer work fine:

            <div class="list no-border platform-delimiter">
                <q-drawer-link icon="mail" to="/" exact>
                    Mails
                </q-drawer-link>
                <q-drawer-link icon="alarm" to="/clockalarm" exact>
                    Alarm
                </q-drawer-link>
                <q-drawer-link icon="help" to="/help" exact>
                    Help
                </q-drawer-link>
            </div>

  • Admin

    @mwarren2 Known issue https://github.com/quasarframework/quasar/issues/187
    Safari iOS sux. It’s the new IE in web development. Will get this fixed soon.



  • @rstoenescu Ok, looks like a nasty problem.
    Reading around it seems Safari sux big time…



  • @rstoenescu Did you manage to do the patch?

    P.S. Looking forward trying to the DataTables component, looks good!


  • Admin

    @mwarren2 no, a week or so until I get to work on this.



  • @rstoenescu For the benefit of people who may be keeping track of this post, I note that you’ve probably found a workaround for the Safari IOS problems, and that it will be in Quasar Framework 11.0 release, right?

    That leaves only the script to sort out for Meteor. However for the impatient I’ve detailed in Github what to do to make the script work.
    https://github.com/quasarframework/app-template-meteor

    For the benefit of completeness please note that the info messages that emerge on launching meteor (see github page) have improved in the sense that the md5 strings have gone due to a fix by the Vue people. If you wouldn’t mind taking a brief look at those messages to see if there’s anything you can do to remove them, as they refer to Quasar component code. It’s presumably Meteor code doing some linting. They don’t actually stop anything working. Thanks.


  • Admin

    Will do.



  • @rstoenescu Forget the strange info messages - they’re definitely down to Vue, and not Quasar.
    However just to remind you about the script, any chance of this happening?

    • I see that there are a lot of views for this page, I don’t know what your statistics are telling you, but it looks like quite a few people are consulting this page, which presumably translates into quite a lot of interest.

    Meanwhile Season’s Greetings. Hope you have a good 2017!



  • @rstoenescu Have updated to 0.12.0 and everything is now working, which makes installation completely straightforward.
    Thankyou for all your work on this, I think we can say it is basically done.

    I might add a bit more code to help Meteor people along.

    One minor bug seems to be left:
    On IOS the right-hand drawer still gets stuck.


  • Admin

    @mwarren2 I think I got that minor bug you were talking covered with v0.12.1 (to be available soon). Will triple check again before the release. Thanks for taking time to jump start Quasar with Meteor!



  • @mwarren2 Thanks for the effort!

    I’ve a question:



  • @ric0 Short answer is that I’ve got no idea!

    I haven’t even looked at Apollo yet. For two reasons:

    Firstly I’m a Meteor fan, especially for what it does on mobile. I’m very satisfied with it.
    Secondly although I am sure that I will be investigating Apollo in depth eventually, I’m get to let it settle down a lot more before I begin to look at it.
    It’s starting to get simpler as time goes on, and that process is going to accelerate in the coming months.



  • @mwarren2 Thank you for answering.

    I should try that by myself when I find the time and post back here about how it went :)

    First step is cloning your repo and give it a spin



  • @rstoenescu Suddenly got a new error and it’s a brick wall.
    Just wondering if you can think of anything that might help.

    Uncaught SyntaxError: Unexpected token import

    This is happening on this quasar code line:
    import TableFilter from ‘./TableFilter.vue’

    What’s happening is that meteor is building from the quasar-framework /src folder and not the /dist folder.
    I cannot for the life of me understand why it is suddenly doing this.

    Does this ring any bells with you at all?
    Thanks.

    I’ve tried going backwards to previous Quasar versions, but it made no difference. (currently working with 0.13.0)


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.