create-nativecore 0.1.1 → 0.2.0

package/template/tests/unit/computed.test.ts

@@ -0,0 +1,79 @@
+import { describe, it, expect, vi } from 'vitest';
+import { computed, effect, useState } from '../../src/core/state.js';
+
+describe('core/state', () => {
+    it('computes an initial value and recomputes when dependencies change', () => {
+        const firstName = useState('John');
+        const lastName = useState('Doe');
+        const fullName = computed(() => `${firstName.value} ${lastName.value}`);
+
+        expect(fullName.value).toBe('John Doe');
+
+        firstName.value = 'Jane';
+        expect(fullName.value).toBe('Jane Doe');
+    });
+
+    it('releases stale dependencies when the computed branch changes', () => {
+        const toggle = useState(true);
+        const left = useState('left');
+        const right = useState('right');
+        const branch = computed(() => (toggle.value ? left.value : right.value));
+
+        expect(branch.value).toBe('left');
+
+        toggle.value = false;
+        expect(branch.value).toBe('right');
+
+        left.value = 'updated-left';
+        expect(branch.value).toBe('right');
+
+        right.value = 'updated-right';
+        expect(branch.value).toBe('updated-right');
+    });
+
+    it('chains computed values', () => {
+        const base = useState(2);
+        const doubled = computed(() => base.value * 2);
+        const quadrupled = computed(() => doubled.value * 2);
+
+        expect(quadrupled.value).toBe(8);
+
+        base.value = 5;
+        expect(quadrupled.value).toBe(20);
+    });
+
+    it('keeps computed values read-only', () => {
+        const base = useState(5);
+        const doubled = computed(() => base.value * 2);
+        const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+        doubled.value = 100;
+
+        expect(consoleSpy).toHaveBeenCalledWith(expect.stringContaining('Computed values are read-only'));
+        expect(doubled.value).toBe(10);
+
+        consoleSpy.mockRestore();
+    });
+
+    it('tracks reactive side effects and runs cleanup before re-running', () => {
+        const count = useState(1);
+        const calls: number[] = [];
+        const cleanup = vi.fn();
+        const stop = effect(() => {
+            calls.push(count.value);
+            return cleanup;
+        });
+
+        expect(calls).toEqual([1]);
+
+        count.value = 2;
+        expect(calls).toEqual([1, 2]);
+        expect(cleanup).toHaveBeenCalledTimes(1);
+
+        stop();
+        expect(cleanup).toHaveBeenCalledTimes(2);
+
+        count.value = 3;
+        expect(calls).toEqual([1, 2]);
+    });
+});

package/template/tests/unit/form.test.ts

@@ -0,0 +1,68 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { useForm } from '../../src/utils/form.js';
+import { isRequired, isValidEmail, minLength } from '../../src/utils/validation.js';
+
+describe('utils/form', () => {
+    beforeEach(() => {
+        document.body.innerHTML = '';
+    });
+
+    it('tracks errors, touched flags, and dirtiness reactively', async () => {
+        const form = useForm({
+            initialValues: {
+                email: '',
+                name: ''
+            },
+            rules: {
+                email: [isRequired, isValidEmail],
+                name: [minLength(2)]
+            }
+        });
+
+        expect(form.isValid.value).toBe(false);
+        expect(form.errors.value.email).toBe('Validation failed for email');
+
+        form.fields.email.value = 'dev@example.com';
+        form.fields.name.value = 'Dev';
+        form.dirty.email.value = true;
+        form.dirty.name.value = true;
+
+        expect(form.isValid.value).toBe(true);
+        expect(form.isDirty.value).toBe(true);
+
+        const submitHandler = vi.fn(async () => {});
+        const submitted = await form.submit(submitHandler)();
+
+        expect(submitted).toBe(true);
+        expect(submitHandler).toHaveBeenCalledWith({
+            email: 'dev@example.com',
+            name: 'Dev'
+        });
+        expect(form.isDirty.value).toBe(false);
+    });
+
+    it('binds input elements to field state', () => {
+        const input = document.createElement('input');
+        document.body.appendChild(input);
+
+        const form = useForm({
+            initialValues: {
+                email: ''
+            },
+            rules: {
+                email: [isRequired, isValidEmail]
+            }
+        });
+
+        const cleanup = form.bindField('email', input);
+        input.value = 'user@example.com';
+        input.dispatchEvent(new Event('input'));
+        input.dispatchEvent(new Event('blur'));
+
+        expect(form.fields.email.value).toBe('user@example.com');
+        expect(form.touched.email.value).toBe(true);
+        expect(form.isValid.value).toBe(true);
+
+        cleanup();
+    });
+});

