Automate dependency management of spx2

.github/workflows/validate.yml

@@ -32,6 +32,10 @@ jobs:
         working-directory: spx-gui
         run: npm install
 
+      - name: Install spx
+        working-directory: spx-gui
+        run: ./install-spx.sh
+
       - name: Run Vue TSC
         working-directory: spx-gui
         run: npm run type-check
@@ -40,23 +44,14 @@ jobs:
         working-directory: spx-gui
         run: npm run lint
 
-      - name: Setup Go 1.21.3
-        uses: actions/setup-go@v4
-        with:
-          go-version: 1.21.3
-
-      - name: Build WASM
-        working-directory: spx-gui
-        run: npm run build-wasm
-
-      - name: Setup Go 1.23.4
+      - name: Setup Go
         uses: actions/setup-go@v4
         with:
           go-version: 1.23.4
 
-      - name: Build WASM for spxls
+      - name: Build WASM
         working-directory: spx-gui
-        run: npm run build-spxls
+        run: ./build-wasm.sh
 
       - name: Run Vitest
         working-directory: spx-gui

Dockerfile

@@ -16,12 +16,6 @@ COPY spx-backend ./spx-backend
 
 ARG GOPROXY
 
-# Build WASM
-WORKDIR /app/tools/fmt
-RUN ./build.sh
-WORKDIR /app/tools/ispx
-RUN ./build.sh
-
 # Build backend
 WORKDIR /app/spx-backend
 RUN gop build -trimpath -o spx-backend ./cmd/spx-backend
@@ -30,34 +24,37 @@ RUN gop build -trimpath -o spx-backend ./cmd/spx-backend
 
 FROM ${GO_BASE_IMAGE} AS go-builder
 
-WORKDIR /app
+ARG GOPROXY
+# Pre-install Go toolchain for 1.21.3, which will be used by tools/fmt & tools/ispx
+RUN GOTOOLCHAIN=go1.21.3 go version
 
+WORKDIR /app
 COPY tools ./tools
+COPY spx-gui ./spx-gui
 
-ARG GOPROXY
-
-# Build WASM for spxls
-WORKDIR /app/tools/spxls
-RUN ./build.sh
+# Build WASM
+WORKDIR /app/spx-gui
+RUN ./build-wasm.sh
 
 ################################################################################
 
 FROM ${NODE_BASE_IMAGE} AS frontend-builder
 
 WORKDIR /app/spx-gui
 
-COPY spx-gui/package.json spx-gui/package-lock.json ./
-
+COPY spx-gui/package.json spx-gui/package-lock.json .
 ARG NPM_CONFIG_REGISTRY
-
 RUN npm install
 
+COPY spx-gui/public ./public
+COPY spx-gui/install-spx.sh .
+RUN ./install-spx.sh
+
 COPY spx-gui .
 COPY docs ../docs
 COPY tools ../tools
-COPY --from=gop-builder /app/tools/fmt/static/main.wasm /app/spx-gui/src/assets/format.wasm
-COPY --from=gop-builder /app/tools/ispx/main.wasm /app/spx-gui/src/assets/ispx/main.wasm
-COPY --from=go-builder /app/tools/spxls/spxls.wasm /app/spx-gui/src/assets/spxls.wasm
+# Copy assets (with wasm)
+COPY --from=go-builder /app/spx-gui/src/assets /app/spx-gui/src/assets
 
 ARG NODE_ENV
 

docs/develop/index.md

@@ -8,6 +8,11 @@
 - **`/tools`**: Other independent tools that Go+ Builder depends on.
 - **`/scripts`**: Scripts for building, deploying, or other automation tasks.
 
-### Architecture design
+### Environment Requirements
+
+- **Node.js**: >= 20.11.1
+- **Go**: >= 1.23.4
+
+### Architecture Design
 
 TODO.

spx-backend/README.md

