is it possible to lazily use JS libs with Dart?

dart lazy initialization
dart:js example
javascript to dart converter online
dart:js interop
dart package:js
run javascript from dart
call javascript function from dart
use javascript library in flutter

I am using chartjs (with the dart interface https://pub.dartlang.org/packages/chartjs) and trying to make it deferred by injecting a <script src="chartjs.js"></script> into the head section and awaiting it's load event to then use the lib. I am getting this exception: Cannot read property 'Chart' of undefined.

It does not happen when the script is within the head of the html before dart.

So, is it possible to load a JS lib after Dart loaded?


this is a problem in DDC. It addeds require.js to the HTML and conflicts with other libs. https://github.com/dart-lang/sdk/issues/33979

The solution I've found is to manually remove the header section that uses requirejs from the third-party lib you want to use.

For example, take chartjs: https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.js

You remove this two lines:

typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(function() { try { return require('moment'); } catch(e) { } }()) :
typeof define === 'function' && define.amd ? define(['require'], function(require) { return factory(function() { try { return require('moment'); } catch(e) { } }()); }) :

Then the file can be lazily added to the DOM without conflicts.

This is my code to lazily fetch scripts:

class ClientUtils {
    static final _scriptFetched = <String, Future<bool>>{};

    static ScriptElement _scr(String url) => new ScriptElement()
      ..async = true
      ..type = 'text/javascript'
      ..src = url;

    static Future<bool> fetchScript(String url,
            {String contextCheck}) async {
        bool shouldCheck = contextCheck?.isNotEmpty == true;

        hasContext() => js.context.hasProperty(contextCheck) &&
                    js.context[contextCheck] != null;

        if (shouldCheck && hasContext())
            return true;

        if (!_scriptFetched.containsKey(url)) {
            Completer<bool> c = new Completer<bool>();

            if (!shouldCheck) {
                ScriptElement s = _scr(url)
                    ..onLoad.forEach((Event e) {
                        c.complete(true);
                    });

                document.body.children.add(s);
            } else {
                Timer.periodic(Duration(milliseconds: 300), (t) {
                    if (hasContext()) {
                        t.cancel();
                    }
                    c.complete(true);
                });

                document.body.children.add(_scr(url));
            }

            _scriptFetched[url] = c.future;
        }
        return _scriptFetched[url];
    }
}

Lazy Load Libraries in Dart, Dart now formally supports lazy loading (deferred) libraries. which converts Dart code into JavaScript code, now supports lazy-loaded libraries. be removed and you will be able to emit multiple files for a single application. dart:html HTML elements and other resources for web-based applications. dart:indexed_db Client-side key-value store with support for indexes. dart:web_audio High-fidelity audio programming in the browser. dart:web_gl 3D programming in the browser. dart:js Don’t use. Instead, use the js package, as described in JavaScript interoperability


found a better way!

lets remove the define variable after dart loads, then any third-party lib works when added async :D

add this to your main():

import 'dart:js';

void main() {
  context.callMethod('fixRequireJs');
}

and in your index.html:

    <script type="text/javascript">
      window.fixRequireJs = function()
      {
        console.log('define is ', typeof define);
        if (typeof define == 'function') {
          console.log('removing define...');
          delete define;
          window.define = null;
        }
      }
    </script>

How to use JavaScript libraries in your Dart applications, Ever experienced the fear of leaving your favourite JS libraries behind should you include Dart with your dev stack? Well fear no more, because� Use Dart's dart:html library to do this. The snippet above is just for illustration purposes therefore the js package comes into play when using external libraries. Real-world example with jQuery In order to use jQuery, let's import it in web/index.html before the script tag requesting main.dart.js:


You can try the deferred as syntax:

import 'package:chartjs/chartjs.dart' deferred as chartjs;

void main() {
    chartjs.loadLibrary().then(() { ... });
}

dart, To lazily load a library, you must first import it using deferred as. import 'package:deferred/hello. dart' deferred as hello; When you need the library, invoke loadLibrary() using the library's identifier. It's a major departure from JavaScript itself (even though it can compile to JS) that it's not possible to directly interact with JavaScript libraries in Dart. Instead, you have to use a special interop library which exposes the wrapped versions of the JavaScript objects that you are accessing.


require.js added to global namespace, when serving via dartdevc , require.js added to global namespace, when serving via dartdevc # .com/ questions/55113108/is-it-possible-to-lazily-use-js-libs-with-dart. Important: This library supersedes dart:js, so don't import dart:js. Instead, import package:js/js.dart. A second library in this package, js_util, provides low-level utilities that you can use when it isn't possible to wrap JavaScript with a static, annotated API. Example. See the Chart.js Dart API for an end-to-end example. Usage


dartdevc: FAQ, The dartdevc tool is a Dart-to-JavaScript compiler that's targeted at web app You might be able to use other modern browsers (Edge, Firefox, and Safari). Lazily loading libraries is a production use case, and dartdevc isn't intended for� Use cases; Stack Overflow Public questions and answers; Teams Private questions and answers for your team; Enterprise Private self-hosted questions and answers for


Is this a limitation of Dart in general, or just the Dart2JS framework , on: Why dart2js produces faster JavaScript code from D.. There are also possible use cases with lazy-loading libraries for load times, or only� The way JS works, you can't write, and certainly not debugm, a large or complex app. Dart is an attempt to do that the way ST does, with a strong type system and a semantic runtime equivalent to an interpreted language, with near-assembler speed, but with JS syntax, since Google has tons of traine node.js programmers on staff.