refactor previous commit

Author: bea4dev

.editorconfig

@@ -0,0 +1,10 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.prettierignore

@@ -0,0 +1,16 @@
+node_modules
+dist
+dist-render
+dist-electron
+frames
+bin
+docs/build
+docs/.docusaurus
+output.mp4
+output.gif
+output_youtube.mp4
+frame-script.gif
+circle.gif
+assets/NotoSerifCJKJP-Medium.ttf
+package-lock.json
+docs/package-lock.json

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": false,
+  "singleQuote": false
+}

package-lock.json

@@ -1,64 +1,67 @@
 {
-    "name": "frame-script",
-    "private": true,
-    "version": "0.0.9",
-    "type": "module",
-    "scripts": {
-        "dev:vite": "vite --config vite.studio.config.ts",
-        "build:vite": "vite build --config vite.studio.config.ts",
-        "dev:render": "vite --config vite.render.config.ts",
-        "build:render": "vite build --config vite.render.config.ts",
-        "preview": "vite preview --config vite.studio.config.ts",
-        "build:electron": "tsc -p tsconfig.electron.json",
-        "dev": "concurrently -k \"npm:dev:vite\" \"npm:dev:render\" \"npm:dev:electron\"",
-        "predev:electron": "tsc -p tsconfig.electron.json",
-        "dev:electron": "wait-on http://localhost:5173 && cross-env VITE_DEV_SERVER_URL=http://localhost:5173 electron ./dist-electron/main.js",
-        "build": "npm run build:vite && npm run build:electron",
-        "build:all": "npm run build && npm run build:render",
-        "build:binaries": "node ./scripts/build-binaries.mjs",
-        "predev:electron:bin": "tsc -p tsconfig.electron.json",
-        "dev:electron:bin": "wait-on http://localhost:5173 http://localhost:5174/render && cross-env VITE_DEV_SERVER_URL=http://localhost:5173 RENDER_DEV_SERVER_URL=http://localhost:5174/render FRAMESCRIPT_RUN_MODE=bin electron ./dist-electron/main.js",
-        "dev:bin": "concurrently -k \"npm:dev:vite\" \"npm:dev:render\" \"npm:dev:electron:bin\"",
-        "start": "npm run dev:bin",
-        "start:bin": "npm run build:all && npm run build:binaries && node ./scripts/start-bin.mjs",
-        "start:bin:skip-build": "node ./scripts/start-bin.mjs",
-        "docs:start": "npm --prefix docs run start",
-        "docs:build": "npm --prefix docs run build",
-        "docs:serve": "npm --prefix docs run serve"
-    },
-    "dependencies": {
-        "@ffmpeg-installer/ffmpeg": "^1.1.0",
-        "@ffprobe-installer/ffprobe": "^2.1.2",
-        "@types/opentype.js": "^1.3.4",
-        "ag-psd": "^30.1.0",
-        "ag-psd-psdtool": "^1.1.10",
-        "mathjax-full": "^3.2.1",
-        "opentype.js": "^1.3.4",
-        "prismjs": "^1.30.0",
-        "puppeteer": "^24.1.1",
-        "react": "^19.2.0",
-        "react-dom": "^19.2.0",
-        "react-router-dom": "^6.28.0",
-        "three": "^0.166.1"
-    },
-    "devDependencies": {
-        "@eslint/js": "^9.39.1",
-        "@types/node": "^24.10.1",
-        "@types/react": "^19.2.5",
-        "@types/react-dom": "^19.2.3",
-        "@types/three": "^0.166.0",
-        "@vitejs/plugin-react": "^5.1.1",
-        "@webgpu/types": "^0.1.67",
-        "concurrently": "^9.2.1",
-        "cross-env": "^10.1.0",
-        "electron": "^39.2.5",
-        "eslint": "^9.39.1",
-        "eslint-plugin-react-hooks": "^7.0.1",
-        "eslint-plugin-react-refresh": "^0.4.24",
-        "globals": "^16.5.0",
-        "typescript": "~5.9.3",
-        "typescript-eslint": "^8.46.4",
-        "vite": "^7.2.4",
-        "wait-on": "^9.0.3"
-    }
+  "name": "frame-script",
+  "private": true,
+  "version": "0.0.9",
+  "type": "module",
+  "scripts": {
+    "dev:vite": "vite --config vite.studio.config.ts",
+    "build:vite": "vite build --config vite.studio.config.ts",
+    "dev:render": "vite --config vite.render.config.ts",
+    "build:render": "vite build --config vite.render.config.ts",
+    "preview": "vite preview --config vite.studio.config.ts",
+    "build:electron": "tsc -p tsconfig.electron.json",
+    "dev": "concurrently -k \"npm:dev:vite\" \"npm:dev:render\" \"npm:dev:electron\"",
+    "predev:electron": "tsc -p tsconfig.electron.json",
+    "dev:electron": "wait-on http://localhost:5173 && cross-env VITE_DEV_SERVER_URL=http://localhost:5173 electron ./dist-electron/main.js",
+    "build": "npm run build:vite && npm run build:electron",
+    "build:all": "npm run build && npm run build:render",
+    "build:binaries": "node ./scripts/build-binaries.mjs",
+    "predev:electron:bin": "tsc -p tsconfig.electron.json",
+    "dev:electron:bin": "wait-on http://localhost:5173 http://localhost:5174/render && cross-env VITE_DEV_SERVER_URL=http://localhost:5173 RENDER_DEV_SERVER_URL=http://localhost:5174/render FRAMESCRIPT_RUN_MODE=bin electron ./dist-electron/main.js",
+    "dev:bin": "concurrently -k \"npm:dev:vite\" \"npm:dev:render\" \"npm:dev:electron:bin\"",
+    "start": "npm run dev:bin",
+    "start:bin": "npm run build:all && npm run build:binaries && node ./scripts/start-bin.mjs",
+    "start:bin:skip-build": "node ./scripts/start-bin.mjs",
+    "docs:start": "npm --prefix docs run start",
+    "docs:build": "npm --prefix docs run build",
+    "docs:serve": "npm --prefix docs run serve",
+    "format": "prettier --write .",
+    "format:check": "prettier --check ."
+  },
+  "dependencies": {
+    "@ffmpeg-installer/ffmpeg": "^1.1.0",
+    "@ffprobe-installer/ffprobe": "^2.1.2",
+    "@types/opentype.js": "^1.3.4",
+    "ag-psd": "^30.1.0",
+    "ag-psd-psdtool": "^1.1.10",
+    "mathjax-full": "^3.2.1",
+    "opentype.js": "^1.3.4",
+    "prismjs": "^1.30.0",
+    "puppeteer": "^24.1.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^6.28.0",
+    "three": "^0.166.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@types/three": "^0.166.0",
+    "@vitejs/plugin-react": "^5.1.1",
+    "@webgpu/types": "^0.1.67",
+    "concurrently": "^9.2.1",
+    "cross-env": "^10.1.0",
+    "electron": "^39.2.5",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "prettier": "^3.8.3",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4",
+    "wait-on": "^9.0.3"
+  }
 }

