SolidJS: Reactive UI Framework

# Buat proyek SolidJS baru dengan template TypeScript
npx degit solidjs/templates/ts my-solid-app

# Atau menggunakan JavaScript
npx degit solidjs/templates/js my-solid-app

# Masuk ke direktori
cd my-solid-app

# Instal dependencies
npm install

# Jalankan development server
npm run dev

# Build untuk production
npm run build

my-solid-app/
├── node_modules/
├── public/
│   └── favicon.ico
├── src/
│   ├── assets/            # Static files
│   ├── components/        # Komponen reusable
│   │   ├── Counter.tsx
│   │   ├── TodoList.tsx
│   │   └── UserCard.tsx
│   ├── pages/             # Halaman
│   │   ├── Home.tsx
│   │   ├── About.tsx
│   │   └── NotFound.tsx
│   ├── stores/            # State management
│   │   └── todoStore.ts
│   ├── App.tsx            # Root component
│   ├── App.css            # Global styles
│   ├── index.tsx          # Entry point
│   └── index.css          # Base styles
├── index.html             # HTML template
├── package.json
├── tsconfig.json
├── vite.config.ts
└── README.md

// index.tsx — Entry point SolidJS
import { render } from 'solid-js/web';
import App from './App';

// render() mirip ReactDOM.render() di React
// Mount App component ke elemen #root di HTML
render(() => <App />, document.getElementById('root')!);

import { createSignal } from 'solid-js';

function Counter() {
  // createSignal mengembalikan [getter, setter]
  const [count, setCount] = createSignal(0);

  // count() — panggil sebagai fungsi untuk mendapatkan nilai
  // setCount(5) — set nilai baru
  // setCount(prev => prev + 1) — update berdasarkan nilai sebelumnya

  return (
    <div>
      <h2>Count: {count()}</h2>
      <button onClick={() => setCount(count() + 1)}>Tambah</button>
      <button onClick={() => setCount(count() - 1)}>Kurang</button>
      <button onClick={() => setCount(0)}>Reset</button>
    </div>
  );
}

import { createSignal } from 'solid-js';

function DataTypesDemo() {
  // Signal dengan number
  const [count, setCount] = createSignal<number>(0);

  // Signal dengan string
  const [name, setName] = createSignal<string>('Guest');

  // Signal dengan boolean
  const [isOpen, setIsOpen] = createSignal<boolean>(false);

  // Signal dengan object
  const [user, setUser] = createSignal<{ name: string; age: number }>({
    name: 'Budi',
    age: 25
  });

  // Signal dengan array
  const [items, setItems] = createSignal<string[]>(['apel', 'mangga']);

  // Update object (gunakan spread untuk merge)
  const updateUserName = () => {
    setUser(prev => ({ ...prev, name: 'Andi' }));
  };

  // Update array
  const addItem = (item: string) => {
    setItems(prev => [...prev, item]);
  };

  const removeItem = (index: number) => {
    setItems(prev => prev.filter((_, i) => i !== index));
  };

  return (
    <div>
      <p>Count: {count()}</p>
      <p>Nama: {name()}</p>
      <p>Terbuka: {isOpen() ? 'Ya' : 'Tidak'}</p>
      <p>User: {user().name}, Umur: {user().age}</p>
      <p>Items: {items().join(', ')}</p>
    </div>
  );
}

// components/UserCard.tsx
import { Component, Show, createSignal } from 'solid-js';

// Props interface
interface UserCardProps {
  name: string;
  email: string;
  avatar: string;
  role?: string;
  onDelete?: (name: string) => void;
}

