feat!: initial working demo

.github/workflows/pages.yaml

@@ -0,0 +1,49 @@
+name: Publish on GitHub Pages
+
+on:
+  push:
+    branches: [ main ]
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency: pages
+
+env:
+  DENO_DIR: /home/runner/.cache/deno
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Clone repository
+        uses: actions/checkout@v4
+
+      - name: Cache Deno dependencies
+        uses: actions/cache@v4
+        with:
+          path: ${{ env.DENO_DIR }}
+          key: ${{ hashFiles('deno.lock') }}
+
+      - name: Setup Deno environment
+        uses: denoland/setup-deno@v1
+        with:
+          deno-version: v1.x
+
+      - name: Build site
+        run: deno task build
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v2
+        with:
+          path: '_site'
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1

.github/workflows/test.yaml

@@ -0,0 +1,53 @@
+name: Tests
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+env:
+  DENO_DIR: /home/runner/.cache/deno
+
+jobs:
+  lint_and_fmt:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Cache Deno dependencies
+        uses: actions/cache/restore@v4
+        with:
+          path: ${{ env.DENO_DIR }}
+          key: ${{ hashFiles('deno.lock') }}
+
+      - name: Setup Deno
+        uses: denoland/setup-deno@v1
+
+      - name: Lint files
+        run: deno lint
+      - name: Check formatting
+        run: deno fmt --check
+
+  test:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        deno: [v1.x, canary]
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Cache Deno dependencies
+        uses: actions/cache/restore@v4
+        with:
+          path: ${{ env.DENO_DIR }}
+          key: ${{ hashFiles('deno.lock') }}
+
+      - name: Setup Deno
+        uses: denoland/setup-deno@v1
+        with:
+          deno-version: ${{ matrix.deno }}
+
+      - name: Run unit tests on Deno
+        run: deno test --allow-none

.vscode/settings.json

@@ -4,5 +4,6 @@
 		"editor.defaultFormatter": "denoland.vscode-deno"
 	},
 	"deno.config": "./deno.jsonc",
-	"deno.enable": true
+	"deno.enable": true,
+	"window.title": "${dirty}${activeEditorLong}"
 }

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Danggeun Market Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,9 +1,51 @@
 # StackGraph
 
-**StackGraph**는 JSX 컴포넌트 관계도와 메타데이터를 정적 분석해 시각화해요.
+**StackGraph**는 [타입스크립트 AST 정적 분석](https://github.com/dsherret/ts-morph)을 통해 변수 단위의 의존성을 분석하고 시각화하는 툴킷을 제공해요.
+
+- 컴포넌트 사이의 의존성을 관계도로 시각화해요.
+- [Stackflow](https://github.com/daangn/stackflow)의 `push`를 추적해 화면간 관계도를 시각화해요.
+- 이벤트 로깅 함수를 추적해 페이지에서 발생하는 모든 이벤트를 보여줘요.
+
+**StackGraph**는 기존 의존성 정적 분석 솔루션과 대비해서 어떤 장점이 있을까요?
+
+- 파일이 아닌 **선언** (변수, 클래스) 단위로 의존성을 분석해요.
+- 의존성 분석과 시각화 단계가 분리되어 있어 분석 결과가 프레임워크에 종속되지 않아요.
+
+> **StackGraph**는 아직 알파 버전으로, 모든 릴리즈에서 breaking change가 발생할 수 있어요.
 
 ## 시작하기
 
+**StackGraph**는 Deno로 작성되었어요. 다음 명령어로 Deno를 설치해요.
+
+```sh
+$ brew install deno
+```
+
+프로젝트에 TypeScript 파일을 하나 생성하고, `StackGraph` 인스턴스를 초기화해요.
+
+```ts
+import { StackGraph } from "https://raw.githubusercontent.com/daangn/stackgraph/main/graph/fluent.ts"
+
+const graph = new StackGraph()
+```
+
+<detail>
+<summary>VSCode에서 Deno Extension 사용하기</summary>
+
+<!-- deno-fmt-ignore -->
+> VSCode에서 타입스크립트 LSP와 [Deno Extension](https://marketplace.visualstudio.com/items?itemName=denoland.vscode-deno)이 충돌하는 것을 막기 위해 `.vscode/settings.json`에 다음과 같이 설정을 추가해주세요.
+>
+> ```json
+> {
+>	  "deno.enable": false,
+>	  "deno.enablePaths": ["./deno_scripts", "./some_deno_file.ts"] // 파일 또는 디렉터리 경로
+> }
+> ```
+>
+> 더 자세한 내용은 Deno 공식 문서의 [설치법](https://docs.deno.com/runtime/manual/)과 [VSCode에서 사용법](https://docs.deno.com/runtime/manual/references/vscode_deno/)을 참고해주세요.
+
+</detail>
+
 ### 데이터 준비하기
 
 다음 형태의 JSON 파일을 준비해주세요.
@@ -22,10 +64,7 @@ export type LabelOption = {
 ### 렌더링하기
 
 ```sh
-$ git clone https://github.com/daangn/stackgraph
-$ cd stackgraph
-
-$ deno run -A render/build.ts <data.json 파일 경로>
+$ deno run -A https://raw.githubusercontent.com/daangn/stackgraph/main/render/build.ts <data.json 파일 경로>
 
 $ deno task serve
 ```

_config.ts

@@ -1,8 +1,10 @@
 import lume from "lume/mod.ts"
+import codeHighlight from "lume/plugins/code_highlight.ts"
 
-const site = lume({ src: "render" })
+const site = lume({ src: "doc" })
 
-site.copy("index.html", "index.html")
 site.copy("assets", "assets")
 
+site.use(codeHighlight())
+
 export default site

deno.jsonc

@@ -1,5 +1,5 @@
 {
-	"exclude": ["render/assets", "_site"],
+	"exclude": ["doc/assets", "render/assets", "_site"],
 	"tasks": {
 		"lume": "echo \"import 'lume/cli.ts'\" | deno run --unstable -A -",
 		"build": "deno task lume",
@@ -11,12 +11,13 @@
 		"proseWrap": "never"
 	},
 	"compilerOptions": {
-		"allowJs": false,
+		"allowJs": true,
+		"checkJs": true,
 		"exactOptionalPropertyTypes": true,
 		"lib": ["deno.window", "dom"],
 		"jsx": "precompile",
 		"jsxImportSource": "npm:preact",
-		"types": ["./main.d.ts", "lume/types.ts"]
+		"types": ["./render/main.d.ts", "lume/types.ts"]
 	},
 	"imports": {
 		"lume/": "https://deno.land/x/[email protected]/"