package/template/tests/unit/formatters.test.ts

@@ -0,0 +1,49 @@
+/**
+ * Example Formatter Test
+ * Tests for formatting utilities
+ */
+import { describe, it, expect } from 'vitest';
+import {
+    formatCurrency,
+    formatNumber,
+    formatPercentage,
+    truncate,
+    capitalize,
+} from '../../src/utils/formatters.js';
+
+describe('Formatter Utilities', () => {
+    describe('formatCurrency', () => {
+        it('should format currency correctly', () => {
+            expect(formatCurrency(99.99)).toBe('$99.99');
+            expect(formatCurrency(1000)).toBe('$1,000.00');
+        });
+    });
+    
+    describe('formatNumber', () => {
+        it('should format numbers with commas', () => {
+            expect(formatNumber(1000)).toBe('1,000');
+            expect(formatNumber(1000000)).toBe('1,000,000');
+        });
+    });
+    
+    describe('formatPercentage', () => {
+        it('should format percentages', () => {
+            expect(formatPercentage(0.5)).toBe('50%');
+            expect(formatPercentage(0.123, 2)).toBe('12.30%');
+        });
+    });
+    
+    describe('truncate', () => {
+        it('should truncate long text', () => {
+            expect(truncate('This is a long text', 10)).toBe('This is...');
+            expect(truncate('Short', 10)).toBe('Short');
+        });
+    });
+    
+    describe('capitalize', () => {
+        it('should capitalize first letter', () => {
+            expect(capitalize('hello')).toBe('Hello');
+            expect(capitalize('HELLO')).toBe('HELLO');
+        });
+    });
+});

package/template/tests/unit/lazy-components.test.ts

@@ -0,0 +1,59 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { componentRegistry } from '../../src/core/lazyComponents.js';
+
+function resetRegistry(): void {
+    const registry = componentRegistry as unknown as {
+        components: Map<string, string>;
+        loaded: Set<string>;
+        observer: MutationObserver | null;
+    };
+
+    registry.components.clear();
+    registry.loaded.clear();
+    registry.observer?.disconnect();
+    registry.observer = null;
+}
+
+describe('Lazy component registry', () => {
+    beforeEach(() => {
+        resetRegistry();
+        document.body.innerHTML = '';
+    });
+
+    afterEach(() => {
+        componentRegistry.stopObserving();
+        vi.restoreAllMocks();
+        document.body.innerHTML = '';
+    });
+
+    it('loads registered components when matching elements are found', async () => {
+        componentRegistry.register('lazy-sample', './ui/lazy-sample.js');
+        document.body.innerHTML = '<lazy-sample></lazy-sample>';
+
+        const loadSpy = vi.spyOn(componentRegistry, 'loadComponent').mockResolvedValue();
+
+        await componentRegistry.scanAndLoad();
+
+        expect(loadSpy).toHaveBeenCalledWith('lazy-sample');
+    });
+
+    it('warns when attempting to load an unregistered component', async () => {
+        const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+        await componentRegistry.loadComponent('missing-widget');
+
+        expect(warnSpy).toHaveBeenCalledWith('Component missing-widget not registered');
+    });
+
+    it('observes DOM additions and scans new nodes', async () => {
+        const scanSpy = vi.spyOn(componentRegistry, 'scanAndLoad').mockResolvedValue();
+        componentRegistry.startObserving();
+
+        const wrapper = document.createElement('div');
+        wrapper.innerHTML = '<lazy-observed></lazy-observed>';
+        document.body.appendChild(wrapper);
+        await Promise.resolve();
+
+        expect(scanSpy).toHaveBeenCalled();
+    });
+});

package/template/tests/unit/markdown.test.ts

