Does Karma support source map files? - karma-runner

Is it possible to configure Karma to use source map files for stacktraces? I see that there are a few issues on GitHub which appear to have been closed? I can't however find any example of doing so.
If this is supported can someone illustrate an example config?

In your karma.config.js file add
config.set({
files: [{
pattern: '**/*.js.map',
included: false
},
...
});
This has worked for me, and files are now served by karma.

You need a preprocessor to look at source maps in karma: have a look at karma-sourcemap-loader to preprocess your data and locate the source map files.
A limitation of the library is that the source maps must be in the same folder as the js files, with the same name - but different extension of course.

Related

asciidoc, doctoolchain, target github readme.adoc - how to export asciidoc file containing includes into ONE file without include?

GitHub supports asciidoc readme files, but it looks like "include" is not supported.
I want to use doctoolchain which can render and export to html and pdf (and maybe into other formats). This tool works great.
I could use raw.githack.com to show the generated html file from the GitHub repository.
But I think it would be a good idea to have the result also as one (1) readme.adoc file.
How to export into one (1) asciidoc file, which I could use as it is as readme file so that github will render it and show? Best would be to use doctoolchain, when this tool will render my documentation it could also generate the one-file-asciidoc-documentation.
I think internally asciidoctor collects and merge all these "include" files. So maybe this file is already available in any place? The doctoolchain build folder contains only the target files.
You are right there is a long dicussion why includeis not supported by github.
You can achieve your goal with doctoolChain and pandoc(https://pandoc.org/). Following steps are required:
configure your docDir/Config.groovy
inputFiles should have docbook defined
inputFiles = [[file: 'yourfile', formats['docbook']]]
run the doctoolchain task generateDocbook - it creates ???.xml file somewhere in docDir/build
generate from the generated docbook again an asciidoctor file - `pandoc <FILENAME_OF_GENERATED_DOCBOOK.XML> -f docbook -t asciidoctor -o <FILENAME_OF_ASCIIDOCTOR_WHICH_HAS_EVERYTHING>
make sure it runs automatically and you commit it regulary
now you are ready
This script can be used to resolve includes and to generate one (1) output file:
https://github.com/asciidoctor/asciidoctor-extensions-lab/blob/master/scripts/asciidoc-coalescer.rb
some information about the script and possible next steps you can read here:
AsciiDoc Backend (AsciiDoc 2 AsciiDoc) for preprocessing
to use it, ruby and asciidoc must be installed:
asciidoctor.org/#installation

Cannot view scss files while working with Ionic on dev tools

I'm trying out some very basic Ionic tutorials from Ionic website (Ionic Tutorial), and i want to be able to view and modify scss from dev tools.
The app functions correctly, css classes i've added in scss files work correctly as well but i see a main.css file instead of the foo.css from which it was compiled. I can even view typescript files on dev tools and debug, which means source map for js->ts is working. It's the css-> scss that's not working.
I can see these files on www/build
main.js
main.map.js
main.css
main.map.css
Which means the source map is generated correctly.
I have also enabled css source maps in chrome from
- DevTools -> Settings ->Sources -> Enable CSS source maps
I would mark this as duplicate but it seems like i cannot. Answer can be found on this SO postenter link description here. Basically,
You'll need to extend your sass.config.js file, by default source mapping for sass is disabled.
config/sass.config.js:
module.exports = {
sourceMap: true,
}
package.json:
"config": {
"ionic_sass": "./config/sass.config.js",
}
I can verify that this works.

VS Code style-lint ignore directories

Is it possible to ignore my CSS path, beacuse I only use stylelint for SCSS validation?
e.g. - I have the following structure:
assets/
css/
scss/
How can I disable the css/ folder from being indexed, trough the settings.json file of VSCode?
I found this in the docs, but I don't know how to implement it in VSCode.
If you're using the VS Code stylelint extension, you can specify ignore paths via the stylelint.configOverrides setting.
Add the following to your VS Code settings.json file:
"stylelint.configOverrides": {
"ignoreFiles": "assets/css/**"
}
Alternatively you can add a .stylelintignore file to the root folder of your project and add the ignore paths there:
assets/css/**
I'm using stylelint#9.2.0 with vscode-stylelint#0.20.4, and for me the .stylelintignore file is not being respected. If i use the CLI it is respected but the vscode plugin does not seem to do this correctly.
Similar to Jack Russell, I found that the VS Code stylelint plugin currently seems to ignore the .stylelintignore file.
To get around this limitation, I removed the .stylelintignore entirely and moved its settings into .stylelintrc instead. I.e. from something like this in .stylelintignore:
ignorethisfolder/**/*
path/to/ignorethisfile.css
To something like this in .stylelintrc:
"ignoreFiles": [
"ignorethisfolder/**/*",
"path/to/ignorethisfile.css",
]

Ember cli - use sass addon in less project

I use broccoli-less in my ember cli project and would like to use an addon (ember-cli-materialize), which uses broccoli-sass.
After installing the addon, i get: File to read not found or unreadable ../app.scss, because i also have an app.less file in my styles dir.
As i understand, this commit Allow multiple preprocessors per type should make it possible, although i might be missing something. Has anyone managed to use ember-cli with multiple preprocessors, and what changes is needed?
Ember-cli version: 1.13.1
Ember version: 1.12.0
Thanks
I know your circumstance is different than mine but this may help others or spur a better solution. I was added to a dev team to polish up an app already styled using LESS. I favor SASS and tried to use ember-cli-sass alongside ember-cli-less without any success.
You may want to look further into Ember-Cli's add.import
By adding your input configurations to ember-cli-build.js with the above, you can leverage either your bower-components directory (if used) or vendor directory, to import a compiled CSS doc (from Sass source files) that will build alongside the project quite nicely with a simple sass --watch <input:output> command.
The LESS files are ultimately compiled to app.css, and your SASS files to vendor.css (make sure you link to the stylesheet in your index page/template).

How to have google chrome debug dev tools see coffeescript files?

i'm setting up an environment to debug coffeescript file.
I'm using an IDE, webstorm, that genrates both .js file and .map from original .coffee file, from coffeescript default compiler.
So I endup with 4 files all in same folder:
main.html, aa.coffee, aa.js, aa.map.
in main.html I include the js file.
The JS files contains:
// Generated by CoffeeScript 1.6.3
var my;
my = 1;
alert(my);
/*
//# sourceMappingURL=aa.map
*/
Very simple. When loading main.html it correctly popup the alert.
Now when I open google dev tools / source, where I see the tree of my files, I see the html file and the js file. But it's IMPOSSIBLE to have the .coffee file appear, although correctly referenced as you can see above. Of course, I did enable sourcemap in dev tools settings. I wathed several video tutorial and I did all step for the coffee file to appear.
Here is content of the 2 other files:
the .coffee :
my = 1
alert my
the .map:
{
"version": 3,
"file": "aa.js",
"sourceRoot": "",
"sources": [
"aa.coffee"
],
"names": [],
"mappings": ";AAAA,EAAA,EAAA;;AAAA,CAAA,CAAA,CAAK;;AACL,CADA,CACA,GAAA"
}
Do you have an idea why the source map process doesn't work on chrome dev tools ?
edit: I've now changed my mind on all this and don't use source-map debugging at all. First, it was generally flaky. Second, if I'm not writing JS I should at least be able to read it so I always debug in js.
First, keep in mind that source map debugging is flaky in Chrome right now. A couple things you can try:
Put a debugger statement in your code. I've noticed that the debug is very flaky -- about 10% of the time it just won't stop on breakpoints.
Open the coffee file directly by pressing Ctrl O in the sources pane then place breakpoints or use debugger statements.
Figure out why "sourceRoot": "", is empty. It's possible that that just means that the source file will be in the same directory as the js file (seems likely). My coffee files are in a different directory so they have a sourceRoot entry.
Generate the source maps with grunt or coffeescript. This seems unlikely to have an effect though.
I'm betting #2 will do it.