DEV Community: Ajinkya Borade

Writing Pinia Store Tests with `$subscribe` in Vue 3

Ajinkya Borade — Mon, 06 Jan 2025 06:56:34 +0000

Writing Pinia Tests with `$subscribe` in Vue 3

This tutorial will guide you through writing tests for Pinia stores in Vue 3, especially when dealing with stores that use the $subscribe method to react to state changes. We'll use a simplified example of a useUserStore that depends on another store (useSettingsStore) and updates its state when the settings store changes.

Introduction
Setting Up the Environment
Understanding the Stores
Writing the Test
- Mocking External Dependencies
- Creating a Test Component
- Setting Up the Test
- Testing the $subscribe Behaviour
- Handling Errors
Conclusion

Introduction

Pinia is the official state management library for Vue 3. It provides a simple and flexible API for managing global state in your application. When writing tests for Pinia stores, especially those that use $subscribe to react to state changes, you need to mock dependencies and simulate state changes to ensure your store behaves as expected.

In this tutorial, we'll write tests for a useUserStore that subscribes to changes in another store (useSettingsStore). We'll use vitest and @vue/test-utils for testing.

Setting Up the Environment

Before writing tests, ensure you have the following dependencies installed:

npm install vitest @vue/test-utils @pinia/testing

vitest: A fast and modern test runner for Vue 3.
@vue/test-utils: The official testing library for Vue components.
@pinia/testing: Provides utilities for testing Pinia stores.

Understanding the Stores

`useUserStore`

This store depends on another store:

useSettingsStore: Manages user settings.

The useUserStore subscribes to changes in the useSettingsStore using $subscribe and updates its userPreferences state whenever the settings store changes.

export const useUserStore = defineStore('user-store', () => {
  const userPreferences = ref<UserPreferences>({ theme: 'light', notifications: true })
  const settingsStore = useSettingsStore()

  const updatePreferences = () => {
    userPreferences.value = {
      theme: settingsStore.theme,
      notifications: settingsStore.notificationsEnabled,
    }
  }

  // Subscribe to changes in the settings store
  settingsStore.$subscribe((_mutation, _state) => {
    updatePreferences()
  })

  return {
    userPreferences,
  }
})

`useSettingsStore`

This store manages user settings like theme and notifications.

export const useSettingsStore = defineStore('settings-store', () => {
  const theme = ref<'light' | 'dark'>('light')
  const notificationsEnabled = ref<boolean>(true)

  const toggleTheme = () => {
    theme.value = theme.value === 'light' ? 'dark' : 'light'
  }

  const toggleNotifications = () => {
    notificationsEnabled.value = !notificationsEnabled.value
  }

  return {
    theme,
    notificationsEnabled,
    toggleTheme,
    toggleNotifications,
  }
})

Writing the Test

Mocking External Dependencies

To test useUserStore, we need to mock external dependencies.

vi.mock('@cct/notifications', () => ({
  useNotifications: () => ({
    error: vi.fn(),
  }),
}))

Creating a Test Component

We'll create a test component that uses the stores to simulate real-world usage.

const TestComponent = defineComponent({
  setup() {
    const userStore = useUserStore()
    const settingsStore = useSettingsStore()
    return {
      userStore,
      settingsStore,
    }
  },
  template: '<div></div>',
})

Setting Up the Test

We'll use createTestingPinia to set up the test environment.
ref

please note I did not use setActivePinia(createPinia())
The simple reason is flexibility of creating multiple initial state.
Also, stubActions: false, is important when you want to call real function

describe('useUserStore', () => {
  let wrapper: any
  let userStore: any
  let settingsStore: any

  beforeEach(() => {
    wrapper = mount(TestComponent, {
      global: {
        plugins: [
          createTestingPinia({
            initialState: {
              'user-store': {
                userPreferences: { theme: 'light', notifications: true },
              },
              'settings-store': {
                theme: 'light',
                notificationsEnabled: true,
              },
            },
            stubActions: false,
          }),
        ],
      },
    })

    // Get store instances
    userStore = useUserStore()
    settingsStore = useSettingsStore()
  })
})

Testing the `$subscribe` Behavior

We'll test that the userPreferences state in useUserStore updates correctly when the settingsStore changes.

it('should update userPreferences when settingsStore changes', async () => {
  // Change the theme in the settings store
  settingsStore.toggleTheme()

  // Verify the userPreferences state
  expect(userStore.userPreferences).toEqual({
    theme: 'dark',
    notifications: true,
  })

  // Toggle notifications
  settingsStore.toggleNotifications()

  // Verify the userPreferences state
  expect(userStore.userPreferences).toEqual({
    theme: 'dark',
    notifications: false,
  })
})

Handling Errors

We'll also test that the store handles errors gracefully.

it('should handle errors gracefully', async () => {
  // Simulate an error in the settings store
  settingsStore.theme = 'invalid-theme' as any

  // Verify the userPreferences state remains unchanged
  expect(userStore.userPreferences).toEqual({
    theme: 'light',
    notifications: true,
  })
})

Conclusion

Testing Pinia stores, especially those with $subscribe, requires careful mocking of dependencies and simulating state changes. By following this tutorial, you should be able to write robust tests for your Pinia stores in Vue 3.

For more advanced testing scenarios, refer to the official documentation for Pinia and Vitest.

Supercharged Vue 3.0 Reactivity + Pinia Stores

Ajinkya Borade — Tue, 19 Nov 2024 06:14:41 +0000

At my workplace I was being tasked with creating a mock chat store for internal local dev work, and while doing so I made few notes about Vue (I had some experience, but not with hooks), So this is just my obsidian notes, I hope its useful to you :)

An in-depth guide to mastering Vue's Composition API, reactive patterns, and Pinia store integration. Perfect for developers looking to level up their Vue.js skills.