@@ -0,0 +1,62 @@
+import { describe, expect, it } from 'vitest';
+import { renderMarkdown, renderMarkdownToc, splitMarkdownIntoSections } from '../../src/utils/markdown.js';
+
+describe('utils/markdown', () => {
+    it('creates stable unique ids for duplicate headings', () => {
+        const result = renderMarkdown(`
+## Chapter 1
+### Routing
+### Routing
+        `);
+
+        expect(result.headings.map(heading => heading.id)).toEqual([
+            'chapter-1',
+            'routing',
+            'routing-2',
+        ]);
+        expect(result.html).toContain('<h3 id="routing">Routing</h3>');
+        expect(result.html).toContain('<h3 id="routing-2">Routing</h3>');
+    });
+
+    it('includes level 4 headings in the table of contents', () => {
+        const toc = renderMarkdownToc([
+            { level: 2, text: 'Chapter 6: Client-Side Routing', id: 'chapter-6-client-side-routing' },
+            { level: 4, text: 'Query Strings and Search Parameters', id: 'query-strings-and-search-parameters' },
+        ]);
+
+        expect(toc).toContain('docs-toc__link--h2');
+        expect(toc).toContain('docs-toc__link--h4');
+        expect(toc).toContain('#query-strings-and-search-parameters');
+    });
+
+    it('splits handbook markdown into overview and chapter sections', () => {
+        const sections = splitMarkdownIntoSections(`
+# NativeCore Handbook
+
+## Preface
+
+[Getting Started](#chapter-1-start)
+
+Welcome.
+
+## Chapter 1: Getting Started with NativeCore
+
+### Setup
+
+## Chapter 2: Routing
+
+### Setup
+        `);
+
+        expect(sections.map(section => section.title)).toEqual([
+            'Overview',
+            'Chapter 1: Getting Started with NativeCore',
+            'Chapter 2: Routing',
+        ]);
+        expect(sections[0].isChapter).toBe(false);
+        expect(sections[1].id).toBe('chapter-1-start');
+        expect(sections[1].aliases).toEqual(['chapter-1-getting-started-with-nativecore']);
+        expect(sections[1].headings[1].id).toBe('setup');
+        expect(sections[2].headings[1].id).toBe('setup-2');
+    });
+});

package/template/tests/unit/router.test.ts

