How to use subproject with Apportable? - subproject

Currently Apportable cannot reference C++ classes in subproject.
Dexing classes.
Archiving Build/android-armeabi-debug/AAAA/apk/lib/armeabi/libconfig.a
Indexing Build/android-armeabi-debug/AAAA/apk/lib/armeabi/libconfig.a
Linking Build/android-armeabi-debug/AAAA/apk/lib/armeabi/
/Users/Eonil/Desktop/Apportable Bug Reporting/2013-06-21/aaaa2/AAAA/AAAA/ error: undefined reference to 'BBBB::bbbb()'
scons: *** [Build/android-armeabi-debug/AAAA/apk/lib/armeabi/] Error 1
scons: building terminated because of errors.
Exception AttributeError: "'NoneType' object has no attribute 'pack'" in <bound method ZipFile.__del__ of <zipfile.ZipFile instance at 0x10a1e8b90>> ignored
Erionirr:AAAA Eonil$
I think this needs additional setup, but I cannot figure it out. Specifically, in this section in configuration.json file.
//Sub projects
"modules": [],
How can I make Apportable build and link subproject correctly?

Ideally you should be able to add target dependancies in your xcode build phases and then link that sub-project in.
Else if you want to manually specify an added module the layout is as follows:
"project": "project_name",
"build_cwd": "../some_dir",
"target": "the_target_of_the",
"project_config": "Release"


Defining a TypeScript debug variable

