Skip to content

Commit b853a9e

Browse files
wangdicoderwangdicoder
authored
fix(react): improve image component and demos (#115)
* refactor: image component * fix(react): improve image component and demos
1 parent 1293a33 commit b853a9e

16 files changed

Lines changed: 936 additions & 199 deletions

File tree

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@tiny-design/react": patch
3+
---
4+
5+
Fix image loading, fallback handling, and demo behavior.

‎apps/docs/vite.config.ts‎

Lines changed: 139 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,13 @@ import { readFileSync } from 'fs';
88

99
const reactPkg = path.resolve(__dirname, '../../packages/react/package.json');
1010
const reactDir = path.resolve(__dirname, '../../packages/react');
11+
const reactSrc = path.join(reactDir, 'src');
1112
const reactEs = path.join(reactDir, 'es/index.js');
1213
const iconsDir = path.resolve(__dirname, '../../packages/icons');
14+
const iconsSrc = path.join(iconsDir, 'src');
1315
const iconsEs = path.join(iconsDir, 'es/index.js');
1416
const chartsDir = path.resolve(__dirname, '../../packages/charts');
17+
const chartsSrc = path.join(chartsDir, 'src');
1518
const chartsEs = path.join(chartsDir, 'es/index.js');
1619
const tokensDir = path.resolve(__dirname, '../../packages/tokens');
1720

@@ -29,119 +32,147 @@ function sanitizeChunkName(value: string): string {
2932
return value.replace(/[^a-zA-Z0-9_-]/g, '-');
3033
}
3134

32-
export default defineConfig({
33-
base: process.env.VITE_BASE || '/',
34-
define: {
35-
__TINY_VERSION__: JSON.stringify(tinyVersion),
36-
},
37-
plugins: [
38-
{ enforce: 'pre', ...mdx({
39-
mdxExtensions: ['.mdx', '.md'],
40-
mdExtensions: [],
41-
providerImportSource: '@mdx-js/react',
42-
remarkPlugins: [remarkGfm],
43-
rehypePlugins: [rehypeMdxCodeProps],
44-
}) },
45-
react({ include: /\.(jsx|tsx|md|mdx)$/ }),
46-
],
47-
resolve: {
48-
alias: [
49-
{ find: /^@tiny-design\/react$/, replacement: reactEs },
50-
{ find: /^@tiny-design\/react\/(.*)$/, replacement: path.join(reactDir, 'es/$1') },
51-
{ find: /^@tiny-design\/icons$/, replacement: iconsEs },
52-
{ find: /^@tiny-design\/icons\/(.*)$/, replacement: path.join(iconsDir, 'es/$1') },
53-
{ find: /^@tiny-design\/charts$/, replacement: chartsEs },
54-
{ find: /^@tiny-design\/charts\/(.*)$/, replacement: path.join(chartsDir, 'es/$1') },
55-
{ find: '@tiny-design/tokens/registry-runtime', replacement: path.join(tokensDir, 'runtime/registry.mjs') },
56-
{ find: '@mdx-js/react', replacement: path.resolve(__dirname, 'node_modules/@mdx-js/react') },
35+
function createWorkspaceAliases(mode: 'src' | 'es') {
36+
const useSource = mode === 'src';
37+
38+
return [
39+
{
40+
find: /^@tiny-design\/react$/,
41+
replacement: useSource ? reactSrc : reactEs,
42+
},
43+
{
44+
find: /^@tiny-design\/react\/(.*)$/,
45+
replacement: path.join(reactDir, `${useSource ? 'src' : 'es'}/$1`),
46+
},
47+
{
48+
find: /^@tiny-design\/icons$/,
49+
replacement: useSource ? iconsSrc : iconsEs,
50+
},
51+
{
52+
find: /^@tiny-design\/icons\/(.*)$/,
53+
replacement: path.join(iconsDir, `${useSource ? 'src' : 'es'}/$1`),
54+
},
55+
{
56+
find: /^@tiny-design\/charts$/,
57+
replacement: useSource ? chartsSrc : chartsEs,
58+
},
59+
{
60+
find: /^@tiny-design\/charts\/(.*)$/,
61+
replacement: path.join(chartsDir, `${useSource ? 'src' : 'es'}/$1`),
62+
},
63+
{ find: '@tiny-design/tokens/registry-runtime', replacement: path.join(tokensDir, 'runtime/registry.mjs') },
64+
{ find: '@mdx-js/react', replacement: path.resolve(__dirname, 'node_modules/@mdx-js/react') },
65+
];
66+
}
67+
68+
export default defineConfig(({ command }) => {
69+
const aliasMode = command === 'serve' ? 'src' : 'es';
70+
71+
return {
72+
base: process.env.VITE_BASE || '/',
73+
define: {
74+
__TINY_VERSION__: JSON.stringify(tinyVersion),
75+
},
76+
plugins: [
77+
{ enforce: 'pre', ...mdx({
78+
mdxExtensions: ['.mdx', '.md'],
79+
mdExtensions: [],
80+
providerImportSource: '@mdx-js/react',
81+
remarkPlugins: [remarkGfm],
82+
rehypePlugins: [rehypeMdxCodeProps],
83+
}) },
84+
react({ include: /\.(jsx|tsx|md|mdx)$/ }),
5785
],
58-
dedupe: ['react', 'react-dom'],
59-
},
60-
server: {
61-
port: 3000,
62-
open: true,
63-
fs: {
64-
allow: ['../..'],
86+
resolve: {
87+
alias: createWorkspaceAliases(aliasMode),
88+
dedupe: ['react', 'react-dom'],
6589
},
66-
},
67-
build: {
68-
outDir: 'build',
69-
chunkSizeWarningLimit: 750,
70-
rollupOptions: {
71-
output: {
72-
manualChunks(id) {
73-
if (id.includes('/packages/react/es/')) {
74-
return 'tiny-react';
75-
}
76-
77-
if (id.includes('/packages/icons/es/')) {
78-
return 'tiny-icons';
79-
}
80-
81-
if (id.includes('/packages/charts/es/')) {
82-
return 'tiny-charts';
83-
}
84-
85-
if (id.includes('/apps/docs/src/containers/home/')) {
86-
return 'docs-home';
87-
}
88-
89-
if (!id.includes('node_modules')) {
90-
return undefined;
91-
}
92-
93-
const packageName = getPackageName(id);
94-
95-
if (packageName && ['react', 'react-dom', 'scheduler'].includes(packageName)) {
96-
return 'vendor-react';
97-
}
98-
99-
if (packageName && ['@babel/runtime', 'dom-helpers'].includes(packageName)) {
100-
return 'vendor-react';
101-
}
102-
103-
if (
104-
packageName &&
105-
(
106-
packageName.startsWith('@mdx-js') ||
107-
packageName.startsWith('remark-') ||
108-
packageName.startsWith('rehype-') ||
109-
[
110-
'unified',
111-
'micromark',
112-
'mdast-util-from-markdown',
113-
'mdast-util-mdx',
114-
'mdast-util-mdx-expression',
115-
'mdast-util-mdx-jsx',
116-
'mdast-util-mdxjs-esm',
117-
'mdast-util-to-hast',
118-
'hast-util-to-jsx-runtime',
119-
'hast-util-from-html',
120-
'vfile',
121-
].includes(packageName)
122-
)
123-
) {
124-
return 'vendor-mdx';
125-
}
126-
127-
if (packageName && ['prism-react-renderer', 'react-runner'].includes(packageName)) {
128-
return 'vendor-code';
129-
}
130-
131-
if (packageName === 'recharts' || packageName === 'victory-vendor') {
132-
return 'vendor-charts';
133-
}
134-
135-
return packageName ? `vendor-${sanitizeChunkName(packageName)}` : 'vendor';
90+
server: {
91+
port: 3000,
92+
open: true,
93+
fs: {
94+
allow: ['../..'],
95+
},
96+
},
97+
build: {
98+
outDir: 'build',
99+
chunkSizeWarningLimit: 750,
100+
rollupOptions: {
101+
output: {
102+
manualChunks(id) {
103+
if (id.includes('/packages/react/es/')) {
104+
return 'tiny-react';
105+
}
106+
107+
if (id.includes('/packages/icons/es/')) {
108+
return 'tiny-icons';
109+
}
110+
111+
if (id.includes('/packages/charts/es/')) {
112+
return 'tiny-charts';
113+
}
114+
115+
if (id.includes('/apps/docs/src/containers/home/')) {
116+
return 'docs-home';
117+
}
118+
119+
if (!id.includes('node_modules')) {
120+
return undefined;
121+
}
122+
123+
const packageName = getPackageName(id);
124+
125+
if (packageName && ['react', 'react-dom', 'scheduler'].includes(packageName)) {
126+
return 'vendor-react';
127+
}
128+
129+
if (packageName && ['@babel/runtime', 'dom-helpers'].includes(packageName)) {
130+
return 'vendor-react';
131+
}
132+
133+
if (
134+
packageName &&
135+
(
136+
packageName.startsWith('@mdx-js') ||
137+
packageName.startsWith('remark-') ||
138+
packageName.startsWith('rehype-') ||
139+
[
140+
'unified',
141+
'micromark',
142+
'mdast-util-from-markdown',
143+
'mdast-util-mdx',
144+
'mdast-util-mdx-expression',
145+
'mdast-util-mdx-jsx',
146+
'mdast-util-mdxjs-esm',
147+
'mdast-util-to-hast',
148+
'hast-util-to-jsx-runtime',
149+
'hast-util-from-html',
150+
'vfile',
151+
].includes(packageName)
152+
)
153+
) {
154+
return 'vendor-mdx';
155+
}
156+
157+
if (packageName && ['prism-react-renderer', 'react-runner'].includes(packageName)) {
158+
return 'vendor-code';
159+
}
160+
161+
if (packageName === 'recharts' || packageName === 'victory-vendor') {
162+
return 'vendor-charts';
163+
}
164+
165+
return packageName ? `vendor-${sanitizeChunkName(packageName)}` : 'vendor';
166+
},
136167
},
137168
},
138169
},
139-
},
140-
css: {
141-
preprocessorOptions: {
142-
scss: {
143-
api: 'modern',
170+
css: {
171+
preprocessorOptions: {
172+
scss: {
173+
api: 'modern',
174+
},
144175
},
145176
},
146-
},
177+
};
147178
});

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

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,16 @@
22

33
exports[`<Image /> should match the snapshot 1`] = `
44
<DocumentFragment>
5-
<img
6-
alt="image"
7-
class="ty-image"
8-
src="test.jpg"
9-
style="object-fit: cover;"
10-
/>
5+
<span
6+
class="ty-image ty-image_loading"
7+
data-status="loading"
8+
>
9+
<img
10+
alt=""
11+
class="ty-image__img"
12+
src="test.jpg"
13+
style="object-fit: cover;"
14+
/>
15+
</span>
1116
</DocumentFragment>
1217
`;

0 commit comments

Comments
 (0)