Develop Reference

How to generate new revision each build in vuejs?

I'm using vue cli with pwa (workbox).
every time I build the project vue is create for me file: precache-manifest.882c44d211b70f8989278935.js.
inside I have entries: revision, url:
{
"revision": "2332b61ff6f66ba9523b370a7f21196d",
"url": "/index.html"
},
If I don't change the file, it gets the same revision.
My question is how to force to have different revision each time I build the project?

You may need workbox#v5 to modify the manifest.
Assuming using yarn, add resolutions field in package.json:
"resolutions": {
"#vue/cli-plugin-pwa/workbox-webpack-plugin": "^5.0.0"
},
Then run yarn to install. And in your vue.config.js:
module.exports = {
pwa: {
workboxOptions: {
exclude: ['index.html'],
additionalManifestEntries:[
{ url: '/index.html',revision: Date.now().toString() }
]
}
}
}
See also:
https://github.com/vuejs/vue-cli/issues/5119#issuecomment-580144313
https://github.com/GoogleChrome/workbox/issues/2243
If you don't like workbox#v5, apparently you can modify precache manifest after build :)

Stencil - Global CSS Doesn't Integrate into React

Following the Stencil docs here, I created some global CSS variables in src/global/variables.css. This is currently the only CSS file in this directory.
I’m trying to use my component(s) in React. The components / CSS variables work perfectly fine when developing in the Stencil project and when I copy the www/build/ directory to a vanilla JS / HTML project but not when I import and use them in React. The components work and clearly render but the CSS in the global/ directory clearly doesn’t get rendered.
Defining and using CSS variables within the component CSS files works, but not the global CSS files.
I’m guessing something is wrong with how I’m building it but I don’t know what I’m doing wrong.
I've tried updating to the most recent Stencil version and updated all other packages.
I've also tried adding:
styleUrls: [
"local-component.css",
"../../global/variables.css"
]
but this also did not work.
It only works if add a CSS tag referencing the UNPKG CDN like so:
<link rel="stylesheet" type="text/css" href="https://unpkg.com/uwe-ds-poc#0.0.9/dist/poc/poc.css"/>
but fails if I try to do a local path like this:
<link rel="stylesheet" type="text/css" href="../node_modules/uwe-ds-poc/dist/poc/poc.css"/>.
Is this the only / best approach or is there something I am missing?
This is my stencil.config.ts:
import { Config } from '#stencil/core';
export const config: Config = {
namespace: 'poc',
globalStyle: 'src/global/variables.css',
outputTargets: [
{
type: 'dist',
esmLoaderPath: 'loader'
},
{
type: 'docs-readme'
},
{
type: 'www',
serviceWorker: null // disable service workers
}
],
copy: [
{ src: 'global' }
]
};
The copy property copies the global dir across to dist/collection/. This doesn't resolve the problem either.
This is my package.json:
{
"name": "uwe-ds-poc",
"version": "0.0.9",
"description": "Stencil Component Starter",
"main": "dist/index.js",
"module": "dist/index.mjs",
"es2015": "dist/esm/index.mjs",
"es2017": "dist/esm/index.mjs",
"types": "dist/types/index.d.ts",
"collection": "dist/collection/collection-manifest.json",
"collection:main": "dist/collection/index.js",
"unpkg": "dist/poc/poc.js",
"files": [
"dist/",
"loader/"
],
"scripts": {
"build": "stencil build --docs",
"start": "stencil build --dev --watch --serve",
"test": "stencil test --spec --e2e",
"test.watch": "stencil test --spec --e2e --watchAll",
"generate": "stencil generate"
},
"devDependencies": {
"#stencil/core": "^1.8.1",
"#types/jest": "^24.0.23",
"#types/puppeteer": "1.20.2",
"jest": "^24.9.0",
"jest-cli": "24.8.0",
"puppeteer": "1.20.0"
},
"license": "MIT"
}
This entire Stencil project is here.
Thanks in advance.

Importing the unpkg cdn is a valid option.
However if you are using a bundler (webpack, parcel, etc.) you could just import your css with something like import 'my-package/dist/path/to/global.css'.

