Writing JS and CSS¶

The default Viewflow interface is equipped with Hotwire/Turbo. This means that you should be cautious with JavaScript code initialization, as entire pages are updated with AJAX.

Viewflow suggests wrapping all code as standard browser WebElements, which automates the initialization as soon as a component is added to a page.

Setup building pipeline¶

With numerous options available for setting up a JavaScript build pipeline, this guide focuses on using Vite as the build tool.

Setup Vite¶

Create a package.json install Vite as a development dependency:

npm init -y
npm install vite --save-dev

Update your package.json to include a build script for Vite:

"scripts": {
  "vite": "vite build",
},

Configuring Vite¶

Create a Vite configuration file, vite.config.js, with the following content:

import { defineConfig } from 'vite'

export default defineConfig({
    build: {
        sourcemap: true,
        emptyOutDir: false,
        outDir: 'static/js/',
        lib: {
        entry: 'components/index.js',
        formats: ['iife'],
        name: 'my_components',
        fileName: () => "my_components.min.js",
        },
    }
})

This configuration enables source maps, specifies the output directory, and defines the library settings for your components.

Prepare your project structure for Vite by creating a components directory with an empty index.js file:

mkdir components/
touch components/index.js

Verify the setup by running Vite:

npm run vite

This step confirms that your Vite configuration is correctly set up and ready for work.

Setting Up Static Files in Django¶

Configuring the Static Directory¶

Before diving into coding, it’s essential to configure the directories where Django will look for JavaScript and CSS files.

To include a static/ folder in the root directory of your project, update your settings.py file with the following line:

STATICFILES_DIRS = [BASE_DIR / "static"]

This tells Django to include the specified static/ directory when searching for static files.

Integrating Static Files into Templates¶

After setting up your static directory, the next step is to incorporate your static files into Django templates.

To include the generated JavaScript file in your base_page.html template, modify the template as follows:

{% extends 'viewflow/base_page.html' %}{% load static %}

{% block extrahead %}
<script src="{% static 'js/my_components.min.js' %}" type="text/javascript"></script>
{% endblock %}

This snippet extends the base page template from Viewflow, loads Django’s static file handling mechanism, and includes your JavaScript file in the extrahead block, ensuring it’s loaded with the page.

Implementing a JavaScript Component¶

Creating a JavaScript Component¶

To create a custom JavaScript component, you will start by defining the component in a new file within the components directory.

Create the file components/my_component.js and define your component as follows:

export class MyComponent extends HTMLElement {
    connectedCallback() {
        // ...
    }

    disconnectedCallback() {
        // ...
    }
}

The connectedCallback method is used for initializing the component or setting up event listeners when the component is added to the document. The disconnectedCallback method serves to clean up anything necessary when the component is removed, such as removing event listeners.

Including and Registering the Component¶

After creating your component, the next step is to include and register it so it can be used within your HTML files.

In your components/index.js file, import the MyComponent class and register it as a custom element:

import {MyComponent} from './my_component.js';

window.customElements.define('my-component', MyComponent);

By calling window.customElements.define, you register the new element ‘my-component’ with the browser’s Custom Elements registry, allowing you to use it as <my-component></my-component> in your HTML. This step is crucial for integrating custom JavaScript functionality with your web components.

Table Of Contents