// Component sebagai arrow function dengan tipe Component
const UserCard: Component<UserCardProps> = (props) => {
  const [isExpanded, setIsExpanded] = createSignal(false);

  // Component function ini HANYA berjalan sekali!
  console.log('UserCard created:', props.name);

  // Props di SolidJS bersifat reactive — mirip signals
  // Bisa dipanggil: props.name (object property, bukan function)

  const badgeColor = () => {
    const colors: Record<string, string> = {
      'Admin': '#e74c3c',
      'Editor': '#f39c12',
      'User': '#2ecc71'
    };
    return colors[props.role || 'User'] || '#95a5a6';
  };

  return (
    <div class="user-card" classList={{ expanded: isExpanded() }}>
      <div class="user-header">
        <img src={props.avatar} alt={props.name} class="user-avatar" />
        <div class="user-info">
          <h3>{props.name}</h3>
          <p>{props.email}</p>
          <span
            class="badge"
            style={{ "background-color": badgeColor() }}
          >
            {props.role || 'User'}
          </span>
        </div>
      </div>

      <div class="user-actions">
        <button onClick={() => setIsExpanded(!isExpanded())}>
          {isExpanded() ? 'Tutup' : 'Detail'}
        </button>
        <button onClick={() => props.onDelete?.(props.name)}>
          🗑️ Hapus
        </button>
      </div>

      <Show when={isExpanded()}>
        <div class="user-details">
          <p>Detail lengkap tentang {props.name}</p>
          <p>Role: {props.role || 'User'}</p>
        </div>
      </Show>
    </div>
  );
};

export default UserCard;

// === Parent Component ===
// components/UserList.tsx
import { Component, For } from 'solid-js';
import UserCard from './UserCard';

const UserList: Component = () => {
  const [users, setUsers] = createSignal([
    { name: 'Budi', email: 'budi@mail.com', avatar: '/img/budi.jpg', role: 'Admin' },
    { name: 'Ani', email: 'ani@mail.com', avatar: '/img/ani.jpg', role: 'Editor' },
    { name: 'Citra', email: 'citra@mail.com', avatar: '/img/citra.jpg', role: 'User' }
  ]);

  const deleteUser = (name: string) => {
    setUsers(prev => prev.filter(u => u.name !== name));
  };

  return (
    <div class="user-list">
      <h2>Daftar User ({users().length})</h2>
      <For each={users()}>
        {(user) => (
          <UserCard
            name={user.name}
            email={user.email}
            avatar={user.avatar}
            role={user.role}
            onDelete={deleteUser}
          />
        )}
      </For>
    </div>
  );
};

export default UserList;

import { Component, mergeProps } from 'solid-js';

// Props di SolidJS bersifat reactive secara default
// Props diakses sebagai getter (property access), bukan function call
const Greeting: Component<{ name: string; greeting?: string }> = (props) => {
  // props.name akan otomatis update jika parent mengubah nama
  // props.greeting memiliki nilai default

  // Gunakan mergeProps untuk default values
  const merged = mergeProps({ greeting: 'Halo' }, props);

  return (
    <div>
      <h1>{merged.greeting}, {merged.name}!</h1>
    </div>
  );
};

// Destructuring props — HATI-HATI!
// Jangan destructure langsung karena akan memutus reactivity
// ❌ SALAH:
// const Bad: Component<Props> = ({ name }) => <h1>{name}</h1>;

// ✅ BENAR:
// const Good: Component<Props> = (props) => <h1>{props.name}</h1>;

// Atau gunakan splitProps untuk membagi props
import { splitProps } from 'solid-js';

const UserAvatar: Component<UserCardProps> = (props) => {
  // Pisahkan props untuk component ini vs props yang di-pass ke elemen
  const [local, others] = splitProps(props, ['name', 'avatar']);

  return (
    <div {...others}>
      <img src={local.avatar} alt={local.name} />
      <span>{local.name}</span>
    </div>
  );
};

import { Component, createSignal, Show } from 'solid-js';

const AuthDemo: Component = () => {
  const [isLoggedIn, setIsLoggedIn] = createSignal(false);
  const [user, setUser] = createSignal({ name: 'Budi', role: 'Admin' });

  return (
    <div>
      <!-- Show dengan when -->
      <Show
        when={isLoggedIn()}
        fallback={<button onClick={() => setIsLoggedIn(true)}>Login</button>}
      >
        <h2>Selamat datang, {user().name}!</h2>
        <button onClick={() => setIsLoggedIn(false)}>Logout</button>
      </Show>

      <!-- Show dengan keyed (untuk mengakses data di children) -->
      <Show when={user()} keyed>
        {(u) => (
          <div>
            <p>Nama: {u.name}</p>
            <p>Role: {u.role}</p>
          </div>
        )}
      </Show>
    </div>
  );
};

