This directory contains example configurations for popular bundlers and frameworks.

• Directory: nodejs-commonjs-example/
• Files:
  • index.js - Pure Node.js example using require()
  • package.json - CommonJS configuration
• Perfect for: Traditional Node.js projects, backend services

Try it:

cd examples/nodejs-commonjs-example
npm install
npm start

Features automatic WASM initialization and demonstrates BC1/BC3 decoding with file I/O.

• Directory: nodejs-esm-example/
• Files:
  • index.mjs - Modern Node.js example using import/export
  • package.json - ESM configuration with "type": "module"
• Perfect for: Modern Node.js projects, TypeScript projects

Try it:

cd examples/nodejs-esm-example
npm install
npm start

Features BC1, BC3, ETC2, and ASTC decoding examples with modern ES6 syntax.

• Directory: vite-cdn-example/
• Files:
  • index.html - Main HTML file
  • src/main.js - Application logic with CDN imports
  • vite.config.js - Vite configuration
  • public/compressed_etc2_rgba_400x400.bin - Real ETC2 RGBA texture (400x400)
• Perfect for: Modern development with fast HMR and CDN

Try it:

cd examples/vite-cdn-example
npm install
npm run dev

Features Vite dev server, CDN loading, real texture decoding with canvas display, and optimized production builds.

• File: cdn-example.html
• Zero setup: No npm install needed!
• Perfect for: Quick prototypes, minimal setup

Try it:

# Serve with HTTP server (required for file loading)
cd examples
python -m http.server 8000

# Then visit: http://localhost:8000/cdn-example.html

⚠️ Important: Must be served via HTTP server (not file://) to avoid CORS errors when loading the texture file.

Uses jsDelivr CDN to load the library without any installation or build tools.

• Directory: vite-react-example/
• Files:
  • vite.config.js - Simple Vite configuration
  • src/App.jsx - React component example using CDN

Setup:

npm install vite @vitejs/plugin-react
npm install texture2ddecoder-wasm

Note: This example uses CDN - no WASM file copying needed!

• Directory: nextjs-example/
• Files:
  • next.config.js - Next.js configuration
  • app/texture-viewer/page.tsx - Client component example using CDN

Setup:

npm install texture2ddecoder-wasm

Note: This example uses CDN - no WASM file copying needed!

All examples now use CDN by default - no WASM file copying needed!

1. Install the package via npm

   npm install texture2ddecoder-wasm

2. Initialize with CDN:

   import { initialize } from "texture2ddecoder-wasm";
   
   await initialize({
     wasmPath: "https://cdn.jsdelivr.net/npm/[email protected]/wasm",
   });

3. Use decode functions after initialization

If you prefer to serve WASM files locally:

1. Install the package via npm

2. Copy WASM files to your public directory:

   npx texture2ddecoder-copy-wasm public/wasm

3. Initialize with local path:

   import { initialize } from "texture2ddecoder-wasm";
   
   await initialize({ wasmPath: "/wasm" });

CDN Benefits:

• ✅ No file copying needed
• ✅ Fastest setup time
• ✅ Globally cached by CDN
• ✅ Perfect for development and prototyping

Local Files Benefits:

• ✅ Faster loading (same domain)
• ✅ Works offline
• ✅ No external dependencies
• ✅ Better for production

• Complete Bundler Guide - Comprehensive setup for all bundlers
• Main README - API documentation and usage guide
• npm package

Have a working configuration for another bundler? Please submit a PR!

Popular frameworks we'd love examples for:

• Webpack 5
• Create React App
• SvelteKit
• Angular
• Remix
• Astro
• Nuxt 3
• Deno
• Bun