tessl/pypi-dukpy

Simple JavaScript interpreter for Python built on top of duktape engine without any external dependencies

—

Pending

Overview

Eval results

Files

WebAssets Integration

Name: tessl/pypi-dukpy
Author: tessl

Filter classes for integrating JavaScript transpilation into WebAssets asset pipeline, supporting automatic compilation of CoffeeScript, ES6+, TypeScript, JSX, and LESS in web applications.

Package Information

WebAssets integration requires the optional webassets dependency:

pip install dukpy[webassets]
# or
pip install dukpy webassets

Core Imports

from webassets.filter import register_filter
from dukpy.webassets import BabelJS, TypeScript, CompileLess, BabelJSX

Basic Usage

from webassets import Bundle, Environment
from webassets.filter import register_filter
from dukpy.webassets import BabelJS, TypeScript, CompileLess, BabelJSX

# Register DukPy filters
register_filter(BabelJS)
register_filter(TypeScript) 
register_filter(CompileLess)
register_filter(BabelJSX)

# Create WebAssets environment
env = Environment('./static', './static/compiled')

# Create bundles with DukPy filters
js_bundle = Bundle(
    'js/app.js',
    'js/components/*.js',
    filters='babeljs',
    output='compiled/app.js'
)

tsx_bundle = Bundle(
    'tsx/main.tsx',
    'tsx/components/*.tsx',
    filters='typescript',
    output='compiled/main.js'
)

css_bundle = Bundle(
    'less/styles.less',
    'less/components/*.less',
    filters='lessc',
    output='compiled/styles.css'
)

env.register('js', js_bundle)
env.register('tsx', tsx_bundle)
env.register('css', css_bundle)

Capabilities

ES6+ Babel Filter

Compiles modern JavaScript to ES5 for browser compatibility using the same Babel engine as babel_compile().

class BabelJS(Filter):
    """
    WebAssets filter for ES6+ compilation using BabelJS.
    
    Filter name: 'babeljs'
    
    Options:
    - BABEL_MODULES_LOADER: Module system ('systemjs', 'umd', or default CommonJS)
    
    Attributes:
    - max_debug_level: None (no debug level restrictions)
    """
    
    name = 'babeljs'
    max_debug_level = None
    options = {
        'loader': 'BABEL_MODULES_LOADER'
    }
    
    def input(self, _in, out, **kw):
        """
        Process input file through Babel compilation.
        
        Parameters:
        - _in: Input file stream
        - out: Output file stream  
        - **kw: Additional context including source_path
        """

Configuration and usage:

from webassets import Bundle
from webassets.filter import register_filter
from dukpy.webassets import BabelJS

register_filter(BabelJS)

# Default CommonJS modules
bundle = Bundle(
    'js/src/*.js',
    filters='babeljs',
    output='js/compiled.js'
)

# SystemJS modules
import os
os.environ['BABEL_MODULES_LOADER'] = 'systemjs'
bundle = Bundle(
    'js/src/*.js', 
    filters='babeljs',
    output='js/compiled.js'
)

# UMD modules
os.environ['BABEL_MODULES_LOADER'] = 'umd'
bundle = Bundle(
    'js/src/*.js',
    filters='babeljs', 
    output='js/compiled.js'
)

TypeScript Filter

Compiles TypeScript files to JavaScript using the same TypeScript compiler as typescript_compile().

class TypeScript(Filter):
    """
    WebAssets filter for TypeScript compilation.
    
    Filter name: 'typescript'
    
    Uses fixed compiler options:
    - Module format: SystemJS
    - Target: ES5
    - Requires SystemJS runtime for browser usage
    
    Attributes:
    - max_debug_level: None (no debug level restrictions)
    """
    
    name = 'typescript'
    max_debug_level = None
    
    def input(self, _in, out, **kw):
        """
        Process input file through TypeScript compilation.
        
        Parameters:
        - _in: Input file stream
        - out: Output file stream
        - **kw: Additional context including source_path
        """

Usage example:

from webassets import Bundle
from webassets.filter import register_filter
from dukpy.webassets import TypeScript

register_filter(TypeScript)

typescript_bundle = Bundle(
    'ts/app.ts',
    'ts/components/*.ts',
    filters='typescript',
    output='js/app.js'
)

LESS CSS Filter

Compiles LESS stylesheets to CSS using the same LESS compiler as less_compile().

