init

Creates a new project:

dstrn init

After initialization, you can configure your project using the dstrn config command.

config

Configure project settings:

dstrn config

serve

Start a development server:

dstrn serve

The server is accessible at http://localhost:8250.

component

Components are based on the web components standard and can be customized with attributes, methods, and event listeners.

Create a new component:

dstrn create component

manager

Managers are singleton JavaScript objects that can be used for state management, feature coordination, or as service providers.

Create a new manager:

dstrn create manager

script

Create a new script:

dstrn create script

Scripts can be included in all pages, specific pages, or none.

page

Create a new page:

dstrn create page

Pages can be automatically wired up to the routing system if enabled.

Exceptions Management

Exceptions override the default build behavior:

// dstrn.conf.js
module.exports = {
    // other config options...
    "exceptions": [
        "functions/",

        "file.js",
        "folder/"
    ]
}

Excepted paths can be modified using the exceptions command: dstrn exceptions add/remove ./path/to/file

Layout Utilities

• Basic display: .d-none, .d-block, .d-inline, .d-inline-block, .d-grid, .d-contents
• Table display: .d-table, .d-table-cell, .d-table-row

Flexbox

• Container types: .flex-row, .flex-column, .flex-center
• Flex properties: .flex-1, .flex-0, .flex-wrap, .flex-grow
• Justify content: .justify-between, .justify-around, .justify-evenly, .justify-center, .justify-start, .justify-end
• Align items: .align-between, .align-around, .align-evenly, .align-center, .align-start, .align-end
• Gap utilities: .g-0 through .g-5 (in 1em increments)

Positioning

• Position type: .relative, .absolute, .fixed, .sticky
• Special positioning: .absolute-center, .absolute-fill
• Edge positioning: .top-0, .right-0, .bottom-0, .left-0
• Transform utilities: .translateX, .translateY

Sizing Utilities

• Percentage width: .w-5 through .w-100 (in 5% increments), .w-100vw
• Special width: .w-auto, .w-fit, .w-min, .w-max, .w-fill
• Min/max width: .min-w-*, .max-w-* (same increments as width)
• Percentage height: .h-5 through .h-100 (in 5% increments), .h-100svh
• Special height: .h-auto, .h-fit, .h-min, .h-max, .h-fill
• Min/max height: .min-h-*, .max-h-* (same increments as height)

Spacing Utilities

• Padding (all sides): .p-0, .p-05, .p-1, .p-2, .p-3, .p-4, .p-5 (in 1em increments)
• Padding (vertical/horizontal): .py-*, .px-* (in 1em increments)
• Padding (individual sides): .pt-* (top), .pb-* (bottom), .pl-* (left), .pr-* (right)
• Margin (all sides): .m-0, .m-05, .m-1, .m-2, .m-3, .m-4, .m-5, .m-auto (in 1em increments)
• Margin (vertical/horizontal): .my-*, .mx-* (including .mx-auto for centering)
• Margin (individual sides): .mt-* (top), .mb-* (bottom), .ml-* (left), .mr-* (right)

dCheckbox

Attributes

• type - checkbox style (1: toggle switch, 2: checkmark box, default: 1)
• text - checkbox text
• activeColor - active state color
• textColor - label text color
• inactiveColor - inactive state color

Methods

• setText(text) - change the checkbox text
• setActiveColor(color) - change the active state color
• setInactiveColor(color) - change the inactive state color
• setTextColor(color) - change the label text color

Events

• change - fired when checkbox state changes

dColorPicker

Attributes

• name - color picker label
• value - initial color value (default: "#000000")
• colorId - ID for the color input field (default: "color0")
• opened - whether the color picker is initially opened
• haptics - enable haptic feedback on selection

Methods

• set(value) - set the color value
• get() - get the current color value

Events

• colorchange - fired when color value changes

dCombobox

Combobox component with optional input support.

Attributes

• options - JSON string of options array with format [{value: "value1", text: "text 1"}, ...]
• allowInput - allow text input in the dropdown
• haptics - enable haptic feedback on selection

Methods

• setOptions(options) - update the available options
• set(value) - set the selected value
• get() - get the currently selected value

Events

• change - fired when selection changes

dContextMenu

Context menu component that appears on right-click.

Methods

• openCloseMenu(event) - open or close the context menu
• openMenu() - open the context menu
• closeMenu() - close the context menu

Events

• click - fired when a context menu item is clicked

dDrawer

Slide-out drawer component for additional content or navigation.

Attributes

• direction - direction from which the drawer appears ("top", "right", "bottom", "left", default: "right")
• opened - whether the drawer is initially opened

Methods

• handleOpenClose() - toggle the drawer open/closed state