I'm running into a brick wall with what I guess should be a simple task - I want a single variable that determines if the application is in debug state - i.e. debug = false so that I can use this variable, as you may expect, in any class and log messages accordingly. Annoyingly however, no matter what I try, I simply cannot get access to this variable.
I have an app.ts file that imports every class and instantiates them. Defining a global variable at the top of this file did not work, and likewise defining them in a global.d.ts file did not work either - the compiler simply cannot see them. For the record my tsconfig.json file looks like this:
"files": [
"compilerOptions": {
"noImplicitAny": true,
"target": "es2015"
The global.d.ts file itself is incredibly simple...
declare let appDebug: boolean;
And its value is set in the app.ts file as mentioned previously. What gives? How can I essentially pass this value into every class?
The files setting doesn't support globs/patterns - only an explicit list of files, so you should see an error when you try to compile in typescript via tsc -p . complaining about the "./resources/assets/js/declarations/**/*.d.ts" bit.
Documentation here:

How to access a project's package.json file from an installed package

I've written a React component that I've published on npm (reactify-markdown). The component's props allow the user to specify which markdown-it plugins they'd like included when rendering. I assume in the common case (i.e. in my case), this set of plugins will be the same for the entire project.
I'd like to create an optional custom config section in the importing project's package.json that includes a list of plugins and rules used when configuration markdown-it's role in reactify-markdown, akin to markdown-it-loader's options.use syntax.
"dependencies": {
// ...
"markdown-it": "*",
"markdown-it-underline": "*",
"reactify-markdown": "*",
// ...
// ...
"reactify-markdown": {
"use": [
"disable": [ "link" ],
"enable": [ "image" ]
How would I go about accessing this section from inside my reactify-markdown code?
The ugly solution is to walk the directory structure up until it finds a package.json file, but I foresee all kinds of issues with that (permissions issues, following symbolic links, etc).

How to invoke a javascript function (generated from typescript) trapped within “System.register()” module while using Google protobuf?

Update: It seems that, the problem is coming due to protobuf. I am fine with other solution as well, which help me to fix the Google protobuf issues. This problem boils down to:
How to integrate Google protobuf with Typescript/Javascript for the browser?
I am retaining below question for the future purpose.
We have moved our application from Javascript to Typescript for obvious advantages of OOP etc..
Earlier invoking a direct javascript function from Html was as straight forward as:
Now with Typescript, all the files are combined into a single autogenerated .js file.
In this single file, individual code of every file are isolated within System.register(). It typically looks something like:
System.register("<filename>", ["<import_1>", ..., "<import_N>"],
function (exports_13, context_13) {
"use strict";
function MyFunction () { ... } // somewhere inside the external function
In short, everything written within the .ts file is wrapped in an unnamed function after running the tsc compiler.
Now, I don't know how to invoke a function, which is trapped inside another function, which is in turn listed under System.register(...)
Question: What is the correct syntax to invoke such function externally from an Html file?
<script> ??? </script>
The HTML tries to invoke in following way in the body tag:
System.import("Main").then( // Main.ts is one of the file
function (module)
throw 0; // Temporary, to see if we reach till here
module.main(); // "main()" is the function, which is the entry point
In my code, I am using "browserify" to be able to use the Google protobuf for JS. The error comes for the protobuf related files only. Those definition and source files are present in .d.ts and .js formats.
The error is something like below:
js: Uncaught (in promise) Error: Fetch error: 404 NOT FOUND
Instantiating http://localhost:50000/folder/external/Server_pb
Loading http://localhost:50000/folder/external/_External
Loading Main
Note that, 50000 is a temporary port and the "folder" is just any folder where the .js are kept. The "Server_pb" is a custom protobuf file generated.
My problem can be aptly described quite similar as this link.
What is mean by System.register in JS file?
How to call a named module from a bundle (<-- can be helpful, but don't know the syntax as a newbie)
How to start a Typescript app with SystemJS modules? (nearly duplicate, but unable to solve the problem with this approach yet)
How do I get TypeScript to bundle a 3rd party lib from node_modules? (seems like another close match; trying to dig into this right now to fix the protobuf problem)
With "google-protobuf" there are issues when used in the fashion of systemjs. It seems that Google has created it only for the nodejs. :-)
To be able to use the protobuf in Javascript for the browser, there are few things which we have to do manually. Such manual boilerplate work can be done using some scripts as well.
I am giving an iterative way, on how to achieve this:
The first step is to generate the protobuf for both JS and TS. Use following command for the same:
protoc <file1.proto> <file2.proto> ... <fileN.proto>
--proto_path=<proto_folder> \
--cpp_out=<cpp_folder> \
--js_out=import_style=commonjs,binary:<js_folder> \
Note that, we are using the commonjs (and not systemjs). Legends:
<proto_folder> = folder path where all these file1/2/N.proto files are stored
<cpp_folder> = folder path where you want the c++ file1/2/ files to be stored
<js_folder> = folder where you want the file1/2/N_pb.js files to be stored
<ts_folder> = folder where you want the file1/2/N_pb.d.ts files to be stored
Now in all the .d.ts (Typescript definition) files, there are certain code lines, which will give compiler errors. We need to comment these lines. Doing manually, is very cumbersome. Hence you may use sed (or ssed in Windows, gsed in Mac). For example, the lines starting with,
sed -i "s/^ static extensions/\/\/ static extensions/g" *_pb.d.ts;
same as above for static serializeBinaryToWriter
same as above for static deserializeBinaryFromReader
sed -i "s/google-protobuf/\.\/google-protobuf/g" *_pb.d.ts; // "./google-protobuf" is correct way to import
Now, while generating the *_pb.d.ts, the protoc compiler doesn't follow the packaging for Typescript. For example, if in your fileN.proto, you have mentioned package ABC.XYZ, then the fileN.pb.h will be wrapped in namespace ABC { namespace XYZ { ... } }. The same doesn't happen in the case of Typescript. So we have to manually add these in the file. However, here it won't be a simple find/replace as above. Rather, we have to find only the first occurance of any export class (which is of generated proto) and wrap the namespaces. So below is the command:
sed -i "0,/export class/{s/export class/export namespace ABC { export namespace XYZ {\\n &/}" fileN_pb.d.ts;
sed -i -e "\$a} }" fileN_pb.d.ts;
Initial importing of the google-protobuf package has to be prefixed with ./ in the case of generated _pb.js file as well
sed -i "s/google-protobuf/\.\/google-protobuf/g" *_pb.js;
Now compile the the custom Typescript files with tsc -p "<path to the tsconfig.json>", where the tsconfig.json may look like (see arrow):
"compileOnSave": true,
"compilerOptions": {
"removeComments": true,
"preserveConstEnums": true,
"module": "CommonJS", <=======
"outDir": "<path to generated js folder>",
"include": ["../*"],
"files": ["<path to file1.ts>", ..., "<path to file2.ts>"
Now a very important step. All the references to the the generated *_pb.d.ts files, should be referred in 1 of your custom file. That custom file may contain the wrappers around the generated classes if it's required. This will help in limiting string replacement only in that file, which is explained in the upcoming step. For example, create a custom file name as MyProtobuf.ts and import your proto as following:
import * as proto from './fileN; // from fileN.d.ts
In above step, it's important to note that the name "proto" is crucial. With that name, the .js files are auto generated. If there are several proto files in your project, then you may have to create yet 1 more file which exports all of them and then import that 1 file:
// in 'MyProtobufExports.ts' file
export * from './file1'
export * from './file2'
export * from './fileN'
import * as proto from './MyprotobufExports // in MyProtobuf.ts file
With above 2 steps, the usage of the protobuf as, var myClass = new proto.ABC.XYZ.MyClass;
Now the continuation of the important step we discussed above. When we generate the equivalent _pb.js and our custom .js files, still the special name-symbol proto will not be found somehow. Even though everything is wrapped. This is because the autogenerated JS files (from TS files), will declare a var proto. If we comment that then, that issue is gone.
sed -i "s/var proto = require/\/\/ &/g" Protobuf.js;
The final step is to put the browserify on all the .js files into a single file, as below. Due to this, there will be only single .js file, we have to deal with [good or bad]. In this command, the ordering is very important. file1_pb.js should come before file2_pb.js, if file1.proto is imported by file2.proto or vice a versa. If there is no import then the order doesn't matter. In any case the _pb.js should come before the custom .js files.
browserify --standalone file1_pb.js fileN_pb.js MyProtobuf.js myfile1.js myfileN.js -o=autogen.js
Since the code is browserified, the calling of function can be done in following way:
window.main = function (...) { ... } // entry point somewhere in the fileN.ts file
<script>main(...)</script> // in the index.html
With the above steps only, I am able to make the "google-protobuf" work within my project for the browser.

Sencha cmd, closure compiler error: how to locate the offending code

When running Sencha cmd 6.5, and I get the following error:
[ERR] C2001: Closure Compiler Error (Parse error. undefined label "f") -- compression-input:1:4095
How can I locate the code at compression-input:1:4095 ?
This happens when I include a custom javascript file in app.json using:
"js": [
"path": "app.js",
"bundle": true
"path": "custom.js",
"includeInBundle": true
The error disapears when I remove the reference to custom.js in app.json.
If I interpret the error correctly, it means that closure compiler finds an error on line 1, character 4095 of the compression-input. But the first line of custom.js is not such long.
How can I locate the offending code ?
And by the way, what is an undefined label in closure compiler ?
I had the same issue a year ago, and I was told you cannot locate it from the error message.
Assuming that you have already tried to open your uncompiled project directly in the browser, and not getting a syntax error, there's not much you can do except narrowing it down further by splitting the custom.js content in two parts and check these independently.
In my case it was Ext.define where should have been Ext.create, and the syntax error is thrown because usage of Ext.define is rewritten into other commands during generation of the compression-input. Maybe if you look for this specifically, you can find it.

Uncaught TypeError creating an Aurelia Plugin: plugin.load is not a function

I created a new Aurelia plugin, which is named Aurelia-Slickgrid and got it all working locally with .feature('resources'). I was then ready for the next step, making it available to everyone as a plugin and created a Github project and made it available under this GitHub link - Aurelia-Slickgrid. I used Aurelia Skeleton Plugin to create my plugin, also ran gulp build to create the transpiled output. I then published it on NPM and successfully installed it with npm i --save aurelia-slickgrid. I am currently using Aurelia-CLI to bundle and everything goes well, until I open the browser and see that an error got thrown in the console (now I'm left with a white page in the browser):
Uncaught TypeError: plugin.load is not a function
at Module.<anonymous> (vendor-bundle.js:5308)
For the moment, I am trying to load it as a plugin with Aurelia-CLI. See below for the complete configuration used:
index.js of the plugin
import {AureliaSlickgrid} from './aurelia-slickgrid';
import {SlickPager} from './slick-pager';
import {SlickWindowResizer} from './slick-window-resizer';
export function configure(config) {
export {
main.js (of my local project)
aurelia.json (of my local project)
"name": "aurelia-slickgrid",
"path": "../node_modules/aurelia-slickgrid/dist/amd",
"main": "index"
If you're testing with an empty Aurelia CLI project you need to add:
"name": "aurelia-slickgrid",
"path": "../node_modules/aurelia-slickgrid/dist/amd",
"main": "index"
Finally import to use it in code via:
import {AureliaSlickgrid} from 'aurelia-slickgrid';
The documentation on how to create an Aurelia Plugin is almost non existing, so I based myself on another plugin, namely Aurelia-Bootstrap made by a great Aurelia Contributor. One of the file that greatly influenced my plugin code was his index.js and I used his coding styling to code mine.
Any idea where could be my problem?
I also tried to add resources to the aurelia.json, however it had no effects.
"name": "aurelia-slickgrid",
"path": "../node_modules/aurelia-slickgrid/dist/amd",
"main": "index",
"resources": [
Got a bit further, after searching for a few other Aurelia plugins. It seems that globalResources should only be View/ViewModel pair (html/js), in my case I only have 1 of those pair which is SlickPager and now only that one is being called by globalResources(). Another possible problem, still to confirm though, I had a file named aurelia-slickgrid.js which is the same naming as the plugin name, could that cause a conflict? Possibly...who knows. So anyway, I renamed it to slick-service.js and renamed the class to SlickService. I am now able to call 2/3 of my objects in the WebPack Skeleton, however I still can't import SlickService.
updated index.js of the plugin
import { SlickService } from './slick-service';
import { SlickPager } from './slick-pager';
import { SlickWindowResizer } from './slick-window-resizer';
export function configure(aurelia) {
export { SlickService, SlickPager, SlickWindowResizer };
I can now call this in WebPack without issues
import {SlickPager, SlickWindowResizer} from 'aurelia-slickgrid';
#inject(SlickPager, SlickWindowResizer)
export class Test {
constructor(slickPager, slickWindowResizer) {
console.log(slickPager, slickWindowResizer);
However if I import SlickService as well, it throws an error
import {SlickPager, SlickWindowResizer, SlickService} from 'aurelia-slickgrid';
#inject(SlickPager, SlickWindowResizer, SlickService)
export class Test {
constructor(slickPager, slickWindowResizer, slickService) {
console.log(slickPager, slickWindowResizer, slickService);
previous code with SlickService now throws this error
ERROR [app-router] Error: Error invoking SlickService. Check the inner error for details.
Inner Error:
Message: key/value cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI?
It doesn't matter if you call your file the same as your plugin.
globalResources accepts not only view/vm pairs but (.html for html-only components and single file resources like custom attributes binding behaviors and value converters).
you have a typo in slick-service.js you should be importing SlickWindowResizer not SlickResizer.
in aurelia.json you need to add the resources array, like: "resources": ["**/*.{css,html}"]