__pragma__('jsx')

[doconix]

In creating a Transcrypt-based React app (see my other question), I needed to write JSX into my code. JSX is a transpiled language, just like Transcrypt. I made it work by using strings:

elem = self.jsx('''
    <div id="StudentContainer">
        {self.props.students.map((s) => (
            <StudentTile student={s}  key={s.searchval}  />
        ))}
    </div>
''')

Not the best way because the JSX is converted at runtime on the browser.

I'm wondering how hard it would be to have a __pragma__ that takes some portion of code and "shells" out to a separate program for processing, piping the content over. Then Transcrypt emits the return. That would allow me to put JSX between two pragmas and get it converted to JS by some outside engine.

The code could then be something like this:

elem = \
__pragma__('ext_on', 'jsx_transform_executable --o1 --o2')
    <div id="StudentContainer">
        {self.props.students.map((s) => (
            <StudentTile student={s}  key={s.searchval} />
        ))}
    </div>
__pragma__('ext_off')

This type of command would be useful to much more than JSX. Any kind of pre or post transformations of parts of code could be triggered by the transcrypt engine.

[JdeH]

That's a very original and powerful idea!
Working on it...

[JdeH]

I've committed a solution.
Please let me know if it works for you.

Small (nonsensical) example below.

test.py:

a = 1

__pragma__ ('xtrans', 'capitalize.exe', '{}',
'''/*
<div id="StudentContainer">
    {self.props.students.map((s) => (
        <StudentTile student={s}  key={s.searchval}  />
    ))}
</div>
*/\f'''
)

b = 2

capitalize.cpp (translated to capitalize.exe)

#include <iostream>
#include <string>
#include <algorithm>

using namespace std;

int main () {
    string buffer;
    getline (cin, buffer, '\f');
    transform (buffer.begin(), buffer.end(), buffer.begin(), ::toupper);
    cout << buffer;
}

The resulting JavaScript in test.mod.js:

	(function () {
		var a = 1;
		/*
		<DIV ID="STUDENTCONTAINER">
		    {SELF.PROPS.STUDENTS.MAP((S) => (
		        <STUDENTTILE STUDENT={S}  KEY={S.SEARCHVAL}  />
		    ))}
		</DIV>
		*/
		var b = 2;
		__pragma__ ('<all>')
			__all__.a = a;
			__all__.b = b;
		__pragma__ ('</all>')
	}) ();

Kind regards
Jacques

[JdeH]

If this solution proves to be working, could you supply a simple stand-alone version of your pyreact demo utilizing JSX for inclusion in Transcrypt's demos directory that is part of the distribution. You can e.g. supply it as a PR if you find the time. I will then also make it visible on the website.

[doconix]

Awesome! It's almost there. It works as long as I don't give the command any arguments. However, it fails with any options.

The Popen call in compiler.py, line 1565 creates the array of args (with single arg) for the call. Popen wants the args split, not in a single string: https://docs.python.org/3/library/subprocess.html#popen-constructor

The following is what fails:

        return __pragma__ ('xtrans', 'jsx-transform --factory React.createElement', '{}', '''
            ...
        ''')

I need a way to be able to get the three components into an array. One option is for the xtrans option to call https://docs.python.org/3/library/shlex.html#shlex.split on whatever string I give it. I'm not sure it would handle all cases, but it is an option. To use this, I think your code would simply have to be:

import shlex

process = subprocess.Popen (
    shlex.split(node.args [1] .s),
    stdin = subprocess.PIPE,
    stdout = subprocess.PIPE
)

Thanks.

[fzzylogic]

Thank you so much for this Jacques, it's fantastic. Fwiw, I've found POpen's cwd argument to be very useful, for example in the case where one calls an external file that itself requires certain files that may not be available in the path.

[JdeH]

@doconix Looks like a good solution. How on earth did you find that in the docs...
@fzzylogic Will add cws as a keyword arg

[JdeH]

The proposed improvements have been committed (also see docs and example in manual_tests dir).

http://www.transcrypt.org/docs/html/special_facilities.html#using-an-external-transpiler-pragma-xtrans-translator-cwd-workingdirectory

Let me know if it all works for you.