SlimVue

SlimVue is a lightweight JavaScript library for building user interfaces, inspired by Vue.js, offering a minimal and reactive API.

✨ Features (Placeholder)

• Component-based architecture (using defineComponent)
• Reactivity system (using signal and reactive)
• JSX support (via Babel)
• Efficient rendering (to be implemented)

🚀 Installation (Placeholder)

npm install slimvue
# or
yarn add slimvue

💡 Usage (Placeholder)

import { defineComponent, createApp, h, signal, reactive } from 'slimvue'; // Assuming h, signal, reactive are exported

// Define a child component
const NameDisplay = defineComponent((props) => {
  // props are reactive
  return () => {
    return props.isVisible
      ? <h2>Hello, {props.name}! Count: {props.count}</h2>
      : <p>Name is hidden.</p>;
  };
});

// Define the main App component
const App = defineComponent(() => {
  // Create reactive state using signal for primitive values
  const count = signal(0);
  // Create reactive state using reactive for objects
  const state = reactive({
    userName: "SlimVue User",
    showDetails: true
  });

  const increment = () => {
    count.value += 1; // Update signal value
  };

  const toggleDetails = () => {
    state.showDetails = !state.showDetails;
    if (state.showDetails) {
      state.userName = state.userName === "SlimVue User" ? "Awesome User" : "SlimVue User";
    }
  };

  // The render function, automatically re-renders when reactive state changes
  return () => (
    <div>
      <h1>Welcome to SlimVue</h1>
      <NameDisplay 
        name={state.userName} 
        isVisible={state.showDetails} 
        count={count.value} 
      />
      <p>Current count: {count.value}</p>
      <input
        type="text"
        value={state.userName}
        oninput={(e) => state.userName = e.target.value}
      />
      <button onclick={increment}>Increment Count</button>
      <button onclick={toggleDetails}>Toggle Details</button>
      
      <ul>
        {Array(count.value).fill(0).map((_, index) => (
          <li key={index}>Item {index + 1}</li>
        ))}
      </ul>
    </div>
  );
});

// Get the container element
const appContainer = document.getElementById('root'); // Ensure you have <div id="root"></div> in your HTML

// Create and mount the application
if (appContainer) {
  createApp(App).mount(appContainer);
} else {
  console.error('Root element #root not found');
}

🤝 Contributing

Contributions of all kinds are welcome! Feel free to open an issue or submit a pull request.

📄 License

MIT