We Keep Coding

ExtJS: Dynamic Package loading and build profiles

I'm trying to use dynamic package loading in my Sencha ExtJS App.
I created the package in my workspace (sencha generate package SR2000) and added SR2000 to the uses-Array in app.json:
"requires": [
"package-loader",
"font-awesome",
...
],
"uses": ["SR2000"],
In Application.js i added the loading to launch:
launch: function (profile) {
console.log('Current Config:', Base.config.Config.getConfig());
Ext.Package.load('SR2000');
Ext.Viewport.getController().onLaunch();
Ext.getBody().removeCls('launching');
this.callParent([profile]);
},
I then watch / build the app with option -uses:
sencha app watch -uses <build_profile>
When loading the app in the Browser i get error 404
The app is trying to load:
http://localhost:1841/build/development/wolfitsmart/resources/SR2000/SR2000.js
but the build output for the package is here:
http://localhost:1841/build/development/wolfitsmart/<build_profile>/resources/SR2000/SR2000.js
How can i get the package loader to look in the build_profile-Folder, or get the build to put the package in the resources-Folder?
I added the build_profile-Folder to resources in app.json, that did not help:
"resources": [
{
"path": "resources",
"output": "shared"
}
],
changed to:
"resources": [
{
"path": "resources",
"output": "shared"
},
{
"path": "${build.id}/resources"
}
],

Some useful instructions for building and using dynamic packages.
sencha app build -dev -pac yourpackagename /// build development
sencha app build -pac yourpackagename // build release
sencha app watch -pac yourpackagename
if (Ext.Package.isLoaded('packagename')) {
// package is loaded
} else {
Ext.Package.load('packagename').then(function () {
// package is loaded
});
}

Angular 2.0.0 with angular-cli 1.0.0-beta.15: using typescript, how to integrate external libraries as in previous versions

I'm creating an application using Angular 2. I started using it in the RC2 phase and after alot of updates I made to my app according to the released RC I finally got it to run on the Angular 2.0.0 final version.
As I'm using the angular-cli as well and updated to the currently latest version (1.0.0-beta.15). I also did all the required changes needed as it e.g. now uses webpack instead of SystemJs.
My problem now is, that I can't seem to find a way to include external libraries (lets take jQuery for this example) to my application without the need to include from a CDN.
In previous versions of Angular 2 there was an angular-cli-build.js like this:
var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
module.exports = function(defaults) {
return new Angular2App(defaults, {
vendorNpmFiles: [
'systemjs/dist/system-polyfills.js',
'systemjs/dist/system.src.js',
'zone.js/dist/**/*.+(js|js.map)',
'es6-shim/es6-shim.js',
'reflect-metadata/**/*.+(js|js.map)',
'rxjs/**/*.+(js|js.map)',
'#angular/**/*.+(js|js.map)',
'jquery/dist/*.min.+(js|map)'
]
});
};
Which (looking to the last line of the vendorNpmFiles array) mapped the jquery library to the folder of the ready build app together with the system-config.js which had a little something like this:
/** Map relative paths to URLs. */
const map: any = {
'jquery': 'vendor/jquery'
};
And what it did was creating a vendor folder inside the final build folder (by default called dist) from which I could simply import jquery from in my parent most index.html with a statement like:
<script src="vendor/jquery/dist/jquery.min.js"></script>
My question now is how to get a similar result as described in the angular-cli version I'm using.

For now I use the libraries globally so I include them in the angular-cli.json
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": "assets",
"index": "index.html",
"main": "main.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"mobile": false,
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/font-awesome/css/font-awesome.min.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
This way it is also not needed to include them into the index.html.
If someone finds another way to do it I'm still very interested in it.

Error using materialize.css (0.97.7) with Aurelia CLI (current version)

The Problem:
I am trying to get the materialize.css work with the Aurelia CLI.
But what i get is the whole materialize.js as an error output in the console
and a part of the hammerjs as well i think.
What i've done
The Aurelia cli compiles fine with the follwing lines in the aurelia.json:
"jquery",
{
"name": "hammerjs",
"path": "../node_modules/hammerjs",
"main": "hammer",
"deps": ["jquery"]
},
{
"name": "materialize",
"path": "../node_modules/materialize-css/dist",
"main": "js/materialize",
"deps": ["jquery", "hammerjs"],
"resources": [
"css/materialize.css"
]
},
Maybe i am missing something here. I thought this must be as simple as the implementation of bootstrap, but i guess i was damn wrong.

Solved it so far.
The problem is the implementation of the materialize.js in the dist folder.
The *.js files in there are not compatible with the aurelia build system.
Easiest way is to change the aurelia.json as followed:
{
"name": "materialize",
"path": "../node_modules/materialize-css",
"main": "js/materialize",
"deps": ["jquery", "hammerjs"]
},
Finally bind the css files for materialize.css via the cdn that is provided.
Thats the best solution i've got so far.
Any better solutions are welcome.
/edit
Seems like this is not properly working either. As soon as you try to invoke materialize functions, you get errors over errors.

