fusee-framework 0.1.0-alpha.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 SebiSomu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,8 @@
+\# 🚀 Fusée v0.1.0-alpha
+
+
+
+Peak Performance JS Framework
+
+\*\*Signals + Components + SPA\*\*
+

package/app/components/Counter.js

@@ -0,0 +1,38 @@
+import { defineComponent, signal, onMount, onUnmount } from '../../framework/index.js'
+
+export const Counter = defineComponent({
+  props: ['initialValue'],
+  setup(props) {
+    const count = signal(Number(props.initialValue) || 0)
+    const double = signal(0)
+
+    // Manual computed: keep double in sync
+    // (could use computed() from framework too)
+    function increment() { count(count() + 1); double(count() * 2) }
+    function decrement() { count(count() - 1); double(count() * 2) }
+    function reset()     { count(0); double(0) }
+
+    onMount(() => console.log('[Counter] mounted, initial:', count()))
+    onUnmount(() => console.log('[Counter] unmounted'))
+
+    return {
+      count,
+      double,
+      increment,
+      decrement,
+      reset,
+      template: `
+        <div class="counter">
+          <h2>Counter</h2>
+          <p class="value">{{ count }}</p>
+          <p class="derived">double: {{ double }}</p>
+          <div class="actions">
+            <button @click="decrement">−</button>
+            <button @click="reset">reset</button>
+            <button @click="increment">+</button>
+          </div>
+        </div>
+      `
+    }
+  }
+})

package/app/main.js

@@ -0,0 +1,11 @@
+import { createRouter, mountOutlet } from '../framework/index.js'
+import { Home } from './routes/Home.js'
+import { About } from './routes/About.js'
+
+createRouter([
+  { path: '/', component: Home },
+  { path: '/about', component: About },
+])
+
+const outlet = document.getElementById('app')
+mountOutlet(outlet)

package/app/routes/About.js

@@ -0,0 +1,24 @@
+import { defineComponent, signal, onMount } from '../../framework/index.js'
+
+export const About = defineComponent({
+  props: [],
+  setup() {
+    const loaded = signal(false)
+
+    onMount(() => {
+      setTimeout(() => loaded(true), 300)
+    })
+
+    return {
+      loaded,
+      template: `
+        <div class="page">
+          <h1>About</h1>
+          <p>Framework custom — prototip SPA.</p>
+          <p><strong>Features:</strong> signals, defineComponent, hash router, lifecycle hooks.</p>
+          <p class="status">{{ loaded }}</p>
+        </div>
+      `
+    }
+  }
+})

package/app/routes/Home.js

@@ -0,0 +1,22 @@
+import { defineComponent, signal } from '../../framework/index.js'
+import { Counter } from '../components/Counter.js'
+
+export const Home = defineComponent({
+  props: [],
+  components: { Counter },
+  setup() {
+    const title = signal('Welcome!')
+
+    return {
+      title,
+      template: `
+        <div class="page">
+          <h1>{{ title }}</h1>
+          <p>This is an SPA built with my own JavaScript custom framework!</p>
+          <p>Made with passion by Sebastian Șomu</p>
+          {{ Counter }}
+        </div>
+      `
+    }
+  }
+})

package/framework/core/component.js

