Giter Club home page Giter Club logo

Comments (12)

amorey avatar amorey commented on August 15, 2024

Can you give an example of how you're trying to use loadjs with react/node?

Although loadjs can technically be used with node, it is meant as an in-browser async loader that is best used when you embed the code in the HTML payload so you can use it to trigger your initial script loads:

<html>
  <head>
    <script>/* embedded loadjs code */</script>
    <script>
      window.addEventListener('load', function() {
        loadjs('/path/to/react.js', 'react');

        loadjs.ready('react', function() {
          console.log('React is ready');
        });
      });
    </script>
  </head>
</html>

In general I would recommend using require/import within your code and loadjs only to load your code in the browser.

from loadjs.

deep-c avatar deep-c commented on August 15, 2024

Hi, so this is my current use-case. I have a react app and im using webpack as the package manager. Basically i want to try and not include the scripts that i want downloaded in the head/bottom of the body tag of my index.html but rather load them asynchronously only when my component requires it (client side). (At the moment I want to load googles platform.js, but i would like to load other libraries such as facebook etc).

I understand that this wouldnt be of much use if i were to try and render these components server side (isomorphic app).

Wouldn't something like this be exactly what I am looking for or would you say that what im trying to accomplish shouldn't be done using a library such as this? I just found this https://github.com/dozoisch/react-async-script as a possible solution however which i may try and use if i cant create something a little more custom using a library such as this.

from loadjs.

amorey avatar amorey commented on August 15, 2024

In this scenario it sounds like you're trying to do two things:

  1. load critical app dependencies asynchronously on pageload (e.g. React)
  2. load other dependencies asynchronously when the component requires it

Although there's some overlap in these use cases, loadjs is better suited for the first use case because it's extremely lightweight and can be embedded on every pageload. For the second use case you're probably better off using a more fully featured dependency loader. In general, I would think of loadjs as a tool for optimizing app load times.

Depending on what your requirements are you could use loadjs to load your app dependencies in parallel rather than trying to load them when your component requires them:

<html>
  <head>
    <script>/* embedded loadjs code */</script>
    <script>
      window.addEventListener('load', function() {
        loadjs('/path/to/react.js', 'react');
        loadjs('/path/to/google.js', 'google');
        loadjs('/path/to/facebook.js', 'facebook');
        loadjs('/path/to/app.js', 'app');

        loadjs.ready(['react', 'google', 'facebook', 'app'], function() {
          /* Bootstrap app here */
        });
      });
    </script>
  </head>
</html>

Another option is to use loadjs to pre-fetch the non-critical dependencies on pageload and fall back to your app's dependency loader if the dependency hasn't been met when the component requires it:

<html>
  <head>
    <script>/* embedded loadjs code */</script>
    <script>
      window.addEventListener('load', function() {
        loadjs('/path/to/react.js', 'react');
        loadjs('/path/to/app.js', 'app');

        loadjs.ready(['react', 'app'], function() {
          /* Bootstrap app here */
        });

        // pre-fetch component dependencies
        loadjs(['/path/to/google.js', '/path/to/facebook.js']);
      });
    </script>
  </head>
</html>

from loadjs.

revyh avatar revyh commented on August 15, 2024

Hi! I currently use $script loader like this:

<script>
  var $script = require('scriptjs');

  $script(['/jquery.js', '/app.js'], function() {
    require('app').init();
  })
</script>

requiring the $script works because of this code browserified during the building (and placed back to <script> tag). So, I want to switch to load.js, but I can't.

Any chances, that some UMD support would be added to module?

from loadjs.

amorey avatar amorey commented on August 15, 2024

Sure, I can take a closer look at this. I'm traveling at the moment so if you want to take a stab at it and issue a pull request that would be very much appreciated!

from loadjs.

amorey avatar amorey commented on August 15, 2024

@deep-c @revyh

To test out a version of loadjs that works with node/browserify/webpack you can check out the loadjs:pkg branch and install the npm package directly from the repo:

$ git clone [email protected]:muicss/loadjs.git
$ cd loadjs
$ git checkout pkg
$ cd /path/to/project
$ npm install /path/to/loadjs/packages/npm

Then you can use it like this:

var loadjs = require('loadjs');

loadjs('/path/to/script.js', function() {
  console.log('script.js loaded successfully');  
});

Keep in mind that the loadjs() method will fail if document isn't defined (e.g. inside nodejs).

from loadjs.

revyh avatar revyh commented on August 15, 2024

@amorey

Thanks for the code, but I've actually thought about slightly simpler approach. Diff of src/loadjs.js messed up because of indent, so I'll try to explain changes by myself. IIFE wrap is thrown away, document isn't passed as parameter anymore, export is performed through return. UMD and old IIFE versions are generated with help of gulp-umd plugin.

I think it's better because it separates the support of all these module systems from lib logic. And you don't need to duplicate README.md, package.json, LICENSE.txt files in the distribution.

One more question: do you plan to publish it on npmjs.org?

I'll make PR if you like this.

from loadjs.

amorey avatar amorey commented on August 15, 2024

@revyh Excellent! Taking a quick look at your code, it looks like a much better approach. Please issue a pull request when you're ready!

from loadjs.

navono avatar navono commented on August 15, 2024

Hi,
I create a component with webpack ant set libraryTarget: "umd" in config file. Then load bundle file to my another React project with this:

const modName = 'MyComponent';
loadjs([`../../lib/${modName}/index.js`], modName, {
  success: () => {
	console.log('load js ');
  },
});

after load js output, how can I get the component object to render?
I tried with this solution with:

 window.MyComponentLib.App.bind({})

but it returns undefined.

from loadjs.

amorey avatar amorey commented on August 15, 2024

Is the console.log() statement in the success callback being reached? What is undefined? If you can provide some example code maybe I can give a more specific suggestion.

from loadjs.

navono avatar navono commented on August 15, 2024

Thank you @amorey for reply.
The problem has been solved. loadjs create a property in window and it use the export name of the library in webpack like this:

  output: {
    filename: "[name].js",
    libraryTarget: "umd",
    library: "AwesomeComponent",
  },

I didn't find that at first.

from loadjs.

amorey avatar amorey commented on August 15, 2024

Great! Thanks for the followup.

from loadjs.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.