For aurelia.json I added:
{
"name": "materialize",
"path": "../node_modules/materialize-css",
"main": "js/materialize",
"deps": ["jquery", "hammerjs"],
"resources": [
"bin/materialize.css"
]
}
And for my template I added:
<require from="materialize/bin/materialize.css"></require>

Brunch, RequireJS, and ReactJS is giving me "Error: Mismatched anonymous define() module"

The problem:
I cant get React.js to function at all in a requirejs and brunch situation.
I get a mismatched definition error with the react.js library, and react does not show up in the windows object.I am unsure as to what to do, and was hoping some one here had guidance in how resolve this issue. Perhaps I am using this combination of technology incorrectly, maybe it is not possible? Any insight into what I may be doing wrong or suggestions to resolve this problem would be greatly appreciated!
Btw, If I remove the bower reference to react.js, and remove all react.js information from the application, it all works correctly.
See my below edit for some additional comments and findings!
Actual error:
Error: Mismatched anonymous define() module: function (){var
define,module,exports;return (function e(t,n,r){function
s(o,u){if(!n[o]){if(!t[o]){var a=typeof
require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return
i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw
f.code="MODULE_NOT_FOUND",f}var
l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var
n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return
n[o].exports}var i=typeof require=="function"&&require;for(var
o=0;odereq,module,exports){*
The Project file structure is as follows:
Projectname
|-app
|-assets
|-index.html
|-components
|-appinit.js
|-styles
|-bower_components
|-react
|-requirejs
|-node_modules
|-public
|-bower.json
|-brunch.config
The brunch.config file, I believe is pretty standard, here are the contents:
exports.config = {
"modules": {
"definition" : "amd",
"wrapper" : "amd"
},
"files": {
"stylesheets": {
"defaultExtension": "css",
"joinTo": {
"css/app.css": /^app\/styles/,
"css/vendor.css": /^(bower_components|vendor)/
}
},
"javascripts": {
"joinTo": {
"js/app.js": /^app/,
"js/vendor.js": /^(bower_components|vendor)[\\/]/,
"test/js/test.js": /^test(\/|\\)(?!vendor)/,
"test/js/test-vendor.js": /^test(\/|\\)(?=vendor)/
},
"order": {
"before": [
'bower_components/requirejs/require.js'
]
}
}
}
};
Here are the contents for the index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>My Application Test</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="/css/app.css">
<script src="/js/vendor.js"></script>
<script src="/js/app.js"></script>
<script>
require.config({
"paths": {
"react": "bower_components/react/react-with-addons"
},
"shim": {
"react": {
exports: "React"
}
},
waitSeconds: 10
});
require(["components/appinit"], function (appInit) {
appInit.init();
});
</script>
</head>
<body style="height:100%; width:100%;">
<div id="main-content" style="margin-left: 100px; margin-top: 22px;">
My Main Content Goes Here.
</div>
</body>
</html>
and the contents of the appinit.js file:
define(function() {
var mainModule;
return mainModule = {
init: function () {
console.log("This is a test.");
return mainModule;
}
};
});
The bower.json file contains the following:
{
"name": “brunchreactrequirejstest",
"version": "1.0.0",
"homepage": "",
"authors": [
“person x"
],
"description": “description",
"main": "public/js/app.js",
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"requirejs": "~2.1.15",
"react": "~0.12.2"
}
}
EDIT
So I believe I am getting closer to getting this resolved. I just found out that brunch only adds the definition wrappers around non-vendor javascript. So, react.js is being compiled to the vendor.js file without any definition name, so require.js throws the exception of react.js being anonymous. So, perhaps I need to have brunch run r.js on the vendor file during the compilation process? Does this sound correct? How do I go about doing that in brunch?

The React project does not provide an AMD interface out of the box, and as you noted in your edit this is not something Brunch will do for you on vendor files.
Your options appear to be either converting your project to use CommonJS module patterns or use an AMD adapter such as https://github.com/philix/jsx-requirejs-plugin.

Possible Solution:
So I have react now functioning in a requirejs(AMD) environment. There is one problem that I see with my approach, and that is that I believe some libraries that work with react expect react to be exposed as a global object.I believe I can probably shim this into the requirejs export.config() by creating a requirejs definition that manually places react into the browser window scope(more on this later.)
Following are the changes I have made that have allowed react to work in an AMD/RequireJS environment:
The (new) brunch.config file:
exports.config = {
"modules": {
"definition" : "amd",
"wrapper" : "amd"
},
"files": {
"stylesheets": {
"defaultExtension": "css",
"joinTo": {
"css/app.css": /^app\/styles/,
"css/vendor.css": /^(bower_components|vendor)/
}
},
"javascripts": {
"joinTo": {
"js/app.js": /^app/,
"js/vendor.js": /^(bower_components|vendor)[\\/](?!react\/)/,
"test/js/test.js": /^test(\/|\\)(?!vendor)/,
"test/js/test-vendor.js": /^test(\/|\\)(?=vendor)/
},
"order": {
"before": [
'bower_components/requirejs/require.js'
]
}
}
},
"plugins":{
"react": {
"harmony": "yes"
}
}
};
The (new) index.html 'head' now only consists of this:
<link rel="stylesheet" href="/css/app.css">
<script src="/js/vendor.js"></script>
<script src="/js/app.js"></script>
<script>
require(["components/appinit"], function (appInit) {
appInit.init();
});
</script>
The build.js file: So this file i created is executed by node.js when I call 'npm start' on the project, which you will see in the package.json file further below:
({
baseUrl: ".",
optimize: "none",
paths: {
react: "bower_components/react/react-with-addons"
},
name: "react",
out: "vendor/react-built.js"
})
basically, it assigns the bower path to the react path, and the name grabs the bower path so that it knows the location of the file that r.js will optimize. The require.js optimized file is then thrown into the vendor folder as react-built.js. If you recall from above, in my new brunch config file, I exclude the bower-react javascript library from being compiled into the final vendor.js file, because i will already be adding the requirejs optimized react library that is generated with this build.js file.
So the scripts section of the NPM package.json file looks like this:
"scripts": {
"start": "node node_modules/requirejs/bin/r.js -o build.js && brunch watch --server"
}
Essentially, when you call 'npm start', r.js is executed with the build.js file passed into it, afterwards brunch is called.
So the next part, as es128 has mentioned, is to get any JSX annotated files to get preprocessed into javascript before brunch wraps them for AMD inclusion.
== Edit
So installing the react-brunch plugin via npm works wonderfully. .jsx files get compiled to javascript upon saving the .jsx file. I updated the above brunch-config file with the plugin information. I have yet to shim and export React globally into the window scope, but I believe that may be a different StackOverflow topic since it does not relate to my original question.

How to move bower dependencies into place

I have a HTML-based project and I am using a bower.json to get all the dependencies together:
{
"name": "MyProject",
"version": "0.1",
"main": "index.html",
"dependencies": {
"modernizr": "2.8.3",
"classie": "1.0.1",
"jquery": "2.1.1",
"font-awesome": "4.2"
}
}
The whole thing is in git and I don't want to checkin the bower_components directory. So I want to move the libraries into my project using some sort of script mechanism.
The situation:
I want to have the following directory structure:
index.html
css
main.css
js
main.js
lib
js
jquery
jquery.min.js
css
jquery-ui
jquery-ui.min.css
fonts
...
Some libs not only have .js files but also css as well as font files
Some libraries (e.g. font awesome) reference files within the library structure
Update
I cam up with a rake script based approach (See below). But I wonder, if there is a more elegant approach based on Javascript / NodeJS

would it be easier to use a .gitignore file?

I think its okay if you use git ignore to avoid bower_components and node_modules. but what you need there is .bowerrc file with this:
{
"directory": "app/libs"
}
with that route you can specified the destination folder.
and your bower.json
{
"name" : "test",
"version": "0.1",
"dependencies" : {
"jquery-ui" : "latest"
},
"install" : {
"path" : {
"css": "src/css",
"js": "src/js"
},
"sources" : {
"jquery-ui" : [
"components/jquery-ui/ui/jquery-ui.custom.js",
"components/jquery-ui/themes/start/jquery-ui.css"
]
}
}
}
or it can be possible as well using a task runner like grunt or gulp

I came up with the following solution, which is based on a Rake script:
desc 'Copy the bower libs to the projects sources'
task :copy_libs do
js_lib = 'js/lib'
`rm -fr #{js_lib}`
`mkdir -p #{js_lib}`
libraries = {
js: [
'jquery/dist/jquery.min.js',
'jquery/dist/jquery.min.map',
'modernizr/modernizr.js',
'classie/classie.js'
],
css: [
'font-awesome/css/font-awesome.min.css'
],
fonts: [
'font-awesome/fonts/fontawesome-webfont.woff',
'font-awesome/fonts/fontawesome-webfont.ttf',
'font-awesome/fonts/fontawesome-webfont.svg',
]
}
bower = 'bower_components'
libraries.each do |type,libs|
`mkdir -p lib/#{type}`
libs.each do |lib|
`cp #{bower}/#{lib} lib/#{type}/`
end
end
end