manatlan/vbuild

"Compile" your VueJS components (sfc/*.vue) to standalone html/js/css ... python only (no need of nodejs). Support python components too !

vbuild

"Compile" your VueJS (vuejs2 only) components (*.vue) to standalone html/js/css ... python only, no need of nodejs. And you can use python components with vbuild, in your vue/sfc files !!!

It's just an utility to generate HTML(template), SCRIPT and STYLE from a VUE/SFC component (*.vue). It won't replace webpack/nodejs/vue-cli, it fills the "Sometimes you have to work with the tools you have, not the ones you want." gap.

DEMO

Available on pypi

Changelog (old Changelog (before 0.8.2))

Features

• NO node-js stack, only pure python3
• Ability to use python components
• Components can be styled with SASS or LESS ccs-pre-processors !
• Provide a JS-minifier (ES5 compliant JS, via closure)
• Ability to post process stuff, with your own processors
• Respect VueJs specs (at least one template tag, many style (scoped or not) tags)
• templates are converted to a <script type="text/x-template" id="XXX"></script> (not converted to JS)
• Unittested (coverage 100%)
• no import/from !

import vbuild

c=vbuild.render("mycompo.vue")
#c=vbuild.render("vues/*.vue")
#c=vbuild.render( "c1.vue", "c2.vue" )
#c=vbuild.render( "c1.vue", "vues/*.vue" )

print( c.html )
print( c.script )
print( c.style )

#or

print( c ) # all stuff in html tags

Main Goal

Its main purpose is to let you use components (.vue files) in your vuejs app, without a full nodejs stack. It's up to you to create your generator, to extract the things, and create your "index.html" file. It's a 4 lines of python code; example:

import vbuild
buf=readYourTemplate("index.tpl") # should contains a tag "<!-- HERE -->" that would be substituted
buf=buf.replace("<!-- HERE -->",str( vbuild.render( "vues/*.vue" ) ) )
writeYourTemplate("index.html",buf)

(a real example of rendering vue/sfc components, using vbuild and the marvelous wuy)

Vue/sfc component compatibility

All classical JS vue/sfc components are compatibles. But now, you can use python component too.

Here is, side by side, the same component (in js, and in python):

To use the full features of vbuild

If you want to use the full features, you'll need to install the optionnal's libs.

sudo pip install pyscss lesscpy closure

All theses libs works with py3, and you could use the css-pre-processors SASS and LESS, and closure to minify js.

TODO

• more utilities
• more rock solid version
• and docs !
• add pyscss lesscpy closure to pip setup.py (optionnal's modules)
• see the TODO list for python components too

vbuild's Issues

bro is this library support vue3

is this support optional api and composition api

i didnt yet saw those two thing side by side on python

also i wonder why the transcrypt not updating much the community also too low cause of no discord

How to proceed with vbuild after being inactive for years?

First things first: vbuild is a great project, doing one thing very well. Our own project NiceGUI uses it internally to convert SFCs to HTML/JavaScript/CSS.

Only recently we noticed a few bugs that we would love to see fixed. Especially for the deprecation warning #10 there's already a pull request #9.

Now I'm thinking about copying the code into our own project or forking the whole repo. But, to make bugfixes available to the community, we would need to release a separate PyPI package as a successor to vbuild. Maybe it's better to "take over" this repo and continue developing the existing package. I'm just not sure if my team and I would be a good fit, since some of the current issues require quite some deep knowledge of Vue and JS, which we might be lacking.

@manatlan What's your thought on this?

And is there anyone interested in actively supporting this project?

`DeprecationWarning` invalid escape sequence

vbuild/__init__.py:230: DeprecationWarning: invalid escape sequence '\*'
  css = re.sub(re.compile("/\*.*?\*/", re.DOTALL), "", css)

vbuild/vbuild/__init__.py

Line 230 in 6b266fd

css = re.sub(re.compile("/\*.*?\*/", re.DOTALL), "", css)

This is being promoted to a SyntaxWarning in Python 3.12:

• https://docs.python.org/3.12/whatsnew/3.12.html#other-language-changes

A backslash-character pair that is not a valid escape sequence now generates a SyntaxWarning, instead of DeprecationWarning. For example, re.compile("\d+.\d+") now emits a SyntaxWarning ("\d" is an invalid escape sequence), use raw strings for regular expression: re.compile(r"\d+.\d+"). In a future Python version, SyntaxError will eventually be raised, instead of SyntaxWarning. (Contributed by Victor Stinner in gh-98401.)

This will break in a future Python release when this is promoted to a SyntaxError.

CSS Selector Tags Reversed

It appears the CSS attribute selector tags are reversed during rendering. For example, given the following:

<style scoped>
div {
    font-size: 5em;
    text-align: center;
}

It renders to:

*[data-static-vue-component] div {font-size: 5em; text-align: center; }

Instead, it should render to the following to properly select tag:

div [data-static-vue-prospect_card] {font-size: 5em; text-align: center; }

not seeing the dragstart event

For some reason I'm not getting to trigger @dragstart. Could this come from vbuild?

Error Minimizing JS

Running the example from the documentation for minimizing JavaScript:

>>> import vbuild
>>> js="""async function  mymethod(...a) {
...     var f=(...a) => {let b=12}
... }
... """
>>> min=vbuild.minimize(js)

Results in the following error:

Traceback (most recent call last):
  File "/usr/local/lib/python3.5/dist-packages/vbuild.py", line 59, in jsminOnline
    r = json.loads( response.read() )
  File "/usr/lib/python3.5/json/__init__.py", line 312, in loads
    s.__class__.__name__))
TypeError: the JSON object must be str, not 'bytes'

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
  File "/usr/local/lib/python3.5/dist-packages/vbuild.py", line 43, in minimize
    return jsminOnline(code)
  File "/usr/local/lib/python3.5/dist-packages/vbuild.py", line 63, in jsminOnline
    raise VBuildException("minimize error: %s" % e)
vbuild.VBuildException: minimize error: the JSON object must be str, not 'bytes'

Can't mix scoped and non scoped styles

It is mentioned in VueJS's docs that this is possible:
https://vue-loader.vuejs.org/guide/scoped-css.html#mixing-local-and-global-styles

But trying it didn't work as it seemed to only render the scoped style.

Maybe pythonize $variables ?

Hi,
I know it may be a thing of taste, but I'm frequently writing like this:

    def MOUNTED(self):
        self.dark = window.matchMedia("(prefers-color-scheme: dark)").matches
        self['$emit']('input', self.current)
        self['$root'].dark = self.dark

    def WATCH_dark(self, sta, oldStatus, name='dark'):
        self['$vuetify'].theme.dark = sta
        self['$root']['$emit']("dark-changed", sta)
        self['$root'].dark = self.dark

I wonder if we could make an alias or a solution to rename $root, $emit, $on, and so on into _root etc? Could this be done at the level of vbuild, like the component methods are? I'm using the Python components, thank you a lot!

BEFOREDESTROY doesn't seem to trigger

I'm using python components and can't seem to trigger BEFOREDESTROY?
It should trigger before hiding an element (with v-show), I believe.
I can trigger DESTROYED but not BEFOREDESTROY maybe I'm doing something wrong.