diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml index fb4d2a5..6285f6b 100644 --- a/.github/workflows/codeql-analysis.yml +++ b/.github/workflows/codeql-analysis.yml @@ -13,12 +13,12 @@ name: "CodeQL" on: push: - branches: [ main, develop ] + branches: [ "main", "develop" ] pull_request: # The branches below must be a subset of the branches above - branches: [ main, develop ] + branches: [ "main", "develop" ] schedule: - - cron: '38 23 * * 1' + - cron: '44 22 * * 5' jobs: analyze: @@ -32,10 +32,11 @@ jobs: strategy: fail-fast: false matrix: - language: [ 'javascript' ] - # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ] - # Learn more: - # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed + language: [ 'javascript-typescript' ] + # CodeQL supports [ 'c-cpp', 'csharp', 'go', 'java-kotlin', 'javascript-typescript', 'python', 'ruby', 'swift' ] + # Use only 'java-kotlin' to analyze code written in Java, Kotlin or both + # Use only 'javascript-typescript' to analyze code written in JavaScript, TypeScript or both + # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support steps: - name: Checkout repository diff --git a/package.json b/package.json index 9774ab5..96e8da0 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,10 @@ { "name": "@next2d/framework-typescript-template", "description": "Next2D Framework default TypeScript template.", - "version": "1.0.2", + "version": "2.0.0", "homepage": "https://next2d.app", "bugs": "https://github.com/Next2D/framework-typescript-template/issues/new", - "author": "Toshiyuki Ienaga", + "author": "Toshiyuki Ienaga", "license": "MIT", "keywords": [ "Next2D", diff --git a/template.json b/template.json index 492b9a4..500a20f 100644 --- a/template.json +++ b/template.json @@ -1,19 +1,10 @@ { "package": { "dependencies": { - "@next2d/webpack-typescript-auto-loader-plugin": "*", - "@babel/core": "*", - "@babel/plugin-transform-modules-commonjs": "*", - "@babel/preset-env": "*", - "@types/jest": "*", "@typescript-eslint/eslint-plugin": "*", "@typescript-eslint/parser": "*", - "ts-jest": "*", - "ts-loader": "*", - "ts-node": "*", "typescript": "*", - "eslint": "*", - "eslint-webpack-plugin": "*" + "eslint": "*" } } } \ No newline at end of file diff --git a/template/.eslintrc.json b/template/.eslintrc.json index 5c2bcc5..97ac4d0 100644 --- a/template/.eslintrc.json +++ b/template/.eslintrc.json @@ -1,10 +1,11 @@ { "env": { - "es6": true + "browser": true, + "es2021": true }, "parserOptions": { "sourceType": "module", - "ecmaVersion": 2017 + "ecmaVersion": "latest" }, "extends": "plugin:@typescript-eslint/eslint-recommended", "parser": "@typescript-eslint/parser", diff --git a/template/.gitignore b/template/.gitignore index 697d613..fb28a55 100644 --- a/template/.gitignore +++ b/template/.gitignore @@ -1,11 +1,28 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + node_modules dist -coverage +dist-ssr +*.local -.DS_Store +# Editor directories and files +.vscode/* +!.vscode/extensions.json .idea -Thumbs.db +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? src/Packages.ts src/config/Config.ts -electron.index.json +electron.index.json \ No newline at end of file diff --git a/template/README.md b/template/README.md index 6b61422..5721f1a 100644 --- a/template/README.md +++ b/template/README.md @@ -35,5 +35,4 @@ Multi-platform builder, writes to various platforms including macOS, Windows, iO Builds apps for the environment specified by env=***. ### Flowchart -![Flowchart](https://raw.githubusercontent.com/Next2D/framework/main/Framework_Flowchart.svg) - +![Flowchart](https://raw.githubusercontent.com/Next2D/framework/main/Framework_Flowchart.svg) \ No newline at end of file diff --git a/template/__tests__/model/empty b/template/__tests__/model/empty deleted file mode 100644 index e69de29..0000000 diff --git a/template/index.html b/template/index.html new file mode 100644 index 0000000..d062bca --- /dev/null +++ b/template/index.html @@ -0,0 +1,11 @@ + + + + + + Local Environments + + + + + \ No newline at end of file diff --git a/template/package.json b/template/package.json index 9906788..0267735 100644 --- a/template/package.json +++ b/template/package.json @@ -5,39 +5,39 @@ "author": "Toshiyuki Ienaga ", "license": "MIT", "main": "src/index.ts", + "type": "module", "scripts": { - "start": "webpack serve", - "ios": "npx @next2d/builder run ios --platform ios --debug", - "android": "npx @next2d/builder run android --platform android --debug", - "macos": "npx @next2d/builder --platform macos --debug", - "windows": "npx @next2d/builder --platform windows --debug", - "build": "npx @next2d/builder", - "lint": "eslint src/**/*.js", - "test": "npx jest", + "start": "vite", + "dev:ios": "npx @next2d/builder run ios --platform ios --debug", + "dev:android": "npx @next2d/builder run android --platform android --debug", + "dev:macos": "npx @next2d/builder --platform macos --debug", + "dev:windows": "npx @next2d/builder --platform windows --debug", + "dev:linux": "npx @next2d/builder --platform linux --debug", + "build:steam:windows": "npx @next2d/builder --platform steam:windows --env prd", + "build:steam:mac": "npx @next2d/builder --platform steam:mac --env prd", + "build:steam:linux": "npx @next2d/builder --platform steam:linux --env prd", + "build:web": "npx @next2d/builder --platform web --env prd", + "build": "vite build", + "lint": "eslint src/**/*.ts", + "test": "npx vitest", "generate": "npx @next2d/view-generator" }, "devDependencies": { - "@babel/core": "^7.22.11", - "@babel/preset-env": "^7.22.14", - "@capacitor/android": "^5.3.0", - "@capacitor/cli": "^5.3.0", - "@capacitor/core": "^5.3.0", - "@capacitor/ios": "^5.3.0", - "@next2d/env": "^1.1.1", - "@next2d/framework": "^1.6.2", - "@next2d/webpack-typescript-auto-loader-plugin": "^1.0.1", - "@types/jest": "^29.5.4", - "@typescript-eslint/eslint-plugin": "^6.5.0", - "@typescript-eslint/parser": "^6.5.0", - "electron": "^26.1.0", - "eslint": "^8.48.0", - "eslint-webpack-plugin": "^4.0.1", - "ts-jest": "^29.1.1", - "ts-loader": "^9.4.4", - "ts-node": "^10.9.1", + "@capacitor/android": "^5.5.1", + "@capacitor/cli": "^5.5.1", + "@capacitor/core": "^5.5.1", + "@capacitor/ios": "^5.5.1", + "@next2d/env": "^2.0.2", + "@next2d/framework": "^2.0.0", + "@next2d/player": "^1.18.9", + "@next2d/vite-auto-loader-plugin": "^0.0.7", + "@typescript-eslint/eslint-plugin": "^6.9.1", + "@typescript-eslint/parser": "^6.9.1", + "electron": "^27.0.3", + "eslint": "^8.53.0", + "jsdom": "^22.1.0", "typescript": "^5.2.2", - "webpack": "^5.88.2", - "webpack-cli": "^5.1.4", - "webpack-dev-server": "^4.15.1" + "vite": "^4.5.0", + "vitest": "^0.34.6" } } diff --git a/template/src/App.ts b/template/src/App.ts deleted file mode 100644 index 50e1e3a..0000000 --- a/template/src/App.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { Application } from "@next2d/framework"; -import type { ConfigImpl } from "@next2d/framework"; - -/** - * @class - * @extends {Application} - */ -export class App extends Application -{ - /** - * @param {object} config - * @param {array} packages - * @public - */ - constructor (config: ConfigImpl, packages: any[]) - { - super(config, packages); - } -} \ No newline at end of file diff --git a/template/src/index.ts b/template/src/index.ts index 6b7f545..74c4a80 100644 --- a/template/src/index.ts +++ b/template/src/index.ts @@ -1,42 +1,37 @@ "use strict"; -import "@next2d/framework"; - -import { App } from "@/App"; +import { app } from "@next2d/framework"; // @ts-ignore import { config } from "@/config/Config"; // @ts-ignore import { packages } from "@/Packages"; -const app: App = new App(config, packages); -if (document.readyState === "loading") { - - const initialize = (event: Event) => - { - if (!event.target) { - return ; - } - - event.target.removeEventListener("DOMContentLoaded", initialize); - app - .run() - .then(() => - { - app.gotoView(); - }); - }; - - window.addEventListener("DOMContentLoaded", initialize); - -} else { +/** + * @return {void} + * @method + * @private + */ +const boot = (event: Event | null = null): void => +{ + if (event && event.target) { + event.target.removeEventListener("DOMContentLoaded", boot); + } app + .initialize(config, packages) .run() - .then(() => + .then((): void => { app.gotoView(); }); +}; + +if (document.readyState === "loading") { + + window.addEventListener("DOMContentLoaded", boot); + +} else { -} + boot(); -export { app }; +} \ No newline at end of file diff --git a/template/src/model/domain/callback/Background.ts b/template/src/model/domain/callback/Background.ts index 505e391..985d35e 100644 --- a/template/src/model/domain/callback/Background.ts +++ b/template/src/model/domain/callback/Background.ts @@ -1,118 +1,108 @@ // @ts-ignore import { config } from "@/config/Config"; import { context } from "@next2d/framework"; -import { Shape } from "@next2d/display"; +import { Shape, Stage } from "@next2d/display"; import { Event } from "@next2d/events"; import { Matrix } from "@next2d/geom"; -import type { DisplayObjectImpl } from "@next2d/interface"; +import { $currentPlayer } from "@next2d/util"; +import type { Player } from "@next2d/core"; import type { View } from "@next2d/framework"; +const shape: Shape = new Shape(); +shape.name = "background"; + /** - * @class + * @description 背景のグラデーション描画をセット + * Set background gradient drawing + * + * @return {void} + * @method + * @private */ -export class Background +const drawGradient = (): void => { - /** - * @type {Shape} - * @default null - * @static - */ - static shape: Shape | null = null; - - /** - * @constructor - * @public - */ - constructor () - { - if (!Background.shape) { - - const shape = new Shape(); - shape.name = "background"; - - const width = config.stage.width; - const height = config.stage.height; + const width: number = config.stage.width; + const height: number = config.stage.height; + + const matrix: Matrix = new Matrix(); + matrix.createGradientBox(width, height, Math.PI / 2); + + shape + .graphics + .clear() + .beginGradientFill( + "linear", + ["#1461A0", "#ffffff"], + [0.6, 1], + [0, 255], + matrix + ) + .drawRect(0, 0, width, height) + .endFill(); +}; - const matrix = new Matrix(); - matrix.createGradientBox(width, height, Math.PI / 2); - - shape - .graphics - .beginGradientFill( - "linear", - ["#1461A0", "#ffffff"], - [0.6, 1], - [0, 255], - matrix - ) - .drawRect(0, 0, width, height) - .endFill(); - - Background.shape = shape; - } +/** + * @description 表示範囲に合わせてShapeを拡大・縮小 + * Scale the shape to fit the display area + * + * @return {void} + * @method + * @private + */ +const changeScale = (): void => +{ + const width: number = config.stage.width; + const height: number = config.stage.height; + const player: Player = $currentPlayer(); + + const tx: number = player.x; + if (tx) { + const scaleX: number = player.scaleX; + shape.scaleX = (width + tx * 2 / scaleX) / width; + shape.x = -tx / scaleX; } - /** - * @return {void} - * @method - * @public - */ - execute () - { - const stage = context.root.stage; - if (stage && !stage.hasEventListener(Event.RESIZE)) { - stage.addEventListener(Event.RESIZE, () => - { - this._$createShape(); - }); - } - - this._$createShape(); + const ty: number = player.y; + if (ty) { + const scaleY: number = player.scaleY; + shape.scaleY = (height + ty * 2 / scaleY) / height; + shape.y = -ty / scaleY; } +}; +/** + * @class + */ +export class Background +{ /** + * @description 背景のShapeを表示されるviewにセット + * Set the background shape to the view to be displayed + * * @return {void} * @method - * @private + * @public */ - _$createShape (): void + execute (): void { const view: View | null = context.view; if (!view) { return ; } - const root = context.root; - const stage = root.stage; - if (!stage) { - return ; - } - - const player = stage.player; - if (!player) { - return ; - } - - const width: number = config.stage.width; - const height: number = config.stage.height; - - let shape: DisplayObjectImpl | null = view.getChildByName("background"); - if (!shape) { - shape = view.addChildAt(Background.shape, 0) as DisplayObjectImpl; + const stage: Stage | null = context.root.stage; + if (stage && !stage.hasEventListener(Event.RESIZE)) { + stage.addEventListener(Event.RESIZE, () => + { + changeScale(); + }); } - const tx: number = player.x; - if (tx) { - const scaleX: number = player.scaleX; - shape.scaleX = (width + tx * 2 / scaleX) / width; - shape.x = -tx / scaleX; + if (config.stage.width !== shape.width) { + drawGradient(); + changeScale(); } - const ty: number = player.y; - if (ty) { - const scaleY: number = player.scaleY; - shape.scaleY = (height + ty * 2 / scaleY) / height; - shape.y = -ty / scaleY; - } + view.addChildAt(shape, 0); } } \ No newline at end of file diff --git a/template/src/model/domain/event/home/HomeButtonMouseDownEvent.ts b/template/src/model/domain/event/home/HomeButtonMouseDownEvent.ts index 76b58df..40828ad 100644 --- a/template/src/model/domain/event/home/HomeButtonMouseDownEvent.ts +++ b/template/src/model/domain/event/home/HomeButtonMouseDownEvent.ts @@ -3,19 +3,15 @@ import type { EventDispatcherImpl } from "@next2d/interface"; import type { Sprite } from "@next2d/display"; /** - * @class + * @description Home画面のキャラクターの移動開始処理 + * Processes the start of character movement on the Home screen. + * + * @return {void} + * @method + * @public */ -export class HomeButtonMouseDownEvent +export const execute = (event: Event): void => { - /** - * @param {Event} event - * @return {void} - * @method - * @public - */ - execute (event: Event): void - { - const sprite: EventDispatcherImpl = event.currentTarget; - sprite.startDrag(); - } -} \ No newline at end of file + const sprite: EventDispatcherImpl = event.currentTarget; + sprite.startDrag(); +}; \ No newline at end of file diff --git a/template/src/model/domain/event/home/HomeButtonMouseUpEvent.ts b/template/src/model/domain/event/home/HomeButtonMouseUpEvent.ts index 210cec5..318d8eb 100644 --- a/template/src/model/domain/event/home/HomeButtonMouseUpEvent.ts +++ b/template/src/model/domain/event/home/HomeButtonMouseUpEvent.ts @@ -3,19 +3,15 @@ import type { EventDispatcherImpl } from "@next2d/interface"; import type { Sprite } from "@next2d/display"; /** - * @class + * @description Home画面のキャラクターの移動処理を終了 + * Terminates the process of moving the character on the Home screen. + * + * @param {Event} event + * @method + * @public */ -export class HomeButtonMouseUpEvent +export const execute = (event: Event): void => { - /** - * @param {Event} event - * @return {void} - * @method - * @public - */ - execute (event: Event): void - { - const sprite: EventDispatcherImpl = event.currentTarget; - sprite.stopDrag(); - } -} \ No newline at end of file + const sprite: EventDispatcherImpl = event.currentTarget; + sprite.stopDrag(); +}; \ No newline at end of file diff --git a/template/src/model/domain/event/top/TopButtonMouseUpEvent.ts b/template/src/model/domain/event/top/TopButtonMouseUpEvent.ts index c3f7652..9cd90e5 100644 --- a/template/src/model/domain/event/top/TopButtonMouseUpEvent.ts +++ b/template/src/model/domain/event/top/TopButtonMouseUpEvent.ts @@ -1,17 +1,9 @@ -import { app } from "@/index"; +import { app } from "@next2d/framework"; /** * @class */ -export class TopButtonMouseUpEvent +export const execute = (): void => { - /** - * @return {void} - * @method - * @public - */ - execute () - { - app.gotoView("home"); - } -} \ No newline at end of file + app.gotoView("home"); +}; diff --git a/template/src/model/domain/event/top/TopContentEnterFrameEvent.ts b/template/src/model/domain/event/top/TopContentEnterFrameEvent.ts deleted file mode 100644 index fc39ae1..0000000 --- a/template/src/model/domain/event/top/TopContentEnterFrameEvent.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { context } from "@next2d/framework"; -import { Event } from "@next2d/events"; -import type { EventDispatcherImpl } from "@next2d/interface"; -import type { MovieClip } from "@next2d/display"; -import type { View } from "@next2d/framework"; - -/** - * @class - */ -export class TopContentEnterFrameEvent -{ - /** - * @param {Event} event - * @return {void} - * @method - * @public - */ - execute (event: Event) - { - const content: EventDispatcherImpl = event.currentTarget; - - /** - * 最終フレームになったらイベントを終了してボタンを表示 - */ - if (content.currentFrame === content.totalFrames) { - - content.removeEventListener(Event.ENTER_FRAME, event.listener); - - const view: View | null = context.view; - if (!view) { - return ; - } - // @ts-ignore - view.button.visible = true; - } - } -} \ No newline at end of file diff --git a/template/src/model/ui/component/atom/TextComponent.ts b/template/src/model/ui/component/atom/TextComponent.ts index d634af5..16d18ea 100644 --- a/template/src/model/ui/component/atom/TextComponent.ts +++ b/template/src/model/ui/component/atom/TextComponent.ts @@ -2,64 +2,58 @@ import { TextField } from "@next2d/display"; import type { TextFormat } from "@next2d/text"; /** - * @class + * @param {string} text + * @param {object} [props=null] + * @param {object} [format=null] + * @return {TextField} + * @method + * @public */ -export class TextComponent -{ - /** - * @param {string} text - * @param {object} [props=null] - * @param {object} [format=null] - * @return {TextField} - * @method - * @static - */ - static factory ( - text: string = "", - props: any = null, - format: any = null - ): TextField { - - const textField: TextField = new TextField(); - - if (props) { - - const keys: string[] = Object.keys(props); - for (let idx: number = 0; idx < keys.length; idx++) { - - const name: string = keys[idx]; - - if (!(name in textField)) { - continue; - } - - // @ts-ignore - textField[name] = props[name]; +export const execute = ( + text: string = "", + props: any = null, + format: any = null +): TextField => { + + const textField: TextField = new TextField(); + + if (props) { + + const keys: string[] = Object.keys(props); + for (let idx: number = 0; idx < keys.length; idx++) { + + const name: string = keys[idx]; + + if (!(name in textField)) { + continue; } - } - if (format) { + // @ts-ignore + textField[name] = props[name]; + } + } - const textFormat: TextFormat = textField.defaultTextFormat; + if (format) { - const keys: string[] = Object.keys(format); - for (let idx: number = 0; idx < keys.length; idx++) { + const textFormat: TextFormat = textField.defaultTextFormat; - const name = keys[idx]; + const keys: string[] = Object.keys(format); + for (let idx: number = 0; idx < keys.length; idx++) { - if (!(name in textFormat)) { - continue; - } + const name = keys[idx]; - // @ts-ignore - textFormat[name] = format[name]; + if (!(name in textFormat)) { + continue; } - textField.defaultTextFormat = textFormat; + // @ts-ignore + textFormat[name] = format[name]; } - textField.text = text; - - return textField; + textField.defaultTextFormat = textFormat; } -} + + textField.text = text; + + return textField; +}; diff --git a/template/src/model/ui/component/template/home/HomeButtonTemplate.ts b/template/src/model/ui/component/template/home/HomeButtonTemplate.ts index aeffdd2..0a7ba46 100644 --- a/template/src/model/ui/component/template/home/HomeButtonTemplate.ts +++ b/template/src/model/ui/component/template/home/HomeButtonTemplate.ts @@ -2,63 +2,30 @@ import { config } from "@/config/Config"; import { ButtonComponent } from "@/model/ui/component/atom/ButtonComponent"; import { HomeContent } from "@/model/application/content/HomeContent"; -import { HomeButtonMouseDownEvent } from "@/model/domain/event/home/HomeButtonMouseDownEvent"; -import { HomeButtonMouseUpEvent } from "@/model/domain/event/home/HomeButtonMouseUpEvent"; -import type { Event } from "@next2d/events"; +import { execute as homeButtonMouseDownEvent } from "@/model/domain/event/home/HomeButtonMouseDownEvent"; +import { execute as homeButtonMouseUpEvent } from "@/model/domain/event/home/HomeButtonMouseUpEvent"; +import { MouseEvent } from "@next2d/events"; /** - * @class + * @description Home画面のキャラクターを生成 + * Generate characters for the Home screen + * + * @return {HomeContent} + * @method + * @public */ -export class HomeButtonTemplate +export const execute = (): HomeContent => { - private _$homeButtonMouseDownEvent: HomeButtonMouseDownEvent; - private _$homeButtonMouseUpEvent: HomeButtonMouseUpEvent; + const homeContent: HomeContent = ButtonComponent.factory(new HomeContent()); - /** - * @constructor - * @public - */ - constructor () - { - /** - * @type {HomeButtonMouseDownEvent} - * @private - */ - this._$homeButtonMouseDownEvent = new HomeButtonMouseDownEvent(); + homeContent.x = config.stage.width / 2 - 4; + homeContent.y = config.stage.height / 2; - /** - * @type {HomeButtonMouseUpEvent} - * @private - */ - this._$homeButtonMouseUpEvent = new HomeButtonMouseUpEvent(); - } + homeContent.scaleX = 2; + homeContent.scaleY = 2; - /** - * @return {HomeContent} - * @method - * @public - */ - factory (): HomeContent - { - const homeContent: HomeContent = ButtonComponent.factory(new HomeContent()); + homeContent.addEventListener(MouseEvent.MOUSE_DOWN, homeButtonMouseDownEvent); + homeContent.addEventListener(MouseEvent.MOUSE_UP, homeButtonMouseUpEvent); - homeContent.x = config.stage.width / 2 - 4; - homeContent.y = config.stage.height / 2; - - homeContent.scaleX = 2; - homeContent.scaleY = 2; - - const { MouseEvent } = next2d.events; - homeContent.addEventListener(MouseEvent.MOUSE_DOWN, (event: Event) => - { - this._$homeButtonMouseDownEvent.execute(event); - }); - - homeContent.addEventListener(MouseEvent.MOUSE_UP, (event: Event) => - { - this._$homeButtonMouseUpEvent.execute(event); - }); - - return homeContent; - } -} \ No newline at end of file + return homeContent; +}; \ No newline at end of file diff --git a/template/src/model/ui/component/template/home/HomeTextTemplate.ts b/template/src/model/ui/component/template/home/HomeTextTemplate.ts index 16b6341..439e27e 100644 --- a/template/src/model/ui/component/template/home/HomeTextTemplate.ts +++ b/template/src/model/ui/component/template/home/HomeTextTemplate.ts @@ -1,34 +1,31 @@ // @ts-ignore import { config } from "@/config/Config"; -import { TextComponent } from "@/model/ui/component/atom/TextComponent"; +import { execute as textComponent } from "@/model/ui/component/atom/TextComponent"; import { response } from "@next2d/framework"; import type { TextField } from "@next2d/display"; import type { HomeContent } from "@/model/application/content/HomeContent"; /** - * @class + * @description Home画面のTextFieldを作成 + * Create a TextField for the Home screen + * + * @return {TextField} + * @method + * @public */ -export class HomeTextTemplate +export const execute = (home_content: HomeContent): TextField => { - /** - * @return {TextField} - * @method - * @public - */ - factory (home_content: HomeContent): TextField - { - // Hello, World. - const textField: TextField = TextComponent.factory( - response.get("HomeText").word, - { - "autoSize": "center", - "type": "input" - } - ); + // Hello, World. + const textField: TextField = textComponent( + response.get("HomeText").word, + { + "autoSize": "center", + "type": "input" + } + ); - textField.x = config.stage.width / 2 - textField.width / 2; - textField.y = home_content.y + home_content.height / 2 + textField.height; + textField.x = config.stage.width / 2 - textField.width / 2; + textField.y = home_content.y + home_content.height / 2 + textField.height; - return textField; - } -} \ No newline at end of file + return textField; +}; \ No newline at end of file diff --git a/template/src/model/ui/component/template/top/TopButtonTemplate.ts b/template/src/model/ui/component/template/top/TopButtonTemplate.ts index 7c85583..1beece0 100644 --- a/template/src/model/ui/component/template/top/TopButtonTemplate.ts +++ b/template/src/model/ui/component/template/top/TopButtonTemplate.ts @@ -1,67 +1,44 @@ // @ts-ignore import { config } from "@/config/Config"; import { ButtonComponent } from "@/model/ui/component/atom/ButtonComponent"; -import { TopButtonMouseUpEvent } from "@/model/domain/event/top/TopButtonMouseUpEvent"; -import { TextComponent } from "@/model/ui/component/atom/TextComponent"; +import { execute as topButtonMouseUpEvent } from "@/model/domain/event/top/TopButtonMouseUpEvent"; +import { execute as textComponent } from "@/model/ui/component/atom/TextComponent"; import { response } from "@next2d/framework"; import { MouseEvent } from "@next2d/events"; import type { TopContent } from "@/model/application/content/TopContent"; -import type { TextField } from "@next2d/display"; +import type { TextField, MovieClip } from "@next2d/display"; +import type { ParentImpl } from "@next2d/interface"; /** - * @class + * @description Topページのボタンを生成 + * Generate Top page button + * + * @return {MovieClip} + * @method + * @public */ -export class TopButtonTemplate +export const execute = (top_content: TopContent): ParentImpl => { - private _$buttonComponentMouseUpEvent: TopButtonMouseUpEvent; + const button: ParentImpl = ButtonComponent.factory(); /** - * @constructor - * @public + * @see domain/event/top/TopButtonMouseUpEvent.js + * ドメイン層から専用のイベントを起動 + * Launch dedicated events from the domain layer */ - constructor () - { - /** - * @type {TopButtonMouseUpEvent} - * @private - */ - this._$buttonComponentMouseUpEvent = new TopButtonMouseUpEvent(); - } + button.addEventListener(MouseEvent.MOUSE_UP, topButtonMouseUpEvent); - /** - * @param {TopContent} top_content - * @return {Sprite} - * @method - * @public - */ - factory (top_content: TopContent) - { - const button = ButtonComponent.factory(); - button.name = "button"; - button.visible = false; - - button.addEventListener(MouseEvent.MOUSE_UP, () => + const textField: TextField = textComponent( + response.get("TopText").word, { - /** - * @see domain/event/top/TopButtonMouseUpEvent.js - * ドメイン層から専用のイベントを起動 - * Launch dedicated events from the domain layer - */ - this._$buttonComponentMouseUpEvent.execute(); - }); - - const textField: TextField = TextComponent.factory( - response.get("TopText").word, - { - "autoSize": "center" - } - ); + "autoSize": "center" + } + ); - textField.x = config.stage.width / 2 - textField.width / 2; - textField.y = top_content.y + top_content.height / 2 + textField.height; + textField.x = config.stage.width / 2 - textField.width / 2; + textField.y = top_content.y + top_content.height / 2 + textField.height; - button.addChild(textField); + button.addChild(textField); - return button; - } -} \ No newline at end of file + return button; +}; \ No newline at end of file diff --git a/template/src/model/ui/component/template/top/TopContentTemplate.ts b/template/src/model/ui/component/template/top/TopContentTemplate.ts index 9583e25..dd05bca 100644 --- a/template/src/model/ui/component/template/top/TopContentTemplate.ts +++ b/template/src/model/ui/component/template/top/TopContentTemplate.ts @@ -1,54 +1,24 @@ import { TopContent } from "@/model/application/content/TopContent"; -import { TopContentEnterFrameEvent } from "@/model/domain/event/top/TopContentEnterFrameEvent"; -import { Event } from "@next2d/events"; import { config } from "@/config/Config"; /** - * @class + * @description Topページのログ画像をAnimationToolのJSONから作成 + * Top page log image created from AnimationTool JSON + * + * @return {TopContent} + * @method + * @public */ -export class TopContentTemplate +export const execute = (): TopContent => { - private _$topContentEnterFrameEvent: TopContentEnterFrameEvent; - /** - * @constructor - * @public + * ロゴアニメーションをNoCodeToolのJSONから生成 + * Logo animation generated from NoCodeTool's JSON */ - constructor () - { - /** - * @type {TopContentEnterFrameEvent} - * @private - */ - this._$topContentEnterFrameEvent = new TopContentEnterFrameEvent(); - } - - /** - * @return {TopContent} - * @method - * @public - */ - factory () - { - /** - * ロゴアニメーションをNoCodeToolのJSONから生成 - * Logo animation generated from NoCodeTool's JSON - */ - const topContent = new TopContent(); - - topContent.x = config.stage.width / 2; - topContent.y = config.stage.height / 2; + const topContent = new TopContent(); - topContent.addEventListener(Event.ENTER_FRAME, (event: Event) => - { - /** - * @see domain/event/top/TopContentEnterFrameEvent.js - * ドメイン層から専用のイベントを起動 - * Launch dedicated events from the domain layer - */ - this._$topContentEnterFrameEvent.execute(event); - }); + topContent.x = config.stage.width / 2; + topContent.y = config.stage.height / 2; - return topContent; - } -} \ No newline at end of file + return topContent; +}; \ No newline at end of file diff --git a/template/src/view/home/HomeViewModel.ts b/template/src/view/home/HomeViewModel.ts index 91d0040..88a1e17 100644 --- a/template/src/view/home/HomeViewModel.ts +++ b/template/src/view/home/HomeViewModel.ts @@ -1,6 +1,8 @@ import { View, ViewModel } from "@next2d/framework"; -import { HomeButtonTemplate } from "@/model/ui/component/template/home/HomeButtonTemplate"; -import { HomeTextTemplate } from "@/model/ui/component/template/home/HomeTextTemplate"; +import { execute as homeButtonTemplate } from "@/model/ui/component/template/home/HomeButtonTemplate"; +import { execute as homeTextTemplate } from "@/model/ui/component/template/home/HomeTextTemplate"; +import type { HomeContent } from "@/model/application/content/HomeContent"; +import type { TextField } from "@next2d/display"; /** * @class @@ -29,20 +31,20 @@ export class HomeViewModel extends ViewModel { return this .factory(view) - .then((view) => + .then((view): Promise => { /** * アニメーションをNoCodeToolのJSONから生成 * Generate animation from NoCodeTool's JSON */ - const homeContent = new HomeButtonTemplate().factory(); + const homeContent: HomeContent = homeButtonTemplate(); view.addChild(homeContent); /** * Hello, Worldのテキストを生成 * Generate Hello, World text */ - const homeTextField = new HomeTextTemplate().factory(homeContent); + const homeTextField: TextField = homeTextTemplate(homeContent); view.addChild(homeTextField); return Promise.resolve(view); diff --git a/template/src/view/top/TopViewModel.ts b/template/src/view/top/TopViewModel.ts index d8b9cf1..0112a26 100644 --- a/template/src/view/top/TopViewModel.ts +++ b/template/src/view/top/TopViewModel.ts @@ -1,6 +1,9 @@ import { View, ViewModel } from "@next2d/framework"; -import { TopContentTemplate } from "@/model/ui/component/template/top/TopContentTemplate"; -import { TopButtonTemplate } from "@/model/ui/component/template/top/TopButtonTemplate"; +import { execute as topContentTemplate } from "@/model/ui/component/template/top/TopContentTemplate"; +import { execute as topButtonTemplate } from "@/model/ui/component/template/top/TopButtonTemplate"; +import type { TopContent } from "@/model/application/content/TopContent"; +import type { MovieClip } from "@next2d/display"; +import type { ParentImpl } from "@next2d/interface"; /** * @class @@ -29,20 +32,20 @@ export class TopViewModel extends ViewModel { return this .factory(view) - .then((view) => + .then((view): Promise => { /** - * ロゴアニメーションをNoCodeToolのJSONから生成 - * Logo animation generated from NoCodeTool's JSON + * ロゴアニメーションをAnimation ToolのJSONから生成 + * Logo animation generated from Animation Tool JSON */ - const topContent = new TopContentTemplate().factory(); - view.addChild(topContent); + const topContent: TopContent = topContentTemplate(); + view.addChild(topContentTemplate()); /** * ボタンエリアを生成 * Generate button area */ - const button = new TopButtonTemplate().factory(topContent); + const button: ParentImpl = topButtonTemplate(topContent); view.addChild(button); return Promise.resolve(view); diff --git a/template/tsconfig.json b/template/tsconfig.json index a7c6391..ee8dee0 100644 --- a/template/tsconfig.json +++ b/template/tsconfig.json @@ -1,17 +1,30 @@ { "compilerOptions": { - "strict": true, + "target": "ES2020", + "useDefineForClassFields": true, + "module": "ESNext", + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "Bundler", + "allowImportingTsExtensions": true, "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true, + + "types": [ + "vitest/globals" + ], + "esModuleInterop": true, - "skipLibCheck": true, - "declaration": true, - "allowJs": true, - "target": "es6", - "lib": ["es6", "dom"], - "module": "es6", - "moduleResolution": "node", "baseUrl": "./src", - "outDir": "./dist/", "paths": { "@/*": ["*"] } @@ -20,5 +33,7 @@ "src/**/*.ts", "@types/**/*.ts" ], - "exclude": ["node_modules"] + "exclude": [ + "node_modules/**" + ] } \ No newline at end of file diff --git a/template/vite.config.ts b/template/vite.config.ts new file mode 100644 index 0000000..7bb4a80 --- /dev/null +++ b/template/vite.config.ts @@ -0,0 +1,46 @@ +import { defineConfig } from "vite"; +import path from "path"; +import env from "@next2d/env"; +import autoLoader from "@next2d/vite-auto-loader-plugin"; + +const port: number = 5173; +export default defineConfig({ + "build": { + "target": "esnext", + "modulePreload": { + "polyfill": false + }, + "rollupOptions": { + "output": { + "entryFileNames": "assets/js/app.js" + } + } + }, + "plugins": [ + autoLoader(env()) + ], + "server": { + "open": "index.html", + "port": port, + "proxy": { + "/content": { + "target": `http://localhost:${port}`, + "rewrite": (path) => path.replace(/^\/content/, "/mock/content") + }, + "/api": { + "target": `http://localhost:${port}`, + "rewrite": (path) => path.replace(/^\/api/, "/mock/api") + } + } + }, + "resolve": { + "alias": { + "@": path.resolve(process.cwd(), "./src") + } + }, + "test": { + "globals": true, + "environment": "jsdom", + "include": ["src/**/*.test.ts"] + } +}); \ No newline at end of file diff --git a/template/webpack.config.js b/template/webpack.config.js deleted file mode 100644 index 7b404fa..0000000 --- a/template/webpack.config.js +++ /dev/null @@ -1,60 +0,0 @@ -const path = require("path"); -const env = require("@next2d/env"); - -const ESLintPlugin = require("eslint-webpack-plugin"); -const Next2DWebpackTypescriptAutoLoaderPlugin = require("@next2d/webpack-typescript-auto-loader-plugin"); -const object = env(); - -module.exports = { - "mode": "development", - "entry": path.resolve(__dirname, "src/index.ts"), - "output": { - "filename": "app.js", - "path": path.resolve(__dirname, `dist/web/${object.environment}`) - }, - "resolve": { - "alias": { - "@": path.resolve(__dirname, "src") - }, - "extensions": [".ts", ".js"] - }, - "module": { - "rules": [ - { - "test": /\.(png|svg|jpg|jpeg|gif)$/i, - "type": "asset/inline" - }, - { - "test": /\.ts$/, - "loader": "ts-loader" - } - ] - }, - "plugins": [ - // If you use eslint, please uncomment it. - new ESLintPlugin({ - "extensions": [".ts", ".js"], - "exclude": "node_modules" - }), - new Next2DWebpackTypescriptAutoLoaderPlugin(object, { "LICENSE": false }) - ], - "devServer": { - "static": [ - { "directory": path.resolve(__dirname, `dist/web/${object.environment}`) }, - { "directory": path.resolve(__dirname, "mock") } - ], - "watchFiles": "src/config/*.json", - "historyApiFallback": true, - "compress": false, - "open": true - }, - "watchOptions": { - "ignored": [ - path.resolve(__dirname, "src/config/Config.ts"), - path.resolve(__dirname, "src/Packages.ts") - ] - }, - "performance": { - "hints": false - } -};