Composer: Including a custom js script via composer (then load via require.js)?

I've been tackling this for hours...
When it comes to components, composer creates require.js and require.css files. I want to include my own script, so it can be loaded via the same require.js.
Right now, even though it detects core.js and puts it in /core/libs folder:
libs\WootWoot\core\js\core.js
It doesn't load via the require.js :(
What am I doing wrong? This is my composer.json file:
{
"name": "WootWoot",
"config": {
"component-dir": "public_html/core/libs",
"component-baseurl": "/core/libs"
},
"require": {
"robloach/component-installer": "^0.2.3",
"components/jquery": "^3.3",
},
"extra": {
"component": {
"script": [
"/core/js/core.js"
]
}
}
}

How to include specific locale from AngularJS I18n files using bower?

I've downloaded the angular I18n repo using bower install angular-i18n which pulls it into my bower_compontents and updates the bower.json file with angular-i18n : 1.5.3, which is expected behavior.
I want to include a specific locale(ex. de-de.js) in my build process so that it gets included along with the other angular scripts, every time I run grunt serve which isn't happening at the moment. Any ideas how this can be achieved?
Thanks.

In my case, I added in my bower file the specific version that i need using the link of the raw version of the file angular-locale_es.js.
bower.json
"dependencies": {
"angular": "^1.5.0",
"angular-mocks": "^1.5.0",
...
"angular-locale_es": "https://raw.githubusercontent.com/angular/bower-angular-i18n/master/angular-locale_es.js",
...
}

In your bower.json you can add an overrides section and specify the i18n script you want to include.
{
"name": "your application",
"version": "1.1.2",
"dependencies": {
"angular": "#1.5.7",
"angular-i18n": "#1.5.7",
"moment": "#2.13.0",
},
"overrides": {
"angular-i18n":{
"main":[
"angular-locale_de-ch.js"
]
},
"moment": {
"main": [
"moment.js",
"locale/de.js"
]
},
}
}

So to answer my own question, if you only want one of the locales you can copy and replace the contents of the de-de.js locale into the main angular-i18n file, which is hassle free and does not require a complicated approach.
However if you have multiple locales and want to make a decision based on a condition, you can set a default locale using this library
https://github.com/lgalfaso/angular-dynamic-locale/
after which all you have to do is add a base location for your locale files(I'm using the CDN for example): tmhDynamicLocaleProvider.localeLocationPattern('https://cdnjs.cloudflare.com/ajax/libs/angular-i18n/1.5.5/angular-locale_{{locale}}.js');
check for your condition and pass the locale as $translate.use('de');
Hope that helps!

Allow global transforms with grunt browserify

I've added jQuery as a script tag in my html file and have added it to package.json for working with browserify-shim as follows:
"browserify": {
"transform": [
"browserify-shim"
]
},
"browserify-shim": {
"jquery": "global:jQuery"
},
I'm able to expose it in my main script file with a simple require('jquery') call.
The problem is that I'm using some jQuery plugins which internally do a require('jquery') and since browserify transforms don't apply to dependency of dependencies, it's causing browserify to complain with bundling since it cannot find jQuery.
Now I know that I can solve it by applying global-transforms by I cannot find a way to do it easily.
Browserify docs say that you cannot apply global-transforms in package file so the following don't work, (which I thought would):
"browserify": {
"global-transform": [
"browserify-shim"
]
},
"browserify": {
"transform": [
"browserify-shim"
],
"global": true
},
I also tried adding the option to my Gruntfile.js as follows, but even that doesn't work:
browserify: {
options: {
global: true
},
dist: {
files: {
'js/bundle.js': 'js/script.js'
}
},
},
The last option is to manually add a browserify-shim to every dependency's package.json, but I don't want to do it, since it means every time I add a new plugin, I would have to repeat the same process.
Any ideas to mitigate the above problem?

You should be able to apply global-transforms by providing transform with a hash option:
"browserify": {
"transform": [
["browserify-shim", {global: true}]
]
}