@hatiolab/things-scene 9.0.0-beta.31 → 9.0.0-beta.33

package/README.md

@@ -1,16 +1,81 @@
-# things-scene
+# Things-Scene
 
-[![npm version](https://badge.fury.io/js/%40hatiolab%2Fthings-scene.svg)](https://badge.fury.io/js/%40hatiolab%2Fthings-scene)
+Things-Scene은 웹 애플리케이션을 위한 2D 그래픽 라이브러리입니다.
 
-## 2D 그래픽 라이브러리
+## 주요 특징
 
-## build
+- 캔버스 기반 고성능 2D 렌더링
+- 컴포넌트 기반 아키텍처
+- ESM 및 UMD 형식 지원
+- TypeScript 타입 정의 제공
 
-`$ yarn build`
+## 설치
 
-| type | filename            | for            | tested |
-| ---- | ------------------- | -------------- | ------ |
-| UMD  | things-scene-min.js | deprecated     | O      |
-| UMD  | things-scene.js     | modern browser | O      |
-| UMD  | things-scene-ie.js  | ie 11          | O      |
-| ESM  | things-scene.mjs    | modern browser | O      |
+```bash
+# npm 사용
+npm install @hatiolab/things-scene
+
+# yarn 사용
+yarn add @hatiolab/things-scene
+```
+
+## 사용 방법
+
+### ESM 방식 (권장)
+
+```javascript
+import { Scene, Component } from '@hatiolab/things-scene'
+
+// 씬 생성 및 렌더링
+```
+
+### UMD 방식
+
+```html
+<script src="node_modules/@hatiolab/things-scene/things-scene-min.js"></script>
+<script>
+  const { Scene, Component } = window['things-scene']
+  // 씬 생성 및 렌더링
+</script>
+```
+
+## 빌드 시스템
+
+이 프로젝트는 Rollup을 통해 다음 포맷으로 빌드됩니다:
+
+| 포맷 | 파일명              | 용도          | 비고                    |
+| ---- | ------------------- | ------------- | ----------------------- |
+| ESM  | things-scene.mjs    | 최신 브라우저 | 권장 사용 포맷          |
+| UMD  | things-scene-min.js | 모든 환경     | 레거시 지원 및 번들링용 |
+
+```bash
+# 빌드 실행
+npm run build
+```
+
+## 개발 환경
+
+개발을 위한 자세한 내용은 [DEVELOPMENT.md](./DEVELOPMENT.md)를 참조하세요.
+
+```bash
+# 개발 서버 실행
+npm run serve:dev
+```
+
+## 배포
+
+배포 절차는 [DEPLOYMENT.md](./DEPLOYMENT.md)를 참조하세요.
+
+## TypeScript 지원
+
+이 프로젝트는 TypeScript 타입 정의를 제공합니다. 기존 JavaScript 코드는 유지하면서 TypeScript 타입 시스템을 활용할 수 있습니다.
+
+```bash
+# 타입 검사 실행
+npm run type-check
+```
+
+## 라이선스
+
+이 프로젝트는 독점 라이선스로 배포됩니다.  
+라이선스 정보: [http://things-scene.hatiolab.com/EULA/](http://things-scene.hatiolab.com/EULA/)

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@hatiolab/things-scene",
-  "version": "9.0.0-beta.31",
+  "version": "9.0.0-beta.33",
   "description": "2D graphic library",
-  "main": "src/index.js",
+  "main": "things-scene-min.js",
   "module": "things-scene.mjs",
   "jsnext:main": "things-scene.mjs",
   "browser": "things-scene.mjs",
@@ -24,16 +24,24 @@
   "scripts": {
     "test": "mocha --require should --require @babel/register test/**/test-*.js",
     "test:case": "mocha --require should --require @babel/register",
+    "test:ts": "jest",
     "serve": "things-factory",
     "serve:dev": "things-factory-dev",
-    "serve:simple-http-server": "webpack-dev-server --config webpack.config.dev.js --hot --inline --host 0.0.0.0",
-    "build": "webpack && rollup -c",
+    "clean": "rimraf dist things-scene*.js *.js.map",
+    "build": "npm run clean && npm run build:rollup:prod",
+    "build:js": "babel src --out-dir dist --extensions '.js'",
+    "build:bundle": "rollup -c",
+    "build:rollup": "NODE_ENV=development rollup -c",
+    "build:rollup:prod": "NODE_ENV=production rollup -c",
+    "dev": "mkdir -p dist && npx rollup src/index.ts -o dist/things-scene.mjs -f esm -p @rollup/plugin-node-resolve -p @rollup/plugin-commonjs -p @rollup/plugin-typescript -w",
     "build:clean": "rm yarn.lock || echo 'yarn.lock not found.' && yarn install && yarn build",
     "build:client": "npm run clean:client && webpack --config node_modules/@things-factory/shell/webpack.config.js",
     "clean:client": "rm -rf dist-client",
-    "prepublish": "webpack && rollup -c",
+    "prepublish": "npm run build",
     "migration": "things-factory-migration",
-    "prettify": "prettier --write \"{src,samples,test}/**/*.{js,css,html}\""
+    "prettify": "prettier --write \"{src,samples,test}/**/*.{js,ts,css,html}\"",
+    "type-check": "tsc --noEmit",
+    "type-check:watch": "tsc --noEmit --watch"
   },
   "author": "heartyoh@hatiolab.com",
   "license": "SEE LICENSE IN http://things-scene.hatiolab.com/EULA/",
@@ -46,11 +54,17 @@
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
     "@babel/register": "^7.17.7",
     "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-node-resolve": "^14.1.0",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^9.0.0",
     "@things-factory/builder": "^9.0.0-beta",
     "@things-factory/operato-board": "^9.0.0-beta",
+    "@types/jest": "^29.0.0",
+    "@types/lodash-es": "^4.17.6",
+    "@types/node": "^18.0.0",
     "atob": "^2.1.2",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^29.0.3",
@@ -60,21 +74,19 @@
     "chai-dom": "^1.11.0",
     "gulp": "^4.0.0",
     "gulp-header-license": "^1.0.9",
+    "jest": "^29.0.0",
     "mocha": "^10.0.0",
     "prettier": "^2.6.2",
+    "rimraf": "^3.0.2",
     "rollup": "^2.70.1",
-    "rollup-plugin-babel": "^4.3.2",
+    "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-input-array": "^1.0.1",
     "rollup-plugin-terser": "^7.0.2",
     "should": "^13.2.3",
+    "ts-jest": "^29.0.0",
+    "ts-loader": "^9.3.1",
     "ts-node": "^10.7.0",
-    "tsconfig-paths": "^4.1.0",
-    "typescript": "^4.8.4",
-    "webpack": "^5.72.0",
-    "webpack-cleanup-plugin": "^0.5.1",
-    "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.8.1",
-    "workbox-webpack-plugin": "^6.5.3"
+    "tsconfig-paths": "^4.1.0"
   },
   "bugs": {
     "url": "https://github.com/hatiolab/things-scene/issues"

package/rollup.config.js

@@ -1,40 +1,67 @@
-import babel from 'rollup-plugin-babel'
 import resolve from '@rollup/plugin-node-resolve'
 import commonjs from '@rollup/plugin-commonjs'
-import { terser } from 'rollup-plugin-terser'
+import terser from '@rollup/plugin-terser'
+import typescript from '@rollup/plugin-typescript'
+import babel from '@rollup/plugin-babel'
 
-let pkg = require('./package.json')
-let plugins = [
-  resolve(),
-  babel(),
+const isProduction = process.env.NODE_ENV === 'production'
+
+// 외부 의존성 설정
+const external = ['lodash-es', 'jsonata']
+
+// 전역 변수 설정 (UMD 빌드용)
+const globals = {
+  'lodash-es': '_',
+  jsonata: 'jsonata'
+}
+
+// 기본 플러그인 설정
+const plugins = [
+  resolve({
+    browser: true,
+    extensions: ['.js', '.ts']
+  }),
   commonjs(),
-  terser()
+  typescript({
+    tsconfig: './tsconfig.json',
+    sourceMap: true,
+    include: ['src/**/*.ts', 'src/**/*.js']
+  }),
+  babel({
+    babelHelpers: 'bundled',
+    exclude: 'node_modules/**',
+    extensions: ['.js', '.ts']
+  })
 ]
 
+// 프로덕션 빌드인 경우 terser 추가
+if (isProduction) {
+  plugins.push(terser())
+}
+
 export default [
+  // ESM 빌드 설정
   {
-    input: 'src/index.js',
-    plugins,
-    output: [
-      {
-        file: 'things-scene.js',
-        name: 'scene',
-        format: 'umd',
-        banner: `/* @hatiolab/things-scene@${pkg.version} */`,
-        footer: `console.log('@hatiolab/things-scene@${pkg.version} is loaded')`
-      }
-    ]
+    input: 'src/index.ts',
+    output: {
+      file: 'things-scene.mjs',
+      format: 'esm',
+      sourcemap: true
+    },
+    external,
+    plugins
   },
+  // UMD 빌드 설정
   {
-    input: 'src/index.js',
-    plugins,
-    output: [
-      {
-        file: pkg.module,
-        format: 'esm',
-        banner: `/* @hatiolab/things-scene@${pkg.version} */`,
-        footer: `console.log('@hatiolab/things-scene@${pkg.version} is loaded')`
-      }
-    ]
+    input: 'src/index.ts',
+    output: {
+      file: 'things-scene-min.js',
+      format: 'umd',
+      name: 'things-scene',
+      globals,
+      sourcemap: true
+    },
+    external,
+    plugins
   }
 ]