@moontra/moonui 6.19.1 → 6.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui",
-  "version": "6.19.1",
+  "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');
+    });
+});