import { Component, createSignal, For, Index } from 'solid-js';

interface Product {
  id: number;
  name: string;
  price: number;
}

const ProductList: Component = () => {
  const [products, setProducts] = createSignal<Product[]>([
    { id: 1, name: 'Laptop', price: 12000000 },
    { id: 2, name: 'Mouse', price: 250000 },
    { id: 3, name: 'Keyboard', price: 750000 }
  ]);
  const [searchTerm, setSearchTerm] = createSignal('');

  // Filter products berdasarkan search
  const filteredProducts = () =>
    products().filter(p =>
      p.name.toLowerCase().includes(searchTerm().toLowerCase())
    );

  const formatPrice = (price: number) =>
    new Intl.NumberFormat('id-ID', {
      style: 'currency',
      currency: 'IDR'
    }).format(price);

  return (
    <div>
      <input
        type="text"
        placeholder="Cari produk..."
        value={searchTerm()}
        onInput={(e) => setSearchTerm(e.currentTarget.value)}
      />

      <p>{filteredProducts().length} produk ditemukan</p>

      {/* For: Untuk list yang berubah (dynamic) */}
      <For each={filteredProducts()} fallback={<p>Tidak ada produk</p>}>
        {(product) => (
          <div class="product-card">
            <h3>{product.name}</h3>
            <p>{formatPrice(product.price)}</p>
            <button onClick={() =>
              setProducts(prev => prev.filter(p => p.id !== product.id))
            }>
              Hapus
            </button>
          </div>
        )}
      </For>

      {/* Index: Untuk list yang isinya stabil (static) */}
      <h3>Dengan Index (lebih cepat untuk list statis):</h3>
      <Index each={filteredProducts()}>
        {(product, index) => (
          <div>
            {index + 1}. {product().name} — {formatPrice(product().price)}
          </div>
        )}
      </Index>
    </div>
  );
};

import { Component, createSignal, Switch, Match } from 'solid-js';

const StatusDisplay: Component = () => {
  const [status, setStatus] = createSignal<'loading' | 'success' | 'error'>('loading');

  return (
    <div>
      <div class="tabs">
        <button onClick={() => setStatus('loading')}>Loading</button>
        <button onClick={() => setStatus('success')}>Success</button>
        <button onClick={() => setStatus('error')}>Error</button>
      </div>

      <Switch fallback={<p>Status tidak diketahui</p>}>
        <Match when={status() === 'loading'}>
          <div class="spinner">
            <p>⏳ Memuat data...</p>
          </div>
        </Match>

        <Match when={status() === 'success'}>
          <div class="success">
            <p>✅ Data berhasil dimuat!</p>
          </div>
        </Match>

        <Match when={status() === 'error'}>
          <div class="error">
            <p>❌ Terjadi kesalahan saat memuat data</p>
            <button onClick={() => setStatus('loading')}>Coba Lagi</button>
          </div>
        </Match>
      </Switch>
    </div>
  );
};

import { createSignal, createEffect, onCleanup } from 'solid-js';

function EffectDemo() {
  const [count, setCount] = createSignal(0);
  const [name, setName] = createSignal('Budi');

  // createEffect: Berjalan otomatis saat signal yang diakses berubah
  createEffect(() => {
    console.log('Count berubah menjadi:', count());
  });

  // Effect dengan dependency tracking otomatis
  // Hanya berjalan saat name() berubah, karena hanya name() yang diakses
  createEffect(() => {
    console.log(`Halo, ${name()}!`);
    document.title = `Hello ${name()} - My App`;
  });

  // Effect dengan cleanup (mirip useEffect return function)
  createEffect(() => {
    const timer = setInterval(() => {
      console.log('Timer berjalan untuk:', name());
    }, 1000);

    // Cleanup function — dijalankan saat effect re-run atau di-destroy
    onCleanup(() => {
      clearInterval(timer);
      console.log('Timer dibersihkan untuk:', name());
    });
  });

  return (
    <div>
      <p>Count: {count()}</p>
      <button onClick={() => setCount(count() + 1)}>+</button>
      <input value={name()} onInput={e => setName(e.currentTarget.value)} />
    </div>
  );
}

