DOCSEARCHbyAlgolia
Submit Docs

Synapse Application Framework

website·Indexed 30 days ago

https://chialab.github.io/dna/guide/

An application framework built on top of DNA Web Components. It provides a routing system with middleware, a history abstraction for navigation state, and hooks like useApp() and useRouter() to manage application state and navigation.

Tokens
32.3K
Snippets
204
Records
241
Agent score
74%

What's inside Synapse

  1. Overview of the DNA Web Component library

    DNA is a library for creating Web Components in a declarative and extensible way using JavaScript classes. Unlike many other libraries, DNA allows developers to extend not only other Web Components but also native HTML elements (e.g., <input>, <button>). It is specifically designed for creating libraries of custom elements to be distributed and reused across applications, rather than for building full Single Page Applications (SPAs).

  2. Overview of RNA plugins and tools

    RNA is a suite of open-source NPM packages providing plugins and tools for web bundlers and development servers, specifically supporting Vite and esbuild. While primarily focused on facilitating the development of Web Components, these tools are applicable to general JavaScript and TypeScript web projects to help implement modern web features and optimize development workflows.

  3. Overview of Loock focus management utilities

    Loock is a library providing utilities and behaviors designed to manage focus locally. It enables developers to trap focus within a specific context, implement keyboard arrow navigation, and handle other focus-related accessibility and UX patterns.

  4. Overview of vitest-csf-visual-regression

    The vitest-csf-visual-regression plugin transforms Storybook stories written in Component Story Format (CSF) into automated visual regression tests. It leverages Vitest browser mode and in-source testing to inject test code into story modules at build time, using Storybook's rendering APIs and Playwright-backed browser commands to capture and compare screenshots via expect(...).toMatchScreenshot().

  5. Overview of the Synapse application framework

    Synapse is an application framework built on top of DNA Web Components. It extends the DNA Component base class by adding a client-side router, request/response objects, middlewares, and page transitions, allowing a DNA component tree to manage application navigation.

  6. Overview of @chialab/vite-plugin-css-modules

    The @chialab/vite-plugin-css-modules plugin allows developers to import .css files in JS/TS and receive either a CSSStyleSheet instance (in supported browsers) or a raw CSS string as a fallback. This enables fast style application via document.adoptedStyleSheets without injecting <style> tags, which is particularly useful for HMR and web components.
    import styles from './file.css' with { type: 'css' };

  7. Overview of Custom Elements Manifest Analyzer

    The Custom Elements Manifest Analyzer is a tool for statically analyzing a project to generate a Custom Elements Manifest (CEM) JSON file. Unlike the original open-wc analyzer, this version is designed as a JavaScript module rather than a CLI, minimizes external dependencies, and supports any AST compatible with estree or typescript-estree (e.g., oxc-parser or Rollup). Note that it does not perform full type checking and only analyzes types when using Isolated Declarations. Mixin support is currently not planned.

  8. Overview of the Synapse application framework

    Synapse is an application framework built on top of DNA Web Components. It extends the DNA Component base class by adding a client-side router, request/response objects, middlewares, and page transitions, allowing a DNA component tree to manage application navigation.

  9. Overview of Loock focus and navigation utilities

    Loock provides several behaviors to manage focus and keyboard accessibility within a context:

    • focusManager: Manages focusable objects inside a context.
    • focusTrapBehavior: Traps focus inside a specific context.
    • focusEnterBehavior: Handles logic when focus enters or exits a context.
    • focusFirstChildBehavior: Automatically focuses the first element when entering a context.
    • keyboardNavigationBehavior: Enables navigation within a context using keyboard arrow keys.

  10. Understand the Synapse Request and Response lifecycle

    In Synapse, every navigation creates a Request and a corresponding Response. Both objects flow through the router pipeline, which includes middlewares, matched routes, and finally the App or Page component that renders the final result.

  11. Important notice regarding RNA CLI deprecation

    RNA CLI development is deprecated and discontinued. It is recommended to use RNA plugins directly in your projects using Vite, esbuild, or other supported tools instead of the CLI.

  12. Create customized built-in elements with DNA

    DNA allows developers to create customized built-in elements. These elements inherit standard HTML behavior, which ensures that the resulting components preserve native usability and accessibility features.