Ref and Reactive References
Watch and Reactivity
Composables
Vue Reactivity API (reactive vs ref)
Pinia Store Integration
Practical Examples
Best Practices
Common Gotchas
Advanced Patterns
Testing Strategies
Performance Optimization

Ref and Reactive References

Understanding the foundation of Vue's reactivity system is crucial for building robust applications. This section explores how to manage reactive state using refs and reactive references, with practical examples and TypeScript integration.

What is Ref?

ref is Vue's way of making primitive values reactive. It wraps the value in a reactive object with a .value property.

import { ref } from 'vue'

// Inside Pinia Store
export const useMyStore = defineStore('my-store', () => {
  // Creates a reactive reference
  const count = ref<number>(0)

  // To access or modify:
  function increment() {
    count.value++  // Need .value for refs
  }

  return {
    count,  // When exposed, components can use it without .value
    increment
  }
})

Types of Refs in Stores

// Simple ref
const isLoading = ref<boolean>(false)

// Array ref
const messages = ref<Message[]>([])

// Complex object ref
const currentUser = ref<User | null>(null)

// Ref with undefined
const selectedId = ref<string | undefined>(undefined)

Watch and Reactivity

Mastering Vue's watching capabilities allows you to respond to state changes effectively and create dynamic, responsive applications. Learn how to use watchers efficiently and handle complex reactive patterns.

Basic Watch Usage

import { watch, ref } from 'vue'

export const useMyStore = defineStore('my-store', () => {
  const messages = ref<Message[]>([])

  // Simple watch
  watch(messages, (newMessages, oldMessages) => {
    console.log('Messages changed:', newMessages)
  })
})

Watch Options

// Immediate execution
watch(messages, (newMessages) => {
  // This runs immediately and on changes
}, { immediate: true })

// Deep watching
watch(messages, (newMessages) => {
  // Detects deep object changes
}, { deep: true })

// Multiple sources
watch(
  [messages, selectedId], 
  ([newMessages, newId], [oldMessages, oldId]) => {
    // Triggers when either changes
  }
)

Composables

Composables are the backbone of reusable logic in Vue 3. This section shows you how to create powerful, reusable functionality that can be shared across your entire application while maintaining clean, organized code.

Creating Custom Composables

Composables are reusable stateful logic functions that follow the use prefix convention.

// useCounter.ts
import { ref, computed } from 'vue'

export function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  const doubleCount = computed(() => count.value * 2)

  function increment() {
    count.value++
  }

  function decrement() {
    count.value--
  }

  return {
    count,
    doubleCount,
    increment,
    decrement
  }
}

Composable Lifecycle Integration

// useMousePosition.ts
import { ref, onMounted, onUnmounted } from 'vue'

export function useMousePosition() {
  const x = ref(0)
  const y = ref(0)

  function update(event: MouseEvent) {
    x.value = event.pageX
    y.value = event.pageY
  }

  onMounted(() => {
    window.addEventListener('mousemove', update)
  })

  onUnmounted(() => {
    window.removeEventListener('mousemove', update)
  })

  return { x, y }
}

Async Composables

// useAsyncData.ts
import { ref, watchEffect } from 'vue'

export function useAsyncData<T>(asyncGetter: () => Promise<T>) {
  const data = ref<T | null>(null)
  const error = ref<Error | null>(null)
  const isLoading = ref(false)

  async function fetch() {
    isLoading.value = true
    error.value = null

    try {
      data.value = await asyncGetter()
    } catch (e) {
      error.value = e as Error
    } finally {
      isLoading.value = false
    }
  }

  watchEffect(() => {
    fetch()
  })

  return {
    data,
    error,
    isLoading,
    refresh: fetch
  }
}

Composable Dependencies

// useUserProfile.ts
import { computed } from 'vue'
import { useAuth } from './useAuth'
import { useApi } from './useApi'

export function useUserProfile() {
  const { user } = useAuth()
  const { get } = useApi()

  const userProfile = computed(() => {
    if (!user.value) return null
    return get(`/users/${user.value.id}/profile`)
  })

  return {
    userProfile
  }
}

Reusable Form Validation

// useFormValidation.ts
import { ref, computed } from 'vue'

export function useFormValidation<T extends Record<string, any>>(initialState: T) {
  const formData = ref(initialState)
  const errors = ref<Partial<Record<keyof T, string>>>({})

  const isValid = computed(() => Object.keys(errors.value).length === 0)

  function validate(rules: Record<keyof T, (value: any) => string | null>) {
    errors.value = {}

    Object.entries(rules).forEach(([field, validator]) => {
      const error = validator(formData.value[field])
      if (error) {
        errors.value[field as keyof T] = error
      }
    })

    return isValid.value
  }

  return {
    formData,
    errors,
    isValid,
    validate
  }
}

Using Composables in Components


<script setup lang="ts">
import { useCounter } from '@/composables/useCounter'
import { useMousePosition } from '@/composables/useMousePosition'

const { count, increment } = useCounter()
const { x, y } = useMousePosition()
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <p>Mouse position: {{ x }}, {{ y }}</p>
  </div>
</template>

Vue Reactivity API

Deep dive into Vue's powerful reactivity system. Learn how to leverage reactive objects, refs, and computed properties to build dynamic and efficient applications.

Using Reactive Objects

The reactive method creates a reactive proxy of an object, making all of its properties deeply reactive.

// Basic Reactive Object
import { reactive } from 'vue'

interface User {
  name: string
  age: number
  settings: {
    theme: string
    notifications: boolean
  }
}

const user = reactive<User>({
  name: 'John',
  age: 30,
  settings: {
    theme: 'dark',
    notifications: true
  }
})

// Direct property access (no .value needed)
console.log(user.name)
user.age = 31

Reactive vs Ref

