Overview

SPARC is a lightweight TypeScript micro-framework designed to help developers build fully custom SharePoint pages using nothing but JavaScript and jQuery—completely bypassing SharePoint’s built-in UI and rendering logic.

Ideally, you load an html file as a media content webpart, and from the empty html, load a main js file (which then imports the bundled sparc.js) and the necessary css. Each page should reference at least an index.js, but logic can and should be broken down across multiple files.

Content is added via JQuery & sparc components. Sparc's component architecture is heavily based on react, except that it doesn't envolve "rendering cycles" nor any of the complex lifecycle/shadow DOM logic. Instead the developer is responsible for calling .render(), .refresh() and .remove() to handle each component lifecycles. Children of sparc components are automatically handled.

Documentation

Sparc uses Typedoc, Madge and Rollup to genereate a static documentation site, a dependency graph, and a flamegraph to analyze bundle sizes.

• Typedoc Documentation
• Rollup Bundle Size Report

Roadmap

• Pseudo SPA? (Routing??)
• Webworkers Pool
• Data Visualization Tools

Changelog

Versioning x.x.x : major-updates . breaking-changes . minor-updates

*** to be written

v1.0.0 - Core Library

Core components to build most UI's needed at the moment User is able to use HTMDElement and FormControl classes to extend sparc cababilities and create new components following the same logic.

v1.0.1

• Added support for ZOD validation
• Added dayjs utils
• improved documentation and annotations

To Look at!

• Tooltip (should have something better than the "title" attr, but jqueryUI is a NO GO) lookup that library for dynamic positioning

• Accordion -> jquery UI

• Tabs implement the component with stateful logic, or use data attrs -> Obvervable api!

• sortable (creates draggable components) useful, but for a later version

• toast

• data -Table container w detailed rows -List

• Advanced Table Components

obverser API & IntersectionObserver && ResizeObserver && PerformanceObserver CSSStyleSheet interface (js) - could be useful for style template customComponents (tags)