Fix 'require.js' load issue while loading web page + add explanation on how to use on web + make it easier to integrate this lib on a project

[QuentinCG]

Here are all the improvements:

• Delete auto-generated file (+ update .gitignore)
• Improve js script includes (faster + explain how to 'really' include require.js to be fully working on web).
• Include sql-wasm.js & sql-wasm.wasm files in assets to not depend on external websites (library self functional even in local network)

[QuentinCG]

Example of project using this fix (link may not work sometimes, just here for showing it is working without issue): https://www.funnyapps.funnylabz.com/facts/web/

[deakjahn]

Thanks, let's discuss this first. There was an issue with RequireJS and I lost track of how it stands now: dart-lang/sdk#33979

Do you think the problem has been solved in the meantime?

[deakjahn]

Also see this: flutter/flutter#56659 but this seems to be determined not to be supported, definitively.

[QuentinCG]

As I understand after some Flutter/Dart repo fast verifications:

• Dart SDK is still using require.js internally (https://github.com/dart-lang/sdk/search?p=1&q=require.js)
• Flutter also is using it internally but clearly not giving access to it globally : _requireJs (https://github.com/flutter/flutter/search?q=require.js and https://github.com/flutter/flutter/blob/0dc80621eb1061f60b29f24041c17468ff615c48/packages/flutter_tools/lib/src/test/flutter_web_platform.dart#L175)
• I don't think Dart SDK is giving access to requirejs feature globally and Flutter is definitely not giving access to it at the moment. Moreover, when I did this "fix", I didn't have access to requirejs except if I added it either on index.html or by including it dynamically.

Not sure if this helps you ?

[QuentinCG]

After some thinking, I have some doubt about puting sql-wasm internally (assets may be added on "non web" platform assets...)
I'll find a beter way to handle that part

[QuentinCG]

What the pull request is doing now

• Delete auto-generated file (+ update .gitignore)
• Improve js script includes (faster + explain how to 'really' include require.js to be fully working on web).
• Allowing this library to be integrated like sqflite_common_ffi (it was possible before that commit but the 'stub' logic was needed while it should be on the implementation side (<=> like sqflite_common_ffi does)
• Adding as much information as possible on readme to use this project
• Minor edits (wrapping, ...) <= Sorry for that if you don't like it, my visual studio code was configured like that

Why did I reversed the sql-wasm local use ?

Because there is currently no way to prevent assets to be integrated on a specific platform (flutter/flutter#8230) and that the files are more than 1MB (which is a lot for 'useless' file on other platforms)

[deakjahn]

Help me before I decide on this. I have an ongoing problem that I think is related to what you suggest here. Every time I use any of my plugins that wants to bring any other standard JS AMD module, I get the "requirejs not defined" error. It seems that you have to deal with the same problem. However, I have another solution that might or might not be relevant. In my experience, the real problems is that CanvasKit itself is packaged as an anonymous module. I suggested the Flutter team to make it named many moons ago, I lost track, the issue is still there, and even not supposed to be fixed. I found the link: flutter/flutter#58428

A solution I found was to use my own CanvasKit JS and WASM instead of the standard one, host it on my website and modify initailization.dart in the web SDK to refer to it (and yes, this means I have to manually change it every time Flutter upgrades). Just to add a name, nothing else.

So, in some ways, this definitely seems related, in other ways, I have to get up to speed with how things are now because it was a couple of months ago that I last looked into anything similar.

[deakjahn]

And now that I checked with the current Flutter, this whole manual change might not be needed at all any more. What might well mean that things have overtaken me in the meantime. :-)

I'm particulary interested in "but this will imply users do a 'refresh' of the web page every time they want to access it because of dynamic include issues" because I use the same scheme in at least three other internal plugins of mine. I never saw this until yesterday when I started to include the app of one of those in an IFRAME. There I need to reload but I don't need it in the main app itself. I'd very much like to avoid the need to force to change the index.html, so I'd need your ideas here.

[deakjahn]

I merged it and will experiment with the differences in the approach. Yes, no probem with the formatting, my Android Studio using dartfmt will revert some of those back, anyway. :-))

[QuentinCG]

Help me before I decide on this. I have an ongoing problem that I think is related to what you suggest here. Every time I use any of my plugins that wants to bring any other standard JS AMD module, I get the "requirejs not defined" error. It seems that you have to deal with the same problem. However, I have another solution that might or might not be relevant. In my experience, the real problems is that CanvasKit itself is packaged as an anonymous module. I suggested the Flutter team to make it named many moons ago, I lost track, the issue is still there, and even not supposed to be fixed. I found the link: flutter/flutter#58428

Including the requirejs directly from index.html before loading flutter scripts seems to fix the issue :
https://github.com/deakjahn/sqflite_web/blob/master/example/web/index.html#L21

  <script src="assets/packages/sqflite_web/assets/require.js" type="application/javascript"></script>

It is only what I see while doing my test. There is no proof there. But from what I see on other issues you created on Flutter repo + answers + repo content, my solution is the only one if we want it to be working in long term... (no support from Flutter on this)

I'm particulary interested in "but this will imply users do a 'refresh' of the web page every time they want to access it because of dynamic include issues" because I use the same scheme in at least three other internal plugins of mine. I never saw this until yesterday when I started to include the app of one of those in an IFRAME. There I need to reload but I don't need it in the main app itself. I'd very much like to avoid the need to force to change the index.html, so I'd need your ideas here.

When not including require.js directly in index.html and doing it in the dart script instead, I got the "requirejs not defined" error in the first page load. When we refresh the web page, it then works fine (browser cache maybe).
This means that require.js must be loaded before Flutter is loaded (and before your lib tries to access use requirejs).

In the other hand, if I include it directly in the index.html, then I never have such an issue.

I think this behavior is due to the fact the require.js is "heavy" (1MB) and will then load not fast enough before the lib needs require.js when you do it from dart.
While when you do it from index.html, the browser will first load require.js and then Flutter.

I merged it and will experiment with the differences in the approach. Yes, no probem with the formatting, my Android Studio using dartfmt will revert some of those back, anyway. :-))

:)

[QuentinCG]

Note that testing in local will make it hard to reproduce the issue I tried to fix here.
I've seen the "requirejs not defined" issue while trying to put my app in a "production (real server)" (=> access to require.js depending on the network).

[deakjahn]

Yes, this is what I saw, too. First, I tried to play with various defer settings but none of those was really satisfactory. Strange that I only experience it with the app being inside an IFRAME, not directly, but I moved this approach to my other plugins as well. You're probably right, there won't be any better solution than that.

As to sqflite_web, with being on beta, null safety started to kick in and I don't know how Alex plans to proceed with it and whether we should just wait for the underlying code to change now, before going on any further.

[QuentinCG]

Sqflite is already ready for null safety:

• https://pub.dev/packages/sqflite/versions/2.0.0-nullsafety.3
• https://pub.dev/packages/sqflite_common_ffi/versions/2.0.0-nullsafety.6

It seems to be quite boring to handle both as it means maintain 2 branches.
It's your choice if you want to update it now or not. I may help if needed even though I'm not used to this feature...
Also, not sure what's the best plan for this repo as to be outside main sqflite repo or not (since there will most likely not have better implementation than this one for web)

[deakjahn]

Oh, well, I didn't even check, just saw that my project didn't pull them for some reason...

No, I would be perfectly happy with a single version... :-)