// Comparing reactive and ref usage
import { reactive, ref } from 'vue'

// Using ref
const count = ref(0)
const user = ref({
  name: 'John',
  age: 30
})

// Need .value for refs
count.value++
user.value.age++

// Using reactive
const state = reactive({
  count: 0,
  user: {
    name: 'John',
    age: 30
  }
})

// Direct property access
state.count++
state.user.age++

Limitations and Type Handling

// ❌ Limitations of reactive
import { reactive } from 'vue'

// Don't destructure reactive objects
const state = reactive({ count: 0 })
const { count } = state // Loses reactivity!

// ✅ Instead, use computed or methods
import { reactive, computed } from 'vue'

const state = reactive({ count: 0 })
const doubleCount = computed(() => state.count * 2)

// Or keep references to nested objects
const nested = reactive({
  user: {
    profile: {
      name: 'John'
    }
  }
})

// This maintains reactivity
const profile = nested.user.profile

Reactive Arrays and Collections

import { reactive } from 'vue'

interface TodoItem {
  id: number
  text: string
  completed: boolean
}

const todos = reactive<TodoItem[]>([])

// Methods maintain reactivity
function addTodo(text: string) {
  todos.push({
    id: Date.now(),
    text,
    completed: false
  })
}

// Working with reactive collections
const collection = reactive(new Map<string, number>())
collection.set('key', 1)

Combining with Composables

// useTaskManager.ts
import { reactive, computed } from 'vue'

interface Task {
  id: number
  title: string
  completed: boolean
}

export function useTaskManager() {
  const state = reactive({
    tasks: [] as Task[],
    filter: 'all' as 'all' | 'active' | 'completed'
  })

  const filteredTasks = computed(() => {
    switch (state.filter) {
      case 'active':
        return state.tasks.filter(task => !task.completed)
      case 'completed':
        return state.tasks.filter(task => task.completed)
      default:
        return state.tasks
    }
  })

  function addTask(title: string) {
    state.tasks.push({
      id: Date.now(),
      title,
      completed: false
    })
  }

  function toggleTask(id: number) {
    const task = state.tasks.find(t => t.id === id)
    if (task) {
      task.completed = !task.completed
    }
  }

  return {
    state,
    filteredTasks,
    addTask,
    toggleTask
  }
}

Best Practices with Reactive

// ✅ Good Practices
import { reactive, toRefs } from 'vue'

// 1. Use interfaces for type safety
interface State {
  loading: boolean
  error: Error | null
  data: string[]
}

// 2. Initialize all properties
const state = reactive<State>({
  loading: false,
  error: null,
  data: []
})

// 3. Use toRefs when you need to destructure
function useFeature() {
  const state = reactive({
    foo: 1,
    bar: 2
  })

  // Make it safe to destructure
  return toRefs(state)
}

// 4. Avoid nested reactivity when possible
// ❌ Bad
const nested = reactive({
  user: reactive({
    profile: reactive({
      name: 'John'
    })
  })
})

// ✅ Good
const state = reactive({
  user: {
    profile: {
      name: 'John'
    }
  }
})

Integration with TypeScript

// Advanced TypeScript usage with reactive
import { reactive } from 'vue'

// Define complex types
interface User {
  id: number
  name: string
  preferences: {
    theme: 'light' | 'dark'
    notifications: boolean
  }
}

interface AppState {
  currentUser: User | null
  isAuthenticated: boolean
  settings: Map<string, any>
}

// Create type-safe reactive state
const state = reactive<AppState>({
  currentUser: null,
  isAuthenticated: false,
  settings: new Map()
})

// Type-safe methods
function updateUser(user: Partial<User>) {
  if (state.currentUser) {
    Object.assign(state.currentUser, user)
  }
}

// Readonly reactive state
import { readonly } from 'vue'
const readonlyState = readonly(state)

Pinia Store Integration

Discover how to effectively integrate Pinia stores with Vue's Composition API. Learn best practices for state management and how to structure your stores for scalability.

Store Structure with Refs

export const useMyStore = defineStore('my-store', () => {
  // State
  const items = ref<Item[]>([])
  const isLoading = ref(false)
  const error = ref<Error | null>(null)

  // Computed
  const itemCount = computed(() => items.value.length)

  // Actions
  const fetchItems = async () => {
    isLoading.value = true
    try {
      items.value = await api.getItems()
    } catch (e) {
      error.value = e as Error
    } finally {
      isLoading.value = false
    }
  }

  return {
    items,
    isLoading,
    error,
    itemCount,
    fetchItems
  }
})

Composing Stores

export const useMainStore = defineStore('main-store', () => {
  // Using another store
  const otherStore = useOtherStore()

  // Watching other store's state
  watch(
    () => otherStore.someState,
    (newValue) => {
      // React to other store's changes
    }
  )
})

Practical Examples

Real-world examples demonstrating how to implement common features and patterns in Vue applications. These examples show you how to put theory into practice.

Auto-refresh Implementation

export const useChatStore = defineStore('chat-store', () => {
  const messages = ref<Message[]>([])
  const refreshInterval = ref<number | null>(null)
  const isRefreshing = ref(false)

  // Watch for auto-refresh state
  watch(isRefreshing, (shouldRefresh) => {
    if (shouldRefresh) {
      startAutoRefresh()
    } else {
      stopAutoRefresh()
    }
  })

  const startAutoRefresh = () => {
    refreshInterval.value = window.setInterval(() => {
      fetchNewMessages()
    }, 5000)
  }

  const stopAutoRefresh = () => {
    if (refreshInterval.value) {
      clearInterval(refreshInterval.value)
      refreshInterval.value = null
    }
  }

  return {
    messages,
    isRefreshing,
    startAutoRefresh,
    stopAutoRefresh
  }
})

Loading State Management