dDropdown

Collapsible dropdown component for grouping content.

Attributes

• header - text for the dropdown header
• opened - whether the dropdown is initially opened
• haptics - enable haptic feedback on toggle

Methods

• handleOpenClose() - toggle the dropdown open/closed state

dIconButton

Attributes

• icon - font awesome icon class
• size - font size of the icon
• color - icon color
• activeColor - active state color
• loader - enable loading state capability
• loading - set initial loading state

Methods

• switchState(removeClass, addClass) - switch between icon states
• change(icon) - change the icon
• setLoading(state) - set the loading state

dImageInput

Input component for selecting and previewing images.

Attributes

• accept - file types to accept
• icon - icon for the upload button

Methods

• reset() - clear the selected image

Events

• change - fired when an image is selected

dModal

Modal component for displaying content in a pop-up overlay.

Attributes

• opened - whether the modal is initially opened

Methods

• open() - open the modal
• close() - close the modal

dNotification

Notification component for displaying alerts or messages.

Attributes

• opened - whether the notification is initially shown

Methods

• show() - display the notification
• hide() - hide the notification
• destroy() - remove the notification from the DOM

dScroll

Custom scrolling container with a bouncing effect like on MacOS and iOS.

Attributes

• direction - scroll direction
• scrollbar-color - scrollbar color
• scrollbar-hover-color - scrollbar hover color
• thumb-width - width of the scrollbar thumb
• thumb-hover-width - width of the scrollbar thumb on hover
• scrollbar-width - width of the scrollbar track
• margin-top - top margin for the scrollable content
• margin-bottom - bottom margin for the scrollable content
• margin-side - side margin for the scrollbar

Methods

• updateScrollbar() - update the scrollbar position and size
• scrollTo(position) - scroll to a specific position
• append(element) - add an element to the scrollable content

dSlider

Slider component for selecting a value within a range.

Attributes

• min - minimum value
• max - maximum value
• step - step increment
• value - initial value
• thumbColor - thumb color
• fillColor - fill color
• trackColor - track color
• sfx - enable sound effects on slide

Methods

• getValue() - get the current slider value
• setValue(value) - set the slider value

Events

• change - fired when slider value changes

dTextInput

Text input component with optional icon.

Attributes

• placeholder - input placeholder text
• icon - icon to display inside the input
• autocomplete - enable browser autocomplete
• haptics - enable haptic feedback on focus
• password - set input type to password

Methods

• getValue() - get the current input value
• setValue(value) - set the input value

Events

• change - fired when input value changes
• keydown, keyup - keyboard events
• focus, blur - focus events

dToggle

Toggle button group for selecting from multiple options.

Attributes

• color - button color
• activeColor - active button color
• textColor - text color
• textActiveColor - active text color
• bgColor - background color
• haptics - enable haptic feedback on toggle

Methods

• set(toggle) - set the active toggle (by index or element)
• get() - get the currently active toggle element

Events

• change - fired when selection changes

Routing

dframework includes a built-in routing system for creating single-page applications with client-side navigation.

// router.js
router.on('/xxx', function () {
    render("views/xxx.html", ["public/js/xxx.js"]);
});

// router.js
const router = new dRouter('/');
router.controller = null;

const render = (template, scripts) => {
    return new Promise((resolve, reject) => {
    if(router.controller) { router.controller.abort(); router.controller = null };
    router.controller = new AbortController();
    const signal = controller.signal;
    
    // your code to run at the start of the transition

    fetch("../"+template, { signal })
        .then(response => {
            if (!response.ok) {
                throw new Error(`failed to fetch ${template}: ${response.status}`);
            }
            return response.text();
        })
        .then(html => {
            setTimeout(() => { // using fake delay for the animation (optional)
                contentContainer.innerHTML = html;
                const existingScripts = document.querySelectorAll("script[data-page-script]");
                existingScripts.forEach(script => script.remove());
        
                if (scripts && scripts.length > 0) {
                    let scriptsLoaded = 0;
            
                    scripts.forEach((url) => {
                        const script = document.createElement("script");
                        script.src = "../" + url + '?cachebuster=' + new Date().getTime();
                        script.dataset.pageScript = true;
                        script.onload = () => {
                            scriptsLoaded++;
                            if (scriptsLoaded === scripts.length) {
                                resolve();
                            }
                        };
                        document.body.appendChild(script);
                    });
                } else {
                    resolve();
                }
                // your code to end the transition
            }, 700);
        })
        .catch(error => {
            reject(error);
        });
    });
};

// example route
router.on('/', function () {
    render("views/index.html", ["public/js/index.js"]);
});
router.resolve();