kinetic-slider
Version:
A WebGL-powered kinetic slider component using PIXI.js
185 lines (183 loc) • 6.33 kB
JavaScript
// Cache for imported modules
const importCache = new Map();
/**
* Load GSAP and related plugins
*/
const loadGSAP = async () => {
if (importCache.has('gsap')) {
console.log('Using cached GSAP module');
return importCache.get('gsap');
}
try {
console.log('Loading GSAP module...');
const gsapModule = await import('gsap');
// Store in cache
importCache.set('gsap', gsapModule.gsap);
console.log('GSAP module loaded successfully');
return gsapModule.gsap;
}
catch (error) {
console.error('Failed to load GSAP:', error);
throw error;
}
};
/**
* Load GSAP PixiPlugin
*/
const loadPixiPlugin = async () => {
if (importCache.has('pixiPlugin')) {
console.log('Using cached GSAP PixiPlugin');
return importCache.get('pixiPlugin');
}
try {
console.log('Loading GSAP PixiPlugin...');
// Check if we're in a browser environment
if (typeof window !== 'undefined') {
// Load GSAP first if not already loaded
if (!importCache.has('gsap')) {
await loadGSAP();
}
// Get GSAP instance
const gsap = importCache.get('gsap');
// Check if PixiPlugin is already available in GSAP
if (gsap.plugins && gsap.plugins.PixiPlugin) {
const PixiPlugin = gsap.plugins.PixiPlugin;
importCache.set('pixiPlugin', PixiPlugin);
console.log('GSAP PixiPlugin loaded from gsap.plugins');
return PixiPlugin;
}
// Otherwise try to import it directly
try {
const { default: PixiPlugin } = await import('gsap/PixiPlugin');
importCache.set('pixiPlugin', PixiPlugin);
console.log('GSAP PixiPlugin loaded successfully');
return PixiPlugin;
}
catch (importError) {
console.warn('Failed to import PixiPlugin directly, trying to get from GSAP:', importError);
// As a fallback, try to access it from the GSAP instance
if (gsap.PixiPlugin) {
importCache.set('pixiPlugin', gsap.PixiPlugin);
console.log('GSAP PixiPlugin loaded from gsap instance');
return gsap.PixiPlugin;
}
throw new Error('PixiPlugin not found in GSAP');
}
}
else {
// When running in Node.js during build, return a mock
console.log('Running in Node.js environment, using mock PixiPlugin');
const mockPlugin = {
name: 'PixiPlugin (Mock)',
registerPIXI: () => console.log('Mock registerPIXI called')
};
importCache.set('pixiPlugin', mockPlugin);
return mockPlugin;
}
}
catch (error) {
console.warn('Failed to load PixiPlugin for GSAP:', error);
return null;
}
};
/**
* Load PixiJS
*/
const loadPixi = async () => {
if (importCache.has('pixi')) {
console.log('Using cached PixiJS module');
return importCache.get('pixi');
}
try {
console.log('Loading PixiJS module...');
const pixiModule = await import('pixi.js');
// Store in cache
importCache.set('pixi', pixiModule);
console.log('PixiJS module loaded successfully');
return pixiModule;
}
catch (error) {
console.error('Failed to load PixiJS:', error);
throw error;
}
};
/**
* Load Pixi Filters
*/
const loadPixiFilters = async () => {
if (importCache.has('pixiFilters')) {
console.log('Using cached Pixi Filters module');
return importCache.get('pixiFilters');
}
try {
console.log('Loading Pixi Filters module...');
const filtersModule = await import('pixi-filters');
// Store in cache
importCache.set('pixiFilters', filtersModule);
console.log('Pixi Filters module loaded successfully');
return filtersModule;
}
catch (error) {
console.error('Failed to load Pixi Filters:', error);
throw error;
}
};
/**
* Register GSAP PixiPlugin with the required PIXI classes
*/
const registerGSAPPixiPlugin = (gsap, pixi) => {
try {
const PixiPlugin = importCache.get('pixiPlugin');
if (!PixiPlugin) {
console.warn('PixiPlugin not available for registration');
return false;
}
// Skip actual registration if it's a mock
if (PixiPlugin.name === 'PixiPlugin (Mock)') {
console.log('Using mock PixiPlugin, skipping actual registration');
return true;
}
// Extract needed classes from pixi module
const { Application, Sprite, Container, Text, DisplacementFilter } = pixi;
// Register the plugin with PIXI classes
gsap.registerPlugin(PixiPlugin);
PixiPlugin.registerPIXI({
Application,
Sprite,
Container,
Text,
DisplacementFilter
});
console.log('GSAP PixiPlugin registered successfully');
return true;
}
catch (error) {
console.error('Failed to register GSAP PixiPlugin:', error);
return false;
}
};
/**
* Load all required libraries for the KineticSlider
*/
const loadKineticSliderDependencies = async () => {
try {
console.log('Loading KineticSlider dependencies...');
// Load core modules
const gsap = await loadGSAP();
const pixi = await loadPixi();
const pixiPlugin = await loadPixiPlugin();
const pixiFilters = await loadPixiFilters();
// Register PixiPlugin if available
if (pixiPlugin) {
registerGSAPPixiPlugin(gsap, pixi);
}
console.log('All KineticSlider dependencies loaded successfully');
return { gsap, pixi, pixiFilters, pixiPlugin };
}
catch (error) {
console.error('Failed to load KineticSlider dependencies:', error);
throw error;
}
};
export { loadGSAP, loadKineticSliderDependencies, loadPixi, loadPixiFilters, loadPixiPlugin, registerGSAPPixiPlugin };
//# sourceMappingURL=ImportHelpers.js.map