@@ -0,0 +1,112 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { Router } from '../../src/core/router.js';
+
+describe('core/router', () => {
+    let router: Router;
+
+    beforeEach(() => {
+        document.body.innerHTML = `
+            <main class="main-content">
+                <div id="main-content"></div>
+            </main>
+            <div id="page-progress"></div>
+        `;
+        router = new Router();
+    });
+
+    afterEach(() => {
+        vi.restoreAllMocks();
+        document.body.innerHTML = '';
+    });
+
+    it('supports optional params and wildcard params', () => {
+        router.register('/user/:id?', '/user.html');
+        router.register('/docs/*', '/docs.html');
+
+        const optionalRoute = (router as any).matchRoute('/user');
+        const dynamicRoute = (router as any).matchRoute('/user/42');
+        const wildcardRoute = (router as any).matchRoute('/docs/guides/intro');
+
+        expect(optionalRoute?.params).toEqual({});
+        expect(dynamicRoute?.params).toEqual({ id: '42' });
+        expect(wildcardRoute?.params).toEqual({ wildcard: 'guides/intro' });
+    });
+
+    it('renders child routes into a shared layout outlet without refetching the layout', async () => {
+        const fetchMock = vi.fn((input: RequestInfo | URL) => {
+            const url = String(input).split('?')[0];
+            const htmlByFile: Record<string, string> = {
+                '/layout.html': '<section><header>Layout</header><div id="route-outlet"></div></section>',
+                '/settings.html': '<div class="settings-page">Settings</div>',
+                '/profile.html': '<div class="profile-page">Profile</div>'
+            };
+
+            return Promise.resolve({
+                ok: true,
+                text: () => Promise.resolve(htmlByFile[url])
+            } as Response);
+        });
+
+        vi.stubGlobal('fetch', fetchMock);
+
+        router.register('/dashboard', '/layout.html');
+        router.register('/dashboard/settings', '/settings.html', null, { layout: '/dashboard' });
+        router.register('/dashboard/profile', '/profile.html', null, { layout: '/dashboard' });
+
+        await (router as any).handleRoute('/dashboard/settings', {});
+        await (router as any).handleRoute('/dashboard/profile', {});
+
+        const mainContent = document.getElementById('main-content');
+        expect(mainContent?.querySelector('header')?.textContent).toBe('Layout');
+        expect(mainContent?.querySelector('#route-outlet')?.innerHTML).toContain('Profile');
+        expect(fetchMock.mock.calls.filter(([request]) => String(request).includes('/layout.html'))).toHaveLength(1);
+    });
+
+    it('prefetches route HTML and uses the prefetched response on navigation', async () => {
+        const fetchMock = vi.fn((input: RequestInfo | URL) => {
+            const url = String(input).split('?')[0];
+
+            return Promise.resolve({
+                ok: true,
+                text: () => Promise.resolve(url === '/prefetch.html' ? '<div>Prefetched</div>' : '')
+            } as Response);
+        });
+
+        vi.stubGlobal('fetch', fetchMock);
+
+        router.register('/prefetch', '/prefetch.html');
+
+        await router.prefetch('/prefetch');
+        await (router as any).handleRoute('/prefetch', {});
+
+        expect(fetchMock).toHaveBeenCalledTimes(1);
+        expect(document.getElementById('main-content')?.innerHTML).toContain('Prefetched');
+    });
+
+    it('resets the page scroll position on navigation', async () => {
+        const fetchMock = vi.fn(() => Promise.resolve({
+            ok: true,
+            text: () => Promise.resolve('<div style="height: 2000px;">Scrolled page</div>')
+        } as Response));
+
+        vi.stubGlobal('fetch', fetchMock);
+        const windowScrollSpy = vi.spyOn(window, 'scrollTo').mockImplementation(() => {});
+
+        router.register('/scrolled', '/scrolled.html');
+
+        const mainContent = document.getElementById('main-content') as HTMLElement;
+        const scrollContainer = document.querySelector('.main-content') as HTMLElement;
+        scrollContainer.scrollTop = 240;
+        scrollContainer.scrollLeft = 32;
+        mainContent.scrollTop = 240;
+        mainContent.scrollLeft = 32;
+
+        await (router as any).handleRoute('/scrolled', {});
+
+        expect(scrollContainer.scrollTop).toBe(0);
+        expect(scrollContainer.scrollLeft).toBe(0);
+        expect(mainContent.scrollTop).toBe(0);
+        expect(mainContent.scrollLeft).toBe(0);
+        expect(windowScrollSpy).toHaveBeenCalledWith(0, 0);
+    });
+});

package/template/tests/unit/signals.test.ts

@@ -0,0 +1,54 @@
+import { describe, expect, it, vi } from 'vitest';
+import { createComputed, createEffect, createSignal } from '../../src/core/signals.js';
+
+describe('core/signals', () => {
+    it('keeps computed values live when source signals change', () => {
+        const count = createSignal(2);
+        const doubled = createComputed(() => count.get() * 2);
+
+        expect(doubled()).toBe(4);
+
+        count.set(5);
+        expect(doubled()).toBe(10);
+    });
+
+    it('releases stale dependencies when a computed branch changes', () => {
+        const toggle = createSignal(true);
+        const left = createSignal('left');
+        const right = createSignal('right');
+        const branch = createComputed(() => (toggle.get() ? left.get() : right.get()));
+
+        expect(branch()).toBe('left');
+
+        toggle.set(false);
+        expect(branch()).toBe('right');
+
+        left.set('updated-left');
+        expect(branch()).toBe('right');
+
+        right.set('updated-right');
+        expect(branch()).toBe('updated-right');
+    });
+
+    it('tracks effects and runs cleanup before rerunning', () => {
+        const count = createSignal(1);
+        const seen: number[] = [];
+        const cleanup = vi.fn();
+        const stop = createEffect(() => {
+            seen.push(count.get());
+            return cleanup;
+        });
+
+        expect(seen).toEqual([1]);
+
+        count.set(2);
+        expect(seen).toEqual([1, 2]);
+        expect(cleanup).toHaveBeenCalledTimes(1);
+
+        stop();
+        expect(cleanup).toHaveBeenCalledTimes(2);
+
+        count.set(3);
+        expect(seen).toEqual([1, 2]);
+    });
+});

package/template/tests/unit/validation.test.ts