export const useDataStore = defineStore('data-store', () => {
  const data = ref<Data[]>([])
  const isLoading = ref(false)
  const error = ref<Error | null>(null)

  // Watch loading state for side effects
  watch(isLoading, (loading) => {
    if (loading) {
      // Show loading indicator
    } else {
      // Hide loading indicator
    }
  })

  // Watch for errors
  watch(error, (newError) => {
    if (newError) {
      // Handle error (show notification, etc.)
    }
  })
})

Common Gotchas

Avoid common mistakes and debugging headaches by learning about these frequently encountered issues and their solutions.

1. Ref Initialisation

// ❌ Bad
const data = ref()  // Type is 'any'

// ✅ Good
const data = ref<string[]>([])  // Explicitly typed

2. Watch Cleanup

// ❌ Bad - No cleanup
watch(source, () => {
  const timer = setInterval(() => {}, 1000)
})

// ✅ Good - With cleanup
watch(source, () => {
  const timer = setInterval(() => {}, 1000)
  return () => clearInterval(timer)  // Cleanup function
})

3. Computed vs Watch

// ❌ Bad - Using watch for derived state
watch(items, (newItems) => {
  itemCount.value = newItems.length
})

// ✅ Good - Using computed for derived state
const itemCount = computed(() => items.value.length)

4. Store Organization

// ✅ Good store organization
export const useStore = defineStore('store', () => {
  // State refs
  const data = ref<Data[]>([])
  const isLoading = ref(false)

  // Computed properties
  const isEmpty = computed(() => data.value.length === 0)

  // Watchers
  watch(data, () => {
    // Handle data changes
  })

  // Actions
  const fetchData = async () => {
    // Implementation
  }

  // Return public interface
  return {
    data,
    isLoading,
    isEmpty,
    fetchData
  }
})

Common Gotchas

Forgetting .value

// ❌ Bad
const count = ref(0)
count++ // Won't work

// ✅ Good
count.value++

Watch Timing

// ❌ Bad - Might miss initial state
watch(source, () => {})

// ✅ Good - Catches initial state
watch(source, () => {}, { immediate: true })

Memory Leaks

// ❌ Bad - No cleanup
const store = useStore()
setInterval(() => {
  store.refresh()
}, 1000)

// ✅ Good - With cleanup
const intervalId = setInterval(() => {
  store.refresh()
}, 1000)
onBeforeUnmount(() => clearInterval(intervalId))

Advanced Patterns

Take your Vue.js skills to the next level with advanced patterns and techniques for building complex, scalable applications.

Complex Component Communication

// Example of advanced component communication patterns
export function useComponentBridge() {
  const events = ref(new Map())

  function emit(event: string, data: any) {
    if (events.value.has(event)) {
      events.value.get(event).forEach((handler: Function) => handler(data))
    }
  }

  function on(event: string, handler: Function) {
    if (!events.value.has(event)) {
      events.value.set(event, new Set())
    }
    events.value.get(event).add(handler)

    return () => events.value.get(event).delete(handler)
  }

  return { emit, on }
}

Testing Strategies

Learn how to effectively test your Vue components and stores using modern testing practices and tools.

Testing Composables

import { renderComposable } from '@testing-library/vue-composables'
import { useCounter } from './useCounter'

describe('useCounter', () => {
  test('should increment counter', () => {
    const { result } = renderComposable(() => useCounter())

    expect(result.current.count.value).toBe(0)
    result.current.increment()
    expect(result.current.count.value).toBe(1)
  })
})

Performance Optimization

Techniques and strategies for optimizing your Vue applications for better performance and user experience.

Computed Property Optimization

// Optimizing computed properties for better performance
const expensiveComputation = computed(() => {
  return memoize(() => {
    // Expensive calculation here
    return result
  })
})

GameMaker Textbox above player

Ajinkya Borade — Sun, 20 Oct 2024 12:26:56 +0000

Optimizing Dialog and Tooltip Rendering in GameMaker

Surface based GUI Rendering Technique

This document outlines an optimization technique for rendering dialogs and tooltips in GameMaker games, especially useful for games with varying display resolutions. Example in my game my Camera width and height are 420x236 while the viewport width and height is 1920x1080px.

DEMO:
https://youtu.be/5Xhd9O3Wevo

Key Concepts

Surface Creation: We create a surface matching the viewport dimensions (e.g., 1920x1080).
Render-to-Texture: Dialog/tooltip content is drawn onto this surface.
Scaling: The surface is then stretched to fit the current GUI dimensions.

Benefits

Consistent appearance across different screen sizes
Improved performance through selective redrawing
Better scaling quality

Following are just brief sections related to surface rendering not the entire code on how to create a Dialog with options. Link to itch has al code you need.

Implementation for Dialogs

Object Creation

dialog_surface = -1;
surface_width = 1920;  // Match viewport width
surface_height = 1080; // Match viewport height
_needs_redraw = true;

Drawing Logic (Draw GUI event)

if (dialog_active && current_dialog != noone) {
    if (!surface_exists(dialog_surface)) {
        dialog_surface = surface_create(surface_width, surface_height);
        _needs_redraw = true;
    }

    if (_needs_redraw) {
        surface_set_target(dialog_surface);
        draw_clear_alpha(c_black, 0);

        // Draw dialog content here

        surface_reset_target();
        _needs_redraw = true;
    }

    // Draw stretched surface
    draw_surface_stretched(dialog_surface, 0, 0, 
                           display_get_gui_width(), 
                           display_get_gui_height());
}

Implementation for Tooltips

Similar to dialogs, but typically with different positioning logic.

Key Differences for Tooltips

Often need to follow game objects
May require camera-relative positioning

Step event would

// In Step Event
var _cam_x = camera_get_view_x(view_camera[0]);
var _cam_y = camera_get_view_y(view_camera[0]);

