Hi all,

First time posting here.

I'm exploring using pas2js with ReactNative and/or NativeScript. I see that they use Javascript "import" and "export" statements.

Will pas2js support import and export? What would the Pascal syntax look like?

Cheers.

- Pheng
-

Import works, it is simply a unit.

We're working on export, the syntax will be exactly as the existing library syntax.

Michael.

Michael Van Canneyt wrote

> Will pas2js support import and export? What would the Pascal syntax look like? Import works, it is simply a unit.

Hi Michael,

For React Native and NativeScript, a main program in Javascript looks like this:

  /*
  In NativeScript, the app.js file is the entry point to your application.
  You can use this file to perform app-level initialization, but the
  primary purpose of the file is to pass control to the app’s first module.
  */
  import { Application } from '@nativescript/core';
  Application.run({ moduleName: 'app-root' })

Above is the Javascript main program generated by NativeScript's Hello World-ish app template.

I tried this Pascal equivalent:

  program app;
  begin
    asm
      import { Application } from '@nativescript/core';
      Application.run({ moduleName: 'app-root' })
    end;
  end.

pas2js compiles the program, but NativeScript's Javascript engine fails to run the program due to this error:

ERROR in ./app/app.js 2205:4
Module parse failed: 'import' and 'export' may only appear at the top level (2205:4)

So I moved the import statement to the top of the pas2js-generated app.js. Here's the hand-modified version:

  // Below import added by hand.
  import { Application } from '@nativescript/core';
  var pas = {};
  var rtl = {
    // rtl stuff untouched
  }
  // various rtl modules untouched
  rtl.module("program",["System"],function () {
    "use strict";
    var $mod = this;
    $mod.$main = function () {
      // No import statement here.
      Application.run({moduleName:'app-root'});
    };
  });
  rtl.run();

The rest of the app's Javascript code as generated by the NativeScript template is not modified. With this kludge, NativeScript successfully runs the program on my computer's Android and iOS emulators.

With this, I think using pas2js to write NativeScript and/or React Native apps has promise and is worth pursuing.

So I'm looking for Pascal syntax (or maybe compiler directive) to express the need to place Javascript import statements at the top level of pas2js-generated Javascript file. Something like this?

  program app;
  begin
    asm
      {$modeswitch toplevel+}
      import { Application } from '@nativescript/core';
      {$modeswitch toplevel-}
      Application.run({ moduleName: 'app-root' })
    end;
  end.

Where should I look in the compiler source to attempt to implement this directive?

As for exports, the need comes when writing plugins for React Native and NativeScript.

Pheng

Your directive will not be possible since asm blocks are not parsed but copied as-is. Also, at some future point we also may want to parse the actual javascript (FPC has a parser for it), and then the directive will get in the way.

But better yet, it will simply not be necessary. We want to avoid asm altogether.

The plan is to translate the existing $linklib directive, like this one:

{$linklib atom}

to an import/require statement that will be prepended to the javascript file. There will be statements in the JS or system unit which will allow you retrieve the imported objects.

I will try to document in the WIKI what has been discussed, there is more than what I wrote here.

But if you want to use import statements already today, this is easily done. simply look at the demos for VSCode and Atom plugins. They just require a small js file which is prepended/appended to the compiler output, look for the packageglue.js file, which is appended with -Ja or prepended with -Ji.

I have published the article I wrote about this technique for Blaise Pascal magazine. See here:

https://www.freepascal.org/~michael/articles/index.html#atomvscode

The sources are in subversion, demo/atom, demo/vscode

Michael.

Sounds good!

And using -Ji for the import statements work!

I have published the article I wrote about this technique for Blaise Pascal magazine. See here: https://www.freepascal.org/~michael/articles/index.html#atomvscode

The approach is well explained. Thanks for the hint. I look forward to sharing how far I can go with pas2js and NativeScript.

Pheng

Yes, it does :-)

I worked on a (Java) project using react native. It was a pain....

So I look forward to hearing from you how you did it, and will be glad to share it with the world with a new article :-)

Michael.