@@ -0,0 +1,128 @@
+// ─── Component System ─────────────────────────────────────────────────────────
+import { effect } from './signal.js'
+
+// Lifecycle context — set while setup() runs
+let currentInstance = null
+
+export function onMount(fn) {
+  if (currentInstance) currentInstance._mountHooks.push(fn)
+}
+
+export function onUnmount(fn) {
+  if (currentInstance) currentInstance._unmountHooks.push(fn)
+}
+
+export function defineComponent(options) {
+  return function ComponentFactory(props = {}) {
+    const instance = {
+      props,
+      _mountHooks: [],
+      _unmountHooks: [],
+      _effects: [],
+      _element: null,
+    }
+
+    // Run setup() with lifecycle context active
+    currentInstance = instance
+    const result = options.setup(props)
+    currentInstance = null
+
+    // Validate props defined in component
+    const allowedProps = options.props || []
+    for (const key of Object.keys(props)) {
+      if (!allowedProps.includes(key)) {
+        console.warn(`[framework] Unknown prop "${key}" passed to component.`)
+      }
+    }
+
+    // ── Template rendering ───────────────────────────────────────────────────
+    function render(container) {
+      instance._element = container
+
+      const e = effect(() => {
+        const html = resolveTemplate(result.template, result, options.components || {})
+        container.innerHTML = html
+        bindEvents(container, result)
+        bindComponents(container, options.components || {})
+      })
+
+      instance._effects.push(e)
+
+      // Run mount hooks after first render
+      for (const hook of instance._mountHooks) hook()
+
+      return instance
+    }
+
+    // ── Unmount ──────────────────────────────────────────────────────────────
+    function unmount() {
+      for (const hook of instance._unmountHooks) hook()
+      // Clean up all reactive effects
+      for (const e of instance._effects) {
+        for (const dep of e.deps) dep.delete(e)
+        e.deps.clear()
+      }
+      if (instance._element) instance._element.innerHTML = ''
+    }
+
+    return { render, unmount, instance }
+  }
+}
+
+// ── Template resolver ─────────────────────────────────────────────────────────
+// Replaces {{ expr }} with evaluated values from the component result object.
+function resolveTemplate(template, context, components) {
+  return template.replace(/\{\{\s*(\w+)\s*\}\}/g, (_, key) => {
+    if (key in components) {
+      // Nested component: {{ Counter }} → render component placeholder
+      return `<div data-component="${key}"></div>`
+    }
+    const val = context[key]
+    if (typeof val === 'function') {
+      // Could be a signal — call it to get value
+      try { return val() } catch { return '' }
+    }
+    return val ?? ''
+  })
+}
+
+// ── Event binding ─────────────────────────────────────────────────────────────
+// Finds all elements with @event attributes and attaches listeners.
+// Re-runs after every template re-render (innerHTML wipe clears old listeners).
+function bindEvents(container, context) {
+  const all = container.querySelectorAll('*')
+  for (const el of all) {
+    for (const attr of [...el.attributes]) {
+      if (attr.name.startsWith('@')) {
+        const eventName = attr.name.slice(1)          // @click → click
+        const handlerName = attr.value                 // "increment"
+        const handler = context[handlerName]
+        if (typeof handler === 'function') {
+          el.removeAttribute(attr.name)
+          el.addEventListener(eventName, handler)
+        }
+      }
+    }
+  }
+}
+
+// ── Nested component mounting ─────────────────────────────────────────────────
+// Finds data-component placeholders and mounts child components inside them.
+function bindComponents(container, components) {
+  const placeholders = container.querySelectorAll('[data-component]')
+  for (const placeholder of placeholders) {
+    const name = placeholder.dataset.component
+    const ComponentFn = components[name]
+    if (ComponentFn) {
+      // Read props from data-prop-* attributes if present
+      const props = {}
+      for (const attr of [...placeholder.attributes]) {
+        if (attr.name.startsWith('data-prop-')) {
+          props[attr.name.slice(10)] = attr.value
+        }
+      }
+      const child = ComponentFn(props)
+      child.render(placeholder)
+    }
+  }
+}

package/framework/core/signal.js

@@ -0,0 +1,52 @@
+// ─── Reactivity Engine ───────────────────────────────────────────────────────
+// Solid-style signals: count() to read, count(val) to write.
+// An "effect" is any function that should re-run when signals it reads change.
+
+let currentEffect = null
+
+export function signal(initialValue) {
+  let value = initialValue
+  const subscribers = new Set()
+
+  function accessor(newValue) {
+    if (newValue === undefined) {
+      // READ — track dependency if inside an effect
+      if (currentEffect) {
+        subscribers.add(currentEffect)
+        currentEffect.deps.add(subscribers)
+      }
+      return value
+    } else {
+      // WRITE — notify subscribers only if value changed
+      if (newValue !== value) {
+        value = newValue
+        for (const sub of [...subscribers]) sub()
+      }
+    }
+  }
+
+  return accessor
+}
+
+export function effect(fn) {
+  const run = () => {
+    // Clean up previous subscriptions before re-running
+    for (const dep of run.deps) dep.delete(run)
+    run.deps.clear()
+
+    currentEffect = run
+    try { fn() }
+    finally { currentEffect = null }
+  }
+
+  run.deps = new Set()
+  run() // run immediately to collect dependencies
+  return run
+}
+
+export function computed(fn) {
+  // A computed is a read-only signal derived from other signals
+  const result = signal(undefined)
+  effect(() => result(fn()))
+  return result
+}

package/framework/index.js

@@ -0,0 +1,4 @@
+// ─── Framework Public API ─────────────────────────────────────────────────────
+export { signal, computed, effect } from './core/signal.js'
+export { defineComponent, onMount, onUnmount } from './core/component.js'
+export { createRouter, navigate, mountOutlet } from './router/router.js'

package/framework/router/router.js

