fix(react): improve image component and demos

.changeset/fix-image-component-and-demos.md

@@ -0,0 +1,5 @@
+---
+"@tiny-design/react": patch
+---
+
+Fix image loading, fallback handling, and demo behavior.

apps/docs/vite.config.ts

@@ -8,10 +8,13 @@ import { readFileSync } from 'fs';
 
 const reactPkg = path.resolve(__dirname, '../../packages/react/package.json');
 const reactDir = path.resolve(__dirname, '../../packages/react');
+const reactSrc = path.join(reactDir, 'src');
 const reactEs = path.join(reactDir, 'es/index.js');
 const iconsDir = path.resolve(__dirname, '../../packages/icons');
+const iconsSrc = path.join(iconsDir, 'src');
 const iconsEs = path.join(iconsDir, 'es/index.js');
 const chartsDir = path.resolve(__dirname, '../../packages/charts');
+const chartsSrc = path.join(chartsDir, 'src');
 const chartsEs = path.join(chartsDir, 'es/index.js');
 const tokensDir = path.resolve(__dirname, '../../packages/tokens');
 
@@ -29,119 +32,147 @@ function sanitizeChunkName(value: string): string {
   return value.replace(/[^a-zA-Z0-9_-]/g, '-');
 }
 
-export default defineConfig({
-  base: process.env.VITE_BASE || '/',
-  define: {
-    __TINY_VERSION__: JSON.stringify(tinyVersion),
-  },
-  plugins: [
-    { enforce: 'pre', ...mdx({
-      mdxExtensions: ['.mdx', '.md'],
-      mdExtensions: [],
-      providerImportSource: '@mdx-js/react',
-      remarkPlugins: [remarkGfm],
-      rehypePlugins: [rehypeMdxCodeProps],
-    }) },
-    react({ include: /\.(jsx|tsx|md|mdx)$/ }),
-  ],
-  resolve: {
-    alias: [
-      { find: /^@tiny-design\/react$/, replacement: reactEs },
-      { find: /^@tiny-design\/react\/(.*)$/, replacement: path.join(reactDir, 'es/$1') },
-      { find: /^@tiny-design\/icons$/, replacement: iconsEs },
-      { find: /^@tiny-design\/icons\/(.*)$/, replacement: path.join(iconsDir, 'es/$1') },
-      { find: /^@tiny-design\/charts$/, replacement: chartsEs },
-      { find: /^@tiny-design\/charts\/(.*)$/, replacement: path.join(chartsDir, 'es/$1') },
-      { find: '@tiny-design/tokens/registry-runtime', replacement: path.join(tokensDir, 'runtime/registry.mjs') },
-      { find: '@mdx-js/react', replacement: path.resolve(__dirname, 'node_modules/@mdx-js/react') },
+function createWorkspaceAliases(mode: 'src' | 'es') {
+  const useSource = mode === 'src';
+
+  return [
+    {
+      find: /^@tiny-design\/react$/,
+      replacement: useSource ? reactSrc : reactEs,
+    },
+    {
+      find: /^@tiny-design\/react\/(.*)$/,
+      replacement: path.join(reactDir, `${useSource ? 'src' : 'es'}/$1`),
+    },
+    {
+      find: /^@tiny-design\/icons$/,
+      replacement: useSource ? iconsSrc : iconsEs,
+    },
+    {
+      find: /^@tiny-design\/icons\/(.*)$/,
+      replacement: path.join(iconsDir, `${useSource ? 'src' : 'es'}/$1`),
+    },
+    {
+      find: /^@tiny-design\/charts$/,
+      replacement: useSource ? chartsSrc : chartsEs,
+    },
+    {
+      find: /^@tiny-design\/charts\/(.*)$/,
+      replacement: path.join(chartsDir, `${useSource ? 'src' : 'es'}/$1`),
+    },
+    { find: '@tiny-design/tokens/registry-runtime', replacement: path.join(tokensDir, 'runtime/registry.mjs') },
+    { find: '@mdx-js/react', replacement: path.resolve(__dirname, 'node_modules/@mdx-js/react') },
+  ];
+}
+
+export default defineConfig(({ command }) => {
+  const aliasMode = command === 'serve' ? 'src' : 'es';
+
+  return {
+    base: process.env.VITE_BASE || '/',
+    define: {
+      __TINY_VERSION__: JSON.stringify(tinyVersion),
+    },
+    plugins: [
+      { enforce: 'pre', ...mdx({
+        mdxExtensions: ['.mdx', '.md'],
+        mdExtensions: [],
+        providerImportSource: '@mdx-js/react',
+        remarkPlugins: [remarkGfm],
+        rehypePlugins: [rehypeMdxCodeProps],
+      }) },
+      react({ include: /\.(jsx|tsx|md|mdx)$/ }),
     ],
-    dedupe: ['react', 'react-dom'],
-  },
-  server: {
-    port: 3000,
-    open: true,
-    fs: {
-      allow: ['../..'],
+    resolve: {
+      alias: createWorkspaceAliases(aliasMode),
+      dedupe: ['react', 'react-dom'],
     },
-  },
-  build: {
-    outDir: 'build',
-    chunkSizeWarningLimit: 750,
-    rollupOptions: {
-      output: {
-        manualChunks(id) {
-          if (id.includes('/packages/react/es/')) {
-            return 'tiny-react';
-          }
-
-          if (id.includes('/packages/icons/es/')) {
-            return 'tiny-icons';
-          }
-
-          if (id.includes('/packages/charts/es/')) {
-            return 'tiny-charts';
-          }
-
-          if (id.includes('/apps/docs/src/containers/home/')) {
-            return 'docs-home';
-          }
-
-          if (!id.includes('node_modules')) {
-            return undefined;
-          }
-
-          const packageName = getPackageName(id);
-
-          if (packageName && ['react', 'react-dom', 'scheduler'].includes(packageName)) {
-            return 'vendor-react';
-          }
-
-          if (packageName && ['@babel/runtime', 'dom-helpers'].includes(packageName)) {
-            return 'vendor-react';
-          }
-
-          if (
-            packageName &&
-            (
-              packageName.startsWith('@mdx-js') ||
-              packageName.startsWith('remark-') ||
-              packageName.startsWith('rehype-') ||
-              [
-                'unified',
-                'micromark',
-                'mdast-util-from-markdown',
-                'mdast-util-mdx',
-                'mdast-util-mdx-expression',
-                'mdast-util-mdx-jsx',
-                'mdast-util-mdxjs-esm',
-                'mdast-util-to-hast',
-                'hast-util-to-jsx-runtime',
-                'hast-util-from-html',
-                'vfile',
-              ].includes(packageName)
-            )
-          ) {
-            return 'vendor-mdx';
-          }
-
-          if (packageName && ['prism-react-renderer', 'react-runner'].includes(packageName)) {
-            return 'vendor-code';
-          }
-
-          if (packageName === 'recharts' || packageName === 'victory-vendor') {
-            return 'vendor-charts';
-          }
-
-          return packageName ? `vendor-${sanitizeChunkName(packageName)}` : 'vendor';
+    server: {
+      port: 3000,
+      open: true,
+      fs: {
+        allow: ['../..'],
+      },
+    },
+    build: {
+      outDir: 'build',
+      chunkSizeWarningLimit: 750,
+      rollupOptions: {
+        output: {
+          manualChunks(id) {
+            if (id.includes('/packages/react/es/')) {
+              return 'tiny-react';
+            }
+
+            if (id.includes('/packages/icons/es/')) {
+              return 'tiny-icons';
+            }
+
+            if (id.includes('/packages/charts/es/')) {
+              return 'tiny-charts';
+            }
+
+            if (id.includes('/apps/docs/src/containers/home/')) {
+              return 'docs-home';
+            }
+
+            if (!id.includes('node_modules')) {
+              return undefined;
+            }
+
+            const packageName = getPackageName(id);
+
+            if (packageName && ['react', 'react-dom', 'scheduler'].includes(packageName)) {
+              return 'vendor-react';
+            }
+
+            if (packageName && ['@babel/runtime', 'dom-helpers'].includes(packageName)) {
+              return 'vendor-react';
+            }
+
+            if (
+              packageName &&
+              (
+                packageName.startsWith('@mdx-js') ||
+                packageName.startsWith('remark-') ||
+                packageName.startsWith('rehype-') ||
+                [
+                  'unified',
+                  'micromark',
+                  'mdast-util-from-markdown',
+                  'mdast-util-mdx',
+                  'mdast-util-mdx-expression',
+                  'mdast-util-mdx-jsx',
+                  'mdast-util-mdxjs-esm',
+                  'mdast-util-to-hast',
+                  'hast-util-to-jsx-runtime',
+                  'hast-util-from-html',
+                  'vfile',
+                ].includes(packageName)
+              )
+            ) {
+              return 'vendor-mdx';
+            }
+
+            if (packageName && ['prism-react-renderer', 'react-runner'].includes(packageName)) {
+              return 'vendor-code';
+            }
+
+            if (packageName === 'recharts' || packageName === 'victory-vendor') {
+              return 'vendor-charts';
+            }
+
+            return packageName ? `vendor-${sanitizeChunkName(packageName)}` : 'vendor';
+          },
         },
       },
     },
-  },
-  css: {
-    preprocessorOptions: {
-      scss: {
-        api: 'modern',
+    css: {
+      preprocessorOptions: {
+        scss: {
+          api: 'modern',
+        },
       },
     },
-  },
+  };
 });

packages/react/src/image/__tests__/__snapshots__/image.test.tsx.snap

@@ -2,11 +2,16 @@
 
 exports[`<Image /> should match the snapshot 1`] = `
 <DocumentFragment>
-  <img
-    alt="image"
-    class="ty-image"
-    src="test.jpg"
-    style="object-fit: cover;"
-  />
+  <span
+    class="ty-image ty-image_loading"
+    data-status="loading"
+  >
+    <img
+      alt=""
+      class="ty-image__img"
+      src="test.jpg"
+      style="object-fit: cover;"
+    />
+  </span>
 </DocumentFragment>
 `;