@@ -17,5 +17,5 @@ Run
 
 ```sh
 cp .env.dev .env
-gop run ./cmd/spx-backend
+GOTOOLCHAIN=go1.21.3 gop run ./cmd/spx-backend
 ```

spx-gui/.env

@@ -26,3 +26,6 @@ VITE_CASDOOR_ORGANIZATION_NAME=""
 #
 # Optional as they have default values.
 VITE_DISABLE_AIGC="false"
+
+# Version of spx, keep in sync with the version in `spx-install.sh`.
+VITE_SPX_VERSION=2.0.1

spx-gui/README.md

@@ -1,23 +1,24 @@
 # spx-gui
 
+## Environment Requirements
+
+- **Node.js**: >= 20.11.1
+- **Go**: >= 1.23.4
+
 ## Install Dependencies
 
 ```bash
 npm install
+./install-spx.sh
 ```
 
 ## Run the Project in Development Mode
 
 ```bash
+./build-wasm.sh
 npm run dev
 ```
 
-> [!NOTE]
-> To help you quickly get started with development, we have symbolically linked `.env.development` to `.env.staging`.
-> Feel free to override any environment settings by creating a `.env.development.local` file. For example, if you need
-> to use your local `spx-backend` server, simply append something like `VITE_API_BASE_URL="http://localhost:8080"` to
-> the file, adjusting the URL as needed.
-
 ## Development Standards
 
 ### Code Styles
@@ -52,164 +53,3 @@ npm run dev
 3. Use the Composition API for coding
 4. defineProps should use type declaration
 5. Child components that are tightly coupled with the parent component should be prefixed with the parent component's name, e.g., SpriteList, SpriteListItem, SpriteListItemButton
-
-#### Examples
-
-Here is a complete example of a component named SpriteList:
-
-```vue
-<template>
-  <div>Display SpriteList</div>
-</template>
-
-<script setup>
-// ----------Import required packages / components-----------
-import { computed, onMounted } from 'vue'
-
-// ----------props & emit------------------------------------
-const props = defineProps({ spriteName: String }) // Props based on type declaration
-const emit = defineEmits(['update'])
-
-// ----------data related (reactive, ref..)------------------
-const count = ref(0)
-
-// ----------computed properties-----------------------------
-const doubled = computed(() => count.value * 2)
-
-// ----------lifecycle hooks---------------------------------
-onMounted(() => {
-  console.log('Component is mounted!')
-})
-
-// ----------other composition functions---------------------
-// Such as useRouter, useStore..
-
-// ----------methods-----------------------------------------
-</script>
-```
-
-### Store Standards
-
-1. The returned value of `defineStore()`is named using the name of store.
-2. This value needs to start with `use` and end with `Store`. for example, `useAssetStore`, `useUserStore`, `useStyleStore`
-3. The first parameter is the unique ID of the Store in the application
-4. Use `Setup Store` to write Store
-5. Read-only properties in store are exposed after being wrapped with `vue.readonly`
-
-```js
-export const useUserStore = defineStore('user', () => {
-  // ----------state------------------------------------
-  const token = ref('')
-  const username = ref('')
-
-  // ----------getters------------------------------------
-  const getFullToken = computed(() => 'Bear ' + token.value)
-
-  // ----------actions------------------------------------
-  const setToken = (_token) => {
-    token.value = _token
-  }
-  return {
-    //  state
-    username: readonly(username),
-    token: readonly(token),
-    //  getters
-    getFullToken,
-    //  actions
-    setToken
-  }
-})
-```
-
-### Route Addition
-
-Adding SpriteList as an example:
-
-```javascript
-const routes = [
-  { path: '/', redirect: '/spx/homepage' },
-  {
-    path: '/spx/homepage',
-    name: 'SpxHomepage',
-    component: () => import('../components/SpxHomepage.vue')
-  },
-  {
-    path: '/sprite/list',
-    name: 'SpriteList',
-    component: () => import('../components/sprite-list/SpriteList.vue')
-  }
-]
-```
-
-1. Enter `[project deployment URL]/sprite/list` in the browser address bar to access the component page
-
-### Team Work Standards
-
-Use TODO for team code handover
-
-```vue
-<script setup>
-// TODO Complete xx content writing/bugfix  @xxx
-</script>
-```
-
-## Complete Component Development Process Reference
-
-Taking the creation of an Audio Editing Page as an example:
-
-1. If it's a new page, create a folder, sounds-edit
-2. Create `SoundEdit.vue` component
-3. Register the component in the route
-4. Complete the page development
-
-## Theme File
-
-If your project includes custom CSS styles with color definitions, follow these steps to define these styles in a theme file:
-
-1. Add custom color variables in the file located at src/assets/theme.scss
-
-```scss
-// SpxEditor
-$spx-editor-tab-font-uncheck: black; // Please start the name with the component name, for example, for CSS styles in SpxEditor, start with spx-editor
-```
-
-2. Import and use these variables in SpxEditor
-
-```scss
-<style scoped lang="scss">
-@import "@/assets/theme.scss";
-
-.tab-font-uncheck {
-  font-size: 20px;
-  color: $spx-editor-tab-font-uncheck;
-}
-
-</style>
-```
-
-## I18n/I10n
-
-### Configure languages in `src/language/index.ts`
-
-```typescript
-export const initI18n = async (app: App) => {
-  const messages = {
-    en: {
-      sounds: {
-        hint: 'Sounds'
-      }
-    },
-    zh: {
-      sounds: {
-        hint: '音频'
-      }
-    }
-  }
-}
-```
-
-### Usage
-
-```html
-<div class="sounds-hint">{{ $t('sounds.hint') }}</div>
-```

