Add vite-vue3-tsx-sample

README.md

@@ -25,6 +25,7 @@ This repository contains a library of sample Photoshop plugins to help you on yo
 | ui-react-starter            | Spectrum UXP, React                                         | Shows how to use React in a simple plugin                                                                                                  | UXP 4.1 / PS 22.0.0             |
 | ui-svelte-starter           | Spectrum UXP, Svelte                                        | Shows how to use Svelte in a simple plugin                                                                                                 | UXP 4.1 / PS 22.0.0             |
 | ui-vue-starter              | Spectrum UXP, Vue                                           | Shows how to use Vue in a simple plugin                                                                                                    | UXP 4.1 / PS 22.0.0             |
+| vite-vue3-tsx-sample        | Spectrum UXP, Vue                                           | Creates an UXP project by using Vite, Vue 3, TSX                                                                                           | PS 23.0.0                       |
 | wasm-rust-sample            | Spectrum UXP, Rust, WebAssembly                             | Uses wasm-bindgen and Rust to leverage WebAssembly in a UXP plugin                                                                         | UXP 4.1 / PS 22.0.0             |
 | web-service-call-js-sample  | Spectrum UXP, Fetch, BatchPlay                              | Creates a text layer in Photoshop containing data fetched from a web API                                                                   | UXP 4.1 / PS 22.0.0             |
 

vite-vue3-tsx-sample/.editorconfig

@@ -0,0 +1,36 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+# Use 4 spaces for the Python files
+[*.py]
+indent_size = 4
+max_line_length = 80
+
+# The JSON files contain newlines inconsistently
+[*.json]
+insert_final_newline = ignore
+
+# Minified JavaScript files shouldn't be changed
+[**.min.js]
+indent_style = ignore
+insert_final_newline = ignore
+
+# Makefiles always use tabs for indentation
+[Makefile]
+indent_style = tab
+
+# Batch files use tabs for indentation
+[*.bat]
+indent_style = tab
+
+[*.md]
+trim_trailing_whitespace = false
+

vite-vue3-tsx-sample/.gitignore

@@ -0,0 +1,12 @@
+# Node.
+node_modules/
+
+# IDEs.
+.vscode/
+.idea/
+
+# Dist.
+dist/
+
+# Envs.
+.env

vite-vue3-tsx-sample/README.md

@@ -0,0 +1,74 @@
+# Adobe UXP Vite Vue3 TSX Sample
+
+This is an UXP sample that mainly consists of Vite and Vue 3 with TSX.
+
+## Quick start
+
+1. Clone this sample.
+
+2. Make sure to change the `id` and `name` in `manifest.json`.
+
+3. After the building process, open the project in UXP Developer Tools.
+
+## NPM scripts
+
+ - `build`: Build the UXP plugin.
+ - `watch`: Just for your development. Invoke `npm run build` after some file was changed.
+
+## Vue single file component
+
+This template has been configured with `@vitejs/plugin-vue` so SFC should work out of box.
+
+## SWC
+
+You can switch to swc by using [unplugin-swc](https://github.com/unplugin/unplugin-swc) to make `emitDecoratorMetadata` work.
+
+### vite.config.ts
+
+```ts
+import vue from '@vitejs/plugin-vue'
+import swc from 'unplugin-swc'
+import { defineConfig } from 'vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  esbuild: false,  // ESBuild must be disabled.
+
+  plugins: [
+    swc.vite()  // Add unplugin-swc.
+  ],
+
+  build: {
+    minify: 'terser',  // You have to add a minifier after disabling ESBuild.
+  },
+})
+```
+
+### .swcrc
+
+```json
+{
+  "isModule": true,
+  "jsc": {
+    "target": "es2020",
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "decorators": true
+    },
+    "transform": {
+      "legacyDecorator": true,
+      "decoratorMetadata": true
+    },
+    "experimental": {
+      "plugins": [
+        ["swc-plugin-vue-jsx", {}]  // If you want to use Vue 3 in J/TSX form.
+      ]
+    }
+  }
+}
+```
+
+## Notice
+
+Some libs like `Vue-i18n`, `Vue-Router` are not working in UXP environment, take care.

vite-vue3-tsx-sample/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>UXP Vite Template</title>
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

vite-vue3-tsx-sample/manifest.json

@@ -0,0 +1,106 @@
+{
+  "id": "vite-vue3-tsx",
+  "name": "vite-vue3-tsx",
+  "version": "1.0.0",
+  "main": "dist/index.html",
+  "host": [
+    {
+      "app": "PS",
+      "minVersion": "23.0.0"
+    }
+  ],
+  "manifestVersion": 5,
+  "entrypoints": [
+    {
+      "type": "command",
+      "id": "showAlert",
+      "label": "Show alert"
+    },
+    {
+      "type": "panel",
+      "id": "vanilla",
+      "minimumSize": {
+        "width": 230,
+        "height": 200
+      },
+      "maximumSize": {
+        "width": 2000,
+        "height": 2000
+      },
+      "preferredDockedSize": {
+        "width": 230,
+        "height": 300
+      },
+      "preferredFloatingSize": {
+        "width": 230,
+        "height": 300
+      },
+      "icons": [
+        {
+          "width": 32,
+          "height": 32,
+          "path": "icons/icon_D.png",
+          "scale": [
+            1,
+            2
+          ],
+          "theme": [
+            "dark",
+            "darkest"
+          ],
+          "species": [
+            "generic"
+          ]
+        },
+        {
+          "width": 32,
+          "height": 32,
+          "path": "icons/icon_N.png",
+          "scale": [
+            1,
+            2
+          ],
+          "theme": [
+            "lightest",
+            "light"
+          ],
+          "species": [
+            "generic"
+          ]
+        }
+      ],
+      "label": {
+        "default": "Starter Panel"
+      }
+    }
+  ],
+  "icons": [
+    {
+      "width": 23,
+      "height": 23,
+      "path": "icons/dark.png",
+      "scale": [
+        1,
+        2
+      ],
+      "theme": [
+        "darkest",
+        "dark",
+        "medium"
+      ]
+    },
+    {
+      "width": 23,
+      "height": 23,
+      "path": "icons/light.png",
+      "scale": [
+        1,
+        2
+      ],
+      "theme": [
+        "lightest",
+        "light"
+      ]
+    }
+  ]
+}