@moontra/moonui 6.19.2 → 6.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui",
-  "version": "6.19.2",
+  "version": "6.20.0",
   "description": "Premium React component library with modern design and customization",
   "author": "MoonUI",
   "license": "MIT",
@@ -15,6 +15,8 @@
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
+  "unpkg": "dist/cdn/moonui.global.js",
+  "jsdelivr": "dist/cdn/moonui.global.js",
   "sideEffects": [
     "**/*.css"
   ],
@@ -57,9 +59,13 @@
   ],
   "scripts": {
     "dev": "tsup src/index.tsx --format esm,cjs --dts --watch --sourcemap",
-    "build": "npm run build:js && npm run build:dts && node scripts/postbuild.js",
+    "build": "npm run build:js && npm run build:dts && node scripts/postbuild.js && npm run build:cdn",
     "build:js": "tsup",
     "build:dts": "tsup --dts-only",
+    "build:cdn": "npm run build:cdn:js && npm run build:cdn:css",
+    "build:cdn:js": "tsup --config tsup.cdn.config.ts",
+    "build:cdn:css": "tailwindcss -c tailwind.cdn.config.js -i src/styles/cdn.css -o dist/cdn/moonui.css --minify",
+    "verify:cdn": "node scripts/cdn/verify-cdn.mjs",
     "lint": "eslint \"src/**/*.{ts,tsx}\" --fix",
     "clean": "rm -rf dist",
     "prepublishOnly": "npm run clean && npm run build",

package/src/__tests__/cdn-surface.test.ts

@@ -0,0 +1,178 @@
+/**
+ * CDN YUZEYI GUARD'I — @moontra/moonui. Issue #410 (onceki hali: #399).
+ *
+ * ─── BU DOSYA NEDEN VAR: #399'UN HIKAYESI ────────────────────────────────────
+ * `tsup.config.ts` ikinci bir tanimda `format: ["iife"]` + `globalName: "MoonUI"`
+ * ilan ediyordu, ama `package.json`'daki `build:js` tsup'i CLI argumaniyla
+ * cagiriyordu (`tsup src/... --format esm,cjs`). tsup'ta CLI argumani config'i
+ * EZER → IIFE hic uretilmedi; `.global.js` ADIYLA bir ES modulu yayimlandi.
+ * Dosya adi IIFE vaat ettigi icin hata SESSIZDI: `window.MoonUI` hicbir surumde
+ * olusmadi, buna ragmen her tarball 4.7 MB olu `.global.*` artefakti tasidi.
+ * #399 o yuzden yuzeyi tamamen kaldirdi ve bu dosya "kaldirildi" kararini kilitledi.
+ *
+ * ─── SIMDI NE DEGISTI (#410) ─────────────────────────────────────────────────
+ * Yuzey CALISIR HALDE geri geldi: React artik bundle'a girmiyor (cift-React
+ * cokmesinin kok nedeniydi — docs/cdn-destegi-plani.md §2.2), CDN icin ayri bir
+ * CSS artefakti uretiliyor ve React 19 icin ESM cikti da var (React 19 UMD
+ * yayimlamiyor, IIFE tek basina yetmez).
+ *
+ * Dosya SILINMEDI, YENIDEN YAZILDI: kilitlenen sey "yuzey yok" degil, artik
+ * "yuzey var ve GERCEKTEN calisir sekilde var". #399'un dersi aynen gecerli —
+ * SESSIZ KIRILMA EN PAHALI KIRILMADIR — bu yuzden guard uc katmani birden tutar:
+ *   1. build config     (ne ilan ediliyor)
+ *   2. paket metadata'si (unpkg/jsdelivr NEREYI gosteriyor)
+ *   3. uretilmis dist    (icerik gercekten IIFE mi, React sizmis mi, CSS token'li mi)
+ *
+ * ⚠️ BU GUARD'IN YAKALAYAMADIGI TEK SEY: "component tarayicida calisiyor mu".
+ * Onu `scripts/cdn/verify-cdn.mjs` gercek tarayicida olcer (npm run verify:cdn) —
+ * cift-React cokmesi ancak calisma zamaninda gorunur.
+ */
+import * as fs from 'fs';
+import * as path from 'path';
+
+const PACKAGE_ROOT = path.resolve(__dirname, '../..');
+const TSUP_CONFIG = path.join(PACKAGE_ROOT, 'tsup.config.ts');
+const TSUP_CDN_CONFIG = path.join(PACKAGE_ROOT, 'tsup.cdn.config.ts');
+const PACKAGE_JSON = path.join(PACKAGE_ROOT, 'package.json');
+const DIST_CDN = path.join(PACKAGE_ROOT, 'dist', 'cdn');
+
+const IIFE_BUNDLE = path.join(DIST_CDN, 'moonui.global.js');
+const ESM_BUNDLE = path.join(DIST_CDN, 'moonui.esm.js');
+const CDN_CSS = path.join(DIST_CDN, 'moonui.css');
+
+/** Yorumlari ayikla: karar gerekcesi metinlerinde "iife"/".global.js" geciyor. */
+function stripComments(source: string): string {
+    return source.replace(/\/\/.*$/gm, '').replace(/\/\*[\s\S]*?\*\//g, '');
+}
+
+const pkg: Record<string, unknown> = JSON.parse(fs.readFileSync(PACKAGE_JSON, 'utf8'));
+const scripts = pkg.scripts as Record<string, string>;
+
+describe('CDN yuzeyi — build config (#410)', () => {
+    it('CDN tanimi ANA config\'te DEGIL, ayri dosyada', () => {
+        // Gerekce: `build:dts` → `tsup --dts-only` bayragi TUM tanimlara uygulanir.
+        // CDN tanimi ana config'te olsaydi dts uretimiyle etkilesirdi.
+        const main = stripComments(fs.readFileSync(TSUP_CONFIG, 'utf8'));
+        expect(main).not.toMatch(/format\s*:\s*\[[^\]]*['"]iife['"]/);
+        expect(main).not.toMatch(/globalName\s*:/);
+        expect(fs.existsSync(TSUP_CDN_CONFIG)).toBe(true);
+    });
+
+    it('CDN config\'i HEM IIFE HEM ESM uretiyor', () => {
+        const cdn = stripComments(fs.readFileSync(TSUP_CDN_CONFIG, 'utf8'));
+        expect(cdn).toMatch(/format\s*:\s*\[\s*['"]iife['"]\s*\]/);
+        expect(cdn).toMatch(/format\s*:\s*\[\s*['"]esm['"]\s*\]/);
+        // ESM sarti pazarlik konusu degil: React 19 UMD yayimlamiyor, IIFE
+        // (window.React) React 19 tuketicisine hitap etmiyor.
+        expect(cdn).toMatch(/globalName\s*:\s*['"]MoonUI['"]/);
+    });
+
+    it('React\'i disari alan plugin\'ler her iki tanimda da bagli', () => {
+        const cdn = stripComments(fs.readFileSync(TSUP_CDN_CONFIG, 'utf8'));
+        expect(cdn).toMatch(/reactGlobalExternals\(/);
+        expect(cdn).toMatch(/bareReactExternals\(/);
+        for (const plugin of ['react-global-externals.mjs', 'bare-react-externals.mjs']) {
+            expect(fs.existsSync(path.join(PACKAGE_ROOT, 'scripts', 'cdn', plugin))).toBe(true);
+        }
+    });
+
+    /**
+     * #399'un kok nedeni: CLI argumani tsup config'ini ezer. Bu iki script
+     * entry/format'i CLI'dan gecmedigi surece config tek kaynak kalir.
+     */
+    it.each(['build:js', 'build:dts'])('%s tsup config\'ini CLI argumaniyla ezmiyor', (script) => {
+        expect(scripts[script]).toBeDefined();
+        expect(scripts[script]).not.toMatch(/--format/);
+        expect(scripts[script]).not.toMatch(/\bsrc\//);
+    });
+});
+
+describe('CDN yuzeyi — paket metadata (#410)', () => {
+    it.each(['unpkg', 'jsdelivr'])('%s alani var ve dist/cdn/moonui.global.js\'i gosteriyor', (field) => {
+        expect(pkg[field]).toBe('dist/cdn/moonui.global.js');
+    });
+
+    it('unpkg/jsdelivr DISKTE VAR OLAN bir dosyayi gosteriyor', () => {
+        // #399'daki hatanin metadata karsiligi: alanlar hicbir zaman uretilmeyen
+        // bir dosyaya bakiyordu. Build yapilmamissa atlanir (asil kapi yukarisi).
+        if (!fs.existsSync(DIST_CDN)) return;
+        for (const field of ['unpkg', 'jsdelivr'] as const) {
+            expect(fs.existsSync(path.join(PACKAGE_ROOT, pkg[field] as string))).toBe(true);
+        }
+    });
+
+    it('build zinciri CDN adimini iceriyor ve postbuild\'den SONRA calisiyor', () => {
+        // Sira onemli: `scripts/postbuild.js` dist'teki HER bundle'in basina
+        // 'use client' koyar. CDN cikti(lari) ondan SONRA uretilmeli, yoksa
+        // tarayiciya anlamsiz bir direktif gider.
+        const build = scripts.build;
+        expect(build).toContain('build:cdn');
+        expect(build.indexOf('postbuild.js')).toBeLessThan(build.indexOf('build:cdn'));
+        expect(scripts['build:cdn']).toBeDefined();
+        expect(scripts['build:cdn:css']).toBeDefined();
+    });
+
+    it('files alani dist/** uzerinden CDN ciktisini kapsiyor', () => {
+        expect(pkg.files as string[]).toContain('dist/**');
+    });
+});
+
+// ─── dist katmani: build yapilmissa kosar, asil kapi yukaridaki iki katmandir ──
+const distBuilt = fs.existsSync(IIFE_BUNDLE) && fs.existsSync(ESM_BUNDLE) && fs.existsSync(CDN_CSS);
+const describeDist = distBuilt ? describe : describe.skip;
+
+describeDist('CDN yuzeyi — uretilmis dist (#410)', () => {
+    let iife = '';
+    let esm = '';
+    let css = '';
+    beforeAll(() => {
+        iife = fs.readFileSync(IIFE_BUNDLE, 'utf8');
+        esm = fs.readFileSync(ESM_BUNDLE, 'utf8');
+        css = fs.readFileSync(CDN_CSS, 'utf8');
+    });
+
+    it('`.global.js` GERCEKTEN IIFE — #399\'da adi IIFE, icerigi ESM\'di', () => {
+        expect(iife).toMatch(/var MoonUI\s*=\s*\(\(\)\s*=>/);
+        // ESM izleri olmamali: top-level import/export bir IIFE'de bulunamaz.
+        expect(iife).not.toMatch(/^\s*import\s/m);
+        expect(iife).not.toMatch(/^\s*export\s*\{/m);
+    });
+
+    it('`.esm.js` gercekten ESM ve React\'i CIPLAK import olarak birakiyor', () => {
+        expect(esm).toMatch(/from\s*["']react["']/);
+        expect(esm).toMatch(/export\s*\{/);
+        expect(esm).not.toMatch(/var MoonUI\s*=\s*\(\(\)\s*=>/);
+    });
+
+    it.each([
+        ['IIFE', () => iife],
+        ['ESM', () => esm],
+    ])('%s bundle\'inda React SIZMAMIS (cift-React cokmesinin kok nedeni)', (_label, read) => {
+        const source = read();
+        expect(source).not.toContain('Minified React error');
+        expect(source).not.toContain('react-dom.production');
+    });
+
+    it('IIFE React\'i sayfanin global\'inden okuyor (shim yerinde)', () => {
+        expect(iife).toContain('globalThis.React');
+    });
+
+    it('CDN bundle\'larina \'use client\' EKLENMEMIS', () => {
+        // Tarayiciya giden bir dosyada anlami yok; postbuild sirasi bunu garanti eder.
+        for (const source of [iife, esm]) {
+            expect(source.slice(0, 200)).not.toMatch(/['"]use client['"]/);
+        }
+    });
+
+    it('CDN CSS\'i TOKEN iceriyor — sadece utility degil', () => {
+        // Plan §2.3'teki tuzak: `@import` sirasi yanlis olursa postcss-import
+        // token dosyalarini SESSIZCE duser ve tum renkler bos kalir.
+        expect(css).toMatch(/--primary:\s*[\d.]+/);
+        expect(css).toMatch(/--background:\s*[\d.]+/);
+    });
+
+    it('CDN CSS\'i component utility\'lerini iceriyor', () => {
+        expect(css).toContain('.bg-primary');
+        expect(css).toContain('.border-border');
+    });
+});

package/src/styles/cdn.css

@@ -0,0 +1,20 @@
+/* MoonUI — CDN CSS giris noktasi.
+ *
+ * ⚠️ SIRA ONEMLIDIR — bu dosyanin varlik sebebi budur.
+ * CSS'te `@import` diger kurallardan ONCE gelmek zorundadir. Kardes dosya
+ * `index.css` token import'larini `@tailwind` direktiflerinden SONRA yaziyor;
+ * postcss-import bu yuzden onlari SESSIZCE dusuruyor. Olculdu (plan §2.3):
+ * index.css girdisiyle uretilen CSS'te `--primary:` / `--background:` tanimi
+ * HIC YOK → butun renkler bos kalir, component'ler renksiz cikar.
+ *
+ * Bu dosya `tailwind.cdn.config.js` ile birlikte `dist/cdn/moonui.css`i uretir
+ * (npm run build:cdn:css). index.css'i DEGISTIRMIYORUZ: o dosya tuketicinin
+ * kendi Tailwind build'inde kullanilir ve orada `@import` sirasi baska bir
+ * davranisa bagli olabilir — CDN icin ayri ve dogru bir giris tutmak daha ucuz.
+ */
+@import "./tokens.css";
+@import "./design-system.css";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/__tests__/cdn-iife-removed.test.ts

@@ -1,103 +0,0 @@
-/**
- * CDN (IIFE / `.global.js`) build'i KALDIRILDI — karar kilidi. Issue #399.
- *
- * Ne olmuştu: `tsup.config.ts` ikinci bir tanımda `format: ["iife"]` +
- * `globalName: "MoonUI"` ilan ediyordu, ama `package.json`'daki `build:js`
- * tsup'ı CLI argümanıyla çağırıyordu (`tsup src/... --format esm,cjs`).
- * tsup'ta CLI argümanı config'i EZER → IIFE hiç üretilmedi; `.global.js`
- * ADIYLA bir ES modülü yayımlandı. Dosya adı IIFE vaat ettiği için hata
- * sessizdi: `window.MoonUI` hiçbir sürümde oluşmadı, buna rağmen her
- * tarball 4.7 MB ölü `.global.*` artefaktı taşıdı.
- *
- * Neden "IIFE'yi gerçekten üretelim" seçilmedi (ölçüm, #399): CLI argümanı
- * kaldırılıp gerçek IIFE üretildiğinde `window.MoonUI` oluşuyor, ama React
- * bundle'ın içine giriyor (config her şeyi noExternal ile bundle'lıyordu) ve
- * dışarı React API'si sunulmuyor → sayfa kendi React'ini yüklemek zorunda,
- * yani çift React → hook
- * kullanan her component çöküyor (Switch/Tooltip/Accordion: "Cannot read
- * properties of null"). Ayrıca CDN için stil artefaktı yok. Gerçek bir CDN
- * yolu ayrı bir ürün işidir; o gelene kadar yüzey tamamen kaldırıldı.
- *
- * Bu test üç katmanı birden kilitler: build config, paket metadata'sı ve
- * (varsa) üretilmiş dist. Config + metadata katmanları BUILD GEREKTİRMEZ —
- * `.global.*` ancak config onu ilan ederse üretilebileceği için asıl kapı
- * onlardır; dist taraması build yapılmışsa çalışan EK doğrulamadır.
- */
-import * as fs from 'fs';
-import * as path from 'path';
-
-const PACKAGE_ROOT = path.resolve(__dirname, '../..');
-const TSUP_CONFIG = path.join(PACKAGE_ROOT, 'tsup.config.ts');
-const PACKAGE_JSON = path.join(PACKAGE_ROOT, 'package.json');
-const DIST = path.join(PACKAGE_ROOT, 'dist');
-
-/** dist ağacındaki tüm dosyaları (alt dizinler dahil) paket köküne göreli döndürür. */
-function walk(dir: string, base = dir): string[] {
-    return fs.readdirSync(dir, { withFileTypes: true }).flatMap((entry) => {
-        const full = path.join(dir, entry.name);
-        return entry.isDirectory() ? walk(full, base) : [path.relative(base, full)];
-    });
-}
-
-describe('CDN/IIFE build yüzeyi kaldırıldı (#399)', () => {
-    describe('tsup.config.ts — IIFE tanımı geri gelmemeli', () => {
-        let config = '';
-        beforeAll(() => {
-            config = fs.readFileSync(TSUP_CONFIG, 'utf8');
-        });
-
-        it('hiçbir tanımda `format: ["iife"]` yok', () => {
-            // Yorum satırlarını ayıkla: karar gerekçesi metninde "iife" kelimesi geçiyor.
-            const code = config.replace(/\/\/.*$/gm, '').replace(/\/\*[\s\S]*?\*\//g, '');
-            expect(code).not.toMatch(/format\s*:\s*\[[^\]]*['"]iife['"]/);
-        });
-
-        it('`globalName` (window.X ataması) ilan edilmiyor', () => {
-            const code = config.replace(/\/\/.*$/gm, '').replace(/\/\*[\s\S]*?\*\//g, '');
-            expect(code).not.toMatch(/globalName\s*:/);
-        });
-
-        it('`.global.js` uzantısı üreten outExtension yok', () => {
-            const code = config.replace(/\/\/.*$/gm, '').replace(/\/\*[\s\S]*?\*\//g, '');
-            expect(code).not.toMatch(/\.global\.js/);
-        });
-    });
-
-    describe('package.json — CDN metadata ve config-ezen build argümanları yok', () => {
-        let pkg: Record<string, unknown> = {};
-        beforeAll(() => {
-            pkg = JSON.parse(fs.readFileSync(PACKAGE_JSON, 'utf8'));
-        });
-
-        it.each(['unpkg', 'jsdelivr'])('%s alanı yok (CDN çözümleyicileri ölü dosyaya bakmasın)', (field) => {
-            expect(pkg).not.toHaveProperty(field);
-        });
-
-        it('exports/files alanlarında `.global` atfı yok', () => {
-            expect(JSON.stringify({ exports: pkg.exports, files: pkg.files })).not.toContain('.global');
-        });
-
-        /**
-         * Kök nedenin kendisi: CLI argümanı tsup config'ini ezer. build script'leri
-         * entry/format'ı CLI'dan geçmediği sürece config tek kaynak kalır.
-         */
-        it.each(['build:js', 'build:dts'])('%s tsup config\'ini CLI argümanıyla ezmiyor', (script) => {
-            const scripts = pkg.scripts as Record<string, string>;
-            const command = scripts[script];
-            expect(command).toBeDefined();
-            expect(command).not.toMatch(/--format/);
-            expect(command).not.toMatch(/\bsrc\//);
-        });
-    });
-
-    describe('dist — üretilmiş çıktıda `.global.*` kalmamalı', () => {
-        const distExists = fs.existsSync(DIST);
-
-        // Build yapılmamışsa bu katman atlanır; asıl kapı yukarıdaki config +
-        // metadata testleridir (build olmadan da koşar ve regresyonu yakalar).
-        (distExists ? it : it.skip)('dist ağacında hiçbir `.global.*` dosyası yok', () => {
-            const globals = walk(DIST).filter((file) => path.basename(file).includes('.global.'));
-            expect(globals).toEqual([]);
-        });
-    });
-});