I'm using DevExtreme dxDataGrid and I want to export data to an xlsx-file. They have implemented it using ExcelJs:
https://js.devexpress.com/Documentation/ApiReference/Common/Utils/excelExporter/#exportDataGridoptions
As explained I just need to reference the following libs:
<head>
<!-- ... -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.0/polyfill.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.1.1/exceljs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.2/FileSaver.min.js"></script>
<!-- reference the DevExtreme sources here -->
</head>
I'm using ASP.NET Core 6 with VS 2022. For this I'm using the Bundler & Minifier to bundle libs like jQuery, DevExtreme and ExcelJs.
I have downloaded ExcelJs (like I have done for jQuery etc.) with libman.json:
{
"version": "1.0",
"defaultProvider": "cdnjs",
"libraries": [
{
"library": "jquery#3.6.0",
"destination": "wwwroot/js/lib/jquery/"
},
{
"provider": "cdnjs",
"library": "exceljs#4.3.0",
"destination": "wwwroot/js/lib/exceljs/",
"files": [
"exceljs.min.js",
"exceljs.js"
]
},
{
"provider": "cdnjs",
"library": "FileSaver.js#2.0.5",
"destination": "wwwroot/js/lib/FileSaver.js/"
},
{
"provider": "cdnjs",
"library": "babel-polyfill#6.26.0",
"destination": "wwwroot/js/lib/babel-polyfill/"
}
]
}
Then I have added ExcelJs to my bundleconfig.json:
[
{
"outputFileName": "wwwroot/bundle/LibraryBundle.js",
"inputFiles": [
"wwwroot/js/lib/jquery/jquery.js",
"wwwroot/js/lib/babel-polyfill/polyfill.js",
"wwwroot/js/lib/exceljs/exceljs.js",
"wwwroot/js/lib/FileSaver.js/FileSaver.js"
]
}
]
Then I'm getting following error in Visual Studio:
Strict-mode does not allow assignment to undefined variables: regeneratorRuntime
strict-mode is defined in ExcelJS and also many other lib's I don't understand why I'm getting this error and how can I fix it. I was not able to find any similar issue at Github-ExcelJs and it doesn't look like that they are not really supporting their open issues. Because of that I'm tried to ask here.
I am still on ExcelJS 4.2.1, but I was running into a similar issue.
Based on this comment on an ExcelJS issue, in the exceljs.js file, this is the offending block of code:
try {
regeneratorRuntime = runtime;
} catch (accidentalStrictMode) {
// This module should not be running in strict mode, so the above
// assignment should always work unless something is misconfigured. Just
// in case runtime.js accidentally runs in strict mode, we can escape
// strict mode using a global Function call. This could conceivably fail
// if a Content Security Policy forbids using Function, but in that case
// the proper solution is to fix the accidental strict mode problem. If
// you've misconfigured your bundler to force strict mode and applied a
// CSP to forbid Function, and you're not willing to fix either of those
// problems, please detail your unique predicament in a GitHub issue.
Function("r", "regeneratorRuntime = r")(runtime);
}
NEW workaround from Phoniex is to create a file with simply
var regeneratorRuntime;
in it, and include it before the exceljs.js file.
OLD workaround is to replace the assignment in the try block with:
window.regeneratorRuntime = runtime;
Related
I'm using VS Code and writing Ruby code on MacOS 12.6. I have installed several extensions for linting. I can see the errors, but I cannot get any of them to provide automatic correction, even for trivial mistakes like single vs double quotes. It always says "no quick fixes available".
If I use the command palette to run "Format document" it will correct these kinds of mistakes. So somehow VS Code knows how to fix these problems. It just won't do it in a convenient way.
You can see in the screenshot which extensions I have installed / active:
Ruby by Peng Lv
VSCode Ruby by Stafford Bunk
Ruby Solargraph by Castwide
ruby-rubocop by misogi
I don't really care which extensions are used. I would be happy with any working configuration that provides this basic functionality.
Here is my entire settings.json
{
"workbench.tree.indent": 16,
"editor.formatOnSaveMode": "modifications",
"editor.formatOnSaveTimeout": 5000,
// "ruby.rubocop.onSave": true,
"ruby.useBundler": true, //run non-lint commands with bundle exec
"ruby.useLanguageServer": true, // use the internal language server (see below)
"ruby.lint": {
"rubocop": {
"useBundler": true // enable rubocop via bundler
},
"reek": {
"useBundler": true // enable reek via bundler
}
},
"ruby.format": "rubocop", // use rubocop for formatting
"eslint.format.enable": true,
"eslint.options": {
"extensions": [ ".html", ".js", ".vue", ".jsx" ]
},
"eslint.validate": [
"html",
"javascript",
"vue"
],
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// "[ruby]": {
// "editor.defaultFormatter": "misogi.ruby-rubocop",
// "editor.formatOnSave": true
// },
"[json]": {},
"ruby.codeCompletion": "rcodetools",
"ruby.intellisense": "rubyLocate",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.tabSize": 2,
"[ruby]": {
"editor.defaultFormatter": "misogi.ruby-rubocop"
},
"editor.formatOnSave": true,
"ruby.rubocop.useBundler": true,
}
Note
This question sounds similar to: vscode( vscode-ruby + rubocop ) how to auto correct on save?
But that question is old and the answers reference config settings that aren’t recognized anymore.
There is a revived Rubocop for Visual Studio Code extension by Loran Kloeze available on the Visual Studio Marketplace.
This extension is a fork of the original Rubocop extension and adds a few features, such as Rubocop server support for improved performance and specifically, a feature to Implement quick fixes for Rubocop.
Even with the original extension by m1sogi, you should have been able to use the global auto correct function. The new quick fix feature is probably more useful though...
I am using 3 packages in my Laravel 5.8 application:
Backpack CRUD (which uses Backpack Base) https://github.com/Laravel-Backpack/CRUD
Styde\HTML https://github.com/StydeNet/html/
Prologue\Alerts https://github.com/prologuephp/alerts
These are clashing because Backpack Base relies on the Global Alias for "Alert" being set to use PrologueAlert. See an example of how it uses \Alert here:
private function checkLicenseCodeExists()
{
if ($this->app->environment() != 'local' && !config('backpack.base.license_code')) {
\Alert::add('warning', "<strong>You're using unlicensed software.</strong> Please ask your web developer to <a target='_blank' href='http://backpackforlaravel.com'>purchase a license code</a> to hide this message.");
}
}
Source: https://github.com/Laravel-Backpack/Base/blob/1.1.4/src/BaseServiceProvider.php#L264
Because I haven't bought that license yet I started seeing an error caused because that above snippet was trying to pass a string to Alert::add() but it was calling the add() method on Styde\Html\Alert\Container::add() which expects the parameter to be an instance of Styde\Html\Alert\Message instead of calling it on Prologue's version of Alert which accepts a string. It's calling the wrong "Alert"!
Even though my application is specifically set to use PrologueAlert for Alert
// config/app.php
'aliases' => [
...
'Alert' => Prologue\Alerts\Facades\Alert::class
]
I have discovered the reason is that in version 1.7 Styde moved the Aliases for his package from the protected $globalAliases variable on HTMLServiceProvider.php to the composer.json auto-discover section
"extra": {
"laravel": {
"providers": [
],
"aliases": {
"Field": "Styde\\Html\\Facades\\Field",
"Alert": "Styde\\Html\\Facades\\Alert",
"Menu": "Styde\\Html\\Facades\\Menu",
"Form": "Collective\\Html\\FormFacade",
"Html": "Collective\\Html\\HtmlFacade"
},
"dont-discover": [
"laravelcollective/html"
]
}
}
Source: https://github.com/StydeNet/html/commit/f51138fb42bef458f3f0e101b98344162b7327ba#diff-b5d0ee8c97c7abd7e3fa29b9a27d1780
Now, it seems my application is prioritising Styde's alias of "Alert" over my own application-set value!
Other than rolling back to use version 1.6 of Styde, how can I force Laravel to prioritise my own defined aliases over ones discovered via the composer.json?
I found the solution! It was actually inspired by a snippet in my original post.
You can add an extra section to your application's composer.json that get read by the Laravel application and used to decide which packages to ignore during auto-discover like this:
// composer.json
{
...
"extra": {
"laravel": {
"dont-discover": [
"styde/html"
]
}
}
}
This then allows you to pick and choose aliases from the problematic package and define as many or as few of the them as you like in your config/app.php (for my application I was only using the Field alias from Styde/Html so that was the only one I had to add to my App config).
I think as more and more package maintainers start leveraging the auto-discover feature this is going to become a more widely used feature.
Afterthought: This is a shift in the relationship between Composer and Laravel. Whereas the composer.json file was traditionally just a package manager that would be run at installation and then not used when the application is running, it is now a config file that is read by the application. I learned this the hard way as our pipeline that packages-up and deploys the code used to tidy up files that weren't required in the production environment. It was deleting composer.json which started the error happening again in our QA environment.
I am running into some performance issues trying to run the chutzpah.console.exe with my chutzpah.json file. For this project, I am using TypeScript and pre-compiling the TypeScript files into .js files before running the tests. Each test file that I have generally references one other TypeScript file that it depends on - this is so Visual Studio is happy and so that the Chutzpah extensions work. For example, my drawerBusiness.spec.ts file contains this reference:
/// <reference path="../../../../app/business/documents/drawerBusiness.ts"/>
My chutzpah.json file is as follows:
{
"Compile": {
"Mode": "External",
"Extensions": [ ".ts" ],
"ExtensionsWithNoOutput": [ ".d.ts" ]
},
"Framework": "jasmine",
"TestHarnessReferenceMode": "Normal",
"TestHarnessLocationMode": "SettingsFileAdjacent",
"References": [
{ "Path": "./lib/jquery/jquery.js" },
{ "Path": "./lib/angular/angular.js" },
{ "Path": "./lib/angular-mocks/angular-mocks.js" },
{ "Path": "./lib/jasmine-jquery/jasmine-jquery.js" },
{ "Path": "./lib/underscore/underscore.js" },
{ "Path": "./lib/angular-bootstrap/ui-bootstrap-tpls.js" },
{ "Path": "./tests/dependencies.js" }
],
"Tests": [
{ "Include": "*/tests/specs/*.ts", "ExpandReferenceComments": "true" }
]
}
As you can see from above, I need to load some external libraries. I presume these get loaded once and then are used for each of the tests?
When I was using pure JavaScript, this configuration was blazing fast. It completed quite quickly in Visual Studio and through running the tests from the chutzpah.console.exe. However, since I have switched over to Chutzpah, the tests are much slower:
Tests complete: 263
=== 263 total, 0 failed, took 74.64 seconds ===
These results are even worse on our build machine, and it's timing out. It seems like there's a huge delay between each spec file that is run, and I think that is causing the overall slowness - once the spec file starts running, it completes in a few one-hundredths of a second. Does anyone have any ideas about what could possibly be configured incorrectly?
Here are a few things you can try to help get to the bottom of this issue:
Can you try enableding "EnableTestFileBatching": true in your chutzpah.json file to see if it helps? There can be slowness if you have MANY test files and this setting tells chutzpah to batching them into one harness.
Can you provide the output of the /trace option so I can see all the timings?
Can you provide a repro that I can run locally?
I'm using Jasmine and Chutzpah to test my TypeScript project in Visual Studio 2013 with PhantomJS. If I run the tests using the Chutzpah context menu extension they work fine but when I run them using the ReSharper test explorer, they fail if there are any external dependencies. The error message is ReferenceError: $ is not defined.
My project structure looks like:
- Scripts
- MyApp
- Components
- DatePicker.ts
- Tests
- Components
- DatePickerTest.ts
- typings
- jquery
- jquery.d.ts
- jquery-1.10.2.js
Chutzpah.json
Chutzpah.json looks like
{
"Framework": "jasmine",
"Compile": {
"Mode": "External",
"Extensions": [ ".ts" ],
"ExtensionsWithNoOutput": [ ".d.ts" ]
},
"References": [
{
"Includes": [
"*/Scripts/jquery-1.10.2.js"
],
"Excludes": [ "*/Scripts/*.d.ts" ]
}
],
"Tests": [
{
"Includes": [ "*/Scripts/Tests/*.ts" ],
"Excludes": [ "*/scripts/Tests/*.d.ts" ]
}
]
}
DatePickerTest.ts looks like
/// <reference path="../../myapp/components/datepicker.ts" />
import DatePicker = MyApp.Components.DatePicker;
describe("Datepicker", () => {
var datePicker: DatePicker
beforeEach(() => {
datePicker = new DatePicker();
});
// tests
});
Instantiating the DatePicker fails with the message ReferenceError: $ is not defined because the class uses $.extend() in the constructor.
I've tried declaring the reference to jQuery at the top of the test by adding the line /// <chutzpah_reference path="../../jaquery-1.10.2.js" /> but that doesn't make any difference. Plus my understanding is that adding references in the Chutzpah.json means I shouldn't have to do this anyway.
As suggested in this answer, I have debugged my test in the browser and sure enough jQuery isn't being loaded in the index.html page, so what am I doing wrong?
The problem came down to how ReSharper attempts to resolve dependencies based on the type definition references it finds. The ReSharper unit testing docs say:
If your test file references and (sic) external JavaScript library using a declaration file (*.d.ts), ReSharper will search the original JavaScript file by the name of the *.d.ts file.
My class under test was referencing the jQuery definition file:
/// <reference path="../../typings/jquery/jquery.d.ts" />
The problem was that I also have jquery.cookie.js included in my project (as part of Foundation), and ReSharper was incorrectly including that instead of jquery-1.10.2.js.
Renaming or removing jquery.cookie.js allowed ReSharper to find the correct jQuery file and solved the problem.
I'm using the "Marionette-Require-Boilerplate" (https://github.com/BoilerplateMVC/Marionette-Require-Boilerplate) to build my app, which also uses Firebase and FirebaseSimpleLogin. They are working fine in 'development' mode, but when it's time to minify it into 'Production' mode using Grunt and running in the browser, the minified version will have trouble finding the Firebase libraries, spitting out an error saying firebase is not defined. Both the Firebase and FirebaseSimpleLogin libs have been included in the config file as followed:
paths:{
"firebase" : "../libs/firebase",
"firebase-simple-login" : "../libs/firebase-simple-login",
"backbone-firebase" : "../libs/backbone-firebase",
}
shim: {
"firebase": {
"exports": "Firebase"
},
"firebase-simple-login": {
"exports": "FirebaseSimpleLogin"
},
"backbone-firebase": {
"deps": ["backbone", "firebase"],
"exports": "backbone-firebase"
}
}
It seems like the Boilerplate is minifying the code using Almond.js in 'production mode', but I'm not sure how that's affecting it. I tried including the Firebase libs in the 'path' variable in Grunt.js, but that didn't do anything.
Any help is appreciated!
Thanks.
-Tony
You shouldn't be minifying the already minified Firebase sources - that will cause trouble. You should skip minification for firebase.js (and simple login).
Thanks to the Firebase Support Team in solving the problem. The solution is to remove the "exports" from the "backbone-firebase" shim as there's no such thing as "backbone-firebase"; it is part of the "Backbone" namespace, e.g. Backbone.Firebase.Colection. Require.js was looking for something that is called "backbone-firebase" while non exists. Once the "exports" is removed, Require.js works correctly during the minification.
shim: {
"firebase": {
"exports": "Firebase"
},
"firebase-simple-login": {
"exports": "FirebaseSimpleLogin"
},
"backbone-firebase": {
"deps": ["backbone", "firebase"]
}
}