4

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:

<script>window.MyFunction()</script>

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>

Update:

The HTML tries to invoke in following way in the body tag:

  <script>
    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
      });
  </script>

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.

Related:

iammilind
  • 68,093
  • 33
  • 169
  • 336
  • `window.myfn()` if you are sure it's on `window` – Daniel Lizik Jun 29 '18 at 08:16
  • @DanielLizik, assigning `window.myfn = function () {}` won't work in this case, because after the auto generation of the .js file, all the global statements will be part of the function. – iammilind Jun 29 '18 at 08:55
  • is system.js and your bundle imported? like this https://stackoverflow.com/a/44485955/763564 also What are you returning from the anonymous inner function? – emran Jul 02 '18 at 01:58
  • 1
    @terminally-chill, yes both "system.js" and the "autogen.js" (bundled one) are imported. Also we are trying to use the Google-protobuf. Due to which we have to use the "browserify". Hence the final file, which is a collection of many .ts, is also wrapped with some "browserify" code. The anonymous inner function returns another function (it's too complex for a newbie like me, due to TS to JS). Please see the **Update** section. – iammilind Jul 02 '18 at 05:34

1 Answers1

1

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:

  1. 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> \
    --ts_out=import_style=commonjs,binary:<ts_folder>

  2. 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/N.pb.cc/h 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

  3. 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

  4. 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;

  5. 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;

  6. 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>" }

  7. 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

  8. 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

  9. With above 2 steps, the usage of the protobuf as, var myClass = new proto.ABC.XYZ.MyClass;

  10. 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;

  11. 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

  12. 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.

iammilind
  • 68,093
  • 33
  • 169
  • 336
Swapnil
  • 2,409
  • 4
  • 26
  • 48