v1.0.0 (beta) (#622)

* refinement

* mark as wip

* mark as wip

* update env

* update env

* add tests

* chore licens

* chore

* add playwright

* fmt

* int:text

* chore component emits

* feat: unhandled props

* feat: unhandled props

* feat: slot

* feat

* refinement

* refinement

* refinement

* refinement

* refinement

* refinement

* refinement

* refinement

* refinement

* refinement

* refinement

* refinement

* refinement

* refinement

* refinement

* refinement

* refinement

* refinement

* refinement

* refinement

* refinement

Author: ubugeeei

.editorconfig

@@ -16,7 +16,7 @@ First, let's talk about the top-level directories:
 ```sh
 book # Contains materials related to the online book
 
-packages # Contains the latest source code of chibivue. Not directly related to the online book.
+impl # Contains the latest source code of chibivue packages (runtime-core, runtime-dom, reactivity, compiler-core, compiler-dom, compiler-sfc, compiler-vapor, runtime-vapor, server-renderer, etc.)
 
 examples # Contains sample code using the packages. Not directly related to the online book.
 
@@ -48,32 +48,85 @@ You can choose any name for the repository. Feel free to set other information a
 
 #### Installing the necessary tools
 
-- [Node.js](https://nodejs.org/en) (v22.x)
-- [pnpm](https://pnpm.io/) (v9.x)
+- [Node.js](https://nodejs.org/en) (v24+)
+- [pnpm](https://pnpm.io/) (v10+)
 - [@antfu/ni](https://github.com/antfu/ni)
   ni is a great package manager wrapper created by [Anthony Fu](https://github.com/antfu). We assume the use of ni in the chibivue documentation.
 
-### Starting the playground
+### Getting Started
 
-First, install the dependencies.
+First, install the dependencies and set up the playground.
 
 ```sh
-ni
+ni && nr setup
 ```
 
-Then, run the following command to start the development server for the online book.
+Then, you can start the development server.
 
 ```sh
-nr book:dev
+nr dev
 ```
 
+### Available Scripts
+
+| Script | Description |
+|--------|-------------|
+| **Setup** | |
+| `setup` | Install dependencies and generate playground |
+| `setup:dev` | Generate playground files to examples/playground |
+| `setup:vue` | Set up Vue.js core comparison environment |
+| `setup:book` | Generate chibivue implementation for book readers |
+| **Development** | |
+| `dev` | Start playground dev server |
+| `dev:app` | Start app example dev server |
+| `dev:vapor` | Start vapor mode example dev server |
+| `dev:vue` | Start Vue.js core dev server for comparison |
+| **Build & Quality** | |
+| `build` | Build all packages |
+| `clean` | Remove all dist folders |
+| `typecheck` | Run type checking (tsgo) |
+| `lint` | Run linter (oxlint) |
+| `lint:fix` | Run linter with auto-fix |
+| `fmt` | Format code (oxfmt) |
+| `fmt:check` | Check code formatting |
+| `test` | Run tests once |
+| `test:watch` | Run tests in watch mode |
+| `check` | Run all checks (lint, fmt, typecheck, build, test) |
+| **Book** | |
+| `dev` | Start online book dev server |
+| `build` | Build online book |
+| `preview` | Preview built online book |
+| `lint:text` | Lint book text |
+
+### Running book chapter implementations
+
 If you want to run the source code for each chapter, you can do so with the following command.
 
 ```sh
 cd book/impls/${section-name}/${chapter-name}
 nr dev
 ```
 
+### Book Playground
+
+The project includes a WebContainer-based playground (`book/playground`) that allows readers to try each chapter's implementation directly in the browser.
+
+To start the playground:
+
+```sh
+nr play:generate  # Generate chapter data from book/impls
+nr play           # Start the playground dev server
+```
+
+The playground supports:
+- Selecting different chapters to explore
+- Editing code with Monaco editor
+- Running the development server in the browser
+- Persisting edits to localStorage
+- Resetting files to their original state
+
+If you modify chapter implementations in `book/impls/`, run `nr play:generate` to update the playground data.
+
 #### Creating a branch (start making changes)
 
 Clone the forked repository and create a branch.
@@ -125,6 +178,6 @@ Basically, all PRs are managed by @ubugeeei, so please contact @ubugeeei for any
 
 This is a guide to the changes you make. Here are a few points to keep in mind.
 
-- When making changes to the online book, please make sure that the content is consistent in both the Japanese and English versions.
+- When making changes to the online book, please make sure that the content is consistent across all language versions (English, Japanese, Simplified Chinese, Traditional Chinese).
 - When making changes to the source code of each chapter, please appropriately incorporate those changes into the source code of subsequent chapters.
 - When including images, figures, or text from other sources, please make sure to provide proper attribution.

.github/contributing.md

@@ -6,7 +6,7 @@ on:
       - '**'
 
 permissions:
-  contents: read # to fetch code (actions/checkout)
+  contents: read
 
 jobs:
   check:
@@ -16,39 +16,50 @@ jobs:
         uses: actions/checkout@v4
         with:
           fetch-depth: 0
+
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: 22
-      - uses: pnpm/action-setup@v2
+          node-version-file: 'package.json'
+
+      - uses: pnpm/action-setup@v4
         name: Install pnpm
-        with:
-          version: 9
-          run_install: false
+
       - name: Get pnpm store directory
         shell: bash
-        run: |
-          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+        run: echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
       - uses: actions/cache@v4
         name: Setup pnpm cache
         with:
           path: ${{ env.STORE_PATH }}
           key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
             ${{ runner.os }}-pnpm-store-
+
       - name: Install dependencies
         run: pnpm install
+
+      - name: Install Playwright browsers
+        run: pnpm exec playwright install --with-deps chromium
+
       - name: Check fmt
         run: pnpm fmt:check
+
       - name: Check lint
         run: pnpm lint
+
       - name: Check lint text
         run: pnpm lint:text
+
       - name: Check types
-        run: pnpm tsc --noEmit
-      - name: Check building
-        run: pnpm build
-      - name: Check test (e2e)
+        run: pnpm check
+
+      - name: Check impl building
+        run: pnpm impl:build
+
+      - name: Check test
         run: pnpm test
+
       - name: Build book
-        run: pnpm run book:build
+        run: pnpm build

.github/workflows/check.yml

@@ -23,6 +23,7 @@ jobs:
         uses: actions/checkout@v4
         with:
           fetch-depth: 0
+
       - name: Check if it's the original repo and the main branch
         run: |
           if [[ "${{ github.repository }}" == "ubugeeei/chibivue" && "${{ github.ref }}" == "refs/heads/main" ]]; then
@@ -31,32 +32,36 @@ jobs:
             echo "This is a fork or a different branch, skipping the workflow."
             exit 0
           fi
+
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: 22
-      - uses: pnpm/action-setup@v2
+          node-version-file: 'package.json'
+
+      - uses: pnpm/action-setup@v4
         name: Install pnpm
-        with:
-          version: 9
-          run_install: false
+
       - name: Get pnpm store directory
         shell: bash
-        run: |
-          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+        run: echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
       - uses: actions/cache@v4
         name: Setup pnpm cache
         with:
           path: ${{ env.STORE_PATH }}
           key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
             ${{ runner.os }}-pnpm-store-
+
       - name: Setup Pages
         uses: actions/configure-pages@v5
+
       - name: Install dependencies
         run: pnpm install
+
       - name: Build with VitePress
-        run: pnpm run book:build
+        run: pnpm build
+
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:
@@ -69,11 +74,3 @@ jobs:
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v4
-
-  notify:
-    runs-on: ubuntu-latest
-    needs: deploy
-    steps:
-      - name: notify
-        run: |
-          curl -H 'Content-Type:application/json' "${{secrets.DISCORD_WEBHOOK_URL}}" -d '{"content": "Deployed Online Book!\n ${{ github.event.repository.url }}/actions/runs/${{ github.run_id }}"}'

.github/workflows/deploy.yml

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://raw.githubusercontent.com/oxc-project/oxlint/main/npm/oxlint/configuration_schema.json",
+  "ignorePatterns": ["examples/vuejs-core"],
+  "rules": {
+    "no-unused-vars": "off",
+    "no-unused-expressions": "off",
+    "no-useless-escape": "off",
+    "no-this-alias": "off",
+    "no-async-promise-executor": "off",
+    "only-used-in-recursion": "off",
+    "no-non-null-asserted-optional-chain": "off",
+    "no-wrapper-object-types": "off",
+    "unicorn/no-new-array": "off",
+    "unicorn/no-useless-spread": "off",
+    "unicorn/no-useless-fallback-in-spread": "off"
+  }
+}

.oxlintrc.json

@@ -0,0 +1,5 @@
+{
+  "recommendations": [
+    "oxc.oxc-vscode"
+  ]
+}

.prettierignore

@@ -18,14 +18,16 @@
     "lightningcss",
     "nocheck",
     "onwarn",
+    "oxfmt",
+    "oxlint",
     "paren",
     "Parens",
     "RAWTEXT",
     "RCDATA",
     "resetsix",
+    "rolldown",
     "textlint",
     "tokei",
-    "tseslint",
     "unref",
     "vdom",
     "vitepress",
@@ -40,5 +42,11 @@
     "vuejs-core": "vue",
     "@extensions": "lib"
   },
-  "material-icon-theme.files.associations": {}
+  "material-icon-theme.files.associations": {},
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "oxc.oxc-vscode",
+  "editor.codeActionsOnSave": {
+    "source.fixAll.oxc": "explicit"
+  },
+  "oxc.enable": true
 }

.prettierrc

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023-present ubugeeei
+
+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.