CodeGen with Vite Plugin

Considering the eslint rule can auto-fix up the code. Why couldn’t we just do that for you at build time? So we created a @thirtytech/vite-plugin-yasml plugin that will codegen the useSelector calls for you. This will allow you to have the best of both worlds. You can use the useSelector hook with no arguments and get the full state object

For those not familiar with codegen in the vite build system. You’re transpiling all your jsx, tsx files into js files during build time. So we can take advantage of that and generate the useSelector calls for you.

This means that when you type

const { counter, setCounter } = useMySelector();

the output code that is generated will be

const { counter, setCounter } = useMySelector("counter", "setCounter");

Installation

npm install --save-dev @thirtytech/vite-plugin-yasml

Usage

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { codeGeneratorYasmlPlugin } from "@thirtytech/vite-plugin-yasml";
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    codeGeneratorYasmlPlugin(),
    react(),
  ],
});

Importantly* because Vite does not run moduleParsed hook in devopment mode (see Universal Hooks) you will need to name your state files *.hooks.{js,jsx,ts,tsx} or *.state.{js,jsx,ts,tsx} for the codegen plugin to work.

The goal of this is to only run the extra AST parsing overhead on files that actually use YAMSL state.