HasanHuseyinDemir / Anchors-Framework

An Open-Source and Reactive Javascript SPA Framework

Anchors

An Open-Source and Reactive Javascript SPA Framework

Total Size : 40KB

Minified Size : 16 KB

Features

• Simple and lightweight , optimized DOM
• Vanilla Friendly optional(querySelector,getElementById)
• Easier to use and learn
• CDN Link or NPM Package options
• Module based or Global usage
• Components , Props and Slots...
• Lifecycle hooks(createEffect,onEffect,onSignal,onMount,onUnmount)
• JSX like Template Literals | example : <Component prop='text'/>
• Proxy Based Reactive States and Callbacks,Computed States
• Two way data binding
• Integrated Store and Easiest State Management
• Dynamic Attributes and linked with variables
• Scoped Styles <style scoped>...</style>
• Nested Components , Nested Effects , Memo

Node links

• Vite-Template : https://github.com/HasanHuseyinDemir/Vite-AnchorsJS
• Npm : https://www.npmjs.com/package/anchorsjs

# Recomended For Beginners ; Replit and Codepen Examples
> https://replit.com/@HasanHuseyinDem
> https://codepen.io/collection/rxvqgG

Installation Latest v[1.6.0] "Storage Update"

Reactive Storage

Recomended VSCode Extensions

"es6-string-jsx" and "es6-string-html"
"/*jsx*/ or /*html*/" for highlighting html string
let page=html/*jsx*/`<div>Highlighted!</div>`

CDN Import For Module

import {html,createStore,createElement,RegisterComponent} from "https://unpkg.com/anchorsjs@1.6.0/anchors.min.mjs"
export {html,createStore,createElement,RegisterComponent}

CDN Import For Global

<script src="https://unpkg.com/anchorsjs@1.6.0/anchors.min.js"></script>

NPM

npm i anchorsjs

Replit Template

https://replit.com/@HasanHuseyinDem/AnchorsJS-Template?v=1