I try to get precache working with nuxt and the pwa-module and thought offlineAssets is the right place for that. But nothing is prechached, so I guess I'm doing something wrong.
nuxt.config.js
...
workbox: {
offlineAssets: [
'/static/somefile'
, '/assets/all_subfolders/*'
]
},
...
But nothing from this folders is precached. The generated sw.js files has this:
sw.js
...
workbox.precaching.precacheAndRoute(['/static/somefile',
'/assets/all_subfolders/*'])
...
But the precache stays empty.
What am I missing?
best regards
Related
I'm still kinda new to building Webpack plugins, so I have a question on regarding how to proper add assets to the compilation.
I am building this plugin: rebabel-webpack-plugin
That in all its simplicity takes the compiled files and recompiles them again with babel to transpile them in to fx ES 5 compatable files (I know... it seems weird... The why is in the projects readme).
This actually works pretty well, but my assets are not showing up in the Stats part of webpack (eg. compiler.getStats())
I am adding my recompiled assets to the compilation.assets list, but only my initial entry files and a dynamic named chunk shows up in the stats object.
So how do I make my recompiled assests show up in webpacks stats section?
So after some digging around I think I found a solution to my problem.
It seems that I needed to add my newly created assets as chunks as well and change the names of the file references in there.
So the following code seems to solve the problem:
function addPrefixToFile(prefix, file) {
return file.replace(/(^|[/\\])([^/\\]+)$/, `$1${prefix}$2`);
}
const files = chunks.reduce((arr, chunk) => {
if(!chunk.rendered) { return arr; }
// Create chunk copy
const copy = Object.assign(Object.create(chunk), {
name: chunk.name ? `${prefix}${chunk.name}` : chunk.name,
files: (chunk.files || []).map((file) => addPrefixToFile(file)),
parents: chunk.parents.map(
(parent) => Object.assign({}, parent, {
files: (parent.files || []).map((file) => addPrefixToFile(file))
})
)
});
chunkCopies.push(copy);
}, []);
// ... further down the line ...
chunks.push(...chunkCopies);
To me it seems a bit hacky so I was wondering if there is a better way of doing this. But well... it works.
I tried to use CasperJS for headless browser testing using PhantomJS and wanted to have a config file or something to change Website URL, Username passwords etc. So finally I found NuclearJS. Do you guys know any other perfect way to do this? If I wanted to write a one from the scratch would like to know about as well.
I got a solution (not perfect ;) ) that is using multiple configfiles (for selector, execution, desktop, mobile, etc).
I include a in the execution of my casperjs tests a file that offers me all configs i need (i include also global functions there).
Lets guess the test execution looks like that:
casperjs test --includes=loadGlobals.js test_1.js
In the that example loadGlobals.js contains functions like that:
var fs = require('fs');
var config = {},
configFile = fs.read('config.json');
config = JSON.parse(configFile);
Probalby the config.json is looking like that:
{
"url": "http://www.yourTestUrl.com",
"variable_1": "bla",
"variable_2": "blub",
"nextTier": {
"variable_1": "blablub"
}
}
Now you can call in the test_1.js the variables of the config.json:
casper.start(config.url, function() {
casper.then(function() {
casper.echo(config.variable_1);
casper.echo(config.variable_2);
casper.echo(config.nextTier.variable_1);
});
})
casper.run();
You can use like that different configurationfiles, even to override it during tests if nessacary.
The tests should be written in the page object pattern style so they are highly maintable, espacially with a outsourced configuration.
NuclearJS i didn't know, but i will take a look into it, too.
I have something like this:
{{topbar-nav}}
{{outlet}}
I have a lot of pages, where I want to render just the top-bar, and nothing else. Normally, I have to create a lot of routes, that would basically do nothing (rendering emptiness), and I don't want to pollute router like this. Is it possible to somehow handle this situation? For example a default route like:
this.default_route("default");
Well, I found it myself.
this.route('default_page', { path: '/*wildcard' });
Important part is
{ path: '/*wildcard' }
Given the following generator folder structure; I'm attempting to deep copy all folders under the 'for_copy' folder.
generator root
app
templates
for_copy
data
external
media
All the folders are empty. I would like to have this structure created for me when I invoke the generator.
I have tried using fs.copy, bulkCopy, and bulkDirectory. None of them are doing the job.
Any clues as to how I might achieve this would be greatly appreciated.
See below code snippet:
writing: function() {
this.log('Writing templates...');
//doesn't work
this.fs.copy(
this.templatePath('for_copy'),
this.destinationRoot()
);
//doesn't work
this.bulkCopy(
this.templatePath('for_copy'),
this.destinationRoot()
);
//doesn't work
this.bulkDirectory(
this.templatePath('for_copy'),
this.destinationRoot()
);
//doesn't work
this.bulkDirectory(
this.templatePath('for_copy') +'**/*',
this.destinationRoot()
);
}
Yeoman only cares about files. When you use bulkDirectory, you actually copy files over, not directories.
You can use mkdirp module to create directories.
mkdirp.sync(path.join(this.destinationPath(), 'data'));
mkdirp.sync(path.join(this.destinationPath(), 'external'));
// etc ...
I'm trying to include an simple html file in my karma config file to access the html elements from my javascript files and test this with jasmine in karma.
But I'm getting always an Unexpected token < error. I saw in an webcast that it is possible to include html files, but I don't know why it doesn't works with my configuration?
Thanks in advance
By karma config you have to register every file your want to use in your tests. You can do that by adding patterns to your files array in your config.
A file pattern looks like this:
files: [
{
pattern: 'test/unit/*.js',
watched: true, //watching file modifications for test autorun
included: true, //included as <script src="..."> in the runner html file
served: true //used by tests (the test server should serve it)
}
]
You can use short pattern syntax:
files: [
'test/unit/*.js'
]
This means exactly the same as the previous pattern.
If you don't want to use your file in your test included as <script src="file.js"></script>, then you have use included: false and load the file from within your tests via AJAX. Be aware that you should use relative urls for that, because the domain of the test server can always change...
The pattern order is important too, it uses reverse overriding:
files: [
{pattern: '*.js', included: true}
{pattern: '*.js', included: false}
]
In this case every js file will be included, so the first pattern overrides the second.
For example by html files:
karma config:
files: [
{pattern: 'bootstrap.js', included: true}
{pattern: 'x.html', included: false}
]
bootstrap.js:
var xhr = new XMLHttpRequest();
xhr.open('get', '/base/x.html', false);
xhr.send();
console.log(xhr.status, xhr.responseText); //200, '<html content>'
The URI always has a /base prefix because Karma stores its own index.html and js files on the top level, so it needs a subfolder. If you want to find out what URIs are served, you can use this code:
var servedUris = Object.keys(window.__karma__.files);
I wrote some basic fs stuff to support sync read by Yadda: https://github.com/acuminous/yadda/blob/master/lib/shims/karma-fs.js You might be able to move it to a different project extend it, and use fs instead of AJAX in browser. At least that's how I would do it with Browserify.
I ended up making a simple patch to the lib/middleware/karma.js file in my Karma installation. It uses an extension .literal to denote "just echo the entire file onto the page". I've always found it strange that Karma doesn't have an inbuilt way to do this. My way is certainly not brilliantly-constructed but it might be good enough for you.
With this you can just have in your karma.conf.js:
// ...
files: [
"path/to/my_html.literal", // Echoed directly onto the page
"path/to/other.js", // Normal behaviour
// ...
],
My nested scriptTags function (inside createKarmaMiddleware) just looks like this:
var scriptTags = files.included.map(function(file) {
var filePath = file.path;
var fileExt = path.extname(filePath);
// Include .literal files directly into the body of the HTML.
if (filePath.match(/.literal$/)) {
var fs = require("fs");
return fs.readFileSync(filePath, "utf-8");
}
// ...
The diff is here: https://github.com/amagee/karma/commit/c09346a71fc27c94cc212a2bd88b23def19ec3a4
You need use the html2js preprocessor (or the ng-html2js preprocessor if using AngularJS). See the preprocessor description for how it works.
Since Karma 0.10, the html2js preprocessor is shipped with Karma and configured by default:
module.exports = function(config) {
config.set({
files: [
'templates/*.html'
],
preprocessors: {
'**/*.html': ['html2js']
}
});
};
Then you can access the html content as JS string:
var elm = $(__html__['templates/x.html'])
The error you are getting means that the HTML files are not preprocessed. By default, all HTML files under the basePath are preprocessed, so maybe your HTML files are somewhere else, in which case you need to put them in the preprocessors config explicitly. Share your karma.conf.js if you need more help.