I am new to es6 and trying to add a filter to an app but keep getting a module not found error. Here's what I have:
index.module.js
...other app imports
import { GlCapitialize } from './filters/glcapitialize';
...
angular.module...(other app controllers, directives, etc)...
.filter('glCapitialize', GlCapitialize);
filter - which is probably completely wrong
export function GlCapitialize(input) {
'ngInject';
return (input, scope)=> {
if (input!=null)
input = input.toLowerCase();
return input.substring(0,1).toUpperCase()+input.substring(1);
}
}
Related
I want to use web workers in my app.
This is my worker:
import { processOrderFieldValue } from './utils';
export function colsAndRowsWorker() {
this.onmessage = () => {
processOrderFieldValue();
// in this place the compiler is trying to convert this module to this:
//Object(_WEBPACK_IMPORTED_MODULE_0__["processOrderFieldValue"])
//and I've got this:
//Uncaught ReferenceError: _WEBPACK_IMPORTED_MODULE_0__ is not defined
postMessage('oops');
};
}
I also tried to use importScripts('./utils'), but also got an error.
How to use modules in worker inside the React app? Perhaps, I can define the function as a relative path in importScripts()?
We have an app based on backbone, marionette and handlebars, without import/export or require methods, managed with grunt and we are trying to migrate to webpack.
I am having an issue with a custom helper for handlebars.
The code of our helper :
'use strict';
function I18n() {
this.constructor(arguments);
}
I18n.prototype = {
constructor: function () {
...some stuff
}
get: function () {
...some stuff
}
...some other functions
}
ourNameSpace.I18n = new I18n();
And it's included with this function in a file to load it globally :
Handlebars.registerHelper('i18n', _.bind(ourNameSpace.I18n.get, ourNameSpace.I18n));
Then we are using it in the template like this :
{{i18n "LblEmail"}}
I tried to use handlebars-loader and I added this query object into webpack.config to add it to the bundle :
{
test: /\.hbs$/,
use: {
loader: 'handlebars-loader',
query: {
helperDirs: [
path.resolve(__dirname, 'public/assets/js/common/i18n/')
]
}
}
}
Webpack add our helper code in the bundle, but when it's supposed to be called in the template I have this error :
Uncaught TypeError: __default(...).call is not a function
Webpack generated code of the bundle where is the call :
...
+ alias2(__default(__webpack_require__(2)).call(alias1,"LblEmail",{"name":"i18n","hash":{},"data":data}))
...
In a second time I also tried to add an export in the helper, even though we don't use the import/export method (yet) in our app. Adding this at the end of helper file :
export default I18n
That fix the error but the helper doesn't seem to work because all texts on the page are empty (instead of displaying i18n translation or keys)
Does someone did the same kind of migration with handlebars custom helper or would know how I can refactor that so Webpack can handle it properly and the bundle can execute it correctly ?
So after few months I will reply to my own question, I managed to fix our problem like this :
I rewrite our old legacy helper (with custom functions) by creating more modern ones (three, for our three functions that was in legacy helper) relying on I18nJS:
import I18nJs from 'i18n-js';
const I18n = key => I18nJs.t(key);
export default I18n;
It is loaded by webpack with handlebars loaders like this :
{
test: /\.hbs$/,
use: {
loader: 'handlebars-loader?runtime=handlebars/runtime',
query: {
helperDirs: [path.resolve(__dirname, 'src/js/common/i18n/helper')],
inlineRequires: '/images/',
precompileOptions: {
knownHelpersOnly: false,
},
},
},
}
And in our template we did not have to change anything to use it :
<label>{{i18n "LblEmail"}}</label>
To use localisation on javascript files however we had to make some changes :
I created a "helper" (not handlebar helper) implementing same logic than handlebars helper :
import I18nJs from 'i18n-js';
const I18n = {
get(key) {
return I18nJs.t(key);
},
... some other functions
};
export default I18n;
We import this file and use its function as usual in modern stacks :
import I18n from '../common/i18n/I18nSt';
...
console.log(I18n.get('PasswordMissing'));
So we had to do minor refactor when we call our translations function in our js files, It was like this before :
console.log(OurNamespace.I18n.get('PasswordMissing'));
I would like to create a custom page using react but I cannot find the documentation to do this. On the Sonarqube documentation, there only the way to create a custom page using javascript only and I don’t understand how the example plugin works with react.
Can you tell me if there is a documentation that I can use.
Short answer: There isn't. There is barely anyone (no one in fact, as far as I've seen) using custom pages currently.
However, it IS possible. You need to create a react project with Webpack (or a similar JS packager).
I also recommend using Create-React-App. This fixes a lot of the setup for you. After that, in your index.js you use the example code from the SonarQube wiki.
Here is an example:
/*
PRODUCTION ENTRYPOINT
*/
import React from 'react';
import ReactDOM from 'react-dom';
import Project from './components/Project';
import './main.css';
window.registerExtension('myplugin/coverage', function (options) {
appendCustomCSS();
let isDisplayed = true;
window.SonarRequest.getJSON('/api/measures/component', {
component: options.component.key,
metricKeys: 'coverage'
}).then(function (response) {
if (isDisplayed) {
let obj = JSON.parse(response.component.measures[0].value);
let div = document.createElement('div');
render(obj, div);
options.el.appendChild(div);
}
});
return function () {
isDisplayed = false;
};
});
function appendCustomCSS() {
let fileref = document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", "/static/myplugin/coverage.css");
document.head.append(fileref);
}
function render(objectArray, container) {
ReactDOM.render(<div className="Coverage"><Project objects={objectArray}/></div>, container);
}
i want to create Angular 2 Modular app. All modules will be independent, but they won't have completely separate functionality. I have some problems with dependency injection, i don't know how to properly design it.
Example code:
Each module is created for another device (mobile, tablet, pc).
Each of them have, for example, handler that looks like that:
#Injectable
export class PcDeviceHandler
canHandle(type) : boolean
{
return type == "pc";
}
handle(args)
{
//do something
}
}
Core module has component with list of supported devices.
#Component([ ... ])
export class SupportedDevicesCmp
{
handlers = [];
handleDevice(args, deviceType)
{
for(let handler of this.handlers){
if(handler.canHandle(deviceType))
{
handler.handle(args);
break;
}
}
}
The question is:
How to inject all handlers from modules to this component?
Core module shouldn't know about these handlers.
When ever my home page in angular 2(ionic 2) app is loaded I want call service/function. How to achieve this?
For the first time when the app is loaded(home page is loaded) I can write this in the constructor, but when user start using the app and push new pages into nav controller and pop them to come back to home page, the constructor wont get called again.
I am stuck here.
I would like to know what is the best way to achieve this feature?
I am new to angular2 and ionic2 framework (also don't have experiences in angular1 and ionic1), please help me out.
Many Many Thanks.
update
sample code of what I tried, but didn't worked.
import {Page, NavController, Platform, Storage, SqlStorage} from 'ionic-angular';
#Page({
templateUrl: 'build/pages/page1/page1.html'
})
export class Page1 {
static get parameters(){
return [[NavController],[Platform]];
}
ngOnInit() {
console.log("Showing the first page!");
}
constructor(nav, platform){
this.nav = nav;
this.platform = platform;
}
}
onPageWillEnter() worked for me.
import {Page, NavController, Platform, Storage, SqlStorage} from 'ionic-angular';
#Page({
templateUrl: 'build/pages/page1/page1.html'
})
export class Page1 {
static get parameters(){
return [[NavController],[Platform]];
}
onPageWillEnter() {
console.log("Showing the first page!");
}
constructor(nav, platform){
this.nav = nav;
this.platform = platform;
}
}
Ionic lifecycle hook
IONIC 2 RC1 Update
ionViewWillEnter() {
console.log("this function will be called every time you enter the view");
}
You can leverage the lifeCycle-hooks, specifically ngOnInit() or ngAfterViewInit().
Here is a simple tutorial.
For Example:
// Annotation section
#Component({
selector: 'street-map',
template: '<map-window></map-window><map-controls></map-controls>',
})
// Component controller
class StreetMap {
ngOnInit() { //here you can call the function wanted
// Properties are resolved and things like
// this.mapWindow and this.mapControls
// had a chance to resolve from the
// two child components <map-window> and <map-controls>
}
}
Update: it works for pure Angular2 applications, for IonicFramework specific solution see
#DeepakChandranP's answer.