x = (_init_x - _cam_x) * (surface_width / camera_get_view_width(view_camera[0]));
y = (_init_y - _cam_y) * (surface_height / camera_get_view_height(view_camera[0]));

Best Practices

Redraw Flags: Use _needs_redraw to avoid unnecessary rendering.
Scale Calculations: Pre-calculate scaling factors when possible.
Surface Management: Always check if the surface exists before using it.
Clean Up: Free surfaces when objects are destroyed or rooms end.

Conclusion

This technique significantly improves rendering quality and performance for UI elements like dialogs and tooltips. It ensures consistent appearance across different display sizes while optimizing draw calls.

Download:

https://steelx.itch.io/gm-dialog-system

Install Oh my ZSH on Windows without WSL

Ajinkya Borade — Fri, 29 Apr 2022 06:35:19 +0000

This is going to a really simple post on Installing ZSH on Windows.
And I'm going to assume you already have Windows Terminal Installed, along with Git SCM

But for some reason I feel GitBash + ZSH seems to be really smooth experience on installing plugins. Specially the auto spelling corrections :P

Preview

Start here :

Download Latest ZSH tar file

https://packages.msys2.org/package/zsh?repo=msys&variant=x86_64

Optional Install PeaZip on Windows (to open TAR file)

https://peazip.github.io/
winget install -e --id GiorgioTani.PeaZip

CD to `C:\Program Files\Git`

extract all contents of zsh ..tar file to this folder

Now open GIT Bash CD to C:\Program Files\Git and type: zsh

in side terminal type: zsh

Create config files

autoload -U zsh-newuser-install
zsh-newuser-install -f

Finally open `notepad ~/.bashrc`

Add to the top of the file

if [ -t 1 ]; then
  exec zsh
fi

Install Plugins

git clone https://github.com/zsh-users/zsh-completions ${ZSH_CUSTOM:-${ZSH:-~/.oh-my-zsh}/custom}/plugins/zsh-completions
git clone https://github.com/zsh-users/zsh-syntax-highlighting ${ZSH_CUSTOM:-${ZSH:-~/.oh-my-zsh}/custom}/plugins/zsh-syntax-highlighting
git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-${ZSH:-~/.oh-my-zsh}/custom}/plugins/zsh-autosuggestions

Now open notepad ~/.zshrc
And Add plugins under this section # Which plugins would you like to load?

plugins=(git lighthouse zsh-completions zsh-autosuggestions zsh-syntax-highlighting)

ps. You can even use Oh-my-posh with Terminal 7.xx + on windows.

Testing (RTK) Redux toolkit in React / Nextjs application

Ajinkya Borade — Wed, 23 Jun 2021 09:20:26 +0000

In brief we will be just using @reduxjs/toolkit and we will be creating a custom Render function which lets you pass store data without mocking useSelector from react-redux or any external libs

This article starts with a quick crash course on redux toolkit with respect to React. Then we also write test for the imaginary react component.

Lets start

To have Redux to any react application, you need to wrap your root App component with Provider.

Below is common app.ts template in a Nextjs application

Not having types for the sake of brevity

app.ts


import { Provider } from 'react-redux'
import { store } from '../redux/store'

const App = ({ Component, pageProps }) => {

 return (
  <Provider store={store}>
   <Component {...pageProps} />
  </Provider>
 )
}

Now that we have basic Root App component we also gota have a Store which actually configure the Redux and reducers. aka createStore.

redux/store.ts


import { configureStore } from '@reduxjs/toolkit'
import { userSelector, userStateSlice } from './userStateSlice'

export const reducers = {
  user: userStateSlice.reducer
}

// configureStore helps you createStore with less fuss
export const store = configureStore({
  reducer: reducers
})

export type AppDispatch = typeof store.dispatch
export type RootState = ReturnType<typeof store.getState>

// e.g. to call thunk
// store.dispatch(loadUserAsync())

userStateSlice.ts


import { createSlice, PayloadAction } from '@reduxjs/toolkit'
import { RootState } from './store'
import { getAuth } from '../auth/getAuth'

interface UserState {
  loaded: boolean
  apiHost?: string
  username?: string
}

const initialState: UserState = { loaded: false }

export const userStateSlice = createSlice({
  name: 'env',
  initialState,
  reducers: {
    loadUser: (state, action: PayloadAction<UserState>) =>
      (state = { ...action.payload, loaded: true })
  }
})

// this internally uses Thunk
// store.dispatch(loadUserAsync())
export const loadUserAsync = () => dispatch =>
  getAuth().then(user => dispatch(userStateSlice.actions.loadUser(user)))

export const userSelector = (state: RootState) => state.env

redux-hooks.ts

import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
import { AppDispatch, RootState } from './redux'

export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

export const useAppDispatch = () => useDispatch<AppDispatch>()

Now we are in our imaginary React / nextjs component
where we consume Redux store

UserLandingPage component

import { useAppSelector } from '#src/redux/redux-hooks'
import { userSelector } from '#src/redux/userStateSlice'
...

const UserLandingPage = ({isAuthenticated}) => {

  // useAppSelector is just a typescript wrapper around useSelector

  const { user } = useAppSelector(userSelector)

  useEffect(() => {
    if (isAuthenticated && env?.apiHost) {
      fetchUserOrders(env.apiHost)
    }
  }, [isAuthenticated, env])

 return (
  <ContentWrapper>
    ...
  </ContentWrapper>
 )
}

Now the main part, where we write boilerplate test for the above Component

UserLandingPage -> spec.ts

import { renderWithStore } from '#test/render-with-store'

