djwc: Django WebComponents

Introduction

WebComponents is a W3C standard supported by all browsers for a couple of years now, see their Getting Started introduction for details.

Getting started

How to try djwc

For a quick test:

• clone and enter this repo
• run pip install django -e .
• start the example with: ./manage.py djwc && ./manage.py runserver

You should see some polymer components on localhost:8000

How to install djwc

• pip install djwc,
• add djwc to INSTALLED_APPS (for the management command)
• add the 'djwc.middleware.StaticMiddleware' MIDDLEWARE (to inject scripts).

How to use webcomponents

• Declare the components that you want to use
• Run ./manage.py djwc to install them (does not use NodeJS)
• Use the HTML tags for your components

That's it !! The middleware will do the rest.

Read on for details about each step.

Declaring components

You can declare components per-app, per-project, and also include bundles.

Settings

You can add a paper-input component to DJWC in the settings by referencing its npm path:

DJWC = {
    'COMPONENTS': {
        'paper-input': '@polymer/paper-input/paper-input.js',
    }
}

This will have predecence over any other setting.

AppConfig

Or, define an AppConfig.components attribute to add components to your reusable app.

class AppConfig(apps.AppConfig):
    components = {
        'paper-input': '@polymer/paper-input/paper-input.js',
    }

This will be automatically detected.

Libraries

You can also include a bunch of webcomponents with the DJWC['LIBRARIES'] setting:

DJWC = {
    'LIBRARIES': ['djwc_polymer'],
}

More to come, these are manually maintained at this time.

Installing components with ./manage.py djwc

Then, run the ./manage.py djwc command that will download all the scripts into a static directory. Do this prior to collectstatic in production, and every-time you change your components declaration.

Using components

Just use your new tag wherever you want, such as in templates:

<paper-input always-float-label label="Floating label"></paper-input>

The middleware will inject the corresponding script whenever the middleware will find a paper-input tag.

FAQ

I've read that WebComponents are not accessible

Apparently, accessibility is fine with aria attributes.

What next ?

• Do add unit tests when a contributor breaks it
• Optimize the djwc command
• Automate djwc_polymer
• Add moar bundles ! Like bootstrap-webcomponents ! yay !