@@ -0,0 +1,69 @@
+// ─── Hash-based SPA Router ────────────────────────────────────────────────────
+// Routes are declared as: { path: '/about', component: AboutComponent }
+// Navigation via <a href="#/about"> or router.navigate('/about')
+
+let _routes = []
+let _outlet = null
+let _currentInstance = null
+
+export function createRouter(routes) {
+  _routes = routes
+
+  // Listen for hash changes (back/forward + manual URL edits)
+  window.addEventListener('hashchange', () => _resolve())
+
+  // Initial render on page load
+  window.addEventListener('DOMContentLoaded', () => _resolve())
+
+  return { navigate }
+}
+
+export function navigate(path) {
+  window.location.hash = path
+}
+
+// ── Mount outlet ──────────────────────────────────────────────────────────────
+// Call this with the DOM element that acts as <router-outlet>
+export function mountOutlet(el) {
+  _outlet = el
+  _resolve()
+}
+
+// ── Internal resolution ───────────────────────────────────────────────────────
+function _resolve() {
+  if (!_outlet) return
+
+  // Parse current hash: '#/about' → '/about', fallback to '/'
+  const hash = window.location.hash
+  const path = hash.startsWith('#') ? hash.slice(1) || '/' : '/'
+
+  const matched = _routes.find(r => _matchPath(r.path, path))
+
+  if (!matched) {
+    _outlet.innerHTML = `<p style="color:red">[framework] No route matched for "${path}"</p>`
+    return
+  }
+
+  // Unmount previous component to run cleanup hooks
+  if (_currentInstance) {
+    try { _currentInstance.unmount() } catch {}
+  }
+
+  _outlet.innerHTML = ''
+
+  const componentFn = matched.component
+  _currentInstance = componentFn()
+  _currentInstance.render(_outlet)
+}
+
+// Simple path matching — supports exact paths and :param segments
+function _matchPath(routePath, actualPath) {
+  const routeParts = routePath.split('/').filter(Boolean)
+  const actualParts = actualPath.split('/').filter(Boolean)
+
+  if (routeParts.length !== actualParts.length) return false
+
+  return routeParts.every((part, i) =>
+    part.startsWith(':') || part === actualParts[i]
+  )
+}

package/index.html

@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html lang="ro">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>MyFramework — SPA Demo</title>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+    body {
+      font-family: system-ui, sans-serif;
+      background: #0f0f13;
+      color: #e8e8f0;
+      min-height: 100vh;
+    }
+
+    nav {
+      display: flex;
+      gap: 1rem;
+      padding: 1rem 2rem;
+      background: #1a1a24;
+      border-bottom: 1px solid #2a2a3a;
+    }
+
+    nav a {
+      color: #8b8bff;
+      text-decoration: none;
+      font-weight: 500;
+    }
+
+    nav a:hover { color: #fff; }
+
+    #app {
+      padding: 2rem;
+      max-width: 600px;
+      margin: 0 auto;
+    }
+
+    .page h1 { margin-bottom: 1rem; font-size: 1.8rem; }
+    .page p  { margin-bottom: 0.5rem; color: #aaa; line-height: 1.6; }
+
+    .counter {
+      margin-top: 2rem;
+      padding: 1.5rem;
+      background: #1a1a24;
+      border: 1px solid #2a2a3a;
+      border-radius: 10px;
+      display: inline-block;
+    }
+
+    .counter h2 { margin-bottom: 1rem; font-size: 1rem; color: #888; text-transform: uppercase; letter-spacing: 0.1em; }
+
+    .value {
+      font-size: 4rem !important;
+      font-weight: 700;
+      color: #8b8bff !important;
+      text-align: center;
+      line-height: 1;
+      margin-bottom: 0.25rem !important;
+    }
+
+    .derived {
+      text-align: center;
+      font-size: 0.85rem !important;
+      color: #555 !important;
+      margin-bottom: 1rem !important;
+    }
+
+    .actions {
+      display: flex;
+      gap: 0.5rem;
+      justify-content: center;
+    }
+
+    .actions button {
+      padding: 0.5rem 1.25rem;
+      border: 1px solid #3a3a5a;
+      background: #0f0f1a;
+      color: #e8e8f0;
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 1.1rem;
+      transition: background 0.15s;
+    }
+
+    .actions button:hover { background: #2a2a3a; }
+
+    .status {
+      margin-top: 1rem;
+      font-size: 0.8rem;
+      color: #4caf50 !important;
+    }
+  </style>
+</head>
+<body>
+  <nav>
+    <a href="#/">Home</a>
+    <a href="#/about">About</a>
+  </nav>
+  <div id="app"></div>
+  <script type="module" src="./app/main.js"></script>
+</body>
+</html>

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "fusee-framework",
+  "version": "0.1.0-alpha.1",
+  "description": "Fusée - Signals-first JS Framework | Peak Performance",
+  "main": "framework/index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "type": "commonjs",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/SebiSomu/fusee.git"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  }
+}