Add Image component

owjs3901 · owjs3901 · commit 6100644bfaf4 · 2025-01-15T11:43:48.000+09:00
diff --git a/.changeset/odd-zebras-enjoy.md b/.changeset/odd-zebras-enjoy.md
@@ -0,0 +1,5 @@
+---
+"@devup-ui/webpack-plugin": patch
+---
+
+Fix hot reload issue
diff --git a/.changeset/tricky-roses-ring.md b/.changeset/tricky-roses-ring.md
@@ -0,0 +1,6 @@
+---
+"@devup-ui/wasm": patch
+"@devup-ui/react": patch
+---
+
+Add Image component
diff --git a/.github/workflows/check-pr.yml b/.github/workflows/check-pr.yml
@@ -9,12 +9,13 @@ jobs:
       group: ${{ github.workflow }}-${{ github.ref }}
       cancel-in-progress: true
     runs-on: ubuntu-latest
+    container:
+      image: xd009642/tarpaulin:develop-nightly
+      options: --security-opt seccomp=unconfined
     steps:
       - name: Checkout
         uses: actions/checkout@v4
       - uses: actions-rust-lang/setup-rust-toolchain@v1
-      - name: Cargo tarpaulin
-        run: cargo install cargo-tarpaulin
       - uses: jetli/wasm-pack-action@v0.4.0
         with:
           version: 'latest'
@@ -34,3 +35,10 @@ jobs:
           pnpm build
           pnpm lint
           pnpm test
+      - name: Generate code coverage
+        run: |
+          cargo +nightly tarpaulin --verbose --all-features --workspace --timeout 120 --out xml
+      - name: Upload to codecov.io
+        uses: codecov/codecov-action@v5
+        with:
+          fail_ci_if_error: true
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -11,13 +11,14 @@ jobs:
     concurrency:
       group: ${{ github.workflow }}-${{ github.ref }}
       cancel-in-progress: false
+    container:
+      image: xd009642/tarpaulin:develop-nightly
+      options: --security-opt seccomp=unconfined
     steps:
       - name: Checkout
         uses: actions/checkout@v4
 
       - uses: actions-rust-lang/setup-rust-toolchain@v1
-      - name: Cargo tarpaulin
-        run: cargo install cargo-tarpaulin
       - uses: pnpm/action-setup@v4
         name: Install pnpm
         with:
@@ -37,6 +38,13 @@ jobs:
           pnpm build
           pnpm lint
           pnpm test
+      - name: Generate code coverage
+        run: |
+          cargo +nightly tarpaulin --verbose --all-features --workspace --timeout 120 --out xml
+      - name: Upload to codecov.io
+        uses: codecov/codecov-action@v5
+        with:
+          fail_ci_if_error: true
       - name: Create Release Pull Request or Publish to npm
         id: changesets
         uses: changesets/action@v1
diff --git a/bindings/devup-ui-wasm/src/lib.rs b/bindings/devup-ui-wasm/src/lib.rs
@@ -260,3 +260,51 @@ pub fn get_theme_interface(
         ))
     }
 }
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use wasm_bindgen_test::*;
+
+    #[wasm_bindgen_test]
+    fn test_object_to_typography() {
+        let obj = Object::new();
+        Reflect::set(
+            &obj,
+            &JsValue::from_str("fontFamily"),
+            &JsValue::from_str("Arial"),
+        )
+        .unwrap();
+        Reflect::set(
+            &obj,
+            &JsValue::from_str("fontSize"),
+            &JsValue::from_str("12px"),
+        )
+        .unwrap();
+        Reflect::set(
+            &obj,
+            &JsValue::from_str("fontWeight"),
+            &JsValue::from_str("bold"),
+        )
+        .unwrap();
+        Reflect::set(
+            &obj,
+            &JsValue::from_str("lineHeight"),
+            &JsValue::from_str("1.5"),
+        )
+        .unwrap();
+        Reflect::set(
+            &obj,
+            &JsValue::from_str("letterSpacing"),
+            &JsValue::from_str("1px"),
+        )
+        .unwrap();
+        let typography = object_to_typography(obj, 0).unwrap();
+        assert_eq!(typography.font_family, "Arial");
+        assert_eq!(typography.font_size, "12px");
+        assert_eq!(typography.font_weight, "bold");
+        assert_eq!(typography.line_height, "1.5");
+        assert_eq!(typography.letter_spacing, "1px");
+        assert_eq!(typography.level, 0);
+    }
+}
diff --git a/bindings/devup-ui-wasm/tests/web.rs b/bindings/devup-ui-wasm/tests/web.rs
diff --git a/libs/extractor/src/component.rs b/libs/extractor/src/component.rs
@@ -11,6 +11,7 @@ pub enum ExportVariableKind {
     Flex,
     VStack,
     Center,
+    Image,
     Css,
 }
 