package.json

@@ -4,6 +4,19 @@ import { PsdCharacterElement as PsdElm } from "./ast"
 
 type AnyElement = ReactElement<any, any>
 
+const expandDslFunction = (child: AnyElement): ReactNode => {
+  const component = child.type as (props: Record<string, unknown>) => ReactNode
+  return component(child.props)
+}
+
+const expandDslElement = (child: AnyElement): AnyElement => {
+  const expanded = expandDslFunction(child)
+  if (!isValidElement(expanded)) {
+    throw new Error("Expanded DSL component must return a single React element")
+  }
+  return expanded
+}
+
 
 export const parsePsdCharacter = (
   children: ReactNode,
@@ -41,7 +54,7 @@ const parsePsdCharacterChildren = (
         result.push(parseMotion(child))
         break
       case "function":
-        const expanded = child.type(child.props)
+        const expanded = expandDslFunction(child)
         const expandedAst = parsePsdCharacterChildren(expanded)
         result.push(...expandedAst)
         break
@@ -91,7 +104,7 @@ const parseMotionSequenceChildren = (
         result.push(parseMotion(child))
         break
       case "function":
-        const expanded = child.type(child.props)
+        const expanded = expandDslFunction(child)
         const expandedAst = parseMotionSequenceChildren(expanded)
         result.push(...expandedAst)
         break
@@ -141,7 +154,7 @@ const parseDeclareVariableChild = (
       case PsdElm.DeclareAnimation:
         return parseDeclareAnimation(child)
       case "function":
-        const expanded = child.type(child.props)
+        const expanded = expandDslElement(child)
         const expandedAst = parseDeclareVariable(expanded)
         return expandedAst
 
@@ -190,7 +203,7 @@ const parseMotionClipChildren = (
         result.push(parseMotion(child))
         break
       case "function":
-        const expanded = child.type(child.props)
+        const expanded = expandDslFunction(child)
         const expandedAst = parseMotionClipChildren(expanded)
         result.push(...expandedAst)
         break
@@ -241,7 +254,7 @@ const parseDeclareAnimationChildren = (
         result.push(parseMotion(child))
         break
       case "function":
-        const expanded = child.type(child.props)
+        const expanded = expandDslFunction(child)
         const expandedAst = parseDeclareAnimationChildren(expanded)
         result.push(...expandedAst)
         break

src/lib/character/character-unit/parser.tsx

@@ -4,7 +4,7 @@ import { PsdCharacterElement as PsdElm, type MotionClipNode, type CharacterNode,
 import { readPsd, type Psd } from "ag-psd"
 import { parsePsdCharacter } from "./parser"
 import { renderPsd } from "ag-psd-psdtool"
-import { useAnimation, useVariable, type Variable } from "../../animation"
+import { useAnimation, useVariable, type Variable, type VariableType } from "../../animation"
 import { useCurrentFrame, useGlobalCurrentFrame } from "../../frame"
 import { Sound } from "../../sound/sound"
 import { Clip, ClipSequence } from "../../clip"
@@ -260,6 +260,19 @@ type DeclareVariableRuntimeProps = {
   register: OptionRegister
 }
 
+const useTypedVariable = (value: VariableType): Variable<VariableType> => {
+  if (typeof value === "number") {
+    return useVariable(value) as Variable<VariableType>
+  }
+  if (typeof value === "string") {
+    return useVariable(value as `#${string}`) as Variable<VariableType>
+  }
+  if ("z" in value && typeof value.z === "number") {
+    return useVariable({ x: value.x, y: value.y, z: value.z }) as Variable<VariableType>
+  }
+  return useVariable({ x: value.x, y: value.y }) as Variable<VariableType>
+}
+
 const DeclareVariableRuntime = ({
   ast,
   variables,
@@ -270,7 +283,7 @@ const DeclareVariableRuntime = ({
   // DeclareVariableで受け取る型がTなので
   // ast.initValue: T
   // であり、これを使う限り問題ない
-  const variable = useVariable(ast.initValue)
+  const variable = useTypedVariable(ast.initValue)
   const newInitVariables = {[ast.variableName]: variable, ...initializingVariables}
 
   switch (ast.children.type) {
@@ -544,7 +557,7 @@ const VoiceRuntimeInner = ({
   if (!reg.current) {
       reg.current = register()
   }
-  const { update, getter, unregister } = reg.current
+  const { update, unregister } = reg.current
 
   useEffect(() => {
     return () => unregister()
@@ -597,7 +610,7 @@ const MotionRuntime = ({
   if (!reg.current) {
       reg.current = register()
   }
-  const { update, getter, unregister } = reg.current
+  const { update, unregister } = reg.current
 
   useEffect(() => {
     return () => unregister()