vdew

v0.1.0

Published

8 days ago

Lightweight reactive UI framework with .vdew single-file components

0High
0Medium
0Low

dewdwew

reactive ui framework sfc vite-plugin vue-like

🌿 Vdew

Vue + Dew = Vdew

가볍고 직관적인 반응형 UI 프레임워크 (~2KB min)

.vdew 단일 파일 컴포넌트를 지원합니다.

✨ Features

반응성 - Proxy 기반 자동 UI 업데이트
SFC - .vdew 단일 파일 컴포넌트 (Vue처럼!)
Scoped CSS - 컴포넌트별 스타일 격리
Store - Vuex 스타일 상태 관리
Config - Nuxt처럼 vdew.config.ts로 head 자동 관리
TypeScript - 완벽한 타입 지원
Vite Plugin - 빠른 HMR 지원
경량 - ~2KB (gzip)

📦 Installation

npm install vdew

yarn add vdew

pnpm add vdew

bun add vdew

🚀 Quick Start

1. Vite 설정

// vite.config.ts
import { defineConfig } from 'vite'
import vdew from 'vdew'

export default defineConfig({
  plugins: [vdew()]
})

2. 설정 파일 (선택사항)

// src/vdew.config.ts
import { defineConfig } from 'vdew'

export default defineConfig({
  lang: 'ko',
  head: {
    title: 'My App',
    titleTemplate: '%s | My App',
    meta: [
      { charset: 'UTF-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1.0' },
    ]
  }
})

3. App.vdew 작성

<!-- src/App.vdew -->
<template>
  <div class="app">
    <h1>{{ title }}</h1>
    <p>Count: {{ count.value }}</p>
    <button @click="increment">+</button>
  </div>
</template>

<script setup>
const title = 'Hello Vdew!'
const count = ref(0)
const increment = () => count.value++
</script>

<style scoped>
.app {
  text-align: center;
  padding: 2rem;
}
button {
  padding: 0.5rem 1rem;
}
</style>

4. 엔트리 파일

// src/main.ts
import './vdew.config'
import { createApp } from 'vdew'
import App from './App.vdew'

createApp(App).mount('#app')

5. HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
</body>
</html>

📖 .vdew 파일 문법

Template

<template>
  <div>
    <!-- 텍스트 바인딩 -->
    <p>{{ message }}</p>
    
    <!-- 이벤트 바인딩 -->
    <button @click="handleClick">Click</button>
    
    <!-- 속성 바인딩 -->
    <input :value="text" @input="updateText">
    
    <!-- 조건부 렌더링 (JS 사용) -->
    <div>{{ isVisible ? 'Visible' : 'Hidden' }}</div>
  </div>
</template>

Script Setup

<script setup>
// ref - 반응형 값
const count = ref(0)

// computed - 계산된 값
const double = computed(() => count.value * 2)

// reactive - 반응형 객체
const state = reactive({
  name: 'Vdew',
  items: []
})

// 함수
const increment = () => count.value++
</script>

Scoped Style

<style scoped>
/* 이 컴포넌트에만 적용 */
.app {
  color: blue;
}
</style>

<style>
/* 전역 스타일 */
body {
  margin: 0;
}
</style>

📖 API Reference

Reactivity

import { ref, reactive, computed, effect } from 'vdew'

// ref - 단일 값
const count = ref(0)
count.value++

// reactive - 객체
const state = reactive({ count: 0 })
state.count++

// computed - 계산된 값
const double = computed(() => count.value * 2)

// effect - 부수 효과
effect(() => {
  console.log(count.value)
})

Component (without .vdew)

import { h, defineComponent, createApp } from 'vdew'

const App = defineComponent({
  setup() {
    const count = ref(0)
    return { count }
  },
  render({ count }) {
    return h('div', {}, [
      h('p', {}, [`Count: ${count.value}`]),
      h('button', { onClick: () => count.value++ }, ['+'])
    ])
  }
})

createApp(App).mount('#app')

Store

import { defineStore } from 'vdew'

const useStore = defineStore({
  state: () => ({
    count: 0,
    todos: []
  }),
  
  getters: {
    double: (state) => state.count * 2
  },
  
  mutations: {
    INCREMENT(state) { state.count++ },
    ADD_TODO(state, text) {
      state.todos = [...state.todos, { id: Date.now(), text }]
    }
  },
  
  actions: {
    async fetchTodos({ commit }) {
      const res = await fetch('/api/todos')
      const data = await res.json()
      data.forEach(t => commit('ADD_TODO', t.text))
    }
  }
})

// 사용
const store = useStore()
store.state.count
store.getters.double
store.commit('INCREMENT')
store.dispatch('fetchTodos')

Head Management

import { useHead } from 'vdew'

// 동적 head 변경
useHead({
  title: 'About Page',
  meta: [
    { name: 'description', content: 'About us' }
  ]
})

🚀 Deploy

프로젝트 구조

my-vdew-app/
├── index.html
├── src/
│   ├── main.ts
│   ├── App.vdew
│   └── vdew.config.ts
├── package.json
└── vite.config.ts

Vercel

# GitHub 연결하면 자동 감지!
npm i -g vercel
vercel

| 설정 | 값 | |------|-----| | Build Command | vite build | | Output Directory | dist |

AWS Amplify

# amplify.yml
version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm install
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: dist
    files:
      - '**/*'

Netlify

# netlify.toml
[build]
  command = "npm run build"
  publish = "dist"

📊 Bundle Size

| 파일 | 용량 | gzip | |------|------|------| | vdew.js (ESM) | ~7 KB | ~2 KB | | vdew.cjs (CommonJS) | ~4 KB | ~1.5 KB |

비교

| 프레임워크 | gzip | |------------|------| | Vdew | ~2 KB ✨ | | Preact | ~4 KB | | Vue 3 | ~40 KB | | React + ReactDOM | ~45 KB |

🤝 Contributing

git clone https://github.com/dudu/vdew
cd vdew
npm install
npm run dev   # watch mode
npm run build # production build