@aetherframework/template-engine 1.0.2 ā†’ 1.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/package.json +1 -1
  2. package/src/core/ModeManager.js +0 -3
  3. package/src/core/TemplateEngineFactory.js +0 -10
  4. package/src/engines/AetherEngine.js +149 -185
  5. package/src/engines/TemplateModeEngine.js +0 -4
  6. package/src/examples/basic-usage.js +217 -0
  7. package/src/examples/layout-example.js +404 -0
  8. package/src/examples/ssr-example.js +180 -0
  9. package/src/utils/ConfigLoader.js +2 -3
package/src/examples/ssr-example.js ADDED
@@ -0,0 +1,180 @@
1
+ /**
2
+ * SSR Mode Example
3
+ * Demonstrates Server-Side Rendering capabilities with hydration data
4
+ * This example shows how to use the TemplateEngineFactory to create SSR-enabled renderers
5
+ */
6
+
7
+ import { createEngine } from '../index.js';
8
+
9
+ /**
10
+ * Main function to run SSR example
11
+ * @returns {Promise<void>}
12
+ */
13
+ async function runSSRExample() {
14
+ console.log('šŸš€ Starting SSR Mode Example...\n');
15
+
16
+ try {
17
+ // 1. Initialize Engine in SSR Mode
18
+ console.log('1ļøāƒ£ Initializing Engine in SSR Mode...');
19
+
20
+ // Create engine factory with SSR mode enabled
21
+ const factory = await createEngine({
22
+ mode: 'ssr', // Set to SSR mode for server-side rendering
23
+ debug: true, // Enable debug logging
24
+ ssrHydrate: true, // Enable hydration data injection
25
+ cacheEnabled: true, // Enable caching for better performance
26
+ templateDir: './dist' // Optional: specify template directory
27
+ });
28
+
29
+ console.log('āœ… Engine factory initialized in SSR mode\n');
30
+
31
+ // 2. Create SSR Renderer using factory
32
+ console.log('2ļøāƒ£ Creating SSR Renderer...');
33
+
34
+ // Create renderer with SSR mode engine
35
+ const renderer = factory.createRenderer('ssr-mode');
36
+ console.log('āœ… SSR Renderer created\n');
37
+
38
+ // 3. Define Template with Aether syntax (not Handlebars)
39
+ // Note: Aether uses Blade-style syntax, not Handlebars
40
+ const template = `
41
+ <div class="app-container">
42
+ <h1 class="title">{{title}}</h1>
43
+ <p class="description">{{description}}</p>
44
+
45
+ <div class="user-list">
46
+ @foreach(users as user)
47
+ <div class="user-card" id="user-{{user.id}}">
48
+ <img src="{{user.avatar}}" alt="{{user.name}}" />
49
+ <h3>{{user.name}}</h3>
50
+ <p>{{user.role}}</p>
51
+ </div>
52
+ @endforeach
53
+ </div>
54
+
55
+ <button id="load-more" onclick="loadMore()">Load More</button>
56
+ </div>`;
57
+
58
+ // 4. Define Data for template rendering
59
+ const data = {
60
+ title: 'User Dashboard',
61
+ description: 'Manage your team members efficiently',
62
+ users: [
63
+ {
64
+ id: 1,
65
+ name: 'Alice Johnson',
66
+ role: 'Admin',
67
+ avatar: 'https://picsum.photos/50/50?random=1'
68
+ },
69
+ {
70
+ id: 2,
71
+ name: 'Bob Smith',
72
+ role: 'Developer',
73
+ avatar: 'https://picsum.photos/50/50?random=2'
74
+ },
75
+ {
76
+ id: 3,
77
+ name: 'Charlie Brown',
78
+ role: 'Designer',
79
+ avatar: 'https://picsum.photos/50/50?random=3'
80
+ }
81
+ ],
82
+ // Additional metadata for SSR enhancement
83
+ keywords: 'Aether,Framework,Web,SSR',
84
+ head: '<link rel="stylesheet" href="/custom-styles.css">',
85
+ scripts: '<script src="/custom-script.js"></script>'
86
+ };
87
+
88
+ // 5. Render template with SSR enhancements
89
+ console.log('3ļøāƒ£ Rendering with SSR Enhancements...');
90
+
91
+ // Use the renderer to process template with data
92
+ const result = await renderer.render(template, data);
93
+ console.log('āœ… SSR Rendering completed\n');
94
+
95
+ // 6. Output the rendered result
96
+ console.log('--- SSR Rendered Output (First 1000 chars) ---');
97
+ console.log(result.substring(0, 1000) + (result.length > 1000 ? '...' : ''));
98
+ console.log('----------------------------------------------\n');
99
+
100
+ // 7. Verify SSR features are working
101
+ console.log('šŸ” Verifying SSR Features:');
102
+
103
+ // Check for hydration data injection
104
+ if (result.includes('ssr-data')) {
105
+ console.log('āœ… Hydration data injected successfully');
106
+ } else {
107
+ console.log('āš ļø Hydration data missing');
108
+ }
109
+
110
+ // Check for full HTML document structure
111
+ if (result.includes('<!DOCTYPE html>')) {
112
+ console.log('āœ… Full HTML document generated');
113
+ } else {
114
+ console.log('āš ļø Not a complete HTML document');
115
+ }
116
+
117
+ // Check for Tailwind CSS inclusion
118
+ if (result.includes('tailwindcss.com')) {
119
+ console.log('āœ… Tailwind CSS included');
120
+ } else {
121
+ console.log('āš ļø Tailwind CSS not found');
122
+ }
123
+
124
+ // Check for Font Awesome icons
125
+ if (result.includes('font-awesome')) {
126
+ console.log('āœ… Font Awesome included');
127
+ } else {
128
+ console.log('āš ļø Font Awesome not found');
129
+ }
130
+
131
+ // 8. Save rendered output to dist folder for inspection
132
+ console.log('\nšŸ’¾ Saving output to dist folder...');
133
+
134
+ // Import file system module for saving output
135
+ import('fs').then(fs => {
136
+ // Create dist directory if it doesn't exist
137
+ const distDir = './dist';
138
+ if (!fs.existsSync(distDir)) {
139
+ fs.mkdirSync(distDir, { recursive: true });
140
+ console.log(`šŸ“ Created directory: ${distDir}`);
141
+ }
142
+
143
+ // Save to dist folder
144
+ const outputPath = './dist/ssr-output.html';
145
+ fs.writeFileSync(outputPath, result, 'utf-8');
146
+ console.log(`āœ… Output saved to: ${outputPath}`);
147
+ }).catch(err => {
148
+ console.log('āš ļø Could not save to file:', err.message);
149
+ });
150
+
151
+ // 9. Display engine statistics
152
+ console.log('\nšŸ“Š Engine Statistics:');
153
+ const stats = factory.getStats();
154
+ console.log(JSON.stringify(stats, null, 2));
155
+
156
+ // Additional debug information
157
+ console.log('\nšŸ”§ Debug Information:');
158
+ console.log(`- Mode: ${stats.mode}`);
159
+ console.log(`- Available Engines: ${stats.engines.join(', ')}`);
160
+ console.log(`- Cache Enabled: ${stats.cacheEnabled}`);
161
+ console.log(`- Cache Size: ${stats.cacheSize}`);
162
+ console.log(`- Template Directory: ${stats.templateDir}`);
163
+
164
+ } catch (error) {
165
+ // Enhanced error handling with detailed information
166
+ console.error('āŒ Error occurred during SSR example execution:');
167
+ console.error(`Message: ${error.message}`);
168
+ console.error(`Stack Trace: ${error.stack}`);
169
+
170
+ // Provide troubleshooting suggestions
171
+ console.error('\nšŸ”§ Troubleshooting Suggestions:');
172
+ console.error('1. Check that SSRModeEngine is properly registered in the factory');
173
+ console.error('2. Verify template syntax uses Aether/Blade style (@foreach not {{#each}})');
174
+ console.error('3. Ensure factory is initialized with mode: "ssr"');
175
+ console.error('4. Check that all required engines are imported and registered');
176
+ }
177
+ }
178
+
179
+ // Execute the SSR example
180
+ runSSRExample();
package/src/utils/ConfigLoader.js CHANGED
@@ -128,12 +128,11 @@ class ConfigLoader {
128
128
  }
129
129
  }
130
130
  }
131
-
132
- console.log(`šŸ“ Configuration loaded from: ${configPath}`);
131
+
133
132
  }
134
133
  } catch (error) {
135
134
  // Log warning but don't fail if configuration file cannot be loaded
136
- console.warn(`āš ļø Could not load config file: ${error.message}`);
135
+ console.warn(`Could not load config file: ${error.message}`);
137
136
  }
138
137
  }
139
138