DOCSEARCHbyAlgolia
Submit Docs

xAtom Framework

website·Indexed 29 days ago

https://xatom.js.org

A developer toolkit designed to build robust web applications with first-class support for Webflow elements. It provides a comprehensive API for transforming Webflow elements into dynamic components via WFComponent, managing native elements like WFSlider, WFTabs, and WFNav, and implementing routing with WFRoute. The framework includes utilities for authentication (WFAuth, WFAuthMiddleware), REST API communication via AxiosClient, and specialized components for handling CMS lists (WFCMSList) and forms (WFFormComponent, WFInvisibleForm).

Tokens
15.9K
Snippets
125
Records
135
Agent score
57%

What's inside xAtom

  1. Overview of WFInvisibleForm

    The WFInvisibleForm class is a component of the xAtom framework used to create form requests to Webflow without visible form elements. It allows for flexible form handling, the ability to aggregate data from multiple sources into a single submission, and full programmatic control over validation and submission logic.

  2. Manage navigation and security with xAtom Routing and Authentication

    xAtom provides dedicated APIs for controlling application access and navigation:

    • WFRoute: Allows granular control over routing, including the ability to designate routes as protected or public.
    • WFAuth: Provides a blueprint for implementing user authentication.
    • WFAuthMiddleware: Integrates authentication middleware into the application flow.

  3. Extend Webflow elements with xAtom

    xAtom provides first-class support for scaling and enhancing native Webflow components, including navigation, tabs, sliders, and collection lists. It achieves this through a combination of custom components, routing-based logic execution, and data service APIs.

  4. Use xAtom Utilities for site lifecycle and navigation

    xAtom includes utility functions to handle common development tasks:

    • onReady: Executes code specifically when the Webflow site has loaded.
    • navigate: Performs programmatic navigation within the app.
    • createComponent: Used for the dynamic creation of components.

  5. Integrate external data using xAtom Data Services

    xAtom provides two primary clients for data integration:

    • REST API Client: Facilitates seamless integration with any standard REST API.
    • Apollo GraphQL Client: Provides a flexible and efficient way to interact with GraphQL APIs.

  6. Build interactive elements with xAtom Components

    The xAtom framework provides several component APIs to transform static HTML into interactive elements:

    • WFComponent: Converts HTML elements into interactive components with control over styling and content updates.
    • WFDynamicList: Simplifies the creation of dynamic listings with functional capabilities.
    • WFFormComponent: Manages complex form flows.
    • WFInvisibleForm: Enables form submissions without requiring visible form elements.

  7. Install and initialize WFImage

    To use the WFImage class, install the @xatom/image package. Initialize the class by passing a CSS selector to the constructor. WFImage extends WFComponent, meaning it is compatible with all WFComponent properties and methods.
    npm install @xatom/image
    import { WFImage } from "@xatom/image";
import { onReady } from "@xatom/core";

onReady(() => {
  const img = new WFImage(".img");
});

  8. Initialize and use WFAuth for authentication

    The WFAuth class provides a blueprint for managing user authentication, role-based access control, and user configuration within the xAtom Framework. It is recommended to use TypeScript generics to define the shapes of user data, roles, and configuration for better IDE validation.
    import { WFAuth } from "@xatom/core";

// Initialize with generics: <UserType, RoleType, ConfigType>
const userAuth = new WFAuth<
  {
    fullName: string;
    email: string;
  },
  "GUEST" | "USER",
  {
    token: string;
  }
>();

// Basic usage flow
userAuth.setRole("GUEST");
console.log(userAuth.isLoggedIn()); // false

userAuth.setUser({
  fullName: "John Doe",
  email: "john@doe.com",
});

userAuth.setConfig({
  token: "XYZ",
});

userAuth.setRole("USER");
console.log(userAuth.isLoggedIn()); // true

userAuth.logout();
console.log(userAuth.isLoggedIn()); // false

  9. Group routes using regex expressions in WFRoute

    You can manage multiple child routes under a single parent path by using the (.*) expression in the route path. This allows you to group related logic and nest further WFRoute instances inside the parent's execution block.
    import { WFRoute } from "@xatom/core";

new WFRoute("/dashboard/(.*)").execute(() => {
  // Logic for all routes under /dashboard

  new WFRoute("/dashboard/profile").execute(() => {
    // Logic specifically for profile page
  });

  new WFRoute("/dashboard/settings").execute(() => {
    // Logic specifically for settings page
  });
});

  10. Set up the HTML structure for WFDynamicList

    To use the WFDynamicList component, your Webflow project must follow a specific element hierarchy. The container must include a template for the list item, a loader, and an empty state element.
    div (my-list)
├── div (my-list-item)
├── div (my-list-loader)
└── div (my-list-empty-state)

  11. Initialize and use basic routing with WFRoute

    The WFRoute class allows you to execute specific business logic based on the current URL route. You initialize it with a route path and use the .execute() method to define the logic. It is recommended to store route logic within the /src/routes directory.
    import { WFRoute } from "@xatom/core";

// Simple static route
new WFRoute("/sign-up").execute(() => {
  // Logic for /sign-up
});

// Route with query parameters (e.g., /invite?token=XYZ)
new WFRoute("/invite").execute((params: { token: string }) => {
  console.log(params.token); // XYZ
});

// Variable routes for dynamic content (e.g., /blogs/how-get-started)
new WFRoute("/blogs/:post").execute((params: { post: string }) => {
  console.log(params.post); // how-get-started
});

  12. Create a WFComponent instance using createComponent

    The createComponent function from @xatom/core allows you to dynamically generate a new WFComponent instance based on a specified HTML element tag. This is used to create user interface elements on the fly and configure them using WFComponent methods like setAttribute and addCssClass.
    import { createComponent } from "@xatom/core";

// Create a WFComponent from a <button> element
const button = createComponent<HTMLButtonElement>("button");

// Create a WFComponent from an <input> element and configure it
const fileInput = createComponent<HTMLInputElement>("input");
fileInput.setAttribute("type", "file");
fileInput.addCssClass("input-primary");

// Append the component to a form
myForm.getFormComponent().appendChild(fileInput);