How to use javascript polyfills with dart2js

Issue

I want to use indexedDB polyfill with Dart code compiled to Javascript. When i just added required script, dart2js code does not recognize window.indexedDB property as IDBFactory instance and produce UnknownJavaScriptObject interceptor.

I tried to force constructor.name on elements of polyfill, started with indexedDB:

    var shimIndexedDB = {
        /**
         * Force correct constructor name.
         */
        constructor: function IDBFactory(){},

        /**
         * The IndexedDB Method to create a new database and return the DB
         * @param {Object} name
         * @param {Object} version
         */
        open: function(name, version){

It was step forward, interceptor was correct. Unfortunately, when i added analogous construction to IDBOpenDBRequest, its object got IDBFactory interceptor as well.

How to correctly connect object and interceptor?

Solution

Can you use the lawndart library instead?

It provides a common API above local storage, indexed db, and websql.

From the docs:

You can use this library to help deal with the wide array of
client-side storage options. You should be able to write your code
against the Lawndart interface and have it work across browsers that
support at least one of the following: local storage, indexed db, and
websql.

To get the indexeddb javascript polyfill to work you would need to call its API via dart:js interop. This is likely to be a lot more complicated than using a library like lawndart. Here is an article about using dart:js interop.

Answered By – Greg Lowe

Answer Checked By – Dawn Plyler (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *