Loader

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');
      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>