@@ -23,6 +24,7 @@ impl ExportVariableKind {
             | ExportVariableKind::Flex
             | ExportVariableKind::Box => Ok("div"),
             ExportVariableKind::Text => Ok("span"),
+            ExportVariableKind::Image => Ok("img"),
             ExportVariableKind::Button => Ok("button"),
             ExportVariableKind::Input => Ok("input"),
             ExportVariableKind::Css => Err("Css does not have a tag"),
@@ -37,6 +39,7 @@ impl ExportVariableKind {
             | ExportVariableKind::Button
             | ExportVariableKind::Css
             | ExportVariableKind::Text
+            | ExportVariableKind::Image
             | ExportVariableKind::Box => vec![],
             ExportVariableKind::Flex => vec![Static(ExtractStaticStyle {
                 value: "flex".to_string(),
@@ -93,6 +96,7 @@ impl TryFrom<String> for ExportVariableKind {
         match value.as_str() {
             "Box" => Ok(ExportVariableKind::Box),
             "Text" => Ok(ExportVariableKind::Text),
+            "Image" => Ok(ExportVariableKind::Image),
             "Button" => Ok(ExportVariableKind::Button),
             "Input" => Ok(ExportVariableKind::Input),
             "Flex" => Ok(ExportVariableKind::Flex),
@@ -118,6 +122,10 @@ mod tests {
             ExportVariableKind::try_from("Text".to_string()),
             Ok(ExportVariableKind::Text)
         );
+        assert_eq!(
+            ExportVariableKind::try_from("Image".to_string()),
+            Ok(ExportVariableKind::Image)
+        );
         assert_eq!(
             ExportVariableKind::try_from("Button".to_string()),
             Ok(ExportVariableKind::Button)
@@ -149,6 +157,7 @@ mod tests {
     fn test_to_tag() {
         assert_eq!(ExportVariableKind::Box.to_tag(), Ok("div"));
         assert_eq!(ExportVariableKind::Text.to_tag(), Ok("span"));
+        assert_eq!(ExportVariableKind::Image.to_tag(), Ok("img"));
         assert_eq!(ExportVariableKind::Button.to_tag(), Ok("button"));
         assert_eq!(ExportVariableKind::Input.to_tag(), Ok("input"));
         assert_eq!(ExportVariableKind::Flex.to_tag(), Ok("div"));
@@ -161,6 +170,7 @@ mod tests {
     fn test_extract_style_from_kind() {
         assert_eq!(ExportVariableKind::Box.extract(), vec![]);
         assert_eq!(ExportVariableKind::Text.extract(), vec![]);
+        assert_eq!(ExportVariableKind::Image.extract(), vec![]);
         assert_eq!(ExportVariableKind::Button.extract(), vec![]);
         assert_eq!(ExportVariableKind::Input.extract(), vec![]);
         assert_eq!(
diff --git a/libs/extractor/src/visit.rs b/libs/extractor/src/visit.rs
@@ -120,6 +120,8 @@ impl<'a> VisitMut<'a> for DevupVisitor<'a> {
                             || name == "role"
                             || name == "ref"
                             || name == "key"
+                            || name == "alt"
+                            || name == "src"
                             || name == "children"
                         {
                             continue;
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
   "type": "module",
   "scripts": {
     "lint": "pnpm -r lint",
-    "test": "cargo tarpaulin && vitest test --coverage --run",
+    "test": "cargo tarpaulin && vitest test --coverage --run && pnpm -r test",
     "build": "pnpm -r build",
     "dev": "pnpm -r dev"
   },
diff --git a/packages/next-plugin/package.json b/packages/next-plugin/package.json
@@ -7,7 +7,6 @@
     "next": "^15.1"
   },
   "scripts": {
-    "test": "vitest run --coverage",
     "test:s": "vitest run -u",
     "lint": "eslint",
     "build": "tsc && vite build"
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -7,8 +7,6 @@
     "csstype": "^3.1"
   },
   "scripts": {
-    "test": "vitest run --coverage",
-    "test:s": "vitest run -u",
     "lint": "eslint",
     "build": "vite build"
   },
diff --git a/packages/react/src/__tests__/index.test.ts b/packages/react/src/__tests__/index.test.ts
@@ -9,6 +9,7 @@ describe('export', () => {
       Input: expect.any(Function),
       Text: expect.any(Function),
       VStack: expect.any(Function),
+      Image: expect.any(Function),
 
       css: expect.any(Function),
     })
diff --git a/packages/react/src/components/Box.tsx b/packages/react/src/components/Box.tsx
@@ -1,9 +1,9 @@
 import type { DevupProps } from '../types/props'
 import type { Merge } from '../types/utils'
 
-export function Box(
+export function Box<T extends React.ElementType = 'div'>(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  props: Merge<React.ComponentProps<'div'>, DevupProps>,
+  props: Merge<React.ComponentProps<T>, DevupProps>,
 ): React.ReactElement {
   throw new Error('Cannot run on the runtime')
 }
diff --git a/packages/react/src/components/Button.tsx b/packages/react/src/components/Button.tsx
@@ -1,9 +1,9 @@
 import type { DevupProps } from '../types/props'
 import type { Merge } from '../types/utils'
 
-export function Button(
+export function Button<T extends React.ElementType = 'button'>(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  props: Merge<React.ComponentProps<'button'>, DevupProps>,
+  props: Merge<React.ComponentProps<T>, DevupProps>,
 ): React.ReactElement {
   throw new Error('Cannot run on the runtime')
 }
diff --git a/packages/react/src/components/Center.tsx b/packages/react/src/components/Center.tsx
@@ -1,9 +1,9 @@
 import type { DevupProps } from '../types/props'
 import type { Merge } from '../types/utils'
 
-export function Center(
+export function Center<T extends React.ElementType = 'div'>(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  props: Merge<React.ComponentProps<'div'>, DevupProps>,
+  props: Merge<React.ComponentProps<T>, DevupProps>,
 ): React.ReactElement {
   throw new Error('Cannot run on the runtime')
 }
diff --git a/packages/react/src/components/Flex.tsx b/packages/react/src/components/Flex.tsx
@@ -1,9 +1,9 @@
 import type { DevupProps } from '../types/props'
 import type { Merge } from '../types/utils'
 
-export function Flex(
+export function Flex<T extends React.ElementType = 'div'>(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  props: Merge<React.ComponentProps<'div'>, DevupProps>,
+  props: Merge<React.ComponentProps<T>, DevupProps>,
 ): React.ReactElement {
   throw new Error('Cannot run on the runtime')
 }
diff --git a/packages/react/src/components/Image.tsx b/packages/react/src/components/Image.tsx
@@ -0,0 +1,9 @@
+import type { DevupProps } from '../types/props'
+import type { Merge } from '../types/utils'
+
+export function Image<T extends React.ElementType = 'img'>(
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  props: Merge<React.ComponentProps<T>, DevupProps>,
+): React.ReactElement {
+  throw new Error('Cannot run on the runtime')
+}
diff --git a/packages/react/src/components/Input.tsx b/packages/react/src/components/Input.tsx
@@ -1,9 +1,9 @@
 import type { DevupProps } from '../types/props'
 import type { Merge } from '../types/utils'
 
-export function Input(
+export function Input<T extends React.ElementType = 'input'>(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  props: Merge<React.ComponentProps<'input'>, DevupProps>,
+  props: Merge<React.ComponentProps<T>, DevupProps>,
 ): React.ReactElement {
   throw new Error('Cannot run on the runtime')
 }
diff --git a/packages/react/src/components/Text.tsx b/packages/react/src/components/Text.tsx
@@ -1,9 +1,9 @@
 import type { DevupTypographyProps } from '../types/props'
 import type { Merge } from '../types/utils'
 
-export function Text(
+export function Text<T extends React.ElementType = 'span'>(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  props: Merge<React.ComponentProps<'span'>, DevupTypographyProps>,
+  props: Merge<React.ComponentProps<T>, DevupTypographyProps>,
 ): React.ReactElement {
   throw new Error('Cannot run on the runtime')
 }
diff --git a/packages/react/src/components/VStack.tsx b/packages/react/src/components/VStack.tsx
@@ -1,9 +1,9 @@
 import type { DevupProps } from '../types/props'
 import type { Merge } from '../types/utils'
 
-export function VStack(
+export function VStack<T extends React.ElementType = 'span'>(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  props: Merge<React.ComponentProps<'div'>, DevupProps>,
+  props: Merge<React.ComponentProps<T>, DevupProps>,
 ): React.ReactElement {
   throw new Error('Cannot run on the runtime')
 }
diff --git a/packages/react/src/components/__tests__/index.test.ts b/packages/react/src/components/__tests__/index.test.ts
@@ -2,6 +2,7 @@ import { Box } from '../Box'
 import { Button } from '../Button'
 import { Center } from '../Center'
 import { Flex } from '../Flex'
+import { Image } from '../Image'
 import { Input } from '../Input'
 import { Text } from '../Text'
 import { VStack } from '../VStack'
@@ -15,5 +16,6 @@ describe('Component', () => {
     expect(() => Input({})).toThrowError('Cannot run on the runtime')
     expect(() => Text({})).toThrowError('Cannot run on the runtime')
     expect(() => VStack({})).toThrowError('Cannot run on the runtime')
+    expect(() => Image({})).toThrowError('Cannot run on the runtime')
   })
 })
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
@@ -2,6 +2,7 @@ export { Box } from './components/Box'
 export { Button } from './components/Button'
 export { Center } from './components/Center'
 export { Flex } from './components/Flex'
+export { Image } from './components/Image'
 export { Input } from './components/Input'
 export { Text } from './components/Text'
 export { VStack } from './components/VStack'
diff --git a/packages/webpack-plugin/package.json b/packages/webpack-plugin/package.json
@@ -21,8 +21,6 @@
   ],
   "types": "./dist/index.d.ts",
   "scripts": {
-    "test": "vitest run --coverage",
-    "test:s": "vitest run -u",
     "lint": "eslint",
     "build": "tsc && vite build"
   },
diff --git a/packages/webpack-plugin/src/__tests__/loader.test.ts b/packages/webpack-plugin/src/__tests__/loader.test.ts
diff --git a/packages/webpack-plugin/src/loader.ts b/packages/webpack-plugin/src/loader.ts
diff --git a/packages/webpack-plugin/src/plugin.ts b/packages/webpack-plugin/src/plugin.ts

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@devup-ui/webpack-plugin": patch
 +---
++
 +Fix hot reload issue
Original file line number	Diff line number	Diff line change
`@@ -120,6 +120,8 @@ impl<'a> VisitMut<'a> for DevupVisitor<'a> {`
`120`	`120`	`\|\| name == "role"`
`121`	`121`	`\|\| name == "ref"`
`122`	`122`	`\|\| name == "key"`
	`123`	`+ \|\| name == "alt"`
	`124`	`+ \|\| name == "src"`
`123`	`125`	`\|\| name == "children"`
`124`	`126`	`{`
`125`	`127`	`continue;`