Skip to content

Yfill/loader

Repository files navigation

GitHub license Code Style NPM Package Monthly Downloads Build Size Dependencies Status DevDependencies Status

A loader that loads modules asynchronously on demand.

Install

using npm:

npm install @yfill/loader --save

or using yarn:

yarn add @yfill/loader

Usage

  • Import resources and use create method to create loader.

    import Loader from '@yfill/loader';
    const loader = Loader.create();
    <script src="https://unpkg.com/@yfill/loader"></script>
    <script>
      const loader = Loader.create();
    </script>
  • Get corresponding resources.

    using Promise:

    loader('dayjs').then((dayjs) => {
      console.log(dayjs);
    });

    using async/await:

    (async function run() {
      const dayjs = await loader('dayjs');
      console.log(dayjs);
    })();

    load components in vue:

    <div id="template">
      <h3>Vue-multiselect</h3>
      <multiselect 
        v-model="value" 
        :options="options"></multiselect>
      <h3>Vue.Draggable(dragging: {{drag}})</h3>
      <draggable
        v-model="myArray"
        group="people"
        @start="drag=true"
        @end="drag=false"
      >
        <div 
          v-for="element in myArray" 
          :key="element.id"
        >
          {{element.name}}
        </div>
      </draggable>
    </div>
    <script>
      const loader = Loader.create({
        libAliasMap: {
          'vue-multiselect': [
            'vue-multiselect/dist/vue-multiselect.min.js', 
            'vue-multiselect/dist/vue-multiselect.min.css'
          ]
        }
      });
      const { vueComponentLoad: loadCom } = loader;
      (async function run() {
        // const Vue = await loader('vue');
        const Vue = await loader('vue@2.6.14');
        Vue.use(loader);
        new Vue({
          components: {
            Multiselect: loadCom('vue-multiselect'),
            Draggable: loadCom('vuedraggable'),
          },
          data() {
            return {
              drag: false,
              value: null,
              options: ['list', 'of', 'options'],
              myArray: [
                { id: '1', name: 'Tom' },
                { id: '2', name: 'Jerry' },
                { id: '3', name: 'Carry' },
              ],
            };
          },
          async created() {
            const dayjs = await this.$loader('dayjs');
            console.log(dayjs().toString());
          },
        }).$mount('#template');
      })();
    </script>