@@ -0,0 +1,50 @@
+import { describe, expect, it } from 'vitest';
+import {
+    isNumber,
+    isRequired,
+    isValidEmail,
+    matchesPattern,
+    maxLength,
+    minLength,
+    validateForm
+} from '../../src/utils/validation.js';
+
+describe('utils/validation', () => {
+    it('validates email addresses', () => {
+        expect(isValidEmail('test@example.com')).toBe(true);
+        expect(isValidEmail('invalid')).toBe(false);
+    });
+
+    it('validates required values', () => {
+        expect(isRequired('value')).toBe(true);
+        expect(isRequired('   ')).toBe(false);
+        expect(isRequired(null)).toBe(false);
+    });
+
+    it('validates length rules and patterns', () => {
+        expect(minLength(3)('abcd')).toBe(true);
+        expect(maxLength(3)('abcd')).toBe(false);
+        expect(matchesPattern(/^\d+$/)('1234')).toBe(true);
+    });
+
+    it('validates numbers', () => {
+        expect(isNumber(123)).toBe(true);
+        expect(isNumber('123.45')).toBe(true);
+        expect(isNumber('abc')).toBe(false);
+    });
+
+    it('returns field-level form errors', () => {
+        const errors = validateForm(
+            { email: 'bad-email', name: 'A' },
+            {
+                email: [isRequired, isValidEmail],
+                name: [minLength(2)]
+            }
+        );
+
+        expect(errors).toEqual({
+            email: 'Validation failed for email',
+            name: 'Validation failed for name'
+        });
+    });
+});

package/template/tsconfig.build.json

@@ -0,0 +1,21 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "sourceMap": false,
+    "declaration": false,
+    "declarationMap": false,
+    "removeComments": true
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist",
+    "tests",
+    "**/*.test.ts",
+    "**/*.spec.ts",
+    "src/dev/**/*.ts",
+    "src/dev"
+  ]
+}

package/template/tsconfig.json

@@ -0,0 +1,51 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "moduleResolution": "node",
+    "incremental": true,
+    "tsBuildInfoFile": "./dist/.tsbuildinfo",
+    "allowJs": true,
+    "checkJs": false,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "baseUrl": "./src",
+    "paths": {
+      "@core/*": ["core/*"],
+      "@components/*": ["components/*"],
+      "@config/*": ["config/*"],
+      "@routes/*": ["routes/*"],
+      "@services/*": ["services/*"],
+      "@utils/*": ["utils/*"],
+      "@stores/*": ["stores/*"],
+      "@middleware/*": ["middleware/*"],
+      "@types/*": ["types/*"],
+      "@constants/*": ["constants/*"]
+    },
+    "strict": true,
+    "ignoreDeprecations": "5.0",
+    "noImplicitAny": false,
+    "strictNullChecks": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "jsx": "preserve"
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist",
+    "tests"
+  ]
+}

package/template/vitest.config.ts

@@ -0,0 +1,36 @@
+import { fileURLToPath } from 'node:url';
+import { defineConfig } from 'vitest/config';
+
+const srcDir = fileURLToPath(new URL('./src', import.meta.url));
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      '@core': fileURLToPath(new URL('./src/core', import.meta.url)),
+      '@components': fileURLToPath(new URL('./src/components', import.meta.url)),
+      '@config': fileURLToPath(new URL('./src/config', import.meta.url)),
+      '@routes': fileURLToPath(new URL('./src/routes', import.meta.url)),
+      '@services': fileURLToPath(new URL('./src/services', import.meta.url)),
+      '@utils': fileURLToPath(new URL('./src/utils', import.meta.url)),
+      '@stores': fileURLToPath(new URL('./src/stores', import.meta.url)),
+      '@middleware': fileURLToPath(new URL('./src/middleware', import.meta.url)),
+      '@types': fileURLToPath(new URL('./src/types', import.meta.url)),
+      '@constants': fileURLToPath(new URL('./src/constants', import.meta.url)),
+    },
+  },
+  test: {
+    environment: 'happy-dom',
+    globals: true,
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html'],
+      exclude: [
+        'node_modules/',
+        'tests/',
+        '**/*.config.js',
+        'server.js',
+        'api/',
+      ],
+    },
+  },
+});