I'm using vue-i18n package to translate my Vue project and want to use "I18n Ally" vs code extention to manage translations. The default folder structure for this extension is this:
locales # i18n, langs, locale are also acceptable
├── en.json
├── de-DE.json
├── zh-CN.yml # YAML
├── zh-TW.ts # You can mix different formats
├── ...
└── <country-code>.json
But I have one single translation file with this format:
{
"en": {
"users": {
"title": "Users list",
"menu": {
"show_users": "Display users",
"hands_down": "Hands down",
"unblock_all": "Unblock all"
},
...
And I cannot configure the extension to read this configuration.
Author of i18n Ally here. Currently, we don't support the locale code as top-level keys in json files. I'd suggest using the following format in dedicated files for each locale, which will also get better support over other i18n tools.
{
"users": {
"title": "Users list",
"menu": {
"show_users": "Display users",
"hands_down": "Hands down",
"unblock_all": "Unblock all"
},
...
This should be a better practice as your application grows as well. Thanks for the understanding and hope you enjoy the extension.
Related
I have a Vue project that is able to load other Vue components bundled as .mjs files. I want to develop all those pluggable components inside a repository but instead of distributing all pluggable components in a single build I want to tell Vite which component to build. If that works I don't need to think about dealing with a Monorepo, Multirepo or something else.
After creating the library project I thought about organizing each plugin into a separate folder in the src directory
.
└── src
├── textWithBlueBackground
| ├── index.ts ( importing "TextWithBlueBackground" and exporting as "Renderer" )
| └── TextWithBlueBackground.vue
└── textWithRedBackground
├── index.ts ( importing "TextWithRedBackground" and exporting as "Renderer" )
└── TextWithRedBackground.vue
The problem is that I need to switch to library mode but I don't know what to pass in there
build: {
lib: {
entry: resolve(__dirname, "./src/index.ts"), // this is wrong
name: "Renderer",
fileName: "renderer",
},
rollupOptions: {
external: ["vue"],
output: {
globals: {
vue: "Vue",
},
},
},
},
After fixing that... Is it possible to tell Vite ( via CLI flag ) to only build a specific sub directory? E.g.
vite build ./src/{folderName}
If that's not possible I could create an index.ts in src
import { Renderer as TextWithBlueBackground } from "./textWithBlueBackground";
import { Renderer as TextWithRedBackground } from "./textWithRedBackground";
export { TextWithBlueBackground, TextWithRedBackground }
but how can I tell Vite to only build a specific component then?
The generated .mjs file should only contain the desired component, preferably as "Renderer" but I think the component name should be fine too.
I am disappointed on two points by developing a Nuxt project on vscode.
On vscode my jsconfig.js is the default one :
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"~/*": ["./*"],
"#/*": ["./*"],
"~~/*": ["./*"],
"##/*": ["./*"]
}
},
"exclude": ["node_modules", ".nuxt", "dist"]
}
It's working on vue file for autocompletion to import some components for example (with ctrl+space)
But impossible to go to definition next with cmd+click. I do not understand why and this is really annoying.
I can't post image (need 10 reputation), but here is my import on vue file (with no definition found for ...)
import PldFooter from '#/components/Footer';
Other point, I use sass files on assests folder. Compilation working well but I cannot access by cmd+click to the file from node_modules. Here is an example of import :
#import "~bulma/sass/base/helpers.sass";
==> No definition found for helpers.sass
Thank you for your help,
Ben.
Have you opened multiple folders (projects) in a window?
I'm not sure whether your issue the same as me. I got an issue "Go to Definition not working" in Visual Studio Code when I opened multiples folders (projects) and I resolved.
I have used the plugin Vetur to support the .vue file.
There are 2 ways which work well:
Open only one project in a window
You can open multiple projects in a window but the project you want to "Go to Definition" works well which must be the first project in the folder tree in the EXPLORER tab.
It seems the plugin Vetur picks up the first project in multiple projects to be the root folder.
My file tsconfig.json
{
...
"compilerOptions": {
"baseUrl": "./",
"paths": {
"#/*": ["src/*"],
}
},
"exclude": ["node_modules", "dist"]
...
}
Reference:
https://github.com/vuejs/vetur/issues/423#issuecomment-405415204
I apologize if my answer which cannot help you.
According to the Vetur setup guide:
If you are using Webpack's alias or TypeScript's path mapping to resolve components, you need to update Vetur's tsconfig.json or jsconfig.json
For example:
└── src
├── components
│ ├── a.vue
│ └── b.vue
├── containers
│ └── index.vue
├── index.js
└── jsconfig.json
jsconfig.json:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"components/*": [
"src/components/*"
]
}
}
}
index.vue
import a from 'components/a.vue'
import b from 'components/b.vue'
It solved the problem in my case.
hi i am building video streaming app through telerik platform. My app structure looks like :
my-project
app
- package.json
- app.js
node_modules
package.json
server.js
I have added firebase and bitmovin player plugin to my node_modules. Now the Telerik platform documentation says : to add require references to package.json file.
I do not get which package.json file needs to be opened . There are two files. The first one in the Project root which looks like:
{
"dependencies": {
"tns-core-modules": "2.5.1",
"bitmovin-player": "7.2.0-rc6",
"firebase": "4.1.2"
},
"devDependencies": {
"nativescript-dev-android-snapshot": "0.0.6",
"#types/firebase": "2.4.31"
}
}
The other package.json file is in the app folder looks like :
{
"name": "tns-template-blank",
"main": "app.js",
"version": "2.5.0",
"author": "Telerik <support#telerik.com>",
"description": "Nativescript blank project template",
"license": "Apache-2.0",
"keywords": [
"telerik",
"mobile",
"nativescript",
"{N}",
"tns",
"appbuilder",
"template"
],
"repository": {
"url": "https://github.com/NativeScript/NativeScript/commit/30aca890749e9e3fb9bd0f5ddc9de5b6995859bc"
}
}
and the app.js file looks like :
var application = require('application'),
mainModule = 'navigation/navigation';
application.start({
moduleName: mainModule
});
I do not get in which package.json file needs to be configured and where to enter the require reference for the module (like bitmovin player & firebase ) as mentioned in the telerik platform documentation which is shown in the picture above step no. 8.
please guide.
The first package.json (i.e. root package.json) is where any plugins go. If using the CLI, you can do tns plugin add nativescript-dom and it would then modify the package for you to be:
{
"dependencies": {
"tns-core-modules": "2.5.1",
"bitmovin-player": "7.2.0-rc6",
"firebase": "4.1.2",
"nativescript-dom": "2.0.0"
},
"devDependencies": {
"nativescript-dev-android-snapshot": "0.0.6",
"#types/firebase": "2.4.31"
}
}
The dependencies section is what needs to be changed; it needs the plugin name and the version you will be using. It that your package.json file is already correct for what you installed. You can also use http://plugins.nativescript.rocks for a list of plugins and their current versions.
A couple notes; based on you saying you needed bitmovin-player and firebase but using NativeScript; this won't work. The firebase and bitmovin-player you have referenced are not NativeScript plugins, so they won't work. To my knowledge bitmovin does not have NativeScript version (but my NativeScript-ExoPlayer plugin might be a good replacement) and then the NativeScript-Firebase I believe is the plugin you want for Firebase support in NativeScript.
I also see that you are using tns-core-modules 2.5.x; this means you want to get plugins that are 2.x compatible; the 3.x plugins will NOT work with TNS 2.x (and a large number of 2.x plugins won't work in 3.x).
When using a plugin (for example using my nativescript-dom) you do a var dom = require('nativescript-dom'); (or you can use const dom = ... as NativeScript can use ES6 grammer). You do not have to point to the actual js file inside the plugin. If the plugin is built correctly; it will automatically use the correct js file inside the plugin.
Finally in NativeScript the DevDependancies are for anything that is not being put into the application. In this case the android-snapshot plugin runs some build code during the build phase of the application.
I'm trying to move one of my custom elements into a plug-in so that I can re-use it across projects.
I had a look at the skeleton plugin and noticed that it has a src/index.js that returns a config with all custom elements defined as globalResources.
So I tried the same thing and I basically have:
src/index.js
export function configure (config) {
config.globalResources([
'./google-map',
'./google-map-location-picker',
'./google-map-autocomplete'
]);
}
And then I have each one of my custom elements next to index.js, for example:
google-map.js
import {inject, bindable, bindingMode, inlineView} from 'aurelia-framework';
#inlineView(`
<template>
<div class="google-map"></div>
</template>
`)
#inject(Element)
export class GoogleMapCustomElement {
// All the Custom Element code here
}
I've also set up a basic npm script that runs babel on the code and sticks it in dist/:
"main": "dist/index.js",
"babel": {
"sourceMap": true,
"moduleIds": false,
"comments": false,
"compact": false,
"code": true,
"presets": [ "es2015-loose", "stage-1"],
"plugins": [
"syntax-flow",
"transform-decorators-legacy",
"transform-flow-strip-types"
]
},
"scripts": {
"build": "babel src -d dist"
},
Tbh I'm not entirely sure this is all correct but I took some of it from the skeleton plugin and it seems to run fine.
Anyway, the problem I'm having is that after I install the plugin (npm install --save-dev powerbuoy/AureliaGoogleMaps), add it to my aurelia.json in build.bundles[vendor-bundle.js].dependencies and tell aurelia to use it in main.js (.use.plugin('aurelia-google-maps')) I get:
GET http://localhost:9000/node_modules/aurelia-google-maps/dist/index/google-map.js (404)
So my question is, where does it get the dist/index/ part from?? I'm configuring my globalResources in index.js but nowhere does it say that I have an index folder.
What am I doing wrong?
Bonus question: What is the bare minimum required to transpile my ES6 plug-in code so that others can use it? Does my babel configuration look correct?
What about referencing your plugin within aurelia.json, like this:
{
"name": "aurelia-google-maps",
"path": "../node_modules/aurelia-google-maps/dist",
"main": "index"
}
I have absolutely no idea why, but in order to solve this problem I actually had to move my custom elements inside an index/ folder.
So now I have this:
- index.js
- index/
- custom-element-one.js
- custom-element-two.js
And my index.js still looks like this:
export function configure (config) {
config.globalResources([
'./custom-element-one',
'./custom-element-two'
]);
}
Where it gets index/ from I guess I will never know, but this works at least.
I did need the babel plug-in Marton mentioned too, but that alone did not solve the mystery of the made up path.
Edit: To elaborate a bit further, if I name my main entry point something other than index.js the folder too needs that name. For example, if I were to rename index.js main.js I would need to put my globalResources inside a folder called main/.
Update:
Edit: thanks for clarifying why you don't want to use the whole skeleton-plugin package.
Focusing on your original question: aurelia-cli uses RequireJS (AMD format) to load dependencies. Probably, your current output has a different format.
Add transform-es2015-modules-amd to babel.plugins to ensure AMD-style output, so it will be compatible with RequireJS and therefore with aurelia-cli.
"babel": {
"sourceMap": true,
"moduleIds": false,
"comments": false,
"compact": false,
"code": true,
"presets": [ "es2015-loose", "stage-1"],
"plugins": [
"syntax-flow",
"transform-decorators-legacy",
"transform-flow-strip-types",
"transform-es2015-modules-amd"
]
}
Original:
There are several blog post about plugin creation, I started with this: http://patrickwalters.net/making-out-first-plugin/ .
Of course, there have been many changes since then, but it's a useful piece of information and most of it still applies.
I'd recommend using plugin-skeleton as project structure. It provides you with a working set of gulp, babel, multiple output formats out-of-the-box.
With this approach, your plugin's availability wouldn't be limited to JSPM or CLI only but everyone would have the possibility to install it regardless of their build systems.
Migration is fairly easy in your case:
Download skeleton-plugin
Copy your classes + index.js into src/
npm install
...wait for it...
gulp build
check dist/ folder
most of your pain should now be gone :)
Here are some details based on my observations/experience.
1. Main index.js/plugin-name.js:
In general, a main/entry point is required, where the plugin's configure() method is placed. It serves as a starting point when using it within an Aurelia application. This file could have any name, usually it's index.js or plugin-name.js (e.g. aurelia-google-maps.js) to make it clear for other developers what should be included for bundling. Set that same entry point in package.json as well.
In addition to globalResources, you can implement a callback function to allow configuration overrides. That can be called in the application, which will use the plugin. Example solution
Plugin's index.js
export * from './some-element';
export function configure(config, callback) {
// default apiKey
let pluginConfig = Container.instance.get(CustomConfigClass);
pluginConfig.apiKey = '01010101';
// here comes an override
if (callback) {
callback(pluginConfig);
}
...
config.globalResources(
'./some-element'
);
}
Your app's main.js
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin('aurelia-google-maps', (pluginConfig) => {
// custom apiKey
pluginConfig.apiKey = '12345678';
});
aurelia.start().then(a => a.setRoot());
}
2. HTML and CSS resources:
If you have html only custom elements, you can make them available using globalResources.
Custom css styling is going to require a bit of additional configuration in bundling configuration (see below).
3. Using the plugin with aurelia-cli: Documentation
One of the first new features you'll see soon is a command to help you with 3rd party module configuration. The command will inspect a previously npm-installed package, and make a configuration recommendation to you, automating the process if you desire.
While we are looking forward to that above moment, let's edit aurelia.json:
Configure plugin dependencies. If there are any external libraries (e.g. Bootstrap), then those should be included before your plugin.
Include your plugin:
...
{
"name": "plugin-name",
"path": "../node_modules/plugin-name/dist/amd",
"main": "plugin-name",
"resources": ["**/*.html", "**/*.css"] // if there is any
},
...
Now, your plugin is ready to include it in main.js as showed in Section 1..
I hope you didn't get sick of reading the word 'plugin' so many (21!) times. :D
I am building an Aurelia app with TypeScript and decided to try out Semantic UI. I followed this question (Aurelia Semantic dropdown) and it helped me install Semantic into Aurelia. It seems that it got installed already built with default theme. Is there a way I can install semantic into Aurelia TypeScript app, then add some custom gulp tasks to build according to my own theme.config? I would like also to override some variables like colors, font sizes etc. After it is built I'd like to use the built version in Aurelia view models (TypeScript) and in my views. How can I achieve that?
Here is how I solved this:
Installed semantic to some local folder with npm
Copied over the semantic folder and semantic.json to web app root folder (so semantic folder is on the level where I have node_modules and jspm_packages)
Inside semantic.json I specified the list of components I want to include in my app
Inside semantic.json I modified "output" and "clean" paths to match the folders where I serve files from.
The semantic.json:
{
"base": "semantic",
"paths": {
"source": {
"config": "src/theme.config",
"definitions": "src/definitions/",
"site": "src/site/",
"themes": "src/themes/"
},
"output": {
"packaged": "../dist/semantic",
"uncompressed": "../dist/semantic/components/",
"compressed": "../dist/semantic/components/",
"themes": "../dist/semantic/themes/"
},
"clean": "../dist/semantic"
},
"permission": false,
"autoInstall": false,
"rtl": false,
"version": "2.2.4",
"components": [
"button",
...
"site"
]
}
Inside Aurelia's gulp definitions I added semantic build task
The build/tasks/build.js:
var buildSemantic = require('../../semantic/tasks/build');
gulp.task('build-semantic', buildSemantic);
...
gulp.task('build-layout', function (callback) {
return runSequence(
'build-html',
'build-semantic',
'build-less',
callback
);
});
When coding I go into semantic src (e.g. semantic\src\themes\default\globals\site.variables) and modify things in there
Run gulp build-layout
The output is added to my dist folder and I can use it in my views
As for the view models I created some helper components to be used as aurelia attributes e.g. the semantic tooltip:
import {customAttribute, inject} from 'aurelia-framework';
import * as $ from 'jquery';
import '../semantic/semantic.min.js';
#customAttribute('semantic-tooltip')
#inject(Element)
export class SemanticTooltip {
constructor(private element: HTMLElement) {
}
attached() {
$(this.element).popup();
}
}
Usage:
<i class="info circle icon" data-content="Sample tooltip" semantic-tooltip></i>