import { createSignal, createMemo } from 'solid-js';

function MemoDemo() {
  const [items, setItems] = createSignal([
    { name: 'Apel', price: 5000, quantity: 3 },
    { name: 'Mangga', price: 8000, quantity: 2 },
    { name: 'Jeruk', price: 6000, quantity: 5 }
  ]);
  const [discount, setDiscount] = createSignal(0.1); // 10%

  // createMemo: Derived value yang di-cache
  // Hanya re-compute saat dependency berubah
  const subtotal = createMemo(() =>
    items().reduce((sum, item) => sum + item.price * item.quantity, 0)
  );

  const discountAmount = createMemo(() =>
    subtotal() * discount()
  );

  const total = createMemo(() =>
    subtotal() - discountAmount()
  );

  const itemCount = createMemo(() =>
    items().reduce((sum, item) => sum + item.quantity, 0)
  );

  const formatRupiah = (amount: number) =>
    new Intl.NumberFormat('id-ID', {
      style: 'currency',
      currency: 'IDR'
    }).format(amount);

  const addRandomItem = () => {
    const names = ['Pisang', 'Durian', 'Salak', 'Rambutan'];
    const randomName = names[Math.floor(Math.random() * names.length)];
    const randomPrice = Math.floor(Math.random() * 10000) + 2000;
    setItems(prev => [...prev, {
      name: randomName,
      price: randomPrice,
      quantity: 1
    }]);
  };

  return (
    <div>
      <h2>Keranjang Belanja ({itemCount()} item)</h2>

      <For each={items()}>
        {(item, i) => (
          <div>
            {item.name}: {item.quantity} × {formatRupiah(item.price)}
            = {formatRupiah(item.price * item.quantity)}
          </div>
        )}
      </For>

      <hr />
      <p>Subtotal: {formatRupiah(subtotal())}</p>
      <p>Diskon ({(discount() * 100).toFixed(0)}%): -{formatRupiah(discountAmount())}</p>
      <p><strong>Total: {formatRupiah(total())}</strong></p>

      <button onClick={addRandomItem}>+ Tambah Item</button>
      <input
        type="range"
        min="0"
        max="0.5"
        step="0.05"
        value={discount()}
        onInput={e => setDiscount(parseFloat(e.currentTarget.value))}
      />
    </div>
  );
}

// stores/todoStore.ts
import { createStore, produce } from 'solid-js/store';

interface Todo {
  id: number;
  text: string;
  completed: boolean;
  tags: string[];
}

interface TodoStore {
  todos: Todo[];
  filter: 'all' | 'active' | 'completed';
  stats: {
    total: number;
    completed: number;
    active: number;
  };
}

// createStore — reactive hingga nested properties
const [store, setStore] = createStore<TodoStore>({
  todos: [],
  filter: 'all',
  stats: {
    total: 0,
    completed: 0,
    active: 0
  }
});

// === Menggunakan Store ===
// Akses nested property — reactive!
// store.todos[0].text — reactive
// store.stats.completed — reactive
// store.filter — reactive

// === Update Store ===

// Set property langsung
setStore('filter', 'active');

// Set nested property dengan path
setStore('stats', 'total', 5);
setStore('stats', 'completed', 3);

// Set dengan function updater
setStore('stats', 'active', prev => prev - 1);

// Add item ke array
setStore('todos', store.todos.length, {
  id: Date.now(),
  text: 'Belajar SolidJS',
  completed: false,
  tags: ['belajar', 'frontend']
});

// Update item spesifik dalam array
setStore('todos', (todo) => todo.id === 42, 'completed', true);

