Exporting to TypeScript

Instead of relying on JSON.parse() at runtime, this plugin converts your 16x16 sprite data into static TypeScript files. This allows your IDE to provide autocomplete for your assets and ensures your data structure is validated at compile time.

1. The TypeScript Exporter Plugin

// plugins/TypeScriptExporter.js
export const TypeScriptExporter = {
    id: 'ts-exporter',

    // Transforms internal pixel grid to a TypeScript source string
    generateExport(spriteName, pixelData) {
        const typeDefinition = `export interface SpriteData { name: string; pixels: number[]; }`;
        const dataConstant = `export const ${spriteName}: SpriteData = { 
            name: "${spriteName}", 
            pixels: ${JSON.stringify(pixelData)} 
        };`;
        
        return `${typeDefinition}\n\n${dataConstant}`;
    }
};

2. The Workflow: From Canvas to Code

1. Tooling: The user draws on the 16x16 canvas in the React Editor.
2. Serialization: The Editor calls TypeScriptExporter.generateExport('hero_walk', pixels).
3. Write to Disk: The Editor (via Electron/Tauri/Node) saves the resulting string as src/assets/hero_walk.ts.
4. Runtime Usage: In your game code, you simply import the asset:

   import { hero_walk } from './assets/hero_walk';
   console.log(hero_walk.pixels); // Type-safe and immediately available

3. Why Export to TS?

• Zero Parse Latency: Your game doesn't need to load or parse JSON files at startup; the data is bundled directly into your application code.
• Type Safety: If you change your sprite format, TypeScript will throw an error immediately, preventing runtime crashes.
• Bundler Optimization: Webpack/Vite/Esbuild can tree-shake your assets, ensuring only the sprites you actually import are included in your final production build.

4. Architecture Tip: Dual-Mode

You might want to keep the raw JSON for the editor to load/save while working, and use the TypeScript exporter only for the final build pipeline. This keeps your editor fast and iterative while making your runtime lean and performant.