Making Advanced Components in Asri

General
1

Intro

Quickly generate an Asri Repl

Here is a link to quickly make an Asri Repo using Replit.

Making components in Asri is very straightforward, and can easily be utilized to take advantage of the pre-loader for cleaner abstracted code that can be used everywhere in your app.

I’ve decided to make a Page component to be able to make programmatically adjustable page flows since getting a perfect center for each page dynamically without some hackery is a bit hard

This is great if you use center-based positioning, or if you want to make models and things that use and attract users to the center of the page.

It also allows you to define an area for which a page may hold a set of dimensions to fit some need,

  • maybe a center-based page layout with a document in the middle for you to scroll and read,

  • an ad placed in some position relative to the viewport,

  • or a custom modal,

image

Page allows you to get the center of the viewport, and adapt your code to a cleaner, fixed paradigm.

I wouldn’t consider this page documentation, more like an observation of high-level Component Creation and the structure.

Soon actual documentation will be coming,
at the moment, reading the JSDOCs is the only best choice.

window.Main = class Main {

  static PageTitle = 'Main';

  static async preload() {
    return [
      await import('./Page.ac.js')
    ]
  }

  constructor(entry, mods) {

    const { Page } = mods[0]

    // @@ From Page
    let page = new Page(1, entry);
    
  }

}

To begin developing an Asri page, you must customize your entry.js.

I’ve set mine up so it’s easy to test the Page component while developing it!

It tells the Asri runtime to Wait for the module in preload,
and pass the result into the constructor’s arg two (mod).

This would be arguments[1] if you’re coding in a very old style, non-strict paradigm

import { Page } from "./Page.ac";

export { Page };
export default {
  Page
}

I’ve then made an entry point for using this inside of the Asri framework, no install needed!

Just do:

import { Page } from "./app/_Components/page"

OR:

await import("./app/_Components/page")

import { registerComp } from '/src/_helper/registerComp.js'

/**
 * Represents a page component with methods for styling and viewport calculations.
 */
export class Page {

  /**
   * The visual viewport of the page.
   */
  static vv = visualViewport
  vv = Page.vv

  /**
   * Default styles to center an element in the page.
   */
  static centerStyle = {
    position: 'absolute',
    top: `${this.vv.height / 2}px`,
    left: `${this.vv.width / 2}px`,
    transform: 'translate(-50%, -50%)',
  }
  centerStyle = Page.centerStyle;

  /**
   * Get the viewport height.
   * @returns {number} The height of the viewport.
   */
  static vv_h = _ => this.vv.height;
  vv_h = Page.vv_h

  /**
   * Get half of the viewport height.
   * @returns {number} Half of the viewport height.
   */
  static vv_hhalf = _ => (this.vv.height / 2)
  vv_hhalf = Page.vv_hhalf

  /**
   * Scale from the bottom of the viewport by a certain offset.
   * @param {number} [offset=0] - The offset to scale by.
   * @returns {number} The scaled value.
   */
  static scaleBottomBy_vvh = (offset = 0) => (this.vv_h() * offset)
  scaleBottomBy_vvh = Page.scaleBottomBy_vvh

  /**
   * Calculate a position based on half the viewport height and a scaling offset.
   * @param {number} [offset=0] - The offset to apply to the calculation.
   * @returns {number} The calculated position.
   */
  static screenify = (offset = 0) => this.vv_hhalf() + this.scaleBottomBy_vvh(offset)
  screenify = Page.screenify

  /**
   * Apply centered styling to an element with an optional offset.
   * @param {HTMLElement} el - The element to style.
   * @param {number} [offset=0] - The offset to apply to the top position.
   */
  static centerStyle$ = (el, offset = 0) => el.style$({
    ...this.centerStyle,
    top: `${screenify(offset)}vh`
  })
  centerStyle$ = Page.centerStyle$;

  // ---

  container = section()

  /**
   * Create a stretchable page container.
   *
   * This container scales to a proper size based on the viewport height
   * and a multiple of the entry height.
   *
   * @param {number} len - The length to scale the container by.
   * @param {SushaWrapper} entry - The entry point for appending the container.
   */
  constructor(len = 0, entry) {
    this.container.style$({
      position: 'relative',
      width: '100%',
      height: `${this.vv_h()}px`,
      // overflow: 'hidden',
    })

    if (len > 0) {
      this.container.style$({
        height: `${this.scaleBottomBy_vvh(len + 1)}px`
      })
    }

    if (entry) {
      entry.append(this.container.get$())
    }
  }

}

registerComp(Page)

export default {
  Page
}

Susha in a nutshell

As mentioned above, working with Susha allows for quick implementations that can be used in a more compact and useful way.

Using Susha with Asri empowers the use of ECMAJS DOMs, and puts complex app creation into a simple, powerful scope.

Rather than waiting for frameworks to get better, Asri gives you a ton of tools for you to make enhanced components and high-level software for the client, and entices you to say “Now let’s make even more!”

With Susha and Asri, simple DOM manipulation is the past.

JQuery is 19 years old and is used almost everywhere.

Unlike other old frameworks, Susha strives for the future and implements the latest features, rather than maintaining almost deprecated ones.

3 Likes