// Update nested array property
setStore('todos', (todo) => todo.id === 42, 'tags', tags =>
  [...tags, 'penting']
);

// Delete item dari array
setStore('todos', todos => todos.filter(t => t.id !== 42));

// === Produce: Immutable update dengan mutable syntax ===
setStore(produce(store => {
  store.todos.push({
    id: Date.now(),
    text: 'Item baru',
    completed: false,
    tags: []
  });
  store.stats.total++;
  store.stats.active++;
}));

// Filtered todos (derived dari store)
import { createMemo } from 'solid-js';

const filteredTodos = createMemo(() => {
  switch (store.filter) {
    case 'active':
      return store.todos.filter(t => !t.completed);
    case 'completed':
      return store.todos.filter(t => t.completed);
    default:
      return store.todos;
  }
});

// components/TodoApp.tsx
import { Component, createSignal, For, Show, createMemo } from 'solid-js';
import { createStore } from 'solid-js/store';

const TodoApp: Component = () => {
  const [store, setStore] = createStore({
    todos: [] as { id: number; text: string; done: boolean }[],
    newTodo: ''
  });
  const [filter, setFilter] = createSignal<'all' | 'active' | 'done'>('all');

  const filteredTodos = createMemo(() => {
    switch (filter()) {
      case 'active': return store.todos.filter(t => !t.done);
      case 'done': return store.todos.filter(t => t.done);
      default: return store.todos;
    }
  });

  const remaining = createMemo(() =>
    store.todos.filter(t => !t.done).length
  );

  const addTodo = () => {
    if (!store.newTodo.trim()) return;
    setStore('todos', todos => [
      ...todos,
      { id: Date.now(), text: store.newTodo.trim(), done: false }
    ]);
    setStore('newTodo', '');
  };

  const toggleTodo = (id: number) => {
    setStore('todos', t => t.id === id, 'done', d => !d);
  };

  const removeTodo = (id: number) => {
    setStore('todos', todos => todos.filter(t => t.id !== id));
  };

  return (
    <div class="todo-app">
      <h1>📋 Todo List</h1>

      <div class="add-todo">
        <input
          value={store.newTodo}
          onInput={e => setStore('newTodo', e.currentTarget.value)}
          onKeyDown={e => e.key === 'Enter' && addTodo()}
          placeholder="Tambah todo baru..."
        />
        <button onClick={addTodo}>Tambah</button>
      </div>

      <div class="filters">
        <button classList={{ active: filter() === 'all' }}
                onClick={() => setFilter('all')}>Semua</button>
        <button classList={{ active: filter() === 'active' }}
                onClick={() => setFilter('active')}>Aktif</button>
        <button classList={{ active: filter() === 'done' }}
                onClick={() => setFilter('done')}>Selesai</button>
      </div>

      <ul class="todo-list">
        <For each={filteredTodos()} fallback={<p>Tidak ada todo</p>}>
          {(todo) => (
            <li classList={{ done: todo.done }}>
              <input
                type="checkbox"
                checked={todo.done}
                onChange={() => toggleTodo(todo.id)}
              />
              <span>{todo.text}</span>
              <button onClick={() => removeTodo(todo.id)}>✕</button>
            </li>
          )}
        </For>
      </ul>

      <p class="remaining">{remaining()} item tersisa</p>
    </div>
  );
};

export default TodoApp;

import { Component, onMount, onCleanup, createSignal, createEffect } from 'solid-js';

