I've been trying to setup using Sencha Cmd for our ExtJS 4.2.2 project, and the build completes successfully, but when I try to run the app I get this:
TypeError: comp is null
I'm running the testing build, so the app.js is concatenated but not minified.
Same thing happens if I run the production build.
If I execute from my raw source code files, the app runs fine.
Its happening in this code in the generated app.js:
/**
* Creates new LoadMask.
* #param {Object} [config] The config object.
*/
constructor : function(config) {
var me = this,
comp;
if (arguments.length === 2) {
if (Ext.isDefined(Ext.global.console)) {
Ext.global.console.warn('Ext.LoadMask: LoadMask now uses a standard 1 arg constructor: use the target config');
}
comp = config;
config = arguments[1];
} else {
comp = config.target;
}
// Element support to be deprecated
if (!comp.isComponent) {
if (Ext.isDefined(Ext.global.console)) {
Ext.global.console.warn('Ext.LoadMask: LoadMask for elements has been deprecated, use Ext.dom.Element.mask & Ext.dom.Element.unmask');
}
comp = Ext.get(comp);
this.isElement = true;
}
me.ownerCt = comp;
if (!this.isElement) {
me.bindComponent(comp);
}
me.callParent([config]);
if (me.store) {
me.bindStore(me.store, true);
}
},
Related
I managed to use an object(to log telemetry) from CDN link in the actual application but unfortunately my jest tests failed. Is there a way to mock this object or is there a way to skip telemetry code (don't execute those lines of code) if we are just running tests?
declare const oneDS: any;
let logger = new oneDS.ApplicationInsights(); // Works in usual application but fails for jest tests
The code can be skipped only if it was written with this intent, e.g.:
let logger;
if (process.env.NODE_ENV === 'production') {
logger = new oneDS.ApplicationInsights();
} else {
logger = /* dummy implementation */
}
It can be mocked in tests as any other global variable:
beforeEach(() => {
global.oneDS = {
ApplicationInsights: jest.fn().mockReturnValue(/* dummy implementation */)
};
});
So I have this Create react app (I don't really understand webpack), and I wanted to use EaselJS on this one, However the NPM counterpart of EselJS is their version 2 (BETA) and is quite unstable and undocumented - That's why I wanted to use the minified version.
I have a easeljs.min.js on my project but I don't know how to "import it".
doing `import './easeljs.min.js' seems to also generate a lot of linting issues and seems to nor work.
EDIT:
I tried using react-helmet and append it as a script tag, but it seems that react is doing something with the minified version and causes it to error. (unexpected token <)
So I was able to fix it:
I installed react-app-rewired created config-overrides.js and added this code:
module.exports = function override(config, env) {
if (!config.resolve || Object.keys(config.resolve).length === 0) {
config.resolve = {};
}
if (!config.module || Object.keys(config.module).length === 0) {
config.module = {};
}
if (!config.module.rules || config.module.rules.length === 0) {
config.module.rules = [];
}
const resolve = {
alias: {
createjs: "createjs/builds/1.0.0/createjs.js"
}
};
config.resolve = {
...config.resolve,
...resolve
};
config.module.rules.push({
test: /node_modules[/\\]createjs/,
loaders: ["imports-loader?this=>window", "exports-loader?window.createjs"]
});
return config;
};
It seems that it is an issue with createjs itself https://github.com/CreateJS/Combined/issues/12
I also ended up using this repo for createjs.
I have several different angular modules that I want to dynamically concatenate such that each module has a different single output file.
so that if in the resources/assets/js/angular/modules directory I have:
Role
- controllers
roleIndexController
- app.js
Descriptions
-controllers
descriptionIndexController
-app.js
And I want this to end up being two files:
RoleModule.js
DescriptionsModule.js
And I don't want to explicitly have to add each module to the gulp file every time I add a new one.
I've tried adding glob characters using webpack in laravel elixir:
require('laravel-elixir-webpack');
elixir(function (mix) {
mix.webpack(
['angular/app.js', '.angular/modules/**/app.js'],
{
output : {
filename : './angular/app.js'
}
})
and also just using gulp-webpack and glob_entries:
gulp.task('compileAngularScripts', function(){
return gulp.src('angular/app.js')
.pipe(webpack({
entry : glob_entries('./resources/assets/js/angular/modules/**/app.js'),
output : {
filename : 'app.js'
}
}))
.pipe(gulp.dest('test/'));
});
I can't even seem to get the glob wildcard characters to work in order to dynamically concatenate files, much less break each module into it's own file.
Is there a way to do this using gulp?
I accomplished this by using the glob npm package with webpack
var glob = require('glob');
var webpack = require('gulp-webpack');
elixir(function (mix) {
.task('compileScripts')
gulp.task('compileScripts', function () {
return gulp.src('angular/app.js')
.pipe(webpack({
entry : entries(),
output : {
filename : "[name]Module.js"
}
}))
.pipe(gulp.dest('public/js/angular/modules'));
});
function entries() {
var entries = {};
glob.sync('./modules/**/Resources/assets/angular/app.js').forEach(function (url) {
var moduleNmae = url.split("/")[2];
entries[moduleNmae] = url;
});
return entries;
}
I get this JavaScript error when running any version of wkhtmltopdf with patched Qt:
Warning: undefined:0 Error: [$injector:modulerr] Failed to instantiate module ng due to:
'undefined' is not an object
http://errors.angularjs.org/1.5.7/$injector/modulerrp0=ng&p1='undefined'%20is%20not%20an%20object
(I'm trying to render a page with angularjs 1.5).
When I use a version of wkhtmltopdf without patched Qt I don't get the error and everything works fine.
I use this heroku buildpack which installs version 0.12.3 with patched Qt, and I got this error.
Any idea how to solve my problem? I may install wkhtmltopdf without patched Qt on production but it seems I will have to compile it...
I finally managed to make it work with all versions: I needed a special version of the .bind() JavaScript function polyfill:
var isFunction = function (o) {
return typeof o == 'function';
};
var bind,
slice = [].slice,
proto = Function.prototype,
featureMap;
featureMap = {
'function-bind': 'bind'
};
function has(feature) {
var prop = featureMap[feature];
return isFunction(proto[prop]);
}
// check for missing features
if (!has('function-bind')) {
// adapted from Mozilla Developer Network example at
// https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind
bind = function bind(obj) {
var args = slice.call(arguments, 1),
self = this,
nop = function() {
},
bound = function() {
return self.apply(this instanceof nop ? this : (obj || {}), args.concat(slice.call(arguments)));
};
nop.prototype = this.prototype || {}; // Firefox cries sometimes if prototype is undefined
bound.prototype = new nop();
return bound;
};
proto.bind = bind;
}
Is there a good way to execute the gcloud commands to deploy an app to GAE and see the stderr/stdout echoed back at the console? I've tried gulp-exec but it seems to batch up the output, dumping only upon completion. It also won't play nicely when trying to preview locally.
In the end I didn't want to have to use another npm, but loosely inspired by a portion of gulp-run, I came up with the following that assumes a 'clean' and 'build' task exists, and also overrides some constants per environment for a gulp-replace task that is part of my 'build', the key being the spawn of a subshell and piping its output to the current process's:
// gulp deploy [-a dev|staging|prod]
gulp.task('deploy', function() {
var commands = {
remote: 'gcloud preview app deploy app.yaml -q --set-default --project ',
local: 'gcloud preview app run app.yaml'
};
var environments = {
dev: {
app: 'myapp-dev',
},
staging: {
app: 'myapp-staging',
MY_ENDPOINT: 'https://staging.example.com'
},
prod: {
app: 'myapp',
MY_ENDPOINT: 'https://example.com'
}
};
var command = commands.local;
var env = environments[argv.a];
if (env) {
command = commands.remote + env.app;
constantsMap.MY_ENDPOINT = env.MY_ENDPOINT;
}
// Now that our constants are configured, kick off the build, then deploy.
runSequence('clean', 'build', function() {
var title = util.format('$ %s\n', $.util.colors.blue(command));
process.stdout.write(title);
// run the command in its own subshell and pipe the output to our own.
var subshell = childProcess.spawn('sh', ['-c', command]);
subshell.stdout.pipe(process.stdout);
subshell.stderr.pipe(process.stderr);
});
});
This relies on the npms: run-sequence, util, yargs, gulp-load-plugins
If you want to execute commands following code snippet will help you. I have wrapped it inside a promise as you are using gulp:
var cp = require('child_process');
function executeCommand(command, option) {
return new Promise(function (resolve, reject) {
var args = [option.something, option.something];
var ls = cp.spawn(command, args);
var output = "";
ls.on('error', function (err) {
reject(err);
});
ls.stdout.on('data', function (data) {
output += String(data);
console.log(output)
});
ls.on('exit', function (code) {
if (code === 0) {
resolve({
"output": output
});
} else {
reject(Error(output));
}
});
});
}
I am using gulp-gae and it seems it works well.
Supported commands are appcfg.py and dev_appserver.py (in current version). It can be also configured to override some values from the given app.yaml.