7 | 
10 |
7 |
10 | # Install[\s\S]*?)<\/code><\/pre>/,
224 | replacement: `${installCmds.join('\n')}`,
225 | name: 'Installation section',
226 | });
227 |
228 | // Usage examples HTML
229 | const htmlExamples = examples
230 | .map(({ framework, example, pseudonyms }) => {
231 | if (!example) return '';
232 | const label = pseudonyms.length > 0 ? `${framework}/${pseudonyms.join('/')}` : framework;
233 | const escapedExample = example.replace(
234 | /[<>"'&]/g,
235 | (m) => ({ '<': '<', '>': '>', '"': '"', "'": ''', '&': '&' })[m]
236 | );
237 | return `<!-- ${label} -->\n${escapedExample}`;
238 | })
239 | .filter(Boolean)
240 | .join('\n\n');
241 |
242 | updates.push({
243 | regex:
244 | /(Main animation attribute<\/div>\s*)([\s\S]*?)(<\/code><\/pre>)/,
245 | replacement: `$1${htmlExamples}\n$3`,
246 | name: 'Usage examples',
247 | });
248 |
249 | // JavaScript API
250 | const setupExamples = examples
251 | .filter((e) => e.setup && e.framework !== 'Vanilla JS')
252 | .map(({ framework, setup, pseudonyms }) => {
253 | const label = framework + (pseudonyms.length ? ` (${pseudonyms.join(', ')})` : '');
254 | return `// ${label}\n${setup}`;
255 | })
256 | .join('\n\n');
257 |
258 | updates.push({
259 | regex:
260 | /(Installed via CDN, initializes automatically, instance in window\.USAL\n)[\s\S]*?(<\/code><\/pre>)/,
261 | replacement: `$1\n${setupExamples.replace(
262 | /[<>"'&]/g,
263 | (m) => ({ '<': '<', '>': '>', '"': '"', "'": ''', '&': '&' })[m]
264 | )}$2`,
265 | name: 'JavaScript API',
266 | });
267 |
268 | // Badges
269 | updates.push({
270 | regex: /()([\s\S]*?)(<\/div>)/,
271 | replacement: `$1\n })
\n$3`,
272 | name: 'Main badge',
273 | });
274 |
275 | const badges = packages
276 | .filter((p) => p !== 'vanilla')
277 | .map((pkg) => {
278 | const name = `@${projectName}/${pkg}`;
279 | const color = packagesConfig[pkg]?.usage?.color || 'black';
280 | return ` })
`;
281 | })
282 | .join('\n');
283 |
284 | updates.push({
285 | regex: /()[\s\S]*?(<\/div>)/,
286 | replacement: `$1\n${badges}\n$2`,
287 | name: 'Package badges',
288 | });
289 | }
290 |
291 | return updates;
292 | }
293 |
294 | // Process files
295 | const info = getFrameworkInfo();
296 | const processed = {};
297 |
298 | Object.entries(originalStates).forEach(([key, content]) => {
299 | const updates = getUpdates(key, info);
300 | processed[key] = updateContent(content, updates, files[key]);
301 | });
302 |
303 | if (!isSilent) hLog(0, true, 'highlight', 'finishing', 'Latest processing...', '\n');
304 | // Save files
305 | Object.entries(processed).forEach(([key, content]) => {
306 | fs.writeFileSync(files[key], content);
307 | if (!isSilent) hLog(2, true, 'info', 'saved', files[key]);
308 | });
309 |
310 | // Copy README to vanilla
311 | if (processed.readme && fs.existsSync(path.dirname(files.vanilla))) {
312 | fs.writeFileSync(files.vanilla, processed.readme);
313 | if (!isSilent) hLog(2, true, 'info', 'copied', 'README to vanilla package');
314 | }
315 |
316 | // Format documents
317 | if (!isSilent) hLog(0, true, 'header', 'format', 'Running format...', '\n');
318 | try {
319 | // eslint-disable-next-line sonarjs/no-os-command-from-path
320 | execSync('npm run format', { stdio: 'pipe' });
321 | if (!isSilent) hLog(2, true, 'success', 'success', 'Formatted');
322 | } catch {
323 | hLog(2, true, 'warning', 'warning', 'Format failed');
324 | }
325 |
326 | // Check changes
327 | if (!isSilent) hLog(0, true, 'header', 'comparison', 'Checking changes...', '\n');
328 | const changes = [];
329 |
330 | Object.entries(originalStates).forEach(([key, original]) => {
331 | const current = fs.readFileSync(files[key], 'utf-8');
332 | const status = current !== original ? 'CHANGED' : 'NO CHANGE';
333 | const color = current !== original ? 'success' : 'yellow';
334 |
335 | if (!isSilent) hLog(2, true, color, status, files[key]);
336 | if (current !== original) changes.push(files[key]);
337 | });
338 |
339 | if (changes.length === 0 && !isSilent) {
340 | hLog(0, true, 'header', 'postbuild complete', 'All files up to date!', '\n');
341 | } else if (errorCount > 0) {
342 | hLog(0, true, 'warning', 'postbuild complete with warnings');
343 | hLog(2, false, 'success', 'Updated:', changes.join(', '));
344 | hLog(2, false, 'error', 'Errors:', errorCount.toString());
345 | } else if (!isSilent) {
346 | hLog(0, true, 'highlight', 'postbuild success');
347 | hLog(2, false, 'success', 'Updated:', changes.join(', '));
348 | hLog(2, false, 'success', 'Processed:', `${updateCount} sections`);
349 | }
350 |
351 | process.exit(errorCount > 2 ? 1 : 0);
352 |
--------------------------------------------------------------------------------
/scripts/publish.js:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 | /* eslint-disable sonarjs/no-os-command-from-path */
3 | /* eslint-disable sonarjs/os-command */
4 |
5 | import { execSync } from 'child_process';
6 | import fs from 'fs';
7 |
8 | import { hLog, colorLog } from './colorize.js';
9 |
10 | // Get latest latest version from npm
11 | function getLatestLatestVersion(packageName) {
12 | try {
13 | const version = execSync(`npm view ${packageName} version`, {
14 | encoding: 'utf-8',
15 | stdio: ['pipe', 'pipe', 'ignore'],
16 | }).trim();
17 |
18 | // Remove any prerelease suffix to get base latest version
19 | // eslint-disable-next-line sonarjs/slow-regex
20 | return version.replace(/-.*$/, '');
21 | } catch {
22 | // Package doesn't exist yet
23 | return '0.0.0';
24 | }
25 | }
26 |
27 | // Get next version by incrementing patch
28 | function incrementVersion(version) {
29 | const parts = version.split('.').map(Number);
30 | parts[2] = (parts[2] || 0) + 1; // Increment patch
31 | return parts.join('.');
32 | }
33 |
34 | // Get next prerelease version
35 | function getNextPrereleaseVersion(packageName, baseVersion, prereleaseType) {
36 | try {
37 | // Get all versions from npm
38 | const versions = JSON.parse(
39 | execSync(`npm view ${packageName} versions --json`, {
40 | encoding: 'utf-8',
41 | stdio: ['pipe', 'pipe', 'ignore'],
42 | })
43 | );
44 |
45 | // Filter for this baseVersion and prereleaseType
46 | const prereleaseVersions = versions.filter((v) =>
47 | v.startsWith(`${baseVersion}-${prereleaseType}.`)
48 | );
49 |
50 | if (prereleaseVersions.length === 0) {
51 | return `${baseVersion}-${prereleaseType}.1`;
52 | }
53 |
54 | // Find highest number
55 | const numbers = prereleaseVersions.map((v) => {
56 | const match = v.match(new RegExp(`-${prereleaseType}\\.(\\d+)$`));
57 | return match ? parseInt(match[1]) : 0;
58 | });
59 |
60 | const nextNum = Math.max(...numbers) + 1;
61 | return `${baseVersion}-${prereleaseType}.${nextNum}`;
62 | } catch {
63 | // If can't fetch, start at 1
64 | return `${baseVersion}-${prereleaseType}.1`;
65 | }
66 | }
67 |
68 | async function main() {
69 | // Parse arguments
70 | const args = process.argv.slice(2);
71 | const helpFlag = args.includes('--help') || args.includes('-h');
72 | const dryRun = args.includes('--dry-run') || args.includes('-d');
73 |
74 | // Determine publish type
75 | let publishType = 'latest';
76 |
77 | if (args.includes('--canary')) {
78 | publishType = 'canary';
79 | } else if (args.includes('--beta')) {
80 | publishType = 'beta';
81 | } else if (args.includes('--alpha')) {
82 | publishType = 'alpha';
83 | }
84 |
85 | // Custom version override
86 | const versionIndex = args.findIndex((arg) => arg === '--version' || arg === '-v');
87 | const customVersion = versionIndex !== -1 ? args[versionIndex + 1] : null;
88 |
89 | // Custom tag override (overrides the default from publishType)
90 | const tagIndex = args.findIndex((arg) => arg === '--tag' || arg === '-t');
91 | if (tagIndex !== -1) {
92 | publishType = args[tagIndex + 1];
93 | }
94 |
95 | if (helpFlag) {
96 | colorLog(`
97 | /#highlight PRE-PUBLISH VERSION MANAGER #/
98 |
99 | /#info Description: #/
100 | Automatically determines next version, updates monorepo package.json,
101 | builds, and publishes. Version is based on latest npm version, not local.
102 |
103 | /#info Usage: #/ npm run pre-publish [options]
104 |
105 | /#info Options: #/
106 | --latest Next latest version (auto-increment patch)
107 | --canary Next canary version (latest+1-canary.X)
108 | --beta Next beta version (latest+1-beta.X)
109 | --alpha Next alpha version (latest+1-alpha.X)
110 | --version, -v Use specific version
111 | --tag, -t Use specific npm tag (overrides default)
112 | --dry-run, -d Preview without changes
113 | --help, -h Show this help message
114 |
115 | /#info Version Logic: #/
116 | latest: Gets latest npm latest, increments patch
117 | Canary: Gets latest npm latest + 1, then canary.X
118 | Beta: Gets latest npm latest + 1, then beta.X
119 | Alpha: Gets latest npm latest + 1, then alpha.X
120 |
121 | /#info Examples: #/
122 | npm run pre-publish --latest # 1.2.3 → 1.2.4
123 | npm run pre-publish --canary # 1.2.3 → 1.2.4-canary.1
124 | npm run pre-publish --beta # 1.2.3 → 1.2.4-beta.1
125 | npm run pre-publish --version 2.0.0 # Force 2.0.0
126 | npm run pre-publish --version 2.0.0 --tag canary # 2.0.0 with canary tag
127 | npm run pre-publish --version 1.9.9 --tag legacy # 1.9.9 with legacy tag
128 | `);
129 | process.exit(0);
130 | }
131 |
132 | hLog(0, false, 'header', '==================================================', '', '\n');
133 | if (dryRun) {
134 | hLog(0, true, 'brightBlack', 'dry run', 'No changes will be made');
135 | console.log('');
136 | }
137 | hLog(0, false, 'highlight', 'PRE-PUBLISH VERSION MANAGER');
138 | hLog(0, false, 'header', '==================================================\n');
139 |
140 | try {
141 | // Get package name from monorepo root
142 | const rootPackage = JSON.parse(fs.readFileSync('package.json', 'utf-8'));
143 | const packageName = rootPackage.name.replace('-monorepo', '');
144 |
145 | hLog(0, false, 'info', 'Package:', `/#package ${packageName} #/`);
146 | hLog(0, false, 'info', 'Publish type:', `/#tag ${publishType} #/`);
147 |
148 | // Get latest latest version from npm
149 | const latestLatest = getLatestLatestVersion(packageName);
150 | hLog(0, false, 'info', 'Latest latest on npm:', `/#version ${latestLatest} #/`);
151 |
152 | // Determine new version
153 | let newVersion;
154 |
155 | if (customVersion) {
156 | // Use custom version as-is
157 | newVersion = customVersion;
158 | hLog(0, false, 'info', 'Custom version:', `/#version ${newVersion} #/`);
159 | } else if (publishType === 'latest') {
160 | // For latest: increment patch of latest npm latest
161 | newVersion = incrementVersion(latestLatest);
162 | hLog(0, false, 'info', 'Next latest version:', `/#version ${newVersion} #/`);
163 | } else {
164 | // For prereleases: latest+1, then find next prerelease number
165 | const nextLatest = incrementVersion(latestLatest);
166 | newVersion = getNextPrereleaseVersion(packageName, nextLatest, publishType);
167 | hLog(0, false, 'info', 'Next prerelease:', `/#version ${newVersion} #/`);
168 | }
169 |
170 | // Update root package.json
171 | console.log('');
172 | hLog(0, true, 'header', 'updating version');
173 |
174 | if (dryRun) {
175 | hLog(2, false, 'brightBlack', '→', `Would update package.json to /#version ${newVersion} #/`);
176 | } else {
177 | rootPackage.version = newVersion;
178 | fs.writeFileSync('package.json', JSON.stringify(rootPackage, null, 2) + '\n');
179 | hLog(2, false, 'success', '✓', `Updated package.json to /#version ${newVersion} #/`);
180 | }
181 |
182 | // Build (which auto-generates packages/)
183 | console.log('');
184 | hLog(0, true, 'header', 'building');
185 |
186 | if (!dryRun) {
187 | hLog(0, false, 'info', 'Running build...', '');
188 | execSync('npm run build', { stdio: 'inherit' });
189 | hLog(0, false, 'success', '✓', 'Build completed (packages/ generated)');
190 | } else {
191 | hLog(2, false, 'brightBlack', '→', 'Would run: /#command npm run build #/');
192 | hLog(2, false, 'brightBlack', '', '(this generates packages/ folder)');
193 | }
194 |
195 | // Publish
196 | console.log('');
197 | hLog(0, true, 'header', 'publishing');
198 |
199 | const publishCmd = `npm publish --workspaces --tag ${publishType} --access public`;
200 |
201 | if (!dryRun) {
202 | hLog(0, false, 'info', 'Publishing to npm...', '');
203 | hLog(2, false, 'dim', 'Command:', `/#command ${publishCmd} #/`);
204 | execSync(publishCmd, { stdio: 'inherit' });
205 | hLog(0, false, 'success', '✓', `Published as /#tag ${publishType} #/`);
206 | } else {
207 | hLog(2, false, 'brightBlack', '→', `Would run: /#command ${publishCmd} #/`);
208 | }
209 |
210 | // Summary
211 | console.log('');
212 | hLog(0, false, 'header', '==================================================', '', '\n');
213 | if (dryRun) {
214 | hLog(0, true, 'brightBlack', 'dry run summary');
215 | hLog(2, false, 'brightBlack', 'Would publish:', `/#version ${newVersion} #/`);
216 | hLog(2, false, 'brightBlack', 'NPM tag:', `/#tag ${publishType} #/`);
217 | hLog(2, false, 'brightBlack', 'Based on npm latest:', `/#version ${latestLatest} #/`);
218 | } else {
219 | hLog(
220 | 0,
221 | true,
222 | 'success',
223 | 'success',
224 | `Published /#version ${newVersion} #/ as /#tag ${publishType} #/!`
225 | );
226 | console.log('');
227 | hLog(
228 | 0,
229 | false,
230 | 'dim',
231 | 'Install with:',
232 | `/#command npm install ${packageName}@${publishType} #/`
233 | );
234 | hLog(
235 | 0,
236 | false,
237 | 'dim',
238 | 'Or specific:',
239 | `/#command npm install ${packageName}@${newVersion} #/`
240 | );
241 | }
242 |
243 | // Next steps
244 | console.log('');
245 | hLog(0, true, 'info', 'next steps', '', '\n');
246 |
247 | if (publishType === 'latest' && !dryRun) {
248 | hLog(2, false, 'dim', '1. Update CHANGELOG.md with changes', '');
249 | hLog(2, false, 'dim', '2. Create GitHub release:', `/#command npm run release:github #/`);
250 | } else if (publishType !== 'latest') {
251 | hLog(2, false, 'dim', 'View all versions:', `/#command npm view ${packageName} versions #/`);
252 | hLog(2, false, 'dim', 'View dist-tags:', `/#command npm view ${packageName} dist-tags #/`);
253 | }
254 | } catch (error) {
255 | hLog(0, true, 'error', 'error', error.message);
256 | process.exit(1);
257 | }
258 | }
259 |
260 | main().catch((error) => {
261 | hLog(0, true, 'error', 'error', `Script failed: ${error}`, '\n');
262 | process.exit(1);
263 | });
264 |
--------------------------------------------------------------------------------
/scripts/release-gh.js:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 | /* eslint-disable sonarjs/no-os-command-from-path */
3 | /* eslint-disable sonarjs/os-command */
4 |
5 | import { execSync } from 'child_process';
6 | import fs from 'fs';
7 |
8 | import { hLog, colorLog } from './colorize.js';
9 |
10 | // Global dry run flag
11 | let isDryRun = false;
12 |
13 | // Parse changelog to get the latest version entry
14 | function parseChangelog() {
15 | const changelogPath = 'CHANGELOG.md';
16 |
17 | if (!fs.existsSync(changelogPath)) {
18 | throw new Error('CHANGELOG.md not found in project root');
19 | }
20 |
21 | const changelog = fs.readFileSync(changelogPath, 'utf-8');
22 |
23 | // Match version entries like ## [1.2.3] - 2025-09-16
24 | const versionRegex = /^## \[([^\]]+)\] - (\d{4}-\d{2}-\d{2})$/gm;
25 | const matches = [...changelog.matchAll(versionRegex)];
26 |
27 | if (matches.length === 0) {
28 | throw new Error('No version entries found in CHANGELOG.md');
29 | }
30 |
31 | // Get the first (latest) version
32 | const [fullMatch, version, date] = matches[0];
33 | const startIndex = changelog.indexOf(fullMatch);
34 |
35 | // Find where this version's content ends (next version or end of file)
36 | let endIndex;
37 | if (matches[1]) {
38 | endIndex = changelog.indexOf(matches[1][0]);
39 | } else {
40 | // Check for link references at the bottom
41 | const linkSectionRegex = /^\[[^\]]+\]:/m;
42 | const linkMatch = changelog.match(linkSectionRegex);
43 | endIndex = linkMatch ? changelog.lastIndexOf(linkMatch[0]) : changelog.length;
44 | }
45 |
46 | // Extract the content for this version
47 | const content = changelog.substring(startIndex + fullMatch.length, endIndex).trim();
48 |
49 | if (!content) {
50 | throw new Error(`No changelog content found for version ${version}`);
51 | }
52 |
53 | return {
54 | version,
55 | date,
56 | content,
57 | fullEntry: `## [${version}] - ${date}\n\n${content}`,
58 | };
59 | }
60 |
61 | // Check if a GitHub release already exists
62 | async function releaseExists(tagName) {
63 | try {
64 | execSync(`gh release view ${tagName}`, { stdio: 'pipe' });
65 | return true;
66 | } catch {
67 | return false;
68 | }
69 | }
70 |
71 | // Check if GitHub CLI is installed and authenticated
72 | function checkGitHubCLI() {
73 | try {
74 | execSync('gh --version', { stdio: 'pipe' });
75 | } catch {
76 | throw new Error('GitHub CLI (gh) is not installed. Install from: https://cli.github.com/');
77 | }
78 |
79 | try {
80 | execSync('gh auth status', { stdio: 'pipe' });
81 | } catch {
82 | throw new Error('GitHub CLI is not authenticated. Run: gh auth login');
83 | }
84 | }
85 |
86 | // Check for uncommitted changes
87 | function hasUncommittedChanges() {
88 | try {
89 | const status = execSync('git status --porcelain', { encoding: 'utf-8' });
90 | return status.trim().length > 0;
91 | } catch {
92 | return false;
93 | }
94 | }
95 |
96 | // Commit all changes
97 | function commitChanges(version) {
98 | if (isDryRun) {
99 | hLog(2, false, 'brightBlack', '→', `Would commit all changes for v${version}`);
100 | return;
101 | }
102 |
103 | try {
104 | execSync('git add .', { stdio: 'inherit' });
105 | execSync(`git commit -m "chore: release v${version}"`, { stdio: 'inherit' });
106 | hLog(0, false, 'success', '✓', 'Changes committed');
107 | } catch (error) {
108 | throw new Error(`Failed to commit changes: ${error.message}`);
109 | }
110 | }
111 |
112 | // Create and push tag
113 | function createTag(version) {
114 | const tagName = `v${version}`;
115 |
116 | if (isDryRun) {
117 | hLog(2, false, 'brightBlack', '→', `Would create and push tag ${tagName}`);
118 | return;
119 | }
120 |
121 | try {
122 | // Check if tag already exists locally
123 | try {
124 | execSync(`git rev-parse ${tagName}`, { stdio: 'pipe' });
125 | hLog(0, false, 'info', 'ℹ', `Tag ${tagName} already exists locally`);
126 | } catch {
127 | // Tag doesn't exist, create it
128 | execSync(`git tag -a ${tagName} -m "Release ${tagName}"`, { stdio: 'inherit' });
129 | hLog(0, false, 'success', '✓', `Tag ${tagName} created`);
130 | }
131 |
132 | // Push the tag
133 | execSync(`git push origin ${tagName}`, { stdio: 'inherit' });
134 | hLog(0, false, 'success', '✓', `Tag ${tagName} pushed to origin`);
135 | } catch (error) {
136 | throw new Error(`Failed to create/push tag: ${error.message}`);
137 | }
138 | }
139 |
140 | // Push commits to origin
141 | function pushCommits() {
142 | if (isDryRun) {
143 | hLog(2, false, 'brightBlack', '→', 'Would push commits to origin');
144 | return;
145 | }
146 |
147 | try {
148 | execSync('git push origin main', { stdio: 'inherit' });
149 | hLog(0, false, 'success', '✓', 'Commits pushed to origin');
150 | } catch (error) {
151 | // Non-fatal, release can still be created
152 | hLog(0, true, 'warning', 'warning', `Failed to push commits: ${error.message}`);
153 | }
154 | }
155 |
156 | // Create GitHub release
157 | async function createGitHubRelease(version, releaseNotes, isDraft = false) {
158 | const tagName = `v${version}`;
159 |
160 | if (isDryRun) {
161 | hLog(2, false, 'brightBlack', '→', `Would create GitHub release ${tagName}`);
162 | console.log('');
163 | hLog(2, false, 'brightBlack', 'Release notes preview:');
164 | console.log('----------------------------------------');
165 | console.log(releaseNotes);
166 | console.log('----------------------------------------');
167 | return true;
168 | }
169 |
170 | try {
171 | const draftFlag = isDraft ? '--draft' : '';
172 | const prereleaseFlag = version.includes('-') ? '--prerelease' : '';
173 |
174 | // Create release with notes from stdin to handle multiline content
175 | const command = `gh release create ${tagName} ${draftFlag} ${prereleaseFlag} --title "${tagName}" --notes-file -`;
176 |
177 | execSync(command, {
178 | input: releaseNotes,
179 | stdio: ['pipe', 'inherit', 'inherit'],
180 | });
181 |
182 | return true;
183 | } catch (error) {
184 | throw new Error(`Failed to create GitHub release: ${error.message}`);
185 | }
186 | }
187 |
188 | async function main() {
189 | // Parse flags
190 | const helpFlag = process.argv.includes('--help') || process.argv.includes('-h');
191 | const draftFlag = process.argv.includes('--draft');
192 | const forceFlag = process.argv.includes('--force') || process.argv.includes('-f');
193 | const skipCommitFlag = process.argv.includes('--skip-commit');
194 | const skipTagFlag = process.argv.includes('--skip-tag');
195 | const skipChangelogFlag = process.argv.includes('--skip-changelog');
196 | isDryRun = process.argv.includes('--dry-run') || process.argv.includes('-d');
197 |
198 | // Custom version override
199 | const versionIndex = process.argv.findIndex((arg) => arg === '--version' || arg === '-v');
200 | const customVersion = versionIndex !== -1 ? process.argv[versionIndex + 1] : null;
201 |
202 | if (helpFlag) {
203 | colorLog(`
204 | /#highlight GitHub Release Creator #/
205 |
206 | /#info Description: #/
207 | Complete release workflow: commits changes, creates tag, and publishes GitHub release.
208 |
209 | /#info Usage: #/ npm run release:github [options]
210 |
211 | /#info Options: #/
212 | --dry-run, -d Preview all actions without executing
213 | --draft Create as draft release
214 | --force, -f Overwrite existing release
215 | --skip-commit Skip git commit step
216 | --skip-tag Skip tag creation step
217 | --skip-changelog Skip changelog requirement
218 | --version, -v Use specific version instead of package.json
219 | --help, -h Show this help message
220 |
221 | /#info Workflow: #/
222 | 1. Commit all changes (if any)
223 | 2. Create and push git tag
224 | 3. Create GitHub release from changelog
225 |
226 | /#info Requirements: #/
227 | • GitHub CLI (gh) installed and authenticated
228 | • CHANGELOG.md with proper format
229 | • Clean or committable working directory
230 |
231 | /#info Examples: #/
232 | npm run release:github # Full release workflow
233 | npm run release:github -- --dry-run # Preview all actions
234 | npm run release:github -- --draft # Create draft release
235 | npm run release:github -- --skip-commit # Already committed
236 | `);
237 | process.exit(0);
238 | }
239 |
240 | hLog(0, false, 'header', '==================================================', '', '\n');
241 | if (isDryRun) {
242 | hLog(0, true, 'brightBlack', 'DRY RUN', 'No changes will be made');
243 | console.log('');
244 | }
245 | hLog(0, false, 'highlight', 'GITHUB RELEASE WORKFLOW');
246 | hLog(0, false, 'header', '==================================================\n');
247 |
248 | try {
249 | // Check GitHub CLI
250 | checkGitHubCLI();
251 | hLog(0, false, 'success', '✓', 'GitHub CLI authenticated');
252 |
253 | // Get version from package.json or custom flag
254 | let version, changelogEntry;
255 |
256 | if (customVersion) {
257 | version = customVersion.replace(/^v/, ''); // Remove v prefix if present
258 | hLog(0, false, 'info', 'Version:', `/#version ${version} #/ (custom)`);
259 | } else {
260 | const packageJson = JSON.parse(fs.readFileSync('package.json', 'utf-8'));
261 | version = packageJson.version;
262 | hLog(0, false, 'info', 'Version:', `/#version ${version} #/`);
263 | }
264 |
265 | // Parse changelog if not skipped
266 | if (!skipChangelogFlag) {
267 | try {
268 | changelogEntry = parseChangelog();
269 |
270 | // Verify changelog version matches
271 | if (changelogEntry.version !== version) {
272 | hLog(0, true, 'error', 'ERROR', `Version mismatch!`);
273 | hLog(2, false, 'info', 'Package.json:', `/#version ${version} #/`);
274 | hLog(2, false, 'info', 'Changelog:', `/#version ${changelogEntry.version} #/`);
275 | console.log('');
276 | hLog(0, true, 'info', 'TIP', 'Update CHANGELOG.md with current version before releasing');
277 | process.exit(1);
278 | }
279 | hLog(0, false, 'success', '✓', `Changelog entry found for ${version}`);
280 | } catch (error) {
281 | hLog(0, true, 'error', 'ERROR', error.message);
282 | console.log('');
283 | hLog(0, true, 'info', 'TIP', `Add an entry for version ${version} to CHANGELOG.md`);
284 | process.exit(1);
285 | }
286 | }
287 |
288 | // Step 1: Commit changes if needed and not skipped
289 | if (!skipCommitFlag) {
290 | if (hasUncommittedChanges()) {
291 | console.log('');
292 | hLog(0, true, 'header', 'STEP 1: Committing changes');
293 | commitChanges(version);
294 | } else {
295 | hLog(0, false, 'info', 'ℹ', 'No uncommitted changes');
296 | }
297 | }
298 |
299 | // Step 2: Create and push tag if not skipped
300 | if (!skipTagFlag) {
301 | console.log('');
302 | hLog(0, true, 'header', 'STEP 2: Creating tag');
303 | createTag(version);
304 |
305 | // Also push commits if we have any
306 | if (!skipCommitFlag) {
307 | pushCommits();
308 | }
309 | }
310 |
311 | const tagName = `v${version}`;
312 |
313 | // Step 3: Check if release already exists
314 | if (await releaseExists(tagName)) {
315 | if (!forceFlag) {
316 | hLog(0, true, 'warning', 'EXISTS', `GitHub release ${tagName} already exists`);
317 | hLog(2, false, 'dim', '', 'Use --force to recreate the release');
318 | process.exit(1);
319 | } else {
320 | hLog(0, true, 'warning', 'WARNING', `Deleting existing release ${tagName}...`);
321 | if (!isDryRun) {
322 | execSync(`gh release delete ${tagName} --yes`, { stdio: 'inherit' });
323 | }
324 | }
325 | }
326 |
327 | // Prepare release notes
328 | let releaseNotes = '';
329 | if (changelogEntry) {
330 | releaseNotes = changelogEntry.content;
331 | } else if (skipChangelogFlag) {
332 | releaseNotes = `Release ${version}\n\nNo changelog entry provided.`;
333 | hLog(0, true, 'warning', 'WARNING', 'Creating release without changelog entry');
334 | }
335 |
336 | // Step 4: Create the release
337 | console.log('');
338 | hLog(0, true, 'header', 'STEP 3: Creating GitHub release');
339 |
340 | if (draftFlag) {
341 | hLog(2, false, 'info', 'Mode:', 'Draft release');
342 | }
343 | if (version.includes('-')) {
344 | hLog(2, false, 'info', 'Type:', 'Pre-release');
345 | } else {
346 | hLog(2, false, 'info', 'Type:', 'Stable release');
347 | }
348 |
349 | console.log('');
350 | await createGitHubRelease(version, releaseNotes, draftFlag);
351 |
352 | if (!isDryRun) {
353 | console.log('');
354 | hLog(0, true, 'success', 'SUCCESS', `Complete release workflow finished for ${tagName}!`);
355 | console.log('');
356 | hLog(0, false, 'dim', 'View at:', `/#command gh release view ${tagName} --web #/`);
357 | } else {
358 | console.log('');
359 | hLog(0, true, 'brightBlack', 'DRY RUN COMPLETE', 'No actions were performed');
360 | }
361 |
362 | // Show helpful commands
363 | console.log('');
364 | hLog(0, true, 'info', 'HELPFUL COMMANDS', '', '\n');
365 | hLog(2, false, 'dim', 'View release:', `/#command gh release view ${tagName} #/`);
366 | hLog(2, false, 'dim', 'Open in browser:', `/#command gh release view ${tagName} --web #/`);
367 | hLog(2, false, 'dim', 'List all releases:', `/#command gh release list #/`);
368 | if (draftFlag && !isDryRun) {
369 | hLog(
370 | 2,
371 | false,
372 | 'dim',
373 | 'Publish draft:',
374 | `/#command gh release edit ${tagName} --draft=false #/`
375 | );
376 | }
377 | } catch (error) {
378 | hLog(0, true, 'error', 'ERROR', error.message);
379 | process.exit(1);
380 | }
381 | }
382 |
383 | main().catch((error) => {
384 | hLog(0, true, 'error', 'ERROR', `Script failed: ${error}`, '\n');
385 | process.exit(1);
386 | });
387 |
--------------------------------------------------------------------------------
/src/integrations/angular.ts:
--------------------------------------------------------------------------------
1 | import { isPlatformBrowser } from '@angular/common';
2 | import {
3 | Directive,
4 | ElementRef,
5 | Input,
6 | OnInit,
7 | Injectable,
8 | NgModule,
9 | Renderer2,
10 | Inject,
11 | PLATFORM_ID,
12 | } from '@angular/core';
13 |
14 | import USALLib, {
15 | type LoopType,
16 | type AnimationType,
17 | type DirectionType,
18 | type USALDefaults,
19 | type USALConfig,
20 | type USALInstance,
21 | } from '~/usal';
22 |
23 | @Directive({
24 | selector: '[usal], [data-usal]',
25 | standalone: true,
26 | })
27 | export class USALDirective implements OnInit {
28 | @Input() usal: string = 'fade';
29 |
30 | constructor(
31 | private el: ElementRef,
32 | private renderer: Renderer2,
33 | @Inject(PLATFORM_ID) private platformId: object
34 | ) {}
35 |
36 | ngOnInit() {
37 | if (isPlatformBrowser(this.platformId)) {
38 | this.renderer.setAttribute(this.el.nativeElement, 'data-usal', this.usal || 'fade');
39 | }
40 | }
41 | }
42 |
43 | @Injectable({ providedIn: 'root' })
44 | export class USALService {
45 | config(newConfig: Partial | undefined): USALInstance | USALConfig {
46 | if (newConfig) return USALLib.config(newConfig) as USALInstance;
47 | return USALLib.config() as USALConfig;
48 | }
49 |
50 | destroy(): Promise {
51 | return USALLib.destroy();
52 | }
53 |
54 | restart(): Promise {
55 | return USALLib.restart();
56 | }
57 | initialized(): boolean {
58 | return USALLib.initialized();
59 | }
60 | }
61 |
62 | @NgModule({
63 | imports: [USALDirective],
64 | exports: [USALDirective],
65 | providers: [USALService],
66 | })
67 | export class USALModule {}
68 |
69 | export type { LoopType, AnimationType, DirectionType, USALDefaults, USALConfig, USALInstance };
70 |
71 | export default USALLib;
72 |
73 | declare global {
74 | interface Window {
75 | USAL: USALInstance;
76 | }
77 | }
78 |
--------------------------------------------------------------------------------
/src/integrations/lit.ts:
--------------------------------------------------------------------------------
1 | import { directive, Directive } from 'lit/directive.js';
2 |
3 | import USALLib from '../usal.js';
4 |
5 | // Controller for managing USAL in Lit components
6 | export class USALController {
7 | constructor(host, config = {}) {
8 | this.host = host;
9 | this.initialConfig = config;
10 | host.addController(this);
11 | }
12 |
13 | hostConnected() {
14 | // Configure global instance if config provided
15 | if (this.initialConfig && Object.keys(this.initialConfig).length > 0) {
16 | USALLib.config(this.initialConfig);
17 | }
18 | }
19 |
20 | hostDisconnected() {
21 | // Nothing to do - global instance persists
22 | }
23 |
24 | config(config) {
25 | if (config === undefined) {
26 | return USALLib.config();
27 | }
28 | USALLib.config(config);
29 | }
30 |
31 | destroy() {
32 | return USALLib.destroy();
33 | }
34 |
35 | restart() {
36 | return USALLib.restart();
37 | }
38 | }
39 |
40 | export const useUSAL = () => ({
41 | config: (config) => {
42 | if (config === undefined) {
43 | return USALLib.config();
44 | }
45 | USALLib.config(config);
46 | },
47 | destroy: () => USALLib.destroy(),
48 | restart: () => USALLib.restart(),
49 | });
50 |
51 | export const useUSALController = (host, config = {}) => {
52 | const controller = new USALController(host, config);
53 |
54 | return {
55 | config: (c) => controller.config(c),
56 | destroy: () => controller.destroy(),
57 | restart: () => controller.restart(),
58 | };
59 | };
60 |
61 | class USALDirective extends Directive {
62 | render(value = 'fade') {
63 | return value;
64 | }
65 |
66 | update(part, [value]) {
67 | const element = part.element;
68 | element.setAttribute('data-usal', value || 'fade');
69 | return this.render(value);
70 | }
71 | }
72 |
73 | export const usal = directive(USALDirective);
74 |
75 | export default USALLib;
76 |
--------------------------------------------------------------------------------
/src/integrations/react.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 | import { useEffect } from 'react';
3 | import USALLib from '../usal.js';
4 |
5 | export const USALProvider = ({ children, config = {} }) => {
6 | useEffect(() => {
7 | // Configure global instance on mount
8 | if (config && Object.keys(config).length > 0) {
9 | USALLib.config(config);
10 | }
11 |
12 | return () => {};
13 | }, []);
14 |
15 | return <>{children};
16 | };
17 |
18 | export const useUSAL = () => {
19 | return {
20 | config: (config) => {
21 | if (config === undefined) {
22 | return USALLib.config();
23 | }
24 | USALLib.config(config);
25 | },
26 | destroy: () => USALLib.destroy(),
27 | restart: () => USALLib.restart(),
28 | };
29 | };
30 |
31 | export default USALLib;
32 |
--------------------------------------------------------------------------------
/src/integrations/solid.ts:
--------------------------------------------------------------------------------
1 | import { onMount } from 'solid-js';
2 |
3 | import USALLib from '../usal.js';
4 |
5 | export const USALProvider = (props) => {
6 | onMount(() => {
7 | if (props.config && Object.keys(props.config).length > 0) {
8 | USALLib.config(props.config);
9 | }
10 | });
11 |
12 | return props.children;
13 | };
14 |
15 | export const useUSAL = () => ({
16 | config: (config) => {
17 | if (config === undefined) {
18 | return USALLib.config();
19 | }
20 | USALLib.config(config);
21 | },
22 | destroy: () => USALLib.destroy(),
23 | restart: () => USALLib.restart(),
24 | });
25 |
26 | export default USALLib;
27 |
--------------------------------------------------------------------------------
/src/integrations/svelte.ts:
--------------------------------------------------------------------------------
1 | import USALLib from '../usal.js';
2 |
3 | export const usal = (node, value = 'fade') => {
4 | node.setAttribute('data-usal', value);
5 |
6 | return {
7 | update(newValue) {
8 | node.setAttribute('data-usal', newValue);
9 | },
10 | destroy() {},
11 | };
12 | };
13 |
14 | export const useUSAL = () => ({
15 | config: (config) => {
16 | if (config === undefined) {
17 | return USALLib.config();
18 | }
19 | USALLib.config(config);
20 | },
21 | destroy: () => USALLib.destroy(),
22 | restart: () => USALLib.restart(),
23 | });
24 |
25 | export default USALLib;
26 |
--------------------------------------------------------------------------------
/src/integrations/vue.ts:
--------------------------------------------------------------------------------
1 | import USALLib from '../usal.js';
2 |
3 | export const USALPlugin = {
4 | install(app, config = {}) {
5 | // Configure global instance if config provided
6 | if (config && Object.keys(config).length > 0) {
7 | USALLib.config(config);
8 | }
9 |
10 | // Add global property
11 | app.config.globalProperties.$usal = {
12 | config: (c) => (c === undefined ? USALLib.config() : USALLib.config(c)),
13 | destroy: () => USALLib.destroy(),
14 | restart: () => USALLib.restart(),
15 | };
16 |
17 | // Add directive
18 | app.directive('usal', {
19 | mounted(el, binding) {
20 | el.setAttribute('data-usal', binding.value || 'fade');
21 | },
22 | updated(el, binding) {
23 | el.setAttribute('data-usal', binding.value || 'fade');
24 | },
25 | beforeMount(el, binding) {
26 | el.setAttribute('data-usal', binding.value || 'fade');
27 | },
28 | getSSRProps(binding) {
29 | return {
30 | 'data-usal': binding?.value || 'fade',
31 | };
32 | },
33 | });
34 | },
35 | };
36 |
37 | export const useUSAL = () => ({
38 | config: (config) => {
39 | if (config === undefined) {
40 | return USALLib.config();
41 | }
42 | USALLib.config(config);
43 | },
44 | destroy: () => USALLib.destroy(),
45 | restart: () => USALLib.restart(),
46 | });
47 |
48 | export default USALLib;
49 |
--------------------------------------------------------------------------------
/src/plugins/nuxt-plugin.js:
--------------------------------------------------------------------------------
1 | import { USALPlugin } from '@usal/vue';
2 |
3 | export default (nuxtApp) => {
4 | nuxtApp.vueApp.use(USALPlugin);
5 | };
6 |
--------------------------------------------------------------------------------
/src/plugins/nuxt.js:
--------------------------------------------------------------------------------
1 | import { addPluginTemplate, defineNuxtModule } from '@nuxt/kit';
2 |
3 | export default defineNuxtModule({
4 | setup() {
5 | addPluginTemplate({
6 | filename: 'usal-plugin.js',
7 | getContents: () =>
8 | `import USALPlugin from '@usal/vue/nuxt-plugin';export default defineNuxtPlugin((nuxtApp) => USALPlugin(nuxtApp));`,
9 | });
10 | },
11 | });
12 |
--------------------------------------------------------------------------------
/src/types/lit.d.ts:
--------------------------------------------------------------------------------
1 | import { ReactiveController, ReactiveControllerHost, DirectiveResult } from 'lit';
2 | import USAL, { USALConfig, USALInstance } from '../usal';
3 |
4 | export class USALController implements ReactiveController {
5 | constructor(host: ReactiveControllerHost, config?: USALConfig);
6 | config(): USALConfig;
7 | config(config: USALConfig): void;
8 | destroy(): Promise;
9 | restart(): Promise;
10 | hostConnected(): void;
11 | hostDisconnected(): void;
12 | }
13 |
14 | export const useUSAL: () => {
15 | config(): USALConfig;
16 | config(config: USALConfig): void;
17 | destroy: () => Promise;
18 | restart: () => Promise;
19 | };
20 |
21 | export const useUSALController: (
22 | host: ReactiveControllerHost,
23 | config?: USALConfig
24 | ) => USALController;
25 |
26 | export const usal: (value?: string) => DirectiveResult;
27 |
28 | export default USAL;
29 |
--------------------------------------------------------------------------------
/src/types/react.d.ts:
--------------------------------------------------------------------------------
1 | import React, { ReactNode } from 'react';
2 | import USAL, { USALConfig, USALInstance } from '../usal';
3 |
4 | export const USALProvider: React.FC<{
5 | children: ReactNode;
6 | config?: USALConfig;
7 | }>;
8 |
9 | export const useUSAL: () => {
10 | config(): USALConfig;
11 | config(config: USALConfig): void;
12 | destroy: () => Promise;
13 | restart: () => Promise;
14 | };
15 |
16 | export default USAL;
17 |
--------------------------------------------------------------------------------
/src/types/solid.d.ts:
--------------------------------------------------------------------------------
1 | import { Component, JSX } from 'solid-js';
2 | import USAL, { USALConfig, USALInstance } from '../usal';
3 |
4 | export const USALProvider: Component<{
5 | children: JSX.Element;
6 | config?: USALConfig;
7 | }>;
8 |
9 | export const useUSAL: () => {
10 | config(): USALConfig;
11 | config(config: USALConfig): void;
12 | destroy: () => Promise;
13 | restart: () => Promise;
14 | };
15 |
16 | export default USAL;
17 |
--------------------------------------------------------------------------------
/src/types/svelte.d.ts:
--------------------------------------------------------------------------------
1 | import { ActionReturn } from 'svelte/action';
2 | import USAL, { USALConfig, USALInstance } from '../usal';
3 |
4 | export interface USALAction {
5 | (node: HTMLElement, params?: string): ActionReturn;
6 | }
7 |
8 | export const usal: USALAction;
9 |
10 | export const useUSAL: () => {
11 | config(): USALConfig;
12 | config(config: USALConfig): void;
13 | destroy: () => Promise;
14 | restart: () => Promise;
15 | };
16 |
17 | export default USAL;
18 |
--------------------------------------------------------------------------------
/src/types/vue.d.ts:
--------------------------------------------------------------------------------
1 | import { App } from 'vue';
2 | import USAL, { USALConfig, USALInstance } from '../usal';
3 |
4 | export const USALPlugin: {
5 | install(app: App, config?: USALConfig): void;
6 | };
7 |
8 | export const useUSAL: () => {
9 | config(): USALConfig;
10 | config(config: USALConfig): void;
11 | destroy: () => Promise;
12 | restart: () => Promise;
13 | };
14 |
15 | declare module '@vue/runtime-core' {
16 | export interface GlobalProperties {
17 | $usal: {
18 | config(): USALConfig;
19 | config(config: USALConfig): void;
20 | destroy: () => Promise;
21 | restart: () => Promise;
22 | };
23 | }
24 | }
25 |
26 | export default USAL;
27 |
--------------------------------------------------------------------------------
/src/usal.d.ts:
--------------------------------------------------------------------------------
1 | export type LoopType = 'mirror' | 'jump';
2 | export type AnimationType = 'fade' | 'zoomin' | 'zoomout' | 'flip' | 'slide';
3 | export type DirectionType = 'u' | 'd' | 'l' | 'r' | 'ul' | 'ur' | 'dl' | 'dr';
4 |
5 | export interface USALDefaults {
6 | animation?: AnimationType;
7 | direction?: DirectionType;
8 | duration?: number; // ms
9 | delay?: number; // ms
10 | threshold?: number; // %
11 | splitDelay?: number; // ms
12 | easing?: string;
13 | blur?: boolean | number; // rem
14 | forwards?: boolean;
15 | loop?: LoopType;
16 | }
17 |
18 | export interface USALConfig {
19 | defaults?: USALDefaults;
20 | observersDelay?: number; // ms
21 | once?: boolean;
22 | }
23 |
24 | export interface USALInstance {
25 | config(): USALConfig;
26 | config(newConfig: Partial): USALInstance;
27 | destroy(): Promise; //use only extreme cases, the system is reactive even in shadowRoot
28 | restart(): Promise; //use only extreme cases, the system is reactive even in shadowRoot
29 | initialized(): boolean;
30 | readonly version: string;
31 | }
32 |
33 | declare global {
34 | interface Window {
35 | USAL: USALInstance;
36 | }
37 | }
38 |
39 | declare const USAL: USALInstance;
40 | export default USAL;
41 |
--------------------------------------------------------------------------------
/test/angular/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
2 |
3 | # Compiled output
4 | /dist
5 | /tmp
6 | /out-tsc
7 | /bazel-out
8 |
9 | # Node
10 | /node_modules
11 | npm-debug.log
12 | yarn-error.log
13 |
14 | # IDEs and editors
15 | .idea/
16 | .project
17 | .classpath
18 | .c9/
19 | *.launch
20 | .settings/
21 | *.sublime-workspace
22 |
23 | # Visual Studio Code
24 | .vscode/*
25 | !.vscode/settings.json
26 | !.vscode/tasks.json
27 | !.vscode/launch.json
28 | !.vscode/extensions.json
29 | .history/*
30 |
31 | # Miscellaneous
32 | /.angular/cache
33 | .sass-cache/
34 | /connect.lock
35 | /coverage
36 | /libpeerconnection.log
37 | testem.log
38 | /typings
39 |
40 | # System files
41 | .DS_Store
42 | Thumbs.db
43 |
--------------------------------------------------------------------------------
/test/angular/angular.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3 | "version": 1,
4 | "newProjectRoot": "projects",
5 | "projects": {
6 | "angular": {
7 | "projectType": "application",
8 | "schematics": {
9 | "@schematics/angular:class": {
10 | "skipTests": true
11 | },
12 | "@schematics/angular:component": {
13 | "skipTests": true
14 | },
15 | "@schematics/angular:directive": {
16 | "skipTests": true
17 | },
18 | "@schematics/angular:guard": {
19 | "skipTests": true
20 | },
21 | "@schematics/angular:interceptor": {
22 | "skipTests": true
23 | },
24 | "@schematics/angular:pipe": {
25 | "skipTests": true
26 | },
27 | "@schematics/angular:resolver": {
28 | "skipTests": true
29 | },
30 | "@schematics/angular:service": {
31 | "skipTests": true
32 | }
33 | },
34 | "root": "",
35 | "sourceRoot": "src",
36 | "prefix": "app",
37 | "architect": {
38 | "build": {
39 | "builder": "@angular/build:application",
40 | "options": {
41 | "browser": "src/main.ts",
42 | "polyfills": [
43 | "zone.js"
44 | ],
45 | "tsConfig": "tsconfig.app.json",
46 | "assets": [
47 | {
48 | "glob": "**/*",
49 | "input": "public"
50 | }
51 | ],
52 | "styles": [
53 | "src/styles.css"
54 | ],
55 | "server": "src/main.server.ts",
56 | "outputMode": "server",
57 | "ssr": {
58 | "entry": "src/server.ts"
59 | }
60 | },
61 | "configurations": {
62 | "production": {
63 | "budgets": [
64 | {
65 | "type": "initial",
66 | "maximumWarning": "500kB",
67 | "maximumError": "1MB"
68 | },
69 | {
70 | "type": "anyComponentStyle",
71 | "maximumWarning": "4kB",
72 | "maximumError": "8kB"
73 | }
74 | ],
75 | "outputHashing": "all"
76 | },
77 | "development": {
78 | "optimization": false,
79 | "extractLicenses": false,
80 | "sourceMap": true
81 | }
82 | },
83 | "defaultConfiguration": "production"
84 | },
85 | "serve": {
86 | "builder": "@angular/build:dev-server",
87 | "configurations": {
88 | "production": {
89 | "buildTarget": "angular:build:production"
90 | },
91 | "development": {
92 | "buildTarget": "angular:build:development"
93 | }
94 | },
95 | "defaultConfiguration": "development"
96 | },
97 | "extract-i18n": {
98 | "builder": "@angular/build:extract-i18n"
99 | },
100 | "test": {
101 | "builder": "@angular/build:karma",
102 | "options": {
103 | "polyfills": [
104 | "zone.js",
105 | "zone.js/testing"
106 | ],
107 | "tsConfig": "tsconfig.spec.json",
108 | "assets": [
109 | {
110 | "glob": "**/*",
111 | "input": "public"
112 | }
113 | ],
114 | "styles": [
115 | "src/styles.css"
116 | ]
117 | }
118 | }
119 | }
120 | }
121 | }
122 | }
123 |
--------------------------------------------------------------------------------
/test/angular/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "usal-demo",
3 | "version": "0.0.0",
4 | "scripts": {
5 | "ng": "ng",
6 | "dev": "dotenv -e ../../.env -- ng serve --port 5500 --host 0.0.0.0",
7 | "build": "ng build",
8 | "watch": "ng build --watch --configuration development",
9 | "test": "ng test"
10 | },
11 | "prettier": {
12 | "printWidth": 100,
13 | "singleQuote": true,
14 | "overrides": [
15 | {
16 | "files": "*.html",
17 | "options": {
18 | "parser": "angular"
19 | }
20 | }
21 | ]
22 | },
23 | "private": true,
24 | "dependencies": {
25 | "@angular/common": "^20.3.0",
26 | "@angular/compiler": "^20.3.0",
27 | "@angular/core": "^20.3.0",
28 | "@angular/forms": "^20.3.0",
29 | "@angular/platform-browser": "^20.3.0",
30 | "@angular/platform-server": "^20.3.0",
31 | "@angular/router": "^20.3.0",
32 | "@angular/ssr": "^20.3.2",
33 | "express": "^5.1.0",
34 | "rxjs": "~7.8.0",
35 | "tslib": "^2.3.0",
36 | "zone.js": "~0.15.0"
37 | },
38 | "devDependencies": {
39 | "@angular/build": "^20.3.2",
40 | "@angular/cli": "^20.3.2",
41 | "@angular/compiler-cli": "^20.3.0",
42 | "@types/express": "^5.0.1",
43 | "@types/jasmine": "~5.1.0",
44 | "@types/node": "^20.17.19",
45 | "jasmine-core": "~5.9.0",
46 | "karma": "~6.4.0",
47 | "karma-chrome-launcher": "~3.2.0",
48 | "karma-coverage": "~2.2.0",
49 | "karma-jasmine": "~5.1.0",
50 | "karma-jasmine-html-reporter": "~2.1.0",
51 | "typescript": "~5.9.2"
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/test/angular/src/app/app.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { USALModule } from '@usal/angular';
3 |
4 | @Component({
5 | selector: 'app-root',
6 | imports: [USALModule],
7 | template:
8 | 'Congratulations! Your App+Angular is running. 🎉
',
9 | })
10 | export class App {}
11 |
--------------------------------------------------------------------------------
/test/angular/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Angular
6 |
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy
4 | of this software and associated documentation files (the "Software"), to deal
5 | in the Software without restriction, including without limitation the rights
6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7 | copies of the Software, and to permit persons to whom the Software is
8 | furnished to do so, subject to the following conditions:
9 |
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 |
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
14 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
15 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
16 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
17 | DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
18 | OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE
19 | OR OTHER DEALINGS IN THE SOFTWARE.
20 |
--------------------------------------------------------------------------------
/test/lit/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | LitElement Starter Project
6 | 404 - Not found
`;
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/test/lit/src/base/app-localstorage.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Document your localStorage
3 | */
4 | export default class AppLocalStorage {
5 | static get theme() {
6 | return localStorage.theme;
7 | }
8 | static set theme(val) {
9 | localStorage.theme = val;
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/test/lit/src/base/app-router.ts:
--------------------------------------------------------------------------------
1 | import { CtLit, html, customElement, css } from '@conectate/ct-lit';
2 | import { Page } from '@conectate/ct-router';
3 | import '@conectate/ct-router';
4 | /**
5 | * @see https://www.npmjs.com/package/@conectate/ct-router
6 | */
7 | @customElement('app-router')
8 | export class AppRouter extends CtLit {
9 | static styles = [
10 | css`
11 | :host {
12 | display: block;
13 | }
14 | `
15 | ];
16 | /** You can add more pages and behaviors
17 | * @see https://www.npmjs.com/package/@conectate/ct-router
18 | */
19 | static pages: Page[] = [
20 | {
21 | path: '/',
22 | element: html` `;
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/test/lit/src/base/styles/default-theme.ts:
--------------------------------------------------------------------------------
1 | import { css } from 'lit';
2 |
3 | // Define your Theme
4 | let defaultTheme = css`
5 | :root {
6 | --color-primary: #2cb5e8;
7 | --color-primary-medium: #2cb5e8b0;
8 | --color-primary-light: #2cb5e82b;
9 | --color-on-primary: #fff;
10 |
11 | --color-secondary: #0fb8ad;
12 | /* Color de objeto en cima de color de acento */
13 | --color-on-secondary: #fff;
14 |
15 | /* Fondos */
16 | --color-background: #f7f7f8;
17 | /* Fondos Textos que aparecen en los fondos */
18 | --color-on-background: #535353; /* Gris */
19 |
20 | /* Fondos que estan en cima de los fondos (ct-cards) */
21 | --color-surface: #ffffff;
22 | /* Fondos Textos que aparecen en los ct-cards */
23 | --color-on-surface: #535353; /* Gris */
24 |
25 | /* Color de objeto en cima de error */
26 | --color-error: #b10808;
27 | --color-on-error: #fff;
28 |
29 | --high-emphasis: #000000de;
30 | --medium-emphasis: #00000099;
31 | --color-disable: #00000047;
32 |
33 | /* Blur */
34 | --color-blur: rgba(255, 255, 255, 0.7);
35 | --color-blur-surface: rgba(255, 255, 255, 0.6);
36 | --color-on-surface-opaque: #8e8e8e; /* Texto sencundarios */
37 | --color-on-surface-dividers: #7c7c7c30; /* divisores */
38 | --color-app: linear-gradient(90deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
39 | --dark-primary-color: #218cb3;
40 | }
41 | .dark {
42 | --color-primary: #2cb5e8;
43 | --color-primary-medium: #2cb5e8b0;
44 | --color-primary-light: #2cb5e82b;
45 | --color-on-primary: #fff;
46 |
47 | --color-secondary: #0fb8ad;
48 | --color-on-secondary: #fff;
49 |
50 | /* Fondos */
51 | --color-background: #111e23;
52 | /* Fondos Textos que aparecen en los fondos */
53 | --color-on-background: #fff;
54 |
55 | /* Fondos que estan en cima de los fondos (ct-cards) */
56 | --color-surface: #1a2c34;
57 | /* Fondos Textos que aparecen en los ct-cards */
58 | --color-on-surface: #fff;
59 |
60 | --color-error: #cf6679;
61 | --color-on-error: #fff;
62 |
63 | --high-emphasis: #ffffffde;
64 | --medium-emphasis: #ffffff99;
65 | --color-disable: #ffffff61;
66 |
67 | --color-on-surface-opaque: #8e8e8e; /* Texto sencundarios */
68 | --color-on-surface-dividers: #bbbbbb24; /* divisores */
69 | --color-blur: rgba(35, 35, 37, 0.7);
70 | --color-blur-surface: #1a2c34b3;
71 | --color-app: linear-gradient(90deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
72 | --dark-primary-color: #218cb3;
73 | }
74 | `;
75 |
76 | /**
77 | * Inject CSS
78 | */
79 | export function injectTheme() {
80 | const link = document.createElement('link');
81 | link.rel = 'stylesheet';
82 | link.type = 'text/css';
83 | link.href = 'https://fonts.googleapis.com/css?family=Roboto:400,500,700';
84 | document.head.appendChild(link);
85 | const style = document.createElement('style');
86 | style.innerHTML = defaultTheme.cssText;
87 | document.head.appendChild(style);
88 | }
89 |
90 | export class Theme {
91 | static setTheme(color: 'dark' | 'light') {
92 | if (color == 'dark') {
93 | localStorage.theme = 'dark';
94 | document.documentElement.classList.add('dark');
95 | document.documentElement.classList.remove('light');
96 | } else {
97 | localStorage.theme = 'light';
98 | document.documentElement.classList.remove('dark');
99 | document.documentElement.classList.add('light');
100 | }
101 | }
102 | }
103 |
--------------------------------------------------------------------------------
/test/lit/src/base/styles/lit-shared-styles.ts:
--------------------------------------------------------------------------------
1 | import { css } from 'lit';
2 |
3 | // You Shared Styles
4 | export const litStyles = css`
5 | *,
6 | *:before,
7 | *:after {
8 | box-sizing: border-box;
9 | -moz-osx-font-smoothing: grayscale;
10 | -webkit-font-smoothing: antialiased;
11 | }
12 |
13 | .highlight-font {
14 | font-family: 'Roboto', arial, sans-serif;
15 | }
16 |
17 | h1,
18 | h2,
19 | h3,
20 | h4,
21 | h5,
22 | h6 {
23 | font-family: 'Roboto', arial, sans-serif;
24 | }
25 | h1,
26 | h2,
27 | h3,
28 | h4 {
29 | color: var(--dark-primary-color);
30 | /* margin-top: 0.8em;
31 | margin-bottom: 0.8em; */
32 | }
33 | `;
34 |
--------------------------------------------------------------------------------
/test/lit/src/home/activities/home-app.ts:
--------------------------------------------------------------------------------
1 | import { CtLit, html, property, customElement, css } from '@conectate/ct-lit';
2 | import { strings } from '../../xconfig/strings';
3 | import { usal } from '@usal/lit';
4 |
5 | @customElement('home-app')
6 | export class HomeApp extends CtLit {
7 | static styles = [
8 | css`
9 | :host {
10 | display: block;
11 | }
12 | `
13 | ];
14 |
15 | render() {
16 | return html` ${strings.hello_world}
17 |
18 | -
19 | / - Home
20 |
21 |
22 | -
23 | /login - Login
24 |
25 |
26 | -
27 | /404 - NotFound
28 |
29 |
`;
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/test/lit/src/lit-app.ts:
--------------------------------------------------------------------------------
1 | import './base/app-router';
2 | import AppLocalStorage from './base/app-localstorage';
3 | import { loadLang } from './xconfig/strings';
4 | import { css, CtLit, customElement, html } from '@conectate/ct-lit';
5 | import { property } from 'lit/decorators.js';
6 | import { injectTheme, Theme } from './base/styles/default-theme';
7 |
8 | @customElement('lit-app')
9 | export class LitApp extends CtLit {
10 | static styles = [
11 | css`
12 | :host,
13 | main {
14 | display: flex;
15 | flex-direction: column;
16 | color: var(--color-on-background);
17 | height: 100%;
18 | }
19 | app-router {
20 | flex: 1;
21 | }
22 | header {
23 | display: flex;
24 | align-items: center;
25 | font-size: 1.5em;
26 | font-weight: bold;
27 | padding: 0px 16px;
28 | height: 56px;
29 | color: var(--color-primary);
30 | background: var(--color-surface);
31 | box-shadow: rgba(0, 0, 0, 0.26) 0px 4px 11px 0px;
32 | z-index: 90;
33 | position: relative;
34 | }
35 | `
36 | ];
37 | @property({ type: Number }) foo = 1;
38 |
39 | async connectedCallback() {
40 | await loadLang();
41 | injectTheme();
42 | Theme.setTheme(AppLocalStorage.theme || 'light');
43 | super.connectedCallback();
44 | }
45 |
46 | render() {
47 | return html`
48 |
49 | LitElement Starter App
50 |
52 | `;
53 | }
54 |
55 | firstUpdated() {}
56 | }
57 |
--------------------------------------------------------------------------------
/test/lit/src/login/activities/app-login.ts:
--------------------------------------------------------------------------------
1 | import { CtLit, html, property, customElement, css } from '@conectate/ct-lit';
2 |
3 | @customElement('app-login')
4 | export class AppLogin extends CtLit {
5 | static styles = css`
6 | :host {
7 | display: block;
8 | }
9 | `;
10 |
11 | render() {
12 | return html`Login
`;
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/test/lit/src/xconfig/strings/index.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Herberth Obregón
3 | * @date 03/01/2021
4 | * Add langs
5 | */
6 | import { es } from './lang/es';
7 | // @ts-ignore
8 | const strings: { [key in keyof typeof es]: (typeof es)[key] } = {};
9 |
10 | export type tSupportLangs = 'es';
11 | export const supportLang: tSupportLangs[] = ['es'];
12 |
13 | export function getLang(defaultLang = 'es'): tSupportLangs {
14 | if (localStorage.lang == 'null') delete localStorage.lang;
15 | let lang = localStorage.lang || window.navigator.language || defaultLang;
16 | lang = lang.substring(0, 2);
17 | if (supportLang.includes(lang)) {
18 | return lang;
19 | } else {
20 | return 'es';
21 | }
22 | }
23 | export async function loadLang() {
24 | document.documentElement.lang = getLang();
25 | switch (getLang()) {
26 | default:
27 | case 'es':
28 | let es = await import('./lang/es');
29 | setNewDict(es.es);
30 | break;
31 | }
32 | // @ts-ignore
33 | window.strings = strings;
34 | }
35 |
36 | function setNewDict(str: any) {
37 | Object.keys(str).forEach((key: any) => {
38 | // @ts-ignore
39 | strings[key] = str[key];
40 | });
41 | }
42 |
43 | export { strings };
44 |
--------------------------------------------------------------------------------
/test/lit/src/xconfig/strings/lang/es.ts:
--------------------------------------------------------------------------------
1 | export const es = {
2 | hello_world: 'Hola Mundo / Hello World'
3 | };
4 |
--------------------------------------------------------------------------------
/test/lit/src/xconfig/typings.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.png';
2 | declare module '*.jpg';
3 | declare module '*.jpeg';
4 | declare module '*.svg';
5 | declare module '*.gif';
6 |
--------------------------------------------------------------------------------
/test/lit/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "resolveJsonModule": true,
4 | /* Basic Options */
5 | "target": "ES2019", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
6 | "module": "ESNext", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
7 | "lib": ["es2017","dom"], /* Specify library files to be included in the compilation. */
8 | "allowJs": true, /* Allow javascript files to be compiled. */
9 | // "checkJs": true, /* Report errors in .js files. */
10 | // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
11 | // "declaration": true, /* Generates corresponding '.d.ts' file. */
12 | // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */
13 | // "sourceMap": true, /* Generates corresponding '.map' file. */
14 | // "outFile": "./", /* Concatenate and emit output to single file. */
15 | "outDir": "dist", /* Redirect output structure to the directory. */
16 | // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
17 | // "composite": true, /* Enable project compilation */
18 | // "removeComments": true, /* Do not emit comments to output. */
19 | // "noEmit": true, /* Do not emit outputs. */
20 | // "importHelpers": true, /* Import emit helpers from 'tslib'. */
21 | // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
22 | // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
23 | /* Strict Type-Checking Options */
24 | "strict": true, /* Enable all strict type-checking options. */
25 | // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
26 | // "strictNullChecks": true, /* Enable strict null checks. */
27 | // "strictFunctionTypes": true, /* Enable strict checking of function types. */
28 | // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
29 | // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */
30 | //"noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
31 | //"alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */
32 | /* Additional Checks */
33 | // "noUnusedLocals": true, /* Report errors on unused locals. */
34 | // "noUnusedParameters": true, /* Report errors on unused parameters. */
35 | // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
36 | // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
37 | /* Module Resolution Options */
38 | "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
39 | // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */
40 | // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
41 | // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */
42 | "typeRoots": ["./@conectate/typings"], /* List of folders to include type definitions from. */
43 | // "types": [], /* Type declaration files to be included in compilation. */
44 | "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
45 | "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
46 | // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */
47 | /* Source Map Options */
48 | // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */
49 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
50 | // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */
51 | // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
52 | /* Experimental Options */
53 | "experimentalDecorators": true /* Enables experimental support for ES7 decorators. */
54 | // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
55 | },
56 | "exclude": [
57 | "dist",
58 | "webpack.config.js"
59 | ]
60 | }
--------------------------------------------------------------------------------
/test/lit/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { RollupBabelInputPluginOptions, babel } from '@rollup/plugin-babel';
2 | import copy, { CopyOptions } from 'rollup-plugin-copy';
3 | import { Plugin, defineConfig } from 'vite';
4 |
5 | import resolve from '@rollup/plugin-node-resolve';
6 | import terser from '@rollup/plugin-terser';
7 | import { readFileSync } from 'node:fs';
8 | import minifyHTML from 'rollup-plugin-html-literals';
9 | import summary from 'rollup-plugin-summary';
10 | import app from './package.json';
11 |
12 | const babelConfig: RollupBabelInputPluginOptions = {
13 | babelHelpers: 'bundled',
14 | extensions: ['.js', '.jsx', '.ts', '.tsx'],
15 | exclude: [/\bcore-js\b/],
16 | babelrc: false,
17 | plugins: [
18 | ['@babel/plugin-proposal-decorators', { decoratorsBeforeExport: true }],
19 | '@babel/plugin-syntax-dynamic-import',
20 | '@babel/plugin-syntax-import-meta',
21 | '@babel/plugin-proposal-export-default-from'
22 | ],
23 | presets: [['@babel/preset-env', { targets: { chrome: '65' }, useBuiltIns: 'usage', corejs: '3', debug: false }]]
24 | };
25 |
26 | const copyConfig: CopyOptions = {
27 | hook: 'closeBundle',
28 | targets: [{ src: 'res', dest: 'dist' }]
29 | };
30 | export const svgLoader: () => Plugin = () => {
31 | var regexSequences: [RegExp, string][] = [
32 | // Remove XML stuffs and comments
33 | [/<\?xml[\s\S]*?>/gi, ''],
34 | [//gi, ''],
35 | [//gi, ''],
36 |
37 | // SVG XML -> HTML5
38 | [/\<([A-Za-z]+)([^\>]*)\/\>/g, '<$1$2>'], // convert self-closing XML SVG nodes to explicitly closed HTML5 SVG nodes
39 | [/\s+/g, ' '], // replace whitespace sequences with a single space
40 | [/\> \<'] // remove whitespace between tags
41 | ];
42 | const getExtractedSVG = (svgStr: string) => regexSequences.reduce((prev, regexSequence) => prev.replace(regexSequence[0], regexSequence[1]), svgStr).trim();
43 | return {
44 | name: 'vite-svg-patch-plugin',
45 | transform: function (code, id) {
46 | if (id.endsWith('.svg')) {
47 | const extractedSvg = readFileSync(id, 'utf8');
48 | return `export const value = '${getExtractedSVG(extractedSvg)}'\n;export default value`;
49 | }
50 | return code;
51 | }
52 | };
53 | };
54 |
55 | // https://vitejs.dev/config/
56 | export default (opts: { mode: 'production' | 'development'; command: 'build' | 'serve' }) => {
57 | return defineConfig({
58 | server: {
59 | port: Number(process.env.PORT || 3000),
60 | allowedHosts: [process.env.__VITE_ADDITIONAL_SERVER_ALLOWED_HOSTS || '']
61 | },
62 | define: {
63 | 'process.env.NODE_ENV': JSON.stringify(opts.mode),
64 | 'process.env.VERSION': JSON.stringify(app.version)
65 | },
66 | plugins: [],
67 | build: {
68 | assetsInlineLimit: 100000,
69 | commonjsOptions: {
70 | sourceMap: false
71 | },
72 | rollupOptions: {
73 | input: {
74 | app: './src/lit-app.ts'
75 | },
76 | output: {
77 | format: 'esm',
78 | chunkFileNames: `v${app.version}/${process.env.NODE_ENV == 'development' ? '[name].' : 'c.'}[hash].js`,
79 | entryFileNames: `v${app.version}/[name].bundle.js`,
80 | dir: 'dist'
81 | },
82 | plugins: [
83 | // Minify HTML template literals
84 | minifyHTML(),
85 | babel(babelConfig),
86 | // Resolve bare module specifiers to relative paths
87 | resolve(),
88 | // Copy res to dist folder
89 | copy(copyConfig),
90 | // Minify JS
91 | terser({
92 | format: {
93 | comments: false
94 | },
95 | compress: false,
96 | module: true
97 | }),
98 | // Print bundle summary
99 | summary({
100 | showMinifiedSize: false,
101 | showGzippedSize: false
102 | })
103 | ],
104 | preserveEntrySignatures: false
105 | }
106 | }
107 | });
108 | };
109 |
--------------------------------------------------------------------------------
/test/nuxt/.gitignore:
--------------------------------------------------------------------------------
1 | # Nuxt dev/build outputs
2 | .output
3 | .data
4 | .nuxt
5 | .nitro
6 | .cache
7 | dist
8 |
9 | # Node dependencies
10 | node_modules
11 |
12 | # Logs
13 | logs
14 | *.log
15 |
16 | # Misc
17 | .DS_Store
18 | .fleet
19 | .idea
20 |
21 | # Local env files
22 | .env
23 | .env.*
24 | !.env.example
25 |
--------------------------------------------------------------------------------
/test/nuxt/app/app.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | Hello Nuxt {{ version }}!
7 |
8 |
9 |
16 |
--------------------------------------------------------------------------------
/test/nuxt/nuxt.config.ts:
--------------------------------------------------------------------------------
1 | // https://nuxt.com/docs/api/configuration/nuxt-config
2 | export default defineNuxtConfig({
3 | compatibilityDate: '2025-07-15',
4 | devtools: { enabled: true },
5 | modules: ['@usal/vue/nuxt'],
6 | });
7 |
--------------------------------------------------------------------------------
/test/nuxt/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "nuxt-app",
3 | "type": "module",
4 | "private": true,
5 | "scripts": {
6 | "build": "nuxt build",
7 | "dev": "dotenv -e ../../.env -- nuxt dev --port 5500 --host 0.0.0.0",
8 | "generate": "nuxt generate",
9 | "preview": "nuxt preview",
10 | "postinstall": "nuxt prepare"
11 | },
12 | "dependencies": {
13 | "nuxt": "^4.1.2",
14 | "vue": "^3.5.21",
15 | "vue-router": "^4.5.1"
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/test/nuxt/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | // https://nuxt.com/docs/guide/concepts/typescript
3 | "files": [],
4 | "references": [
5 | {
6 | "path": "./.nuxt/tsconfig.app.json"
7 | },
8 | {
9 | "path": "./.nuxt/tsconfig.server.json"
10 | },
11 | {
12 | "path": "./.nuxt/tsconfig.shared.json"
13 | },
14 | {
15 | "path": "./.nuxt/tsconfig.node.json"
16 | }
17 | ]
18 | }
19 |
--------------------------------------------------------------------------------
/test/react/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.*
7 | .yarn/*
8 | !.yarn/patches
9 | !.yarn/plugins
10 | !.yarn/releases
11 | !.yarn/versions
12 |
13 | # testing
14 | /coverage
15 |
16 | # next.js
17 | /.next/
18 | /out/
19 |
20 | # production
21 | /build
22 |
23 | # misc
24 | .DS_Store
25 | *.pem
26 |
27 | # debug
28 | npm-debug.log*
29 | yarn-debug.log*
30 | yarn-error.log*
31 | .pnpm-debug.log*
32 |
33 | # env files (can opt-in for committing if needed)
34 | .env*
35 |
36 | # vercel
37 | .vercel
38 |
39 | # typescript
40 | *.tsbuildinfo
41 | next-env.d.ts
42 |
--------------------------------------------------------------------------------
/test/react/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/italoalmeida0/usal/ea9b62ba1cf004630eff9b792a426a2bf64f222e/test/react/app/favicon.ico
--------------------------------------------------------------------------------
/test/react/app/globals.css:
--------------------------------------------------------------------------------
1 | @import 'tailwindcss';
2 |
3 | :root {
4 | --background: #ffffff;
5 | --foreground: #171717;
6 | }
7 |
8 | @theme inline {
9 | --color-background: var(--background);
10 | --color-foreground: var(--foreground);
11 | --font-sans: var(--font-geist-sans);
12 | --font-mono: var(--font-geist-mono);
13 | }
14 |
15 | @media (prefers-color-scheme: dark) {
16 | :root {
17 | --background: #0a0a0a;
18 | --foreground: #ededed;
19 | }
20 | }
21 |
22 | body {
23 | background: var(--background);
24 | color: var(--foreground);
25 | font-family: Arial, Helvetica, sans-serif;
26 | }
27 |
--------------------------------------------------------------------------------
/test/react/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import type { Metadata } from 'next';
2 | import { Geist, Geist_Mono } from 'next/font/google';
3 | import './globals.css';
4 | import { USALProvider } from '@usal/react';
5 |
6 | const geistSans = Geist({
7 | variable: '--font-geist-sans',
8 | subsets: ['latin'],
9 | });
10 |
11 | const geistMono = Geist_Mono({
12 | variable: '--font-geist-mono',
13 | subsets: ['latin'],
14 | });
15 |
16 | export const metadata: Metadata = {
17 | title: 'Create Next App',
18 | description: 'Generated by create next app',
19 | };
20 |
21 | export default function RootLayout({
22 | children,
23 | }: Readonly<{
24 | children: React.ReactNode;
25 | }>) {
26 | return (
27 |
28 |
29 | {children}
30 |
31 |
32 | );
33 | }
34 |
--------------------------------------------------------------------------------
/test/react/app/page.tsx:
--------------------------------------------------------------------------------
1 | import Image from 'next/image';
2 |
3 | export default function Home() {
4 | return (
5 |
6 |
7 |
16 | -
17 | Get started 1000 baby editing{' '}
18 |
19 | app/page.tsx 1234
20 |
21 | .
22 |
23 | - Save and see your changes instantly.
24 |
25 |
26 |
27 |
33 |
52 |
81 |
82 | );
83 | }
84 |
--------------------------------------------------------------------------------
/test/react/next.config.ts:
--------------------------------------------------------------------------------
1 | import type { NextConfig } from 'next';
2 |
3 | const nextConfig: NextConfig = {
4 | /* config options here */
5 | };
6 |
7 | export default nextConfig;
8 |
--------------------------------------------------------------------------------
/test/react/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "my-app",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "dotenv -e ../../.env -- next dev --turbopack --port 5500 --hostname 0.0.0.0",
7 | "build": "next build --turbopack",
8 | "start": "next start --port 5500 --hostname 0.0.0.0"
9 | },
10 | "dependencies": {
11 | "next": "15.5.3",
12 | "react": "19.1.0",
13 | "react-dom": "19.1.0"
14 | },
15 | "devDependencies": {
16 | "@tailwindcss/postcss": "^4",
17 | "@types/node": "^20",
18 | "@types/react": "^19",
19 | "@types/react-dom": "^19",
20 | "tailwindcss": "^4",
21 | "typescript": "^5"
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/test/react/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | const config = {
2 | plugins: ["@tailwindcss/postcss"],
3 | };
4 |
5 | export default config;
6 |
--------------------------------------------------------------------------------
/test/react/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2017",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": true,
8 | "noEmit": true,
9 | "esModuleInterop": true,
10 | "module": "esnext",
11 | "moduleResolution": "bundler",
12 | "resolveJsonModule": true,
13 | "isolatedModules": true,
14 | "jsx": "preserve",
15 | "incremental": true,
16 | "plugins": [
17 | {
18 | "name": "next"
19 | }
20 | ],
21 | "paths": {
22 | "@/*": ["./*"]
23 | }
24 | },
25 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26 | "exclude": ["node_modules"]
27 | }
28 |
--------------------------------------------------------------------------------
/test/solid/.gitignore:
--------------------------------------------------------------------------------
1 | dist
2 | .wrangler
3 | .output
4 | .vercel
5 | .netlify
6 | .vinxi
7 | app.config.timestamp_*.js
8 |
9 | # Environment
10 | .env
11 | .env*.local
12 |
13 | # dependencies
14 | /node_modules
15 |
16 | # IDEs and editors
17 | /.idea
18 | .project
19 | .classpath
20 | *.launch
21 | .settings/
22 |
23 | # Temp
24 | gitignore
25 |
26 | # System Files
27 | .DS_Store
28 | Thumbs.db
29 |
--------------------------------------------------------------------------------
/test/solid/app.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from '@solidjs/start/config';
2 |
3 | export default defineConfig({});
4 |
--------------------------------------------------------------------------------
/test/solid/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "example-basic",
3 | "type": "module",
4 | "scripts": {
5 | "dev": "dotenv -e ../../.env -- vinxi dev --port 5500 --host --force",
6 | "build": "vinxi build",
7 | "start": "vinxi start --port 5500 --host --force",
8 | "version": "vinxi version"
9 | },
10 | "dependencies": {
11 | "@solidjs/meta": "^0.29.4",
12 | "@solidjs/router": "^0.15.0",
13 | "@solidjs/start": "^1.1.0",
14 | "solid-js": "^1.9.5",
15 | "vinxi": "^0.5.7"
16 | },
17 | "engines": {
18 | "node": ">=22"
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/test/solid/src/app.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family:
3 | Gordita, Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
4 | }
5 |
6 | a {
7 | margin-right: 1rem;
8 | }
9 |
10 | main {
11 | text-align: center;
12 | padding: 1em;
13 | margin: 0 auto;
14 | }
15 |
16 | h1 {
17 | color: #335d92;
18 | text-transform: uppercase;
19 | font-size: 4rem;
20 | font-weight: 100;
21 | line-height: 1.1;
22 | margin: 4rem auto;
23 | max-width: 14rem;
24 | }
25 |
26 | p {
27 | max-width: 14rem;
28 | margin: 2rem auto;
29 | line-height: 1.35;
30 | }
31 |
32 | @media (min-width: 480px) {
33 | h1 {
34 | max-width: none;
35 | }
36 |
37 | p {
38 | max-width: none;
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/test/solid/src/app.tsx:
--------------------------------------------------------------------------------
1 | import { MetaProvider, Title } from '@solidjs/meta';
2 | import { Router } from '@solidjs/router';
3 | import { FileRoutes } from '@solidjs/start/router';
4 | import { Suspense } from 'solid-js';
5 | import { USALProvider } from '@usal/solid';
6 | import './app.css';
7 |
8 | export default function App() {
9 | return (
10 | (
12 |
13 | SolidStart - Basic
14 | Index
15 | About
16 |
17 | {props.children}
18 |
19 |
20 | )}
21 | >
22 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/test/solid/src/components/Counter.css:
--------------------------------------------------------------------------------
1 | .increment {
2 | font-family: inherit;
3 | font-size: inherit;
4 | padding: 1em 2em;
5 | color: #335d92;
6 | background-color: rgba(68, 107, 158, 0.1);
7 | border-radius: 2em;
8 | border: 2px solid rgba(68, 107, 158, 0);
9 | outline: none;
10 | width: 200px;
11 | font-variant-numeric: tabular-nums;
12 | cursor: pointer;
13 | }
14 |
15 | .increment:focus {
16 | border: 2px solid #335d92;
17 | }
18 |
19 | .increment:active {
20 | background-color: rgba(68, 107, 158, 0.2);
21 | }
22 |
--------------------------------------------------------------------------------
/test/solid/src/components/Counter.tsx:
--------------------------------------------------------------------------------
1 | import { createSignal } from 'solid-js';
2 | import './Counter.css';
3 |
4 | export default function Counter() {
5 | const [count, setCount] = createSignal(0);
6 | return (
7 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/test/solid/src/entry-client.tsx:
--------------------------------------------------------------------------------
1 | // @refresh reload
2 | import { mount, StartClient } from '@solidjs/start/client';
3 |
4 | mount(() => (
7 |
8 |
9 |
10 |
11 |
12 | {assets}
13 |
14 |
15 | {children}
16 | {scripts}
17 |
18 |
19 | )}
20 | />
21 | ));
22 |
--------------------------------------------------------------------------------
/test/solid/src/global.d.ts:
--------------------------------------------------------------------------------
1 | ///
7 | Not Found
8 | Page Not Found
10 |
11 | Visit{' '}
12 |
13 | start.solidjs.com
14 | {' '}
15 | to learn how to build SolidStart apps.
16 |
17 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/test/solid/src/routes/about.tsx:
--------------------------------------------------------------------------------
1 | import { Title } from '@solidjs/meta';
2 |
3 | export default function About() {
4 | return (
5 |
6 | About
7 | About
8 |
9 | );
10 | }
11 |
--------------------------------------------------------------------------------
/test/solid/src/routes/index.tsx:
--------------------------------------------------------------------------------
1 | import { Title } from '@solidjs/meta';
2 | import Counter from '~/components/Counter';
3 |
4 | export default function Home() {
5 | return (
6 |
7 | Hello World
8 | Hello world!
9 |
11 | Visit{' '}
12 |
13 | start.solidjs.com
14 | {' '}
15 | to learn how to build SolidStart apps.
16 |
17 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/test/solid/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ESNext",
4 | "module": "ESNext",
5 | "moduleResolution": "bundler",
6 | "allowSyntheticDefaultImports": true,
7 | "esModuleInterop": true,
8 | "jsx": "preserve",
9 | "jsxImportSource": "solid-js",
10 | "allowJs": true,
11 | "strict": true,
12 | "noEmit": true,
13 | "types": ["vinxi/types/client"],
14 | "isolatedModules": true,
15 | "paths": {
16 | "~/*": ["./src/*"]
17 | }
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/test/svelte/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 |
3 | # Output
4 | .output
5 | .vercel
6 | .netlify
7 | .wrangler
8 | /.svelte-kit
9 | /build
10 |
11 | # OS
12 | .DS_Store
13 | Thumbs.db
14 |
15 | # Env
16 | .env
17 | .env.*
18 | !.env.example
19 | !.env.test
20 |
21 | # Vite
22 | vite.config.js.timestamp-*
23 | vite.config.ts.timestamp-*
24 |
--------------------------------------------------------------------------------
/test/svelte/.npmrc:
--------------------------------------------------------------------------------
1 | engine-strict=true
2 |
--------------------------------------------------------------------------------
/test/svelte/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "myapp",
3 | "private": true,
4 | "version": "0.0.1",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "dotenv -e ../../.env -- vite dev --port 5500 --host --force",
8 | "build": "vite build",
9 | "preview": "vite preview",
10 | "prepare": "svelte-kit sync || echo ''",
11 | "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
12 | "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
13 | },
14 | "devDependencies": {
15 | "@sveltejs/adapter-auto": "^6.0.0",
16 | "@sveltejs/kit": "^2.22.0",
17 | "@sveltejs/vite-plugin-svelte": "^6.0.0",
18 | "svelte": "^5.0.0",
19 | "svelte-check": "^4.0.0",
20 | "typescript": "^5.0.0",
21 | "vite": "^7.0.4"
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/test/svelte/src/app.d.ts:
--------------------------------------------------------------------------------
1 | // See https://svelte.dev/docs/kit/types#app.d.ts
2 | // for information about these interfaces
3 | declare global {
4 | namespace App {
5 | // interface Error {}
6 | // interface Locals {}
7 | // interface PageData {}
8 | // interface PageState {}
9 | // interface Platform {}
10 | }
11 | }
12 |
13 | export {};
14 |
--------------------------------------------------------------------------------
/test/svelte/src/app.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | %sveltekit.head%
7 |
8 |
9 | %sveltekit.body%
10 |
11 |
12 |
--------------------------------------------------------------------------------
/test/svelte/src/lib/assets/favicon.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test/svelte/src/lib/index.ts:
--------------------------------------------------------------------------------
1 | // place files you want to import through the `$lib` alias in this folder.
2 |
--------------------------------------------------------------------------------
/test/svelte/src/routes/+layout.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 |
10 |
11 | {@render children?.()}
12 |
--------------------------------------------------------------------------------
/test/svelte/src/routes/+page.svelte:
--------------------------------------------------------------------------------
1 |
4 | Welcome to SvelteKit
5 | Visit svelte.dev/docs/kit to read the documentation
6 |
--------------------------------------------------------------------------------
/test/svelte/static/robots.txt:
--------------------------------------------------------------------------------
1 | # allow crawling everything by default
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/test/svelte/svelte.config.js:
--------------------------------------------------------------------------------
1 | import adapter from '@sveltejs/adapter-auto';
2 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
3 |
4 | /** @type {import('@sveltejs/kit').Config} */
5 | const config = {
6 | // Consult https://svelte.dev/docs/kit/integrations
7 | // for more information about preprocessors
8 | preprocess: vitePreprocess(),
9 |
10 | kit: {
11 | // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
12 | // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
13 | // See https://svelte.dev/docs/kit/adapters for more information about adapters.
14 | adapter: adapter(),
15 | },
16 | };
17 |
18 | export default config;
19 |
--------------------------------------------------------------------------------
/test/svelte/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./.svelte-kit/tsconfig.json",
3 | "compilerOptions": {
4 | "allowJs": true,
5 | "checkJs": true,
6 | "esModuleInterop": true,
7 | "forceConsistentCasingInFileNames": true,
8 | "resolveJsonModule": true,
9 | "skipLibCheck": true,
10 | "sourceMap": true,
11 | "strict": true,
12 | "moduleResolution": "bundler"
13 | }
14 | // Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
15 | // except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
16 | //
17 | // To make changes to top-level options such as include and exclude, we recommend extending
18 | // the generated config; see https://svelte.dev/docs/kit/configuration#typescript
19 | }
20 |
--------------------------------------------------------------------------------
/test/svelte/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { sveltekit } from '@sveltejs/kit/vite';
2 | import { defineConfig } from 'vite';
3 |
4 | export default defineConfig({
5 | plugins: [sveltekit()],
6 | });
7 |
--------------------------------------------------------------------------------
/test/vue/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | .DS_Store
12 | dist
13 | dist-ssr
14 | coverage
15 | *.local
16 |
17 | /cypress/videos/
18 | /cypress/screenshots/
19 |
20 | # Editor directories and files
21 | .vscode/*
22 | !.vscode/extensions.json
23 | .idea
24 | *.suo
25 | *.ntvs*
26 | *.njsproj
27 | *.sln
28 | *.sw?
29 |
30 | *.tsbuildinfo
31 |
--------------------------------------------------------------------------------
/test/vue/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite App
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/test/vue/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "paths": {
4 | "@/*": ["./src/*"]
5 | }
6 | },
7 | "exclude": ["node_modules", "dist"]
8 | }
9 |
--------------------------------------------------------------------------------
/test/vue/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue",
3 | "version": "0.0.0",
4 | "private": true,
5 | "type": "module",
6 | "engines": {
7 | "node": "^20.19.0 || >=22.12.0"
8 | },
9 | "scripts": {
10 | "dev": "dotenv -e ../../.env -- vite dev --port 5500 --host 0.0.0.0",
11 | "build": "vite build",
12 | "preview": "vite preview"
13 | },
14 | "dependencies": {
15 | "vue": "^3.5.18"
16 | },
17 | "devDependencies": {
18 | "@vitejs/plugin-vue": "^6.0.1",
19 | "vite": "^7.0.6",
20 | "vite-plugin-vue-devtools": "^8.0.0"
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/test/vue/src/App.vue:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 | 
9 |
10 | Ola teste
11 |
12 |
13 |
16 |
17 |
18 |
20 |
21 |
22 |
50 |
--------------------------------------------------------------------------------
/test/vue/src/assets/base.css:
--------------------------------------------------------------------------------
1 | /* color palette from */
2 | :root {
3 | --vt-c-white: #ffffff;
4 | --vt-c-white-soft: #f8f8f8;
5 | --vt-c-white-mute: #f2f2f2;
6 |
7 | --vt-c-black: #181818;
8 | --vt-c-black-soft: #222222;
9 | --vt-c-black-mute: #282828;
10 |
11 | --vt-c-indigo: #2c3e50;
12 |
13 | --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
14 | --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
15 | --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
16 | --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
17 |
18 | --vt-c-text-light-1: var(--vt-c-indigo);
19 | --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
20 | --vt-c-text-dark-1: var(--vt-c-white);
21 | --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
22 | }
23 |
24 | /* semantic color variables for this project */
25 | :root {
26 | --color-background: var(--vt-c-white);
27 | --color-background-soft: var(--vt-c-white-soft);
28 | --color-background-mute: var(--vt-c-white-mute);
29 |
30 | --color-border: var(--vt-c-divider-light-2);
31 | --color-border-hover: var(--vt-c-divider-light-1);
32 |
33 | --color-heading: var(--vt-c-text-light-1);
34 | --color-text: var(--vt-c-text-light-1);
35 |
36 | --section-gap: 160px;
37 | }
38 |
39 | @media (prefers-color-scheme: dark) {
40 | :root {
41 | --color-background: var(--vt-c-black);
42 | --color-background-soft: var(--vt-c-black-soft);
43 | --color-background-mute: var(--vt-c-black-mute);
44 |
45 | --color-border: var(--vt-c-divider-dark-2);
46 | --color-border-hover: var(--vt-c-divider-dark-1);
47 |
48 | --color-heading: var(--vt-c-text-dark-1);
49 | --color-text: var(--vt-c-text-dark-2);
50 | }
51 | }
52 |
53 | *,
54 | *::before,
55 | *::after {
56 | box-sizing: border-box;
57 | margin: 0;
58 | font-weight: normal;
59 | }
60 |
61 | body {
62 | min-height: 100vh;
63 | color: var(--color-text);
64 | background: var(--color-background);
65 | transition:
66 | color 0.5s,
67 | background-color 0.5s;
68 | line-height: 1.6;
69 | font-family:
70 | Inter,
71 | -apple-system,
72 | BlinkMacSystemFont,
73 | 'Segoe UI',
74 | Roboto,
75 | Oxygen,
76 | Ubuntu,
77 | Cantarell,
78 | 'Fira Sans',
79 | 'Droid Sans',
80 | 'Helvetica Neue',
81 | sans-serif;
82 | font-size: 15px;
83 | text-rendering: optimizeLegibility;
84 | -webkit-font-smoothing: antialiased;
85 | -moz-osx-font-smoothing: grayscale;
86 | }
87 |
--------------------------------------------------------------------------------
/test/vue/src/assets/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/test/vue/src/assets/main.css:
--------------------------------------------------------------------------------
1 | @import './base.css';
2 |
3 | #app {
4 | max-width: 1280px;
5 | margin: 0 auto;
6 | padding: 2rem;
7 | font-weight: normal;
8 | }
9 |
10 | a,
11 | .green {
12 | text-decoration: none;
13 | color: hsla(160, 100%, 37%, 1);
14 | transition: 0.4s;
15 | padding: 3px;
16 | }
17 |
18 | @media (hover: hover) {
19 | a:hover {
20 | background-color: hsla(160, 100%, 37%, 0.2);
21 | }
22 | }
23 |
24 | @media (min-width: 1024px) {
25 | body {
26 | display: flex;
27 | place-items: center;
28 | }
29 |
30 | #app {
31 | display: grid;
32 | grid-template-columns: 1fr 1fr;
33 | padding: 0 2rem;
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/test/vue/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
1 |
9 |
10 |
11 |
12 | {{ msg }}
13 |
14 | You’ve successfully created a project with
15 | Vite +
16 | Vue 3.
17 |
18 |
19 |
20 |
21 |
45 |
--------------------------------------------------------------------------------
/test/vue/src/components/TheWelcome.vue:
--------------------------------------------------------------------------------
1 |
11 |
12 |
13 |
14 |
15 |
23 |
24 |
25 |
26 |
44 |
45 | More instructions are available in
46 | README.md.
48 |
49 |
50 |
51 |
52 |
65 |
66 |
67 |
68 |
83 |
84 |
85 |
86 |
94 |
95 |
--------------------------------------------------------------------------------
/test/vue/src/components/WelcomeItem.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
8 |
10 |