@dropi/ui 0.1.51 → 0.1.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dropi/ui",
-  "version": "0.1.51",
+  "version": "0.1.53",
   "description": "Dropi Design System — Web Components for Angular, React and Vue",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -52,7 +52,7 @@
   ],
   "scripts": {
     "generate:maps": "node scripts/generate-icon-map.js && node scripts/generate-illustration-map.js && node scripts/generate-lottie-map.js",
-    "build": "npm run generate:maps && stencil build && npm run build --workspace=packages/react && npm run build --workspace=packages/angular",
+    "build": "npm run generate:maps && stencil build && npm run build --workspace=packages/react && npm run build --workspace=packages/angular && node scripts/strip-use-client.mjs",
     "clear:cache": "node -e \"const fs=require('fs');['.stencil','node_modules/.cache'].forEach(p=>{try{fs.rmSync(p,{recursive:true,force:true})}catch(e){}})\"",
     "publish:react": "npm run build && npm publish --workspace=packages/react",
     "dev": "stencil build --dev --watch & npm run watch --workspace=packages/react",

package/scripts/setup.js

@@ -150,7 +150,7 @@ async function run() {
           //          export default anyPlugin(nextConfig)
           //          export default anyPlugin()(nextConfig)
           const stencilWrap = (configVar) =>
-            `withStencil({\n  from: '@dropi/ui-react',\n  module: import('@dropi/ui-react/next'),\n  hydrateModule: import('@dropi/ui/hydrate'),\n})(${configVar})`;
+            `withStencil({\n  from: '@dropi/ui-react',\n  module: import('@dropi/ui-react/next'),\n  hydrateModule: import('@dropi/ui/hydrate'),\n  serializeShadowRoot: { default: 'declarative-shadow-dom' },\n})(${configVar})`;
 
           // Caso 1: export default bareConfig (sin wrapper)
           if (/export default (nextConfig|config)\s*;/.test(cfg)) {
@@ -201,6 +201,7 @@ export default withStencil({
   from: '@dropi/ui-react',
   module: import('@dropi/ui-react/next'),
   hydrateModule: import('@dropi/ui/hydrate'),
+  serializeShadowRoot: { default: 'declarative-shadow-dom' },
 })(nextConfig);
 `;
         fs.writeFileSync(path.join(projectRoot, 'next.config.ts'), newCfg);
@@ -222,22 +223,6 @@ dropi-ilustration-icon, dropi-empty-state, dropi-favorite-button,
 dropi-logo, dropi-avatars {
   text-align: initial;
 }
-
-/* Prevent invisible flash before hydration completes */
-[class*="dropi-"]:not(.hydrated),
-dropi-banner-external:not(.hydrated),
-dropi-logo:not(.hydrated),
-dropi-carousel:not(.hydrated) {
-  visibility: inherit !important;
-  opacity: 1 !important;
-}
-
-/* Reserve space for icons before hydration */
-dropi-icon:not(.hydrated) {
-  width: 24px;
-  height: 24px;
-  display: inline-flex;
-}
 `;
     const globalsCssCandidates = [
       path.join(projectRoot, 'src', 'app', 'globals.css'),

package/scripts/strip-use-client.mjs

@@ -0,0 +1,20 @@
+import { readFileSync, writeFileSync, existsSync } from 'node:fs';
+import { resolve, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const root = resolve(dirname(fileURLToPath(import.meta.url)), '..');
+const targets = [
+  'packages/react/dist/components.server.js',
+  'packages/react/src/components.server.ts',
+];
+
+for (const rel of targets) {
+  const filePath = resolve(root, rel);
+  if (!existsSync(filePath)) continue;
+  const content = readFileSync(filePath, 'utf8');
+  const stripped = content.replace(/^'use client';\s*\n+/, '');
+  if (content !== stripped) {
+    writeFileSync(filePath, stripped);
+    console.log(`[strip-use-client] stripped from ${rel}`);
+  }
+}