> Important Note: I'm waiting for an update to occur in transcrypt's source code. This plugin works fine with or without this change, but autoreload--rebundling automatically when you save--is disabled until that change goes through.

Code in Python 3. Bundle to Javascript.
===============================================
Adds a Py3 -> Javascript transpiler to your Parcel Bundler build tool chain.

Web scripts are no longer simple Javascript files linked with


`

main.py
`py


get the "app" div and add an ordered list

> Your linter might be complaining here because transcrypt python isn't quite regular python. In the above code, we can use document because our py -> js runs in the browser (even if the python linter is upset by it). `

Bundle 'n Serve
----------------
Run the bundler:
`bash
npx parcel --log-level 4 --no-cache index.html
`

Parcel bundles everything into the dist/ folder, and then it starts a server daemon. Parcel continues to watch your project for changes, so watch the log messages as you edit and save. Open your browser to http://localhost:1234.

Boom, baby! Python-style lists, f-strings, and for loops, right in the browser!

> If things don't seem to work when you open the web page, be sure to check the browser console for messages.

> During normal development, you may want to back off on these options. Specifying --log-level 4 tells Parcel (and this plugin) top be chatty, and --no-cache tells it to rebuild fully each time (destroying Parcel's advertised speed).

> You can see the JS generated by Transcrypt in the __target__ folder. Parcel uses these files when bundling. These files can also be incredibly useful when transpiling doesn't happen as expected. The generated JS is pretty readable, and a few console.log statements right in the generated stuff is often the ticket.


Getting Fancy
------------------
Let's continue the example with a few callbacks:

index.html
`html




My Second App

main.py
`py
def ready():
app = document.querySelector("#app")
ol = app.appendChild(document.createElement('ol'))
counter = 1

def addButtonClicked():
nonlocal counter
li = ol.appendChild(document.createElement('li'))
li.textContent = ', '.join([ 'Item {}'.format(i) for i in range(counter, counter+10) ])
counter += 10
document.querySelector('#addButton').addEventListener('click', addButtonClicked)

def removeButtonClicked():
if ol.lastChild:
ol.removeChild(ol.lastChild)
document.querySelector('#removeButton').addEventListener('click', removeButtonClicked)

document.addEventListener("DOMContentLoaded", ready)
`

* Event callbacks: ready runs when the page is ready, and the buttons have click events. If you're used to Javascript's nested functions, it can be off-putting to see how callbacks have to be done here. Python just doesn't support anonymous functions, and lambdas are too limited. You'll get used to it, and perhaps you'll even grow to like it. But I do wish Python supported ruby-style, inline functions.
* nonlocal: Don't hate on me here. It's just an example to highlight differences between Py and JS. The nonlocal statement is not actually needed. While omitting it would break in regular Python, the JS closure it becomes makes it work with or without nonlocal. Just like a good Thanksgiving meal, it all ends up together in the end (as JS in the browser, in this case).
* List comprehension: Love those things. Waaay better than mapping with embedded functions. SETL ftw! (with comprehensions, anyway)


Imports
------------------
Let's add some imports! We'll do both a Python import and a pure JS import. You'll need four files - careful with the extensions!

index.html
`html




My Third App

main.py
`py
from .counter import Counter
from .remove import removeButtonClicked

def ready():
app = document.querySelector("#app")
ol = app.appendChild(document.createElement('ol'))
counter = Counter()

def addButtonClicked():
li = ol.appendChild(document.createElement('li'))
li.textContent = counter.getNext()
document.querySelector('#addButton').addEventListener('click', addButtonClicked)

document.querySelector('#removeButton').addEventListener('click', removeButtonClicked)

document.addEventListener("DOMContentLoaded", ready)
`

counter.py
`py
class Counter(object):
def __init__(self):
self.counter = 1

def getNext(self):
items = [ 'Item {}'.format(i) for i in range(self.counter, self.counter + 10) ]
self.counter += 10
return ', '.join(items)
`

remove.js
`js
export function removeButtonClicked() {
let ol = document.querySelector("#app > ol")
ol.removeChild(ol.lastChild)
}
`

* Mixing of Python and Javascript Files: The main python file is able to import other python files AND JS files! It works the other way too.
* Python Class: The counter variable has become a proper Python class. It's all grown up! Perhaps someday, it could even become a real iterator.
* ES6 Javascript: The JS file is using ES6 syntax. Parcel will make it backwards-compatible during bundling (thanks Babel!).


Deploy
--------------
When you're ready to deploy production code, change the Parcel call to:

`bash
npx parcel --log-level 4 --no-cache build index.html
`

Parcel will produce minified, efficient, production-ready bundles. Deploy everything in the dist/` folder.

Code in Python, Bundle to Javascript, Deploy, ??, $$$!