Skip to content

Commit e58aac3

Browse files
nickmessingnickmessing
committed
refactor(core): auto-generate event handlers and composables
1 parent be4a527 commit e58aac3

File tree

138 files changed

+3867
-1075
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

138 files changed

+3867
-1075
lines changed

‎.vscode/settings.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,5 @@
55
"vue.complete.casing.tags": "pascal",
66
"typescript.preferences.importModuleSpecifier": "non-relative",
77
"typescript.tsdk": "node_modules/typescript/lib",
8-
"cSpell.words": ["Pinia", "Tinybase", "todos"]
8+
"cSpell.words": ["composables", "Pinia", "Tinybase", "todos"]
99
}

‎README.md‎

Lines changed: 3 additions & 295 deletions
Original file line numberDiff line numberDiff line change
@@ -2,300 +2,8 @@
22

33
**Warning**: This is a work-in-progress. Avoid using in production.
44

5-
Please open github issues for any feature requests or questions.
5+
Documentation is not available, check example typescript app to see how to use it for experiments.
66

7-
**Note**: For all props marked as "reactive" - they accept values, functions that return values or references (including computed references)
7+
To have typescript support check `packages/examples/todolist-ts/src/store.ts` file.
88

9-
- [Setup](#setup)
10-
- [Usage](#usage)
11-
- [Composables](#composables)
12-
- [`useStore`](#usestore)
13-
- [`useValues`](#usevalues)
14-
- [`useValue` (writable)](#usevalue)
15-
- [`useTables`](#usetables)
16-
- [`useTable`](#usetable)
17-
- [`useRow`](#userow)
18-
- [`useCell` (writable)](#usecell)
19-
- [Usage with TypeScript](#usage-with-typescript)
20-
21-
# Setup
22-
23-
Make sure you have a [TinyBase](https://tinybase.org/) store set-up.
24-
25-
## 1. Install vue-tinybase
26-
27-
```shell
28-
npm install --save vue-tinybase
29-
```
30-
31-
## 2. Connect TinyBase Store to Vue
32-
33-
This will be "default" store used by composables.
34-
If this store is not passed - you have to manually pass store as the last argument to every composable.
35-
36-
```js
37-
const app = createApp(App)
38-
39-
// store should be imported from where it is created
40-
app.use(createTinybaseVue(store))
41-
```
42-
43-
# Usage
44-
45-
## Composables
46-
47-
### `useStore`
48-
49-
Returns the default store used in the ["Connect TinyBase Store to Vue"](#2-connect-tinybase-store-to-vue) step.
50-
51-
**Note**: This is not a ref, this comes a the store itself.
52-
53-
```typescript
54-
const store = useStore()
55-
56-
function setAsCompleted() {
57-
store.setCell('todos', rowId, 'completed', true)
58-
}
59-
```
60-
61-
### `useValues`
62-
63-
Returns a **readonly** computed reference to all the values from a store.
64-
65-
#### Params:
66-
67-
- `store?: Store`
68-
69-
```vue
70-
<script setup>
71-
import { useValues } from 'vue-tinybase'
72-
73-
const values = useValues()
74-
</script>
75-
<template>
76-
<h2>Store is {{ values.open ? 'open' : 'closed' }}</h2>
77-
</template>
78-
```
79-
80-
### `useValue`
81-
82-
Returns a **writable** computed reference to a value from a store.
83-
84-
#### Params:
85-
86-
- `valueId: string` (reactive)
87-
- `store?: Store`
88-
89-
```vue
90-
<script setup>
91-
import { useValue } from 'vue-tinybase'
92-
93-
const isOpen = useValue('open') // this is a boolean
94-
</script>
95-
<template>
96-
<button @click="isOpen = !isOpen">{{ isOpen ? 'Close' : 'Open' }}</button>
97-
</template>
98-
```
99-
100-
### `useTables`
101-
102-
Returns a **readonly** computed reference to all the tables from a store.
103-
104-
#### Params:
105-
106-
- `store?: Store`
107-
108-
```vue
109-
<script setup>
110-
import { useTables } from 'vue-tinybase'
111-
112-
const tables = useTables()
113-
</script>
114-
115-
<template>
116-
<table>
117-
<thead>
118-
<tr>
119-
<th>Species</th>
120-
<th>Count</th>
121-
<th>Sold</th>
122-
</tr>
123-
</thead>
124-
<tbody>
125-
<tr v-for="(row, rowId) in tables.pets" :key="rowId">
126-
<td>{{ row.species }}</td>
127-
<td>{{ row.count }}</td>
128-
<td>{{ row.sold }}</td>
129-
</tr>
130-
</tbody>
131-
</table>
132-
</template>
133-
```
134-
135-
### `useTable`
136-
137-
Returns a **readonly** computed reference to a table from a store.
138-
139-
#### Params:
140-
141-
- `tableId: string` (reactive)
142-
- `store?: Store`
143-
144-
```vue
145-
<script setup>
146-
import { useTable } from 'vue-tinybase'
147-
148-
const pets = useTable('pets')
149-
</script>
150-
151-
<template>
152-
<table>
153-
<thead>
154-
<tr>
155-
<th>Species</th>
156-
<th>Count</th>
157-
<th>Sold</th>
158-
</tr>
159-
</thead>
160-
<tbody>
161-
<tr v-for="(row, index) in pets" :key="index">
162-
<td>{{ row.species }}</td>
163-
<td>{{ row.count }}</td>
164-
<td>{{ row.sold }}</td>
165-
</tr>
166-
</tbody>
167-
</table>
168-
</template>
169-
```
170-
171-
### `useRow`
172-
173-
Returns a **readonly** computed reference to a row from a table.
174-
175-
#### Params:
176-
177-
- `tableId: string` (reactive)
178-
- `rowId: string` (reactive)
179-
- `store?: Store`
180-
181-
```vue
182-
<script setup>
183-
import { useRow } from 'vue-tinybase'
184-
185-
const props = defineProps(['rowId'])
186-
187-
const pet = useRow('pets', () => props.rowId)
188-
</script>
189-
190-
<template>
191-
<tr>
192-
<td>{{ pet.species }}</td>
193-
<td>{{ pet.count }}</td>
194-
<td>{{ pet.sold }}</td>
195-
</tr>
196-
</template>
197-
```
198-
199-
### `useCell`
200-
201-
Returns a **writable** computed reference to a cell from a store.
202-
203-
#### Params:
204-
205-
- `tableId: string` (reactive)
206-
- `rowId: string` (reactive)
207-
- `cellId: string` (reactive)
208-
- `store?: Store`
209-
210-
```vue
211-
<script setup>
212-
import { useRow } from 'vue-tinybase'
213-
214-
const props = defineProps(['rowId'])
215-
216-
const isCompleted = useCell('todos', () => props.rowId, 'completed')
217-
</script>
218-
219-
<template>
220-
<button @click="isCompleted = !isCompleted">
221-
{{ isCompleted ? 'Mark as completed' : 'Unmark as completed' }}
222-
</button>
223-
</template>
224-
```
225-
226-
## Usage with TypeScript
227-
228-
Usage with typescript is only well-supported for a single store.
229-
230-
Check `packages/examples/todolist-ts` for a working example.
231-
232-
### 1. Expose type definitions
233-
234-
Expose your store type definitions to be imported elsewere. Here's a simple example: (also available in `packages/examples/todolist-ts`).
235-
236-
```typescript
237-
import { createStore } from 'tinybase/with-schemas'
238-
239-
export const store = createStore().setTablesSchema({
240-
todos: {
241-
text: { type: 'string' },
242-
completed: { type: 'boolean', default: false },
243-
},
244-
})
245-
246-
export type Store = typeof store // this line exposes the type
247-
```
248-
249-
### 2. Declare a typed module
250-
251-
Add to your global `.d.ts` a definition based on your store types.
252-
253-
```typescript
254-
declare module 'vue-tinybase/typed' {
255-
import type { Store } from '@/store' // import from your type definition
256-
import type {
257-
TypedUseCellFunction,
258-
TypedUseRowFunction,
259-
TypedUseStoreFunction,
260-
TypedUseTableFunction,
261-
TypedUseTablesFunction,
262-
TypedUseValueFunction,
263-
TypedUseValuesFunction,
264-
} from 'vue-tinybase'
265-
266-
export const useStore: TypedUseStoreFunction<Store>
267-
export const useValues: TypedUseValuesFunction<Store>
268-
export const useValue: TypedUseValueFunction<Store>
269-
export const useTables: TypedUseTablesFunction<Store>
270-
export const useTable: TypedUseTableFunction<Store>
271-
export const useRow: TypedUseRowFunction<Store>
272-
export const useCell: TypedUseCellFunction<Store>
273-
}
274-
```
275-
276-
### 3. Add alias to your bundler
277-
278-
Alias `vue-tinybase/typed` to be resolved to `vue-tinybase` in your bundler.
279-
280-
Example with vite:
281-
282-
```typescript
283-
import { fileURLToPath, URL } from 'node:url'
284-
285-
import vue from '@vitejs/plugin-vue'
286-
import { defineConfig } from 'vite'
287-
288-
// https://vitejs.dev/config/
289-
export default defineConfig({
290-
plugins: [vue()],
291-
resolve: {
292-
alias: {
293-
'vue-tinybase/typed': 'vue-tinybase',
294-
},
295-
},
296-
})
297-
```
298-
299-
### 4. Replace your imports
300-
301-
Import all composables from `vue-tinybase/typed` instead of `vue-tinybase`
9+
All event listeners and composables are auto-generated from tinybase `store.d.ts` file, only `valueRef` and `cellRef` are not auto-generated.

‎package.json‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,13 @@
22
"name": "vue-tinybase-monorepo",
33
"version": "0.1.0",
44
"author": "Nicolai Moraru <dot.nick.dot.messing@gmail.com>",
5-
"license": "MIT"
5+
"license": "MIT",
6+
"scripts": {
7+
"dev:todolist-ts-example": "cd packages/examples/todolist-ts && pnpm run dev",
8+
"dev:vue-tinybase": "cd packages/public/vue-tinybase && pnpm run dev",
9+
"dev": "run-p dev:*"
10+
},
11+
"devDependencies": {
12+
"npm-run-all2": "^6.1.2"
13+
}
614
}

‎packages/examples/todolist-ts/environment.d.ts‎

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -6,24 +6,3 @@ declare module '*.vue' {
66
// eslint-disable-next-line import/no-default-export
77
export default component
88
}
9-
10-
declare module 'vue-tinybase/typed' {
11-
import type { Store } from '@/store'
12-
import type {
13-
TypedUseCellFunction,
14-
TypedUseRowFunction,
15-
TypedUseStoreFunction,
16-
TypedUseTableFunction,
17-
TypedUseTablesFunction,
18-
TypedUseValueFunction,
19-
TypedUseValuesFunction,
20-
} from 'vue-tinybase'
21-
22-
export const useStore: TypedUseStoreFunction<Store>
23-
export const useValues: TypedUseValuesFunction<Store>
24-
export const useValue: TypedUseValueFunction<Store>
25-
export const useTables: TypedUseTablesFunction<Store>
26-
export const useTable: TypedUseTableFunction<Store>
27-
export const useRow: TypedUseRowFunction<Store>
28-
export const useCell: TypedUseCellFunction<Store>
29-
}

‎packages/examples/todolist-ts/src/components/todos/NewTodoInput.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script setup lang="ts">
22
import { ref } from 'vue'
3-
import { useStore } from 'vue-tinybase/typed'
3+
import { useStore } from 'vue-tinybase'
44
55
const store = useStore()
66

‎packages/examples/todolist-ts/src/components/todos/SingleTodo.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
<script setup lang="ts">
22
import { nextTick, ref } from 'vue'
3-
import { useCell, useStore } from 'vue-tinybase/typed'
3+
import { cellRef, useStore } from 'vue-tinybase'
44
55
const props = defineProps<{
66
rowId: string
77
}>()
88
9-
const isCompleted = useCell('todos', () => props.rowId, 'completed')
9+
const isCompleted = cellRef('todos', () => props.rowId, 'completed')
1010
11-
const todoText = useCell('todos', () => props.rowId, 'text')
11+
const todoText = cellRef('todos', () => props.rowId, 'text')
1212
const inputValue = ref('')
1313
const inputReference = ref<HTMLInputElement>()
1414
const isEditing = ref(false)
1515
1616
async function enterEditingMode() {
1717
isEditing.value = true
18-
inputValue.value = todoText.value
18+
inputValue.value = todoText.value ?? ''
1919
await nextTick()
2020
inputReference.value?.focus()
2121
}

‎packages/examples/todolist-ts/src/components/todos/TodosFooter.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<script setup lang="ts">
22
import { computed } from 'vue'
33
import { RouterLink } from 'vue-router'
4-
import { useStore, useTable } from 'vue-tinybase/typed'
4+
import { useStore, useTable } from 'vue-tinybase'
55
6-
const table = useTable('todos')
6+
const { data: table } = useTable('todos')
77
const entries = computed(() => Object.entries(table.value))
88
const activeEntries = computed(() => entries.value.filter(([_, entry]) => !entry.completed))
99
const completedEntries = computed(() => entries.value.filter(([_, entry]) => entry.completed))

0 commit comments

Comments
 (0)