class CompileLess(Filter):
    """
    WebAssets filter for LESS compilation.
    
    Filter name: 'lessc'
    
    Options:
    - LIBSASS_INCLUDES: Additional include paths for LESS @import resolution (reused environment variable name)
    
    Attributes:
    - max_debug_level: None (no debug level restrictions)
    """
    
    name = 'lessc'
    max_debug_level = None
    options = {
        'less_includes': option('LIBSASS_INCLUDES', type=list)
    }
    
    def input(self, _in, out, **kw):
        """
        Process input file through LESS compilation.
        
        Parameters:
        - _in: Input file stream
        - out: Output file stream
        - **kw: Additional context including source_path
        
        Automatically adds source file directory to include paths.
        """

Usage example:

from webassets import Bundle
from webassets.filter import register_filter
from dukpy.webassets import CompileLess
import os

register_filter(CompileLess)

# Basic LESS compilation
less_bundle = Bundle(
    'less/main.less',
    'less/components/*.less',
    filters='lessc',
    output='css/styles.css'
)

# With custom include paths
os.environ['LIBSASS_INCLUDES'] = 'less/mixins:less/variables:node_modules'
less_bundle_with_includes = Bundle(
    'less/app.less',
    filters='lessc',
    output='css/app.css'
)

JSX React Filter

Compiles JSX to React-compatible JavaScript using the same JSX compiler as jsx_compile().

class BabelJSX(Filter):
    """
    WebAssets filter for JSX compilation using BabelJS with React presets.
    
    Filter name: 'babeljsx'
    
    Options:
    - BABEL_MODULES_LOADER: Module system ('systemjs', 'umd', or default CommonJS)
    
    Automatically configures Babel with ['es2015', 'react'] presets.
    """
    
    name = 'babeljsx'
    options = {
        'loader': 'BABEL_MODULES_LOADER'
    }
    
    def input(self, _in, out, **kw):
        """
        Process input file through JSX compilation.
        
        Parameters:
        - _in: Input file stream
        - out: Output file stream
        - **kw: Additional context including source_path
        """

Usage example:

from webassets import Bundle
from webassets.filter import register_filter
from dukpy.webassets import BabelJSX

register_filter(BabelJSX)

jsx_bundle = Bundle(
    'jsx/app.jsx',
    'jsx/components/*.jsx',
    filters='babeljsx',
    output='js/react-app.js'
)

Complete Integration Example

from webassets import Bundle, Environment
from webassets.filter import register_filter
from dukpy.webassets import BabelJS, TypeScript, CompileLess, BabelJSX
import os

# Register all DukPy filters
register_filter(BabelJS)
register_filter(TypeScript)
register_filter(CompileLess)
register_filter(BabelJSX)

# Configure environment variables
os.environ['BABEL_MODULES_LOADER'] = 'umd'
os.environ['LIBSASS_INCLUDES'] = 'assets/less/mixins:assets/less/variables'

# Create WebAssets environment
env = Environment(
    directory='./assets',
    url='/static/',
    load_path=['./assets']
)

# JavaScript bundles
modern_js = Bundle(
    'js/modern/*.js',
    filters='babeljs',
    output='compiled/modern.js'
)

react_components = Bundle(
    'jsx/components/*.jsx',
    'jsx/app.jsx',
    filters='babeljsx',
    output='compiled/react-app.js'
)

typescript_app = Bundle(
    'ts/main.ts',
    'ts/services/*.ts',
    'ts/components/*.ts',
    filters='typescript',
    output='compiled/typescript-app.js'
)

# CSS bundles
styles = Bundle(
    'less/main.less',
    'less/components/*.less',
    filters='lessc',
    output='compiled/styles.css'
)

# Register bundles
env.register('modern_js', modern_js)
env.register('react', react_components)
env.register('typescript', typescript_app)
env.register('styles', styles)

# Build assets
modern_js.build()
react_components.build()
typescript_app.build()
styles.build()

Browser Runtime Requirements

BabelJS and BabelJSX

Requires babel-polyfill for full ES6+ feature support
SystemJS or UMD builds require appropriate module loaders

TypeScript

Compiled output uses SystemJS modules
Requires SystemJS runtime: https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.24/system.js

React JSX

Requires React runtime library
Babel polyfill recommended for ES6+ features

Configuration Options

All filters support WebAssets' standard configuration through environment variables:

import os

# Configure Babel module format
os.environ['BABEL_MODULES_LOADER'] = 'systemjs'  # or 'umd'

# Configure LESS include paths  
os.environ['LIBSASS_INCLUDES'] = 'path1:path2:path3'

# Multiple paths on Windows
os.environ['LIBSASS_INCLUDES'] = 'path1;path2;path3'