describe('<UserLandingPage>', () => {
 const customInitialState = {
   user: {
    loaded: true,
    apiHost: 'https://localhost:9000'
    username: 'ajinkyax'
   }
 }
 it('renders', async () => {
  const { getAllByRole, getByText } = renderWithStore(<UserLandingPage {...props} />, customInitialState)
  ...
 })
})

renderWithStore

Now the meat of this testing is renderWithStore which allows us to pass an initial store state and also prevents us from passing Provider to render. No more duplication of reducers for testing.

Also saves us from mocking useSelector

render-with-store.tsx

import { configureStore } from '@reduxjs/toolkit'
import { Provider } from 'react-redux'

import { render } from '@testing-library/react'

import { reducers, RootState } from '../src/redux/store'

const testStore = (state: Partial<RootState>) => {
  return configureStore({
    reducer: reducers,
    preloadedState: state
  })
}

export const renderWithStore = (component, initialState) => {
  const Wrapper = ({ children }) => (
    <Provider store={testStore(initialState)}>{children}</Provider>
  )
  return render(component, { wrapper: Wrapper })
}

Hope this was helpful, let me know in the comments if you get stuck anywhere.

Simple Rust WebAssembly Boilerplate [RUST+WASM]

Ajinkya Borade — Mon, 08 Jun 2020 15:24:52 +0000

You can notice the above image has mention of crates, rust macros (unused_imports) and that is all compiled via Webpack.

You can skip my introduction, if you are just interested in RUST + WebAssembly boilerplate code here

Intro

