Require/import in framework7-core

I want to require an additional .js file in my component, but I can’t figure how. I tried:

 <template>...</template
 <script src="../scripts/utils.js" type="text/javascript"></script>
 <script>
 return {
    methods: {
        signIn: function () {
            var app = this.$app;
            var username = $('input#username').val();
            var password = $('input#password').val();
        }
   }
 }
</script>

but in this case It seems that utils.js is not loaded at all.

I also tried to move the entire script code in a new js file with no luck also.

<template>
 ....
 <li><a href="#" class="item-link list-button" @click="signIn">Sign In</a></li>
....
</template>
<script src="./scripts/tab_main.js></script>

and in tab_main.js

 return {
    methods: {
        signIn: function () {
            var app = this.$app;
            var username = $('input#username').val();
            var password = $('input#password').val();
        }
   }
 }

but than I receive a message that signIn is not defined.

Why don’t you add it to your index.html file?

Although I did exactly that, I don’t like this solution.

First when I add plain scripts in the index.html, I’m loosing modularity, because webpack can’t translate import/export clauses when you reference script in your main html file. (or at least I could’t make it to understand them). So although I implemented a module pattern in my scripts, they are still loaded in the global namespace.
Loosing dependency loading comes with another problem. I need to load all scripts in advance, but my application is rather dynamic. It’s something like an app store and you can add and remove small apps. So I have concrete implementation for any of the apps, although they share one interface. So I don’t need to load all the scripts in advance, but only for the active apps.

Probably I could solve my problem with supplying only the necessary scripts as an context in routes during app initialisation. But this seemed to me rather unnatural.

In framework7-react my problem solves naturally. I saw that in framework7-vue this problem doesn’t exist also. So, I hoped that there might be a working solution for the core.

In the end of the day, I will rewrite my app in React in the next cycle, but now I’m really busy to make a working prototype and the time is ticking away very fast.

In F7-React/Vue when you do import PageComponent from '...' and have another import in that script, it will anyway include all into bundle. But webpack supports lazy loading like http://framework7.io/react/navigation-router.html#async-lazy-components

You can do the same with core, if you will import core router components in same manner and passing them as component route property. But in this case your router component file must be a valid JS file where you are not able to use , only somewhat similar to this:

// some-page.js
import Utils from './scripts/utils';

export default {
  // use render instead of template
  render() {
    return `
      <div class="page">...</div>
    `;
  },
  ..
}

Or with componentUrl you may use async routes to preload scripts:

async(to, from, resolve) {
  // you have some custom loadScript function
  loadScript(...).then(() => {
    resolve({
      componentUrl: '....'
    })
  });
},
1 Like