spx-gui/build-wasm.bat

@@ -1,3 +1,5 @@
+@REM **NOTE**: This script is outdated. Update it based on `./build-wasm.sh` before using it.
+
 @echo off
 setlocal
 echo Run this script from 'spx-gui' directory

spx-gui/build-wasm.sh

@@ -3,16 +3,14 @@ set -e
 
 echo Run this script from 'spx-gui' directory
 
-# Go v1.21.3 expected
-go version
-
 cd ../tools/fmt
 source ./build.sh
+cp ./static/main.wasm ../../spx-gui/src/assets/format.wasm
 
 cd ../ispx
 source ./build.sh
+cp ./main.wasm ../../spx-gui/src/assets/ispx/main.wasm
 
-cd ..
-
-cp fmt/static/main.wasm ../spx-gui/src/assets/format.wasm
-cp ispx/main.wasm ../spx-gui/src/assets/ispx/main.wasm
+cd ../spxls
+source ./build.sh
+cp ./spxls.wasm ../../spx-gui/src/assets/spxls.wasm

spx-gui/install-spx.sh

@@ -0,0 +1,12 @@
+#!/bin/bash
+set -e
+
+# Version of spx, keep in sync with the version in `.env`.
+SPX_VERSION=2.0.1
+SPX_NAME=spx_${SPX_VERSION}
+SPX_FILE_NAME=${SPX_NAME}.zip
+SPX_FILE_URL=https://github.com/realdream-ai/gdspx/releases/download/spx${SPX_VERSION}/spx${SPX_VERSION}_web.zip
+
+wget -O ${SPX_FILE_NAME} ${SPX_FILE_URL}
+unzip ${SPX_FILE_NAME} -d ./public/${SPX_NAME}
+rm ${SPX_FILE_NAME}

spx-gui/package.json

@@ -6,8 +6,6 @@
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --build --force && vite build --mode ${NODE_ENV:-production}",
-    "build-wasm": "./build-wasm.sh",
-    "build-spxls": "./build-spxls.sh",
     "preview": "vite preview",
     "type-check": "vue-tsc --build --force",
     "lint": "eslint . --ext .vue,.ts --ignore-path .gitignore",

spx-gui/public/.gitignore

@@ -0,0 +1,2 @@
+# spx2 assets, which will be added by `install-spx.sh`
+spx_*