tc39 / proposal-dynamic-import

import() proposal for JavaScript

Home Page:https://tc39.github.io/proposal-dynamic-import/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

lazy-loading function in README does not work

x5engine opened this issue · comments

Hello all,

<!DOCTYPE html>
<nav>
  <a href="books.html" data-entry-module="books">Books</a>
  <a href="movies.html" data-entry-module="movies">Movies</a>
  <a href="video-games.html" data-entry-module="video-games">Video Games</a>
</nav>

<main>Content will load here!</main>

<script>
  const main = document.querySelector("main");
  for (const link of document.querySelectorAll("nav > a")) {
    link.addEventListener("click", e => {
      e.preventDefault();

      import(`./section-modules/${link.dataset.entryModule}.js`)// this part seems not working at all!
        .then(module => {
          module.loadPageInto(main);
        })
        .catch(err => {
          main.textContent = err.message;
        });
    });
  }
</script>

It is very sad this is still an issue at 2018, I meant I thought this is something normal and expected with dynamic import!!

JQuery had this in 2008 like a decade ago you could import anything in the browser with no issues at all!!

What is this? are going steps back??

@meteorplus This repo is a proposal for a feature that is still being standardized. Issues on this repo are meant for problems with the proposal. Browser implementation issues should be be taken up in the respective browser issue tracker. MDN has more information on the implementation status.

If you believe there is an issue with the proposal, providing more information about what you are expecting will probably help the people managing this proposal know how to respond.

@aciccarello well thanks for the response.

my proposal is to have an allowed path or file which the dynamic import function checks before loading those files something like:

//config allowed imports on the server:

import.config(['path/to/something.js','path/to/a/folder']); //this might be a file path or folder path

//then on the client
const path = "/server/mysuperprivatesecret.js", path2 = "path/to/something.js";
import(path);// this will fail since it's not allowed

import(path2);//will not failt because it is allowed

What do you think?