i'm using the current release version 1.2.3 and would like to use the functionality described here:
https://github.com/globalizejs/globalize/blob/6d3a5a57c56fd0afb93e20340905a435d1650341/doc/api/message/load-translation.md#example
I need to inherit translations to have a fallback culture for the case that a browser culture is not defined / initialized in my loadMessages method. For example:
Globalize.loadMessages({
root: { hello: "Hi!" },
de: { hello: "Moin!" }
});
This is what i expect:
Globalize( "de-DE" ).formatMessage( "hello" );
"Moin!"
Globalize( "fr" ).formatMessage( "hello" );
"Hi!" (fallback)
How can i realize this?
Short answer
It's missing Globalize.loadMessages({fr: {}});. The empty message tells globalize fr is a valid bundle.
Longer answer
The documentation example works just fine. Note: Use v1.2.3 documentation here: https://github.com/globalizejs/globalize/blob/1.2.3/doc/api/message/load-messages.md
In order to test I did:
npm install globalize cldr-data
Then:
var Globalize = require( "globalize" );
Globalize.load( require( "cldr-data" ).entireSupplemental() );
Globalize.loadMessages({
root: {
amen: "Amen"
},
de: {},
en: {},
"en-GB": {},
fr: {},
pt: {
amen: "Amém"
},
"pt-PT": {}
});
Globalize( "de" ).formatMessage( "amen" );
// > "Amen"
Globalize( "en" ).formatMessage( "amen" );
// > "Amen"
Globalize( "en-GB" ).formatMessage( "amen" );
// > "Amen"
Globalize( "fr" ).formatMessage( "amen" );
// > "Amen"
Globalize( "pt-PT" ).formatMessage( "amen" );
// > "Amém"
Related
I have a rails app using Hotwire (Turbo & Stimulus). I'm trying to use webpack and babel to transpile JS for ES5/IE11. Stimulus and Turbo don't support IE11 any more, so I'm also trying to explicitly transpile them and then add required polyfills. My understanding is even if they've already been transpiled, the result should still be valid ES6 that can be transpiled again.
For Stimulus this approach appears to work fine but for Turbo I get
Uncaught TypeError: t.tagName is undefined
ht turbo.es2017-esm.js:1308
My best guess is that this is because Turbo is distributed as UMD modules so my babel config isn't transpiling it correctly. What's the best way to approach this?
browserlist:
"browserslist": {
"production": [
"last 1 version",
"> 1%",
"IE 10"
],
webpack.config.js:
const path = require("path")
const webpack = require("webpack")
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts')
const CopyPlugin = require("copy-webpack-plugin");
const mode = process.env.NODE_ENV === 'development' ? 'development' : 'production'
module.exports = {
mode,
devtool: "source-map",
entry: {
application: [
"./app/frontend/application.js",
]
},
module: {
rules: [
{
test: /\.(js|ts)$/,
include: [
path.resolve(__dirname, 'node_modules/#hotwired/turbo'),
path.resolve(__dirname, 'node_modules/#hotwired/turbo-rails'),
path.resolve(__dirname, 'node_modules/#hotwired/stimulus'),
path.resolve(__dirname, 'node_modules/#stimulus/polyfills'),
path.resolve(__dirname, 'node_modules/#rails/actioncable'),
path.resolve(__dirname, 'app/frontend'),
],
use: ['babel-loader'],
},
{
test: /\.(png|jpe?g|gif|eot|woff|woff2|ttf|svg|ico)$/i,
type: 'asset/resource'
},
{
test: /\.(scss|css)/i,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
}
],
},
resolve: {
modules: ['node_modules']
},
output: {
filename: "[name].js",
// we must set publicPath to an empty value to override the default of
// auto which doesn't work in IE11
publicPath: '',
path: path.resolve(__dirname, "app/assets/builds"),
},
plugins: [
new RemoveEmptyScriptsPlugin(),
new MiniCssExtractPlugin(),
new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }),
new CopyPlugin({
patterns: [
{ from: "node_modules/html5shiv/dist/html5shiv.min.js", to: "vendor" },
{ from: "app/frontend/vendor/outerHTML.js", to: "vendor" },
{ from: "app/frontend/vendor/polyfill-output-value.js", to: "vendor" }
],
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery'
})
]
}
babel.config.js
module.exports = function(api) {
var validEnv = ['development', 'test', 'production']
var currentEnv = api.env()
var isDevelopmentEnv = api.env('development')
var isProductionEnv = api.env('production')
var isTestEnv = api.env('test')
if (!validEnv.includes(currentEnv)) {
throw new Error(
'Please specify a valid `NODE_ENV` or ' +
'`BABEL_ENV` environment variables. Valid values are "development", ' +
'"test", and "production". Instead, received: ' +
JSON.stringify(currentEnv) +
'.'
)
}
return {
presets: [
isTestEnv && [
'#babel/preset-env'
],
(isProductionEnv || isDevelopmentEnv) && [
'#babel/preset-env',
{
forceAllTransforms: true,
useBuiltIns: 'entry',
corejs: '3.21.1',
modules: false,
exclude: ['transform-typeof-symbol']
}
]
].filter(Boolean),
plugins: [
'babel-plugin-macros',
'#babel/plugin-syntax-dynamic-import',
isTestEnv && 'babel-plugin-dynamic-import-node',
'#babel/plugin-proposal-class-properties',
'#babel/plugin-proposal-object-rest-spread',
'#babel/plugin-proposal-private-methods',
'#babel/plugin-proposal-private-property-in-object',
'#babel/plugin-transform-regenerator',
'#babel/plugin-transform-runtime',
[
'#babel/plugin-transform-spread',
{
loose: true
}
]
].filter(Boolean)
}
}
I have installed workbox-cli
and using the config below, located in config.js
const {InjectManifest} = require('workbox-webpack-plugin');
const path = require('path');
module.exports = {
webpack: function(config, env) {
config.plugins.push(
new InjectManifest({
globPatterns: ['**/*.{js,css}'],
swSrc: path.join('public', 'custom-service-worker.js'),
swDest: 'service-worker.js',
maximumFileSizeToCacheInBytes: 5000000,
})
);
return config;
}
}
and then running
workbox generateSW config.js
I get
Your configuration is invalid:
{
"webpack": function(config, env) {\n config.plugins.push(\n new InjectManifest({\n >globPatterns: ['**/*.{js,css}'],\n swSrc: path.join('public', 'custom-service->worker.js'),\n swDest: 'service-worker.js',\n maximumFileSizeToCacheInBytes: >5000000,\n })\n );\n return config;\n },
"swDest" [1]: -- missing --
}
[1] "swDest" is required
I am not sure what else to do because I am providing swDest
From my point of view it looks fine. Only thing that comes up to my mind is to try set publicPath to ''. I am using laravel-mix so this is my config.
mix.webpackConfig(webpack => {
return {
plugins: [
new WorkboxPlugin.InjectManifest({
swSrc: './public/sw.js',
swDest: 'service-worker.js',
maximumFileSizeToCacheInBytes: 5*1024*1024,
})
],
output: {
publicPath: ''
}
};
});
I am working on my first custom Yeoman Generator and have hit a snag. I am getting the error of _ is not defined when the generator is creating the package.json file. The error is in reference to
1| {
>> 2| "name": "<%= _.slugify(appName) %>",
3| "version": "0.0.1",
4| "description": "<%= appDescription %>",
5| "author": "<%= authorName %>",
Here is my index.js file
'use strict';
var _ = require('underscore.string');
var generators = require('yeoman-generator');
var chalk = require('chalk');
var yosay = require('yosay');
module.exports = generators.Base.extend({
prompting: function () {
var done = this.async();
// Have Yeoman greet the user.
this.log(yosay(
'Welcome to the ' + chalk.red('\nSMS Boilerplate') + '\n generator!'
));
this.log(chalk.green(
'You\'ll also have the option to use Normalise-css and Modernizr.js \n'
));
this.prompt([{
type: 'input',
name: 'appName',
message: 'Your project name',
default: 'sms-project',
store: true
}, {
type: 'input',
name: 'appDescription',
message: 'Short description of the project...',
default: 'A new SMS project',
store: true
}, {
type: 'input',
name: 'gitUsername',
message: 'What\'s your Github username?',
store: true
}, {
type: 'input',
name: 'authorName',
message: 'What\'s your name (the author)?',
default: '',
store: true
}, {
type: 'confirm',
name: 'includeNormalize',
message: 'Would you like to include Normalize.css?',
default: true
}]).then(function(answers) {
this.props = answers;
this.log('app name', answers.appName);
done();
}.bind(this));
},
writing: {
// Copy the configuration files
config: function() {
this.fs.copyTpl(
this.templatePath('_package.json'),
this.destinationPath('package.json'),
{
appName: _.slugify(this.props.appName),
appDescription : this.props.appDescription,
authorName : this.props.authorName
}
);
this.fs.copyTpl(
this.templatePath('_bower.json'),
this.destinationPath('bower.json'),
{
appName: this.props.appName,
appDescription : this.props.appDescription,
authorName : this.props.authorName,
includeNormalize : this.props.includeNormalize
}
);
this.fs.copy(
this.templatePath('bowerrc'),
this.destinationPath('.bowerrc')
);
},
// Copy Application Files
app: function() {
this.fs.copy(
this.templatePath('scss/_style.scss'),
this.destinationPath('scss/style.scss')
);
this.fs.copy(
this.templatePath('css/_style.css'),
this.destinationPath('css/style.css')
);
this.fs.copy(
this.templatePath('js/_script.js'),
this.destinationPath('js/script.js')
);
this.fs.copyTpl(
this.templatePath('index.html'),
this.destinationPath('index.html'),
{
appName: this.props.appName,
appDescription : this.props.appDescription,
authorName : this.props.authorName
}
);
this.fs.copy(
this.templatePath('_Gruntfile.js'),
this.destinationPath('Gruntfile.js')
);
},
},
//Install Dependencies
install: function() {
this.installDependencies({
bower: true,
npm: true,
callback: function() {
this.spawnCommand('grunt', ['bowerBuild']);
}.bind(this)
});
},
});
I am using Yeoman Generator v 0.23.0 and Node v 4.4.5
Thank you for any help.
underscore wasn't passed inside your template. So when you try to access function on it, it's telling you it's not there.
My suggestion is to preformat your input inside your generator code and only pass strings as template context. It's usually better to keep templates logic less.
Otherwise you can pass it manually this.fs.copyTpl(from, to, {_: _, ...etc})
jQuery UI 1.11 + Fancytree 2.3.0
$("#tree").fancytree({
extensions: ["edit", "dnd"],
edit{ ... },
dnd{ ... },
...
});
[DnD]
Already effective.
[Edit]
[F2] - ignore.
[Shift+Click] - effective.
Couldn't F2 key when use dnd extension. Why sabotage the "F2" ?
[jQuery UI 1.11 - Draggable]
var mouse = $.widget("ui.mouse", {
...
_mouseDown: function(event) {
...
this.document
.bind( "mousemove." + this.widgetName, this._mouseMoveDelegate )
.bind( "mouseup." + this.widgetName, this._mouseUpDelegate );
event.preventDefault();
mouseHandled = true;
return true;
},
Fancytree(ul.fancytree-container) missing focus when blocking event.preventDefault().
If you can stubborn focusing. try this code.
$("#tree").fancytree({
extensions: ["edit", "dnd"],
edit{ ... },
dnd{ ... },
click: function(event, data){
data.tree.$container.focus();
},
...
});
Im my Angularjs-App the query url parameter datenbestand is not set: ?datenbestand=undefinded. Source code is as follows.
HTML
<select ng-model="datenbestand" id="datenbestand" name="datenbestand" class="span3 search-query">
<option value="A">A</option>
<option value="B">B</option>
</select>
CONTROLLER
app.controller( 'VListCtrl', [ '$scope', 'personlistdto', 'VListLoader', '$q', 'VService',
function( $scope, personlistdto, VListLoader, $q, VService ) {
$scope.personlistdto = personlistdto;
$scope.searchFactory = VListLoader;
$scope.search = function( ){
$scope.personlistdto = $scope.searchFactory();
};
}
] );
SERVICE:
services.factory( 'VService', [ '$resource',
function find( $resource ) {
return $resource( '/cdemo/rest/vers/ajs/:id',
{ id: '#id', datenbestand: '#datenbestand', isArray: false }
);
} ] );
services.factory( 'VListLoader', [ 'VService', '$q', '$route',
function( VService, $q, $route ) {
var find = function find() {
var delay = $q.defer();
VService.get( function( personlistdto ) {
delay.resolve( personlistdto );
}, function() {
delay.reject( 'Unable to fetch v' );
} );
return delay.promise;
};
return find;
} ] );
What am I doing wrong?
I'm new to Angular, but I'm wondering how you think your factory is getting access to datenbestand. I believe your problem is one of scope. When I do something similar to your code, it's not seeing it unless I specifically pass it, such as with a service, or making the call in the same scope.
I believe this post may help answer your question though. Hope that helps.