const LifecycleDemo: Component = () => {
  const [data, setData] = createSignal(null);
  const [windowWidth, setWindowWidth] = createSignal(window.innerWidth);

  // onMount: Berjalan sekali setelah component pertama kali mount ke DOM
  // Mirip componentDidMount di React atau ngOnInit di Angular
  onMount(async () => {
    console.log('Component mounted!');

    // Fetch data saat mount
    try {
      const response = await fetch('https://api.example.com/data');
      const result = await response.json();
      setData(result);
    } catch (error) {
      console.error('Gagal fetch data:', error);
    }
  });

  // onCleanup: Berjalan saat component di-destroy dari DOM
  // Mirip componentWillUnmount atau ngOnDestroy
  onMount(() => {
    const handleResize = () => setWindowWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);

    onCleanup(() => {
      window.removeEventListener('resize', handleResize);
      console.log('Event listener dibersihkan');
    });
  });

  // createEffect: Berjalan otomatis saat signal berubah
  // Dependency tracking OTOMATIS
  createEffect(() => {
    console.log('Window width changed:', windowWidth());
  });

  return (
    <div>
      <p>Lebar window: {windowWidth()}px</p>
      <Show when={data()} fallback={<p>Loading...</p>}>
        <pre>{JSON.stringify(data(), null, 2)}</pre>
      </Show>
    </div>
  );
};

// context/ThemeContext.tsx
import { createContext, useContext, createSignal, ParentComponent } from 'solid-js';

interface ThemeContextType {
  theme: () => string;
  toggleTheme: () => void;
}

const ThemeContext = createContext<ThemeContextType>();

// Provider component
export const ThemeProvider: ParentComponent = (props) => {
  const [theme, setTheme] = createSignal('dark');

  const toggleTheme = () => {
    setTheme(prev => prev === 'dark' ? 'light' : 'dark');
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {props.children}
    </ThemeContext.Provider>
  );
};

// Custom hook untuk menggunakan context
export function useTheme() {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme harus digunakan di dalam ThemeProvider');
  }
  return context;
}

// === Penggunaan ===
// App.tsx
const App: Component = () => (
  <ThemeProvider>
    <Header />
    <Main />
  </ThemeProvider>
);

// Header.tsx — bisa akses theme tanpa prop drilling
const Header: Component = () => {
  const { theme, toggleTheme } = useTheme();

  return (
    <header class={theme() === 'dark' ? 'dark-header' : 'light-header'}>
      <h1>Aplikasi Saya</h1>
      <button onClick={toggleTheme}>
        {theme() === 'dark' ? '☀️' : '🌙'}
      </button>
    </header>
  );
};

# Instal Solid Router
npm install @solidjs/router

// App.tsx
import { Component, lazy } from 'solid-js';
import { Router, Route, Routes, A, useNavigate } from '@solidjs/router';

// Lazy loading pages
const Home = lazy(() => import('./pages/Home'));
const Products = lazy(() => import('./pages/Products'));
const ProductDetail = lazy(() => import('./pages/ProductDetail'));
const About = lazy(() => import('./pages/About'));
const NotFound = lazy(() => import('./pages/NotFound'));

const App: Component = () => {
  return (
    <Router>
      {/* Navbar */}
      <nav>
        <A href="/" activeClass="active">Beranda</A>
        <A href="/products" activeClass="active">Produk</A>
        <A href="/about" activeClass="active">Tentang</A>
      </nav>

      {/* Routes */}
      <Routes>
        <Route path="/" component={Home} />
        <Route path="/products" component={Products} />
        <Route path="/products/:id" component={ProductDetail} />
        <Route path="/about" component={About} />
        <Route path="*" component={NotFound} />
      </Routes>
    </Router>
  );
};

export default App;

// === pages/ProductDetail.tsx ===
import { Component, createResource } from 'solid-js';
import { useParams, useNavigate } from '@solidjs/router';

const ProductDetail: Component = () => {
  const params = useParams();       // Access URL params
  const navigate = useNavigate();   // Programmatic navigation

  // Fetch data berdasarkan route param
  const fetchProduct = async (id: string) => {
    const res = await fetch(`https://api.example.com/products/${id}`);
    return res.json();
  };

  const [product] = createResource(() => params.id, fetchProduct);

  return (
    <div>
      <Show when={product()} fallback={<p>Loading...</p>}>
        <h1>{product()!.name}</h1>
        <p>Harga: Rp {product()!.price.toLocaleString()}</p>
        <button onClick={() => navigate('/products')}>
          ← Kembali ke Produk
        </button>
      </Show>
    </div>
  );
};