I recently got hooked to RUST programming language.
Rust initially looks very difficult, and yes it is.
But it was also a bit welcoming to me since Rust does not have
classes. (WIN WIN for me I don't like CLASS) The same reason why I liked GO very much and built a 2D RPG Game in GoLang

But since the day I started reading RUST, I stopped using GO. (In no way GO is bad, its just Rust has something magical)

Rust definitely made me understand what is a Garbage Collector (that's what I like to think so o_0), cause Rust gives its memory safety guarantees without needing a garbage collector. I really love Rust how to helped me understand Stack & Heap (I had NO computer science background, I'm just a Frontend developer... JavaScript world).

WebAssembly has become quite mature in the past couple of years. It’s certainly no longer a bleeding-edge technology. Build tools became quite sophisticated, so you can build everything with one npm command.

Folder structure :
├── src
| └── lib.rs
├── public
| └── index.js
| └── index.html
├── package.json
├── webpack.config.js
└── cargo.toml
└── web.config

Let's begin * _

Cargo.toml needs to define crate type as dynamic C library hence we define it like below

[lib]
crate-type = ["cdylib"]

And some special dependencies.
Please update dependencies.web-sys as you add more feature from JavaScript world.

[dependencies]
console_error_panic_hook = "=0.1.6"
js-sys = "0.3.39"
lazy_static = "1.4.0"
nalgebra = "0.21.0"
wasm-bindgen = "0.2.62"

[dependencies.web-sys]
version = "0.3.39"
features = [
    'Document',
    'Element',
    'EventTarget',
    'MouseEvent',
    'Window',
]

Next it is web.config file

This file includes Rust .wasm file into our application

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
   <system.webServer>
      <staticContent>
         <mimeMap fileExtension=".wasm" mimeType="application/wasm" />
      </staticContent>
   </system.webServer>
</configuration>

webpack.config

This is where all magic happens. Webpack compiles our Rust code into JavaScript during development and into Web-Assembly if you run npm run build

const webpack = require('webpack');
const WasmPackPlugin = require('@wasm-tool/wasm-pack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = (env, args) => {
  const isProduction = (args.mode === 'production');//package.json scripts -> build

  return {
      entry: './public/index.js',
      output: {
          path: path.resolve(__dirname, 'dist'),
          filename: isProduction ? '[name].[contenthash].js' : '[name].[hash].js'
      },
      plugins: [
            new HtmlWebpackPlugin({
                template: './public/index.html'
            }),
            new WasmPackPlugin({
                crateDirectory: path.resolve(__dirname, ".")// (where the cargo.toml file is located)
            }),
            new webpack.ProvidePlugin({
                TextDecoder: ['text-encoding', 'TextDecoder'],
                TextEncoder: ['text-encoding', 'TextEncoder'],
            }),
      ],
  }
};

And of course make srue you have a ./public folder with a index.html and index.JS file.

index.js

This is the main front-end file, it reads our Rust code. Please make sure you don't use ES6 imports here, use commonjs alike import to avoid compile errors. This line ../pkg/index.js webpack will create pkg folder, don't worry. Here say_hello_from_rust is actually coming from src/lib.rs file.

const rust = import('../pkg/index.js');

rust.then(r => {
    r.say_hello_from_rust();
})
.catch(console.error);

src/lib.rs

And now inside RUST ./src/lib.rs file :

wasm_bindgen created by Rust team, a library that facilitate high-level interactions between wasm modules and JavaScript.

extern crate wasm_bindgen;
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
extern "C" {
    #[wasm_bindgen(js_namespace = console)]
    fn log(s: &str);
}

#[wasm_bindgen]
pub fn say_hello_from_rust() {
    log("Hello from Rust World!");
}

package.json

npm i @wasm-tool/wasm-pack-plugin html-webpack-plugin text-encoding webpack webpack-cli webpack-dev-server --save-dev

There are few more scripts which helps us compile the code inside package.json

But you need to add this line to your project before every build
rustup run nightly cargo build --target wasm32-unknown-unknown

So I created these helper script calls, which can be found inside package.json

npm run build which will give you production ready code to be deployed without worrying to add the above scary line every-time.

Result

After a couple of days experimenting with Rust+Wasm, it seems to be a good combo. Great performance and feature support opens a land of opportunities. Build tools are also great and Wasm should now be supported by all major browsers.

Source code: https://github.com/steelx/rust-wasm-boilerplate

Hope you have fun working with RUST and WASM. I'm definitely going to stick with RUST :)

I built a 2D RPG Game in GO [GoLang]

Ajinkya Borade — Tue, 21 Apr 2020 03:50:34 +0000

All I did in my last 9 years web development was use JavaScript and javascript only. But I wanted to learn something new.

I was confused between Rust or GO. Rust is definitely faster than GO, Go is easy to learn and easy to write and maintain. (in my personal opinion)

And so I choose GO

I recently started learning Go (GoLang) and I thought why not start learning by making a 2D game.

I'm using PixelGL which is almost identical to Raylib.

so far my game has;

State Machine (for changing between different maps, anime state, enemies)
Storyboard for creating animations (also included AnimationController, Tween)
load sound, play sound on certain actions (above video is not updated)
Welcome Title Menu screen
Game Over screen
In Game Menu
Selection Menu, Tooltips
Combat Arena
Attack Options (Attack, Item, Magic, Flee)
Attack randomizer (e.g. Miss, Critical, Dodge)
Load Town Map (world map)

Im not saying its a good game or its perfect.
All I'm saying is I'm enjoying learning GO. And somehow developing games is more addicting than playing one.

I just hope more people start using GO for game development its way way Better than Python and 1000x times better than Java

State Machine for game development in GoLang

Ajinkya Borade — Wed, 01 Jan 2020 08:10:19 +0000

Recently I started learning Go programming language and wanted to build a 2D game. So I choose pixel a GoLang 2D game library. Below post describes my learning process.

The pixel lib's examples are really good for learning Go and Pixel. I made this map using Tiled tilemap editor and loaded the .tmx files with tilepix, earlier I was using go-tmx.

tl;dr;
I wanted to implement my characters different walk and wait states. But Wanted something easy to maintain and easy to manage the memory. Below is a my take on State Machine implementation with Go

p.s. StateMachine.go is at the bottom of article. Github Source

As I was looking for some solutions, I started with Graph nodes. https://github.com/steelx/go-graph-traversing/blob/master/main.go

And did a simple implementation with Nodes (a simple text based game with Go): https://github.com/steelx/go-story-mode

type Choice struct {
    cmd         string
    description string
    nextNode    *StoryNode
}

type StoryNode struct {
    Text    string
    choices []*Choice
}

But I wanted to make a 2D old school type RPG game. Which is still a work in progress. You can see below work so far, using State Machine in Go.

When we move the character he jumps from tile to tile.

My character has different frames for animations, but Wanted to keep my Update() loop clean so following code does not contain any code regarding Animations and Tween.

The following solution is using State Machine for my game in GO. So our game hero character will have an Entity (Entity can be any character, or NPC) and a Controller (state-machine)

Our Character Object

type Character struct {
    mEntity     *Entity
    mController *StateMachine
}

My setup() is below (Setup runs outside of the Pixel FOR loop, gets called inside the Run function pixel Run guide )

gHero = Character{
        mEntity: CreateEntity(CharacterDefinition{
            texture: pic, width: 16, height: 24,
            startFrame: 1,
            tileX:      9,
            tileY:      2,
        }),
        mController: StateMachineCreate(
            map[string]func() State{
                "wait": func() State {
                    return WaitStateCreate(gHero, *CastleRoomMap)
                },
                "move": func() State {
                    return MoveStateCreate(gHero, *CastleRoomMap)
                },
            },
        ),
    }

// Give game Hero an Initial state
gHero.mController.Change("wait", Direction{0, 0})

gHero is defined outside func main to be able to declare it as Global.

The state machine is made of two states, move and wait, as shown below. Input from the user is only checked during the wait state.

The StateMachine type requires each state to have four functions: Enter, Exit, Render and Update. But to keep 2 different return types; thats possible with Interface. Instead of specific struct as return type, we can specify State interface as return type for our mController which is a State Machine.

State Interface

type State interface {
    Enter(data Direction)
    Render()
    Exit()
    Update(dt float64)
}

The state machine uses two state types, WaitState and MoveState. We need to implement both of these types but let’s start with the WaitState.

state_machine_wait_state.go

package main

import "github.com/faiface/pixel/pixelgl"

type WaitState struct {
    mCharacter  Character
    mMap        GameMap
    mEntity     *Entity
    mController *StateMachine
}

func WaitStateCreate(character Character, gMap GameMap) State {
    s := &WaitState{}
    s.mCharacter = character
    s.mMap = gMap
    s.mEntity = character.mEntity
    s.mController = character.mController
    return s
}


//State interface implemented below
func (s *WaitState) Enter(data Direction) {
    // Reset to default frame
    s.mEntity.SetFrame(s.mEntity.startFrame)
}

func (s *WaitState) Render() {
    //pixelgl renderer
}

func (s *WaitState) Exit() {}

func (s *WaitState) Update(dt float64) {
    if global.gWin.JustPressed(pixelgl.KeyLeft) {
        s.mController.Change("move", Direction{-1, 0})
    }
    if global.gWin.JustPressed(pixelgl.KeyRight) {
        s.mController.Change("move", Direction{1, 0})
    }
    if global.gWin.JustPressed(pixelgl.KeyDown) {
        s.mController.Change("move", Direction{0, 1})
    }
    if global.gWin.JustPressed(pixelgl.KeyUp) {
        s.mController.Change("move", Direction{0, -1})
    }
}

The WaitState, shown in above, really does only one thing; it waits until an arrow key has been pressed and then changes the state to the MoveState, passing along the direction the player wants to move.

type Direction struct {
    x, y float64
}

The OnEnter function for the WaitState resets the entity frame back to its original starting frame. This means if we tell a character to wait and they’re mid-run, they don’t stay stuck mid-run; instead they revert to the default standing frame.

In WaitState's Update func calls with an x and y field is passed into the Change function when the state changes. This data tells the MoveState which direction we want the player to move. A figure showing the movement offsets can be seen below;

Let’s implement the MoveState

The MoveState has a bit more going on than the WaitState.

state_machine_move_state.go

package main

type MoveState struct {
    mCharacter  Character
    mMap        GameMap
    mEntity     *Entity
    mController *StateMachine
    // ^above common with WaitState
    mTileWidth       float64
    mMoveX, mMoveY   float64
    mPixelX, mPixelY float64
    mMoveSpeed       float64
}

func MoveStateCreate(character Character, gMap GameMap) State {
    s := &MoveState{}
    s.mCharacter = character
    s.mMap = gMap
    s.mTileWidth = gMap.mTileWidth
    s.mEntity = character.mEntity
    s.mController = character.mController
    s.mMoveX = 0
    s.mMoveY = 0
    //Additional motion tween can be added here e.g. 
        //s.mTween = TweenCreate(0, 0, 1),
    s.mMoveSpeed = 0.3
    return s
}

//StateMachine requires each state to have
// four functions: Enter, Exit, Render and Update

func (s *MoveState) Enter(data Direction) {
    //save Move X,Y value to used inside Update call
    s.mMoveX = data.x
    s.mMoveY = data.y
    s.mPixelX = s.mEntity.mTileX
    s.mPixelY = s.mEntity.mTileY
    //s.mTween = TweenCreate(0, 1, s.mMoveSpeed)
}

func (s *MoveState) Exit() {
    s.mEntity.TeleportAndDraw(s.mMap)
}

func (s *MoveState) Render() {
    //pending
}

func (s *MoveState) Update(dt float64) {
    //s.mTween.Update(dt)
    //update tween if any

    x := s.mPixelX + s.mMoveX
    y := s.mPixelY + s.mMoveY
    s.mEntity.mTileX = x
    s.mEntity.mTileY = y

    //If you have implemented tween animation
    // change the state here once its finished
    //Change("wait")

    s.mController.Change("wait", Direction{0, 0})
}

At Enter() function we receive the Direction and keep a copy of direction; and set the next tile position

s.mMoveX = data.x
s.mMoveY = data.y

Exit() function reads those tile position and draws the character to next tileX and tileY position.

In short;
Moving from the MoveState to the WaitState causes the state machine to call the MoveState.Exit() function. In the exit function we update the entity tile position and teleport to that position.

state_machine.go

package main

/*
    mController :
    StateMachineCreate({
        "wait" : func() return WaitStateCreate(Entity, GameMap),
        "move" : func() return MoveStateCreate(Entity, GameMap),
    })
*/

//StateMachine aka mController
type StateMachine struct {
    states  map[string]func() State
    current State
}

func StateMachineCreate(states map[string]func() State) *StateMachine {
    return &StateMachine{
        states:  states,
        current: nil,
    }
}

//Change state
// e.g. mController.Change("move", {x = -1, y = 0})
func (m *StateMachine) Change(stateName string, enterParams Direction) {
    if m.current != nil {
        m.current.Exit()
    }
    m.current = m.states[stateName]()
    m.current.Enter(enterParams) //thinking.. pass enterParams
}

//dt here is Delta time
func (m *StateMachine) Update(dt float64) {
    m.current.Update(dt)
}

func (m *StateMachine) Render() {
    m.current.Render()
}

I hope my post will help you in implementation of State Machine in Go, you can even use this code in your animation projects for game. It's upto you now how to move ahead with the above code, good luck.

DEV Community: Ajinkya Borade

Writing Pinia Store Tests with `$subscribe` in Vue 3

Writing Pinia Tests with $subscribe in Vue 3

Table of Contents

Introduction

Setting Up the Environment

Understanding the Stores

useUserStore

useSettingsStore

Writing the Test

Mocking External Dependencies

Creating a Test Component

Setting Up the Test

Testing the $subscribe Behavior

Handling Errors

Conclusion

Supercharged Vue 3.0 Reactivity + Pinia Stores

Table of Contents

Ref and Reactive References

What is Ref?

Types of Refs in Stores

Watch and Reactivity

Basic Watch Usage

Watch Options

Composables

Creating Custom Composables

Async Composables

Composable Dependencies

Reusable Form Validation

Using Composables in Components

Vue Reactivity API

Using Reactive Objects

Reactive vs Ref

Limitations and Type Handling

Reactive Arrays and Collections

Combining with Composables

Best Practices with Reactive

Integration with TypeScript

Pinia Store Integration

Store Structure with Refs

Composing Stores

Practical Examples

Auto-refresh Implementation

Loading State Management

Common Gotchas

1. Ref Initialisation

2. Watch Cleanup

3. Computed vs Watch

4. Store Organization

Common Gotchas

Advanced Patterns

Complex Component Communication

Testing Strategies

Testing Composables

Performance Optimization

Computed Property Optimization

GameMaker Textbox above player

Optimizing Dialog and Tooltip Rendering in GameMaker

Surface based GUI Rendering Technique

Key Concepts

Benefits

Implementation for Dialogs

Object Creation

Drawing Logic (Draw GUI event)

Implementation for Tooltips

Key Differences for Tooltips

Step event would

Best Practices

Conclusion

Download:

Install Oh my ZSH on Windows without WSL

Preview

Start here :

Download Latest ZSH tar file

Optional Install PeaZip on Windows (to open TAR file)

CD to C:\Program Files\Git

Create config files

Finally open notepad ~/.bashrc

Install Plugins

Testing (RTK) Redux toolkit in React / Nextjs application

Writing Pinia Tests with `$subscribe` in Vue 3

`useUserStore`

`useSettingsStore`

Testing the `$subscribe` Behavior

CD to `C:\Program Files\Git`

Finally open `notepad ~/.bashrc`