From b6fc3e0ffcd9464441aad3033bd858369110f1c3 Mon Sep 17 00:00:00 2001 From: South Drifted Date: Sun, 14 Jan 2024 06:02:18 +0800 Subject: [PATCH] [optimize] simplify Source codes based on latest CellRouter & BootCell (#9) --- .eslintrc.json | 1 + .github/ISSUE_TEMPLATE/bug-developer.yml | 187 ++++++++++++++++++ .github/ISSUE_TEMPLATE/bug-user.yml | 131 ++++++++++++ .../ISSUE_TEMPLATE/feature-enhancement.yml | 35 ++++ .github/settings.yml | 85 ++++++++ .gitignore | 2 +- .gitpod.yml | 29 +++ .vscode/extensions.json | 19 ++ ReadMe.md | 49 +++-- package.json | 16 +- pnpm-lock.yaml | 144 +++++++------- src/index.less | 25 --- src/index.tsx | 1 - src/page/Clock.tsx | 6 +- src/page/Hello.tsx | 10 +- src/page/Home.tsx | 9 +- src/page/index.tsx | 46 ++--- 17 files changed, 632 insertions(+), 163 deletions(-) create mode 100644 .github/ISSUE_TEMPLATE/bug-developer.yml create mode 100644 .github/ISSUE_TEMPLATE/bug-user.yml create mode 100644 .github/ISSUE_TEMPLATE/feature-enhancement.yml create mode 100644 .github/settings.yml create mode 100644 .gitpod.yml create mode 100644 .vscode/extensions.json delete mode 100644 src/index.less diff --git a/.eslintrc.json b/.eslintrc.json index 5a3d9d2..0040e16 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -21,6 +21,7 @@ "prefer-const": "warn", "no-unused-vars": "warn", "@typescript-eslint/no-unused-vars": "warn", + "@typescript-eslint/no-unsafe-declaration-merging": "warn", "@typescript-eslint/explicit-module-boundary-types": "off" } } diff --git a/.github/ISSUE_TEMPLATE/bug-developer.yml b/.github/ISSUE_TEMPLATE/bug-developer.yml new file mode 100644 index 0000000..3880f58 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/bug-developer.yml @@ -0,0 +1,187 @@ +name: 🐛 Developer Bug report +description: File a Code bug/issue +title: +labels: + - bug +body: + - type: checkboxes + attributes: + label: Is there an existing issue for this? + description: Please search to see if an issue already exists for the bug you encountered. + options: + - label: I have searched the existing issues + required: true + + - type: textarea + attributes: + label: Current Behavior + description: A concise description of what you're experiencing. + validations: + required: true + + - type: textarea + attributes: + label: Expected Behavior + description: A concise description of what you expected to happen. + validations: + required: true + + - type: textarea + attributes: + label: Steps To Reproduce + description: Steps to reproduce the behavior. + placeholder: | + 1. In this environment... + 2. With this config... + 3. Run '...' + 4. See error... + validations: + required: true + + - type: dropdown + id: system + attributes: + label: On which operating system are you experiencing the problem? + multiple: true + options: + - BSD + - Linux + - Windows + - MacOS + - iOS + - Android + validations: + required: true + + - type: input + id: system-version + attributes: + label: The version of your Operation System + validations: + required: true + + - type: dropdown + id: subsystem + attributes: + label: What subsystem is the problem related to? + multiple: true + options: + - Docker + - WSL + - WINE + + - type: input + id: subsystem-version + attributes: + label: The version of your Sub-system + + - type: dropdown + id: Web-browser + attributes: + label: What browsers are you seeing the problem on? + multiple: true + options: + - Firefox + - Chrome + - Safari + - Microsoft Edge + - Opera + - Brave + - Arc Browser + - UC Browser + validations: + required: true + + - type: input + id: Web-browser-version + attributes: + label: The version of your Web browser + validations: + required: true + + - type: dropdown + id: network-region + attributes: + label: What network region are you in? + multiple: true + options: + - Global + - China mainland + validations: + required: true + + - type: dropdown + id: cli + attributes: + label: Which command line terminal are you using? + multiple: true + options: + - Shell + - CMD + - Powershell + validations: + required: true + + - type: input + id: cli-version + attributes: + label: The version of your Command-line Terminal + + - type: dropdown + id: JavaScript-runtime + attributes: + label: Which JavaScript runtime are you using? + multiple: true + options: + - Node.js + - Bun + - Deno + validations: + required: true + + - type: input + id: JavaScript-runtime-version + attributes: + label: The version of your JavaScript runtime + validations: + required: true + + - type: dropdown + id: JavaScript-package-manager + attributes: + label: Which JavaScript package manager are you using? + multiple: true + options: + - npm + - Yarn + - pnpm + - Bun + validations: + required: true + + - type: input + id: JavaScript-package-manager-version + attributes: + label: The version of your JavaScript package manager + validations: + required: true + + - type: dropdown + id: development_environment + attributes: + label: Which development environment are you using? + multiple: true + options: + - Local + - Gitpod + - GitHub Codespaces + validations: + required: true + + - type: textarea + attributes: + label: Anything else? + description: | + Links? References? Anything that will give us more context about the issue you are encountering! + + Tip: You can attach images or log files by clicking this area to highlight it and then dragging files in. diff --git a/.github/ISSUE_TEMPLATE/bug-user.yml b/.github/ISSUE_TEMPLATE/bug-user.yml new file mode 100644 index 0000000..751475d --- /dev/null +++ b/.github/ISSUE_TEMPLATE/bug-user.yml @@ -0,0 +1,131 @@ +name: 🐛 User Bug report +description: File an UI bug/issue +title: <title> +labels: + - bug +body: + - type: checkboxes + attributes: + label: Is there an existing issue for this? + description: Please search to see if an issue already exists for the bug you encountered. + options: + - label: I have searched the existing issues + required: true + + - type: textarea + attributes: + label: Current Behavior + description: A concise description of what you're experiencing. + validations: + required: true + + - type: textarea + attributes: + label: Expected Behavior + description: A concise description of what you expected to happen. + validations: + required: true + + - type: textarea + attributes: + label: Steps To Reproduce + description: Steps to reproduce the behavior. + placeholder: | + 1. In this environment... + 2. With this config... + 3. Run '...' + 4. See error... + validations: + required: true + + - type: dropdown + id: hardware + attributes: + label: What kind of hardware did the bug occur on? + multiple: true + options: + - Desktop + - Pad + - Phone + - Smart Device + - Car + validations: + required: true + + - type: dropdown + id: system + attributes: + label: On which operating system are you experiencing the problem? + multiple: true + options: + - BSD + - Linux + - Windows + - MacOS + - iOS + - Android + validations: + required: true + + - type: input + id: system-version + attributes: + label: The version of your Operation System + validations: + required: true + + - type: dropdown + id: Web-browser + attributes: + label: What browsers are you seeing the problem on? + multiple: true + options: + - Firefox + - Chrome + - Safari + - Microsoft Edge + - Opera + - Brave + - Arc Browser + - UC Browser + validations: + required: true + + - type: input + id: Web-browser-version + attributes: + label: The version of your Web browser + validations: + required: true + + - type: dropdown + id: network-connection + attributes: + label: What kind of network are you connecting to? + multiple: true + options: + - WLAN + - WiFi + - 4G + - 5G + validations: + required: true + + - type: dropdown + id: network-region + attributes: + label: What network region are you in? + multiple: true + options: + - Global + - China mainland + validations: + required: true + + - type: textarea + attributes: + label: Anything else? + description: | + Links? References? Anything that will give us more context about the issue you are encountering! + + Tip: You can attach images or log files by clicking this area to highlight it and then dragging files in. diff --git a/.github/ISSUE_TEMPLATE/feature-enhancement.yml b/.github/ISSUE_TEMPLATE/feature-enhancement.yml new file mode 100644 index 0000000..7d34e7b --- /dev/null +++ b/.github/ISSUE_TEMPLATE/feature-enhancement.yml @@ -0,0 +1,35 @@ +name: ✨ Feature/Enhancement +description: Request a new feature or enhancement +title: <title> +labels: + - enhancement +body: + - type: checkboxes + attributes: + label: Is there an existing feature request for this? + description: Please search to see if a feature request already exists for the enhancement you are proposing. + options: + - label: I have searched the existing feature requests + required: true + + - type: textarea + attributes: + label: Description + description: | + A detailed description of the new feature or enhancement you are proposing. Additionally, provide any relevant + links, references, or attachments to offer more context about the proposal. You can also attach images or other + files by clicking this area to highlight it and then dragging files in. + + Tip: You can attach images or other files by clicking this area to highlight it and then dragging files in. + validations: + required: true + + - type: textarea + attributes: + label: Use Case + description: Provide a use case or scenario where this feature or enhancement would be beneficial. + + - type: textarea + attributes: + label: Proposed Solution + description: If you have a specific solution in mind, please describe it here. diff --git a/.github/settings.yml b/.github/settings.yml new file mode 100644 index 0000000..72e1ca6 --- /dev/null +++ b/.github/settings.yml @@ -0,0 +1,85 @@ +# These settings are synced to GitHub by https://probot.github.io/apps/settings/ + +repository: + allow_merge_commit: false + + delete_branch_on_merge: true + + enable_vulnerability_alerts: true + +labels: + - name: bug + color: '#d73a4a' + description: Something isn't working + + - name: documentation + color: '#0075ca' + description: Improvements or additions to documentation + + - name: duplicate + color: '#cfd3d7' + description: This issue or pull request already exists + + - name: enhancement + color: '#a2eeef' + description: Some improvements + + - name: feature + color: '#16b33f' + description: New feature or request + + - name: good first issue + color: '#7057ff' + description: Good for newcomers + + - name: help wanted + color: '#008672' + description: Extra attention is needed + + - name: invalid + color: '#e4e669' + description: This doesn't seem right + + - name: question + color: '#d876e3' + description: Further information is requested + + - name: wontfix + color: '#ffffff' + description: This will not be worked on + +branches: + - name: main + # https://docs.github.com/en/rest/reference/repos#update-branch-protection + protection: + # Required. Require at least one approving review on a pull request, before merging. Set to null to disable. + required_pull_request_reviews: + # The number of approvals required. (1-6) + required_approving_review_count: 1 + # Dismiss approved reviews automatically when a new commit is pushed. + dismiss_stale_reviews: true + # Blocks merge until code owners have reviewed. + require_code_owner_reviews: true + # Specify which users and teams can dismiss pull request reviews. + # Pass an empty dismissal_restrictions object to disable. + # User and team dismissal_restrictions are only available for organization-owned repositories. + # Omit this parameter for personal repositories. + dismissal_restrictions: + # users: [] + # teams: [] + # Required. Require status checks to pass before merging. Set to null to disable + required_status_checks: + # Required. Require branches to be up to date before merging. + strict: true + # Required. The list of status checks to require in order to merge into this branch + contexts: [] + # Required. Enforce all configured restrictions for administrators. + # Set to true to enforce required status checks for repository administrators. + # Set to null to disable. + enforce_admins: true + # Prevent merge commits from being pushed to matching branches + required_linear_history: true + # Required. Restrict who can push to this branch. + # Team and user restrictions are only available for organization-owned repositories. + # Set to null to disable. + restrictions: null diff --git a/.gitignore b/.gitignore index e9c779a..4ae1834 100644 --- a/.gitignore +++ b/.gitignore @@ -2,5 +2,5 @@ node_modules/ package-lock.json .parcel-cache/ dist/ -.vscode/ +.vscode/settings.json .vercel/ \ No newline at end of file diff --git a/.gitpod.yml b/.gitpod.yml new file mode 100644 index 0000000..2382166 --- /dev/null +++ b/.gitpod.yml @@ -0,0 +1,29 @@ +# This configuration file was automatically generated by Gitpod. +# Please adjust to your needs (see https://www.gitpod.io/docs/introduction/learn-gitpod/gitpod-yaml) +# and commit this file to your remote git repository to share the goodness with others. + +# Learn more from ready-to-use templates: https://www.gitpod.io/docs/introduction/getting-started/quickstart + +vscode: + extensions: + - yzhang.markdown-all-in-one + - unifiedjs.vscode-mdx + - xyc.vscode-mdx-preview + - jock.svg + - redhat.vscode-yaml + - clinyong.vscode-css-modules + - akamud.vscode-caniuse + - visualstudioexptteam.intellicode-api-usage-examples + - pflannery.vscode-versionlens + - christian-kohler.npm-intellisense + - esbenp.prettier-vscode + - rangav.vscode-thunder-client + - eamodio.gitlens + - github.vscode-pull-request-github + - github.vscode-github-actions +tasks: + - before: | + pnpm i vercel -g + vercel login --github --oob + init: pnpm i + command: npm start diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..9723ebb --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,19 @@ +{ + "recommendations": [ + "yzhang.markdown-all-in-one", + "unifiedjs.vscode-mdx", + "xyc.vscode-mdx-preview", + "jock.svg", + "redhat.vscode-yaml", + "clinyong.vscode-css-modules", + "akamud.vscode-caniuse", + "visualstudioexptteam.intellicode-api-usage-examples", + "pflannery.vscode-versionlens", + "christian-kohler.npm-intellisense", + "esbenp.prettier-vscode", + "rangav.vscode-thunder-client", + "eamodio.gitlens", + "github.vscode-pull-request-github", + "github.vscode-github-actions" + ] +} diff --git a/ReadMe.md b/ReadMe.md index 59d3b8a..4a63e0b 100644 --- a/ReadMe.md +++ b/ReadMe.md @@ -8,14 +8,17 @@ https://web-cell.dev/scaffold/ [![CI & CD](https://github.com/EasyWebApp/scaffold/actions/workflows/main.yml/badge.svg)][2] +[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)][3] +[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)][4] + ## Technology stack -- Language: [TypeScript v5][3] -- Component engine: [WebCell v3][4] -- Component suite: [BootCell v2][5] -- PWA framework: [Workbox v7][6] -- Package bundler: [Parcel v2][7] -- CI / CD: GitHub [Actions][8] + [Pages][9] +- Language: [TypeScript v5][5] +- Component engine: [WebCell v3][6] +- Component suite: [BootCell v2][7] +- PWA framework: [Workbox v7][8] +- Package bundler: [Parcel v2][9] +- CI / CD: GitHub [Actions][10] + [Pages][11] ## Development @@ -31,12 +34,30 @@ npm start pnpm build ``` -[1]: https://david-dm.org/EasyWebApp/scaffold +## Best practice + +1. Install **[Settings][12] GitHub app** in your account or organization +2. Click the **[Use this template][13] button** on the top of this GitHub repository's home page, then create your own repository in the app-installed namespace above +3. Click the **[Open in GitHub codespaces][3] button** on the top of ReadMe file, then an **online VS Code development environment** will be started immediately +4. Set [Vercel variables][14] as [Repository secrets][15], then every commit will get an independent **Preview URL** +5. Recommend to add a [Notification step in GitHub actions][16] for your Team IM app +6. Remind the PMs & users of your product to submit **Feature/Enhancement** requests or **Bug** reports with [Issue forms][17] instead of IM messages or Mobile Phone calls +7. Collect all these issues into [Project kanbans][18], then create **Pull requests** & add `closes #issue_number` into its description for automation + [2]: https://github.com/EasyWebApp/scaffold/actions/workflows/main.yml -[3]: https://typescriptlang.org -[4]: https://web-cell.dev/ -[5]: https://bootstrap.web-cell.dev/ -[6]: https://developers.google.com/web/tools/workbox -[7]: https://parceljs.org -[8]: https://github.com/features/actions -[9]: https://pages.github.com/ +[3]: https://codespaces.new/EasyWebApp/scaffold +[4]: https://gitpod.io/?autostart=true#https://github.com/EasyWebApp/scaffold +[5]: https://typescriptlang.org/ +[6]: https://web-cell.dev/ +[7]: https://bootstrap.web-cell.dev/ +[8]: https://developers.google.com/web/tools/workbox +[9]: https://parceljs.org/ +[10]: https://github.com/features/actions +[11]: https://pages.github.com/ +[12]: https://github.com/apps/settings +[13]: https://github.com/new?template_name=scaffold&template_owner=EasyWebApp +[14]: https://github.com/idea2app/Next-Bootstrap-ts/blob/80967ed49045af9dbcf4d3695a2c39d53a6f71f1/.github/workflows/pull-request.yml#L9-L12 +[15]: https://github.com/EasyWebApp/scaffold/settings/secrets/actions +[16]: https://github.com/kaiyuanshe/kaiyuanshe.github.io/blob/bb4675a56bf1d6b207231313da5ed0af7cf0ebd6/.github/workflows/pull-request.yml#L32-L56 +[17]: https://github.com/EasyWebApp/scaffold/issues/new/choose +[18]: https://github.com/EasyWebApp/scaffold/projects diff --git a/package.json b/package.json index d7cdcb6..f01ee57 100644 --- a/package.json +++ b/package.json @@ -16,13 +16,13 @@ "url": "https://github.com/EasyWebApp/scaffold/issues" }, "dependencies": { - "boot-cell": "^2.0.0-beta.0", + "boot-cell": "^2.0.0-beta.1", "browser-unhandled-rejection": "^1.0.2", - "cell-router": "^3.0.0-rc.1", + "cell-router": "^3.0.0-rc.3", "classnames": "^2.5.1", - "dom-renderer": "^2.0.4", + "dom-renderer": "^2.0.5", "mobx": "^6.12.0", - "web-cell": "^3.0.0-rc.4", + "web-cell": "^3.0.0-rc.7", "web-utility": "^4.1.3" }, "devDependencies": { @@ -31,15 +31,15 @@ "@parcel/transformer-less": "2.11.0", "@parcel/transformer-typescript-tsc": "~2.11.0", "@parcel/transformer-webmanifest": "~2.11.0", - "@types/node": "^18.19.5", - "@typescript-eslint/eslint-plugin": "^6.18.0", - "@typescript-eslint/parser": "^6.18.0", + "@types/node": "^18.19.6", + "@typescript-eslint/eslint-plugin": "^6.18.1", + "@typescript-eslint/parser": "^6.18.1", "eslint": "^8.56.0", "eslint-config-prettier": "^9.1.0", "husky": "^8.0.3", "lint-staged": "^15.2.0", "parcel": "~2.11.0", - "prettier": "^3.1.1", + "prettier": "^3.2.1", "typescript": "~5.3.3", "workbox-cli": "^7.0.0" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 53ba662..8dc2a7f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -6,26 +6,26 @@ settings: dependencies: boot-cell: - specifier: ^2.0.0-beta.0 - version: 2.0.0-beta.0(typescript@5.3.3) + specifier: ^2.0.0-beta.1 + version: 2.0.0-beta.1(typescript@5.3.3) browser-unhandled-rejection: specifier: ^1.0.2 version: 1.0.2 cell-router: - specifier: ^3.0.0-rc.1 - version: 3.0.0-rc.1(typescript@5.3.3) + specifier: ^3.0.0-rc.3 + version: 3.0.0-rc.3(typescript@5.3.3) classnames: specifier: ^2.5.1 version: 2.5.1 dom-renderer: - specifier: ^2.0.4 - version: 2.0.4(typescript@5.3.3) + specifier: ^2.0.5 + version: 2.0.5(typescript@5.3.3) mobx: specifier: ^6.12.0 version: 6.12.0 web-cell: - specifier: ^3.0.0-rc.4 - version: 3.0.0-rc.4(typescript@5.3.3) + specifier: ^3.0.0-rc.7 + version: 3.0.0-rc.7(typescript@5.3.3) web-utility: specifier: ^4.1.3 version: 4.1.3(typescript@5.3.3) @@ -47,14 +47,14 @@ devDependencies: specifier: ~2.11.0 version: 2.11.0 '@types/node': - specifier: ^18.19.5 - version: 18.19.5 + specifier: ^18.19.6 + version: 18.19.6 '@typescript-eslint/eslint-plugin': - specifier: ^6.18.0 - version: 6.18.0(@typescript-eslint/parser@6.18.0)(eslint@8.56.0)(typescript@5.3.3) + specifier: ^6.18.1 + version: 6.18.1(@typescript-eslint/parser@6.18.1)(eslint@8.56.0)(typescript@5.3.3) '@typescript-eslint/parser': - specifier: ^6.18.0 - version: 6.18.0(eslint@8.56.0)(typescript@5.3.3) + specifier: ^6.18.1 + version: 6.18.1(eslint@8.56.0)(typescript@5.3.3) eslint: specifier: ^8.56.0 version: 8.56.0 @@ -71,8 +71,8 @@ devDependencies: specifier: ~2.11.0 version: 2.11.0(typescript@5.3.3) prettier: - specifier: ^3.1.1 - version: 3.1.1 + specifier: ^3.2.1 + version: 3.2.1 typescript: specifier: ~5.3.3 version: 5.3.3 @@ -2592,15 +2592,15 @@ packages: /@types/keyv@3.1.4: resolution: {integrity: sha512-BQ5aZNSCpj7D6K2ksrRCTmKRLEpnPvWDiLPfoGyhZ++8YtiK9d/3DBKPJgry359X/P1PfruyYwvnvwFjuEiEIg==} dependencies: - '@types/node': 18.19.5 + '@types/node': 18.19.6 dev: true /@types/minimist@1.2.5: resolution: {integrity: sha512-hov8bUuiLiyFPGyFPE1lwWhmzYbirOXQNNo40+y3zow8aFVTeyn3VWL0VFFfdNddA8S4Vf0Tc062rzyNr7Paag==} dev: true - /@types/node@18.19.5: - resolution: {integrity: sha512-22MG6T02Hos2JWfa1o5jsIByn+bc5iOt1IS4xyg6OG68Bu+wMonVZzdrgCw693++rpLE9RUT/Bx15BeDzO0j+g==} + /@types/node@18.19.6: + resolution: {integrity: sha512-X36s5CXMrrJOs2lQCdDF68apW4Rfx9ixYMawlepwmE4Anezv/AV2LSpKD1Ub8DAc+urp5bk0BGZ6NtmBitfnsg==} dependencies: undici-types: 5.26.5 dev: true @@ -2612,13 +2612,13 @@ packages: /@types/resolve@1.17.1: resolution: {integrity: sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==} dependencies: - '@types/node': 18.19.5 + '@types/node': 18.19.6 dev: true /@types/responselike@1.0.3: resolution: {integrity: sha512-H/+L+UkTV33uf49PH5pCAUBVPNj2nDBXTN+qS1dOwyyg24l3CcicicCA7ca+HMvJBZcFgl5r8e+RR6elsb4Lyw==} dependencies: - '@types/node': 18.19.5 + '@types/node': 18.19.6 dev: true /@types/semver@7.5.6: @@ -2629,8 +2629,8 @@ packages: resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==} dev: true - /@typescript-eslint/eslint-plugin@6.18.0(@typescript-eslint/parser@6.18.0)(eslint@8.56.0)(typescript@5.3.3): - resolution: {integrity: sha512-3lqEvQUdCozi6d1mddWqd+kf8KxmGq2Plzx36BlkjuQe3rSTm/O98cLf0A4uDO+a5N1KD2SeEEl6fW97YHY+6w==} + /@typescript-eslint/eslint-plugin@6.18.1(@typescript-eslint/parser@6.18.1)(eslint@8.56.0)(typescript@5.3.3): + resolution: {integrity: sha512-nISDRYnnIpk7VCFrGcu1rnZfM1Dh9LRHnfgdkjcbi/l7g16VYRri3TjXi9Ir4lOZSw5N/gnV/3H7jIPQ8Q4daA==} engines: {node: ^16.0.0 || >=18.0.0} peerDependencies: '@typescript-eslint/parser': ^6.0.0 || ^6.0.0-alpha @@ -2641,11 +2641,11 @@ packages: optional: true dependencies: '@eslint-community/regexpp': 4.10.0 - '@typescript-eslint/parser': 6.18.0(eslint@8.56.0)(typescript@5.3.3) - '@typescript-eslint/scope-manager': 6.18.0 - '@typescript-eslint/type-utils': 6.18.0(eslint@8.56.0)(typescript@5.3.3) - '@typescript-eslint/utils': 6.18.0(eslint@8.56.0)(typescript@5.3.3) - '@typescript-eslint/visitor-keys': 6.18.0 + '@typescript-eslint/parser': 6.18.1(eslint@8.56.0)(typescript@5.3.3) + '@typescript-eslint/scope-manager': 6.18.1 + '@typescript-eslint/type-utils': 6.18.1(eslint@8.56.0)(typescript@5.3.3) + '@typescript-eslint/utils': 6.18.1(eslint@8.56.0)(typescript@5.3.3) + '@typescript-eslint/visitor-keys': 6.18.1 debug: 4.3.4 eslint: 8.56.0 graphemer: 1.4.0 @@ -2658,8 +2658,8 @@ packages: - supports-color dev: true - /@typescript-eslint/parser@6.18.0(eslint@8.56.0)(typescript@5.3.3): - resolution: {integrity: sha512-v6uR68SFvqhNQT41frCMCQpsP+5vySy6IdgjlzUWoo7ALCnpaWYcz/Ij2k4L8cEsL0wkvOviCMpjmtRtHNOKzA==} + /@typescript-eslint/parser@6.18.1(eslint@8.56.0)(typescript@5.3.3): + resolution: {integrity: sha512-zct/MdJnVaRRNy9e84XnVtRv9Vf91/qqe+hZJtKanjojud4wAVy/7lXxJmMyX6X6J+xc6c//YEWvpeif8cAhWA==} engines: {node: ^16.0.0 || >=18.0.0} peerDependencies: eslint: ^7.0.0 || ^8.0.0 @@ -2668,10 +2668,10 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/scope-manager': 6.18.0 - '@typescript-eslint/types': 6.18.0 - '@typescript-eslint/typescript-estree': 6.18.0(typescript@5.3.3) - '@typescript-eslint/visitor-keys': 6.18.0 + '@typescript-eslint/scope-manager': 6.18.1 + '@typescript-eslint/types': 6.18.1 + '@typescript-eslint/typescript-estree': 6.18.1(typescript@5.3.3) + '@typescript-eslint/visitor-keys': 6.18.1 debug: 4.3.4 eslint: 8.56.0 typescript: 5.3.3 @@ -2679,16 +2679,16 @@ packages: - supports-color dev: true - /@typescript-eslint/scope-manager@6.18.0: - resolution: {integrity: sha512-o/UoDT2NgOJ2VfHpfr+KBY2ErWvCySNUIX/X7O9g8Zzt/tXdpfEU43qbNk8LVuWUT2E0ptzTWXh79i74PP0twA==} + /@typescript-eslint/scope-manager@6.18.1: + resolution: {integrity: sha512-BgdBwXPFmZzaZUuw6wKiHKIovms97a7eTImjkXCZE04TGHysG+0hDQPmygyvgtkoB/aOQwSM/nWv3LzrOIQOBw==} engines: {node: ^16.0.0 || >=18.0.0} dependencies: - '@typescript-eslint/types': 6.18.0 - '@typescript-eslint/visitor-keys': 6.18.0 + '@typescript-eslint/types': 6.18.1 + '@typescript-eslint/visitor-keys': 6.18.1 dev: true - /@typescript-eslint/type-utils@6.18.0(eslint@8.56.0)(typescript@5.3.3): - resolution: {integrity: sha512-ZeMtrXnGmTcHciJN1+u2CigWEEXgy1ufoxtWcHORt5kGvpjjIlK9MUhzHm4RM8iVy6dqSaZA/6PVkX6+r+ChjQ==} + /@typescript-eslint/type-utils@6.18.1(eslint@8.56.0)(typescript@5.3.3): + resolution: {integrity: sha512-wyOSKhuzHeU/5pcRDP2G2Ndci+4g653V43gXTpt4nbyoIOAASkGDA9JIAgbQCdCkcr1MvpSYWzxTz0olCn8+/Q==} engines: {node: ^16.0.0 || >=18.0.0} peerDependencies: eslint: ^7.0.0 || ^8.0.0 @@ -2697,8 +2697,8 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/typescript-estree': 6.18.0(typescript@5.3.3) - '@typescript-eslint/utils': 6.18.0(eslint@8.56.0)(typescript@5.3.3) + '@typescript-eslint/typescript-estree': 6.18.1(typescript@5.3.3) + '@typescript-eslint/utils': 6.18.1(eslint@8.56.0)(typescript@5.3.3) debug: 4.3.4 eslint: 8.56.0 ts-api-utils: 1.0.3(typescript@5.3.3) @@ -2707,13 +2707,13 @@ packages: - supports-color dev: true - /@typescript-eslint/types@6.18.0: - resolution: {integrity: sha512-/RFVIccwkwSdW/1zeMx3hADShWbgBxBnV/qSrex6607isYjj05t36P6LyONgqdUrNLl5TYU8NIKdHUYpFvExkA==} + /@typescript-eslint/types@6.18.1: + resolution: {integrity: sha512-4TuMAe+tc5oA7wwfqMtB0Y5OrREPF1GeJBAjqwgZh1lEMH5PJQgWgHGfYufVB51LtjD+peZylmeyxUXPfENLCw==} engines: {node: ^16.0.0 || >=18.0.0} dev: true - /@typescript-eslint/typescript-estree@6.18.0(typescript@5.3.3): - resolution: {integrity: sha512-klNvl+Ql4NsBNGB4W9TZ2Od03lm7aGvTbs0wYaFYsplVPhr+oeXjlPZCDI4U9jgJIDK38W1FKhacCFzCC+nbIg==} + /@typescript-eslint/typescript-estree@6.18.1(typescript@5.3.3): + resolution: {integrity: sha512-fv9B94UAhywPRhUeeV/v+3SBDvcPiLxRZJw/xZeeGgRLQZ6rLMG+8krrJUyIf6s1ecWTzlsbp0rlw7n9sjufHA==} engines: {node: ^16.0.0 || >=18.0.0} peerDependencies: typescript: '*' @@ -2721,8 +2721,8 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/types': 6.18.0 - '@typescript-eslint/visitor-keys': 6.18.0 + '@typescript-eslint/types': 6.18.1 + '@typescript-eslint/visitor-keys': 6.18.1 debug: 4.3.4 globby: 11.1.0 is-glob: 4.0.3 @@ -2734,8 +2734,8 @@ packages: - supports-color dev: true - /@typescript-eslint/utils@6.18.0(eslint@8.56.0)(typescript@5.3.3): - resolution: {integrity: sha512-wiKKCbUeDPGaYEYQh1S580dGxJ/V9HI7K5sbGAVklyf+o5g3O+adnS4UNJajplF4e7z2q0uVBaTdT/yLb4XAVA==} + /@typescript-eslint/utils@6.18.1(eslint@8.56.0)(typescript@5.3.3): + resolution: {integrity: sha512-zZmTuVZvD1wpoceHvoQpOiewmWu3uP9FuTWo8vqpy2ffsmfCE8mklRPi+vmnIYAIk9t/4kOThri2QCDgor+OpQ==} engines: {node: ^16.0.0 || >=18.0.0} peerDependencies: eslint: ^7.0.0 || ^8.0.0 @@ -2743,9 +2743,9 @@ packages: '@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0) '@types/json-schema': 7.0.15 '@types/semver': 7.5.6 - '@typescript-eslint/scope-manager': 6.18.0 - '@typescript-eslint/types': 6.18.0 - '@typescript-eslint/typescript-estree': 6.18.0(typescript@5.3.3) + '@typescript-eslint/scope-manager': 6.18.1 + '@typescript-eslint/types': 6.18.1 + '@typescript-eslint/typescript-estree': 6.18.1(typescript@5.3.3) eslint: 8.56.0 semver: 7.5.4 transitivePeerDependencies: @@ -2753,11 +2753,11 @@ packages: - typescript dev: true - /@typescript-eslint/visitor-keys@6.18.0: - resolution: {integrity: sha512-1wetAlSZpewRDb2h9p/Q8kRjdGuqdTAQbkJIOUMLug2LBLG+QOjiWoSj6/3B/hA9/tVTFFdtiKvAYoYnSRW/RA==} + /@typescript-eslint/visitor-keys@6.18.1: + resolution: {integrity: sha512-/kvt0C5lRqGoCfsbmm7/CwMqoSkY3zzHLIjdhHZQW3VFrnz7ATecOHR7nb7V+xn4286MBxfnQfQhAmCI0u+bJA==} engines: {node: ^16.0.0 || >=18.0.0} dependencies: - '@typescript-eslint/types': 6.18.0 + '@typescript-eslint/types': 6.18.1 eslint-visitor-keys: 3.4.3 dev: true @@ -2973,8 +2973,8 @@ packages: resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==} dev: true - /boot-cell@2.0.0-beta.0(typescript@5.3.3): - resolution: {integrity: sha512-LEXrOD/QtAL6r9EdpssDePcgD2kEPSINOGsovR7Q8263aD5tPga6aXorhnuG1fwcK/hK+J+25ZXGXTq5M04eYw==} + /boot-cell@2.0.0-beta.1(typescript@5.3.3): + resolution: {integrity: sha512-N3aiSbp05LVtCvho2j0EAtYIw45q7w9zZTn1px7Qki0WKYKDCwgSQo1KkDNKZ4qF6rykqvkdQDcgdcGpS5yZaQ==} peerDependencies: '@fortawesome/fontawesome-free': ^6 '@nuintun/qrcode': ^3 @@ -2986,10 +2986,10 @@ packages: dependencies: '@swc/helpers': 0.5.3 classnames: 2.5.1 - dom-renderer: 2.0.4(typescript@5.3.3) + dom-renderer: 2.0.5(typescript@5.3.3) mobx: 6.12.0 regenerator-runtime: 0.14.1 - web-cell: 3.0.0-rc.4(typescript@5.3.3) + web-cell: 3.0.0-rc.7(typescript@5.3.3) web-utility: 4.1.3(typescript@5.3.3) transitivePeerDependencies: - '@webcomponents/webcomponentsjs' @@ -3108,15 +3108,15 @@ packages: resolution: {integrity: sha512-1Pbh5FLmn5y4+QhNyJE9j3/7dK44dGB83/ZMjv/qJk86TvDbjk0LosiZo0i0WB0Vx607qMX9jYrn1VLHCkN4rw==} dev: true - /cell-router@3.0.0-rc.1(typescript@5.3.3): - resolution: {integrity: sha512-3hNDDmIOyeLjG7ZXolYFs3IJJ8N2bIymeA/u5kGJ2ub9miyQWrwSG8g7MXUPbKZWNcMqMGJI8UpNx7IakhhYqQ==} + /cell-router@3.0.0-rc.3(typescript@5.3.3): + resolution: {integrity: sha512-GuopaL24OyUWe7Yx4bSS9GAfaxX7bl9/3XhRKEMp7Hxs/S6TvmhunY8pcchY1uxWnvWRR+CzWXLZk+CF0lq6eQ==} dependencies: '@swc/helpers': 0.5.3 - dom-renderer: 2.0.4(typescript@5.3.3) + dom-renderer: 2.0.5(typescript@5.3.3) mobx: 6.12.0 regenerator-runtime: 0.14.1 urlpattern-polyfill: 9.0.0 - web-cell: 3.0.0-rc.4(typescript@5.3.3) + web-cell: 3.0.0-rc.7(typescript@5.3.3) web-utility: 4.1.3(typescript@5.3.3) transitivePeerDependencies: - '@webcomponents/webcomponentsjs' @@ -3483,8 +3483,8 @@ packages: esutils: 2.0.3 dev: true - /dom-renderer@2.0.4(typescript@5.3.3): - resolution: {integrity: sha512-mV5EXc1+amGBUVN3YVbob30lmyavSzCgKv4Wcq9uisBsyCFtdL6H9PBWrg9bqQhr9nBPSuDoIH15yEvqPWKKDQ==} + /dom-renderer@2.0.5(typescript@5.3.3): + resolution: {integrity: sha512-9N5Da1qcv2y2i8UV77aJkHOHScWhmmiJIuWaiqgmIcPRn15IhQLbagJIt5Dhg4x08rf6bT9WmOccPKHMAPJDDw==} dependencies: tslib: 2.6.2 web-utility: 4.1.3(typescript@5.3.3) @@ -4564,7 +4564,7 @@ packages: resolution: {integrity: sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==} engines: {node: '>= 10.13.0'} dependencies: - '@types/node': 18.19.5 + '@types/node': 18.19.6 merge-stream: 2.0.0 supports-color: 7.2.0 dev: true @@ -5438,8 +5438,8 @@ packages: engines: {node: '>=4'} dev: true - /prettier@3.1.1: - resolution: {integrity: sha512-22UbSzg8luF4UuZtzgiUOfcGM8s4tjBv6dJRT7j275NXsy2jb4aJa4NNveul5x4eqlF1wuhuR2RElK71RvmVaw==} + /prettier@3.2.1: + resolution: {integrity: sha512-qSUWshj1IobVbKc226Gw2pync27t0Kf0EdufZa9j7uBSJay1CC+B3K5lAAZoqgX3ASiKuWsk6OmzKRetXNObWg==} engines: {node: '>=14'} hasBin: true dev: true @@ -6363,8 +6363,8 @@ packages: resolution: {integrity: sha512-DEAoo25RfSYMuTGc9vPJzZcZullwIqRDSI9LOy+fkCJPi6hykCnfKaXTuPBDuXAUcqHXyOgFtHNp/kB2FjYHbw==} dev: true - /web-cell@3.0.0-rc.4(typescript@5.3.3): - resolution: {integrity: sha512-cez7095TRb39xIbXUSflsZzxo4igJNFSZfqpYj2a6wH0268fXhWbmDfr4pViF7tsjwIHwUe9296AKKqDicTjyQ==} + /web-cell@3.0.0-rc.7(typescript@5.3.3): + resolution: {integrity: sha512-c4+nelL24NYDEtQMsr5r1ftSO6Jg9KCQJAxHYttBSdiZwrAybhVV/qLEsrI+ax3OLmHKxy7WjBWJVYopcaG54A==} peerDependencies: '@webcomponents/webcomponentsjs': ^2.8 core-js: ^3 @@ -6372,7 +6372,7 @@ packages: jsdom: '>=21' dependencies: '@swc/helpers': 0.5.3 - dom-renderer: 2.0.4(typescript@5.3.3) + dom-renderer: 2.0.5(typescript@5.3.3) mobx: 6.12.0 regenerator-runtime: 0.14.1 web-utility: 4.1.3(typescript@5.3.3) diff --git a/src/index.less b/src/index.less deleted file mode 100644 index e51097b..0000000 --- a/src/index.less +++ /dev/null @@ -1,25 +0,0 @@ -nav { - display: flex; - justify-content: space-around; -} -.router { - height: 100vh; - overflow: auto; - position: relative; - .page { - position: absolute; - top: 0; - left: 0; - transform: translateX(0); - opacity: 1; - transition: 0.25s; - } - .start { - transform: translateX(100%); - opacity: 0; - } - .end { - transform: translateX(-100%); - opacity: 0; - } -} diff --git a/src/index.tsx b/src/index.tsx index dfeb8ea..e1107b3 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -3,7 +3,6 @@ import { DOMRenderer } from 'dom-renderer'; import { configure } from 'mobx'; import { documentReady, serviceWorkerUpdate } from 'web-utility'; -import './index.less'; import { PageFrame } from './page'; auto(); diff --git a/src/page/Clock.tsx b/src/page/Clock.tsx index ddef084..d6d85a1 100644 --- a/src/page/Clock.tsx +++ b/src/page/Clock.tsx @@ -1,9 +1,11 @@ import { observable } from 'mobx'; -import { component, observer } from 'web-cell'; +import { WebCell, component, observer } from 'web-cell'; + +export interface CellClock extends WebCell {} @component({ tagName: 'cell-clock' }) @observer -export class CellClock extends HTMLElement { +export class CellClock extends HTMLElement implements WebCell { @observable accessor time = new Date(); diff --git a/src/page/Hello.tsx b/src/page/Hello.tsx index f7ed973..49bf96e 100644 --- a/src/page/Hello.tsx +++ b/src/page/Hello.tsx @@ -1,3 +1,9 @@ -export function Hello({ name = 'World' }) { - return <h1>Hello, {name}!</h1>; +import { FC, WebCellProps } from 'web-cell'; + +export interface HelloProps extends WebCellProps { + name?: string; } + +export const Hello: FC<HelloProps> = ({ name = 'World', ...props }) => ( + <h1 {...props}>Hello, {name}!</h1> +); diff --git a/src/page/Home.tsx b/src/page/Home.tsx index afb4fb9..595b93d 100644 --- a/src/page/Home.tsx +++ b/src/page/Home.tsx @@ -1,8 +1,11 @@ +import { PageProps } from 'cell-router'; +import { FC } from 'web-cell'; + import { CellClock } from './Clock'; import { Hello } from './Hello'; -export const HomePage = () => ( - <> +export const HomePage: FC<PageProps> = props => ( + <div {...props}> <Hello name="WebCell" /> <div> We use the same configuration as Parcel to bundle this sandbox, you @@ -17,5 +20,5 @@ export const HomePage = () => ( . </div> <CellClock /> - </> + </div> ); diff --git a/src/page/index.tsx b/src/page/index.tsx index 483551f..d7348bc 100644 --- a/src/page/index.tsx +++ b/src/page/index.tsx @@ -1,5 +1,5 @@ -import { NavLink, NavbarBrand, OffcanvasNavbar } from 'boot-cell'; -import { PageProps, createRouter } from 'cell-router'; +import { Nav, NavLink, NavbarBrand, OffcanvasNavbar } from 'boot-cell'; +import { createRouter } from 'cell-router'; import { CellClock } from './Clock'; import { Hello } from './Hello'; @@ -22,13 +22,10 @@ const menu = [ } ]; -const { Route } = createRouter({ - startClass: 'start', - endClass: 'end' -}); +const { Route } = createRouter(); export const PageFrame = () => ( - <> + <div className="d-flex flex-column vh-100"> <OffcanvasNavbar variant="dark" expand="md" @@ -46,38 +43,17 @@ export const PageFrame = () => ( </NavbarBrand> } > - <ul className="navbar-nav flex-row justify-content-end align-items-center flex-fill gap-3"> + <Nav className="justify-content-end flex-fill gap-3"> {menu.map(({ title, href }) => ( <NavLink href={`#${href}`}>{title}</NavLink> ))} - </ul> + </Nav> </OffcanvasNavbar> - <main className="container router" style={{ minHeight: '60vh' }}> - <Route - path="/home" - component={({ className }: PageProps) => ( - <div className={`page ${className}`}> - <HomePage /> - </div> - )} - /> - <Route - path="/clock" - component={({ className }: PageProps) => ( - <div className={`page ${className}`}> - <CellClock /> - </div> - )} - /> - <Route - path="/hello" - component={({ className }: PageProps) => ( - <div className={`page ${className}`}> - <Hello /> - </div> - )} - /> + <main className="container flex-fill"> + <Route path="" component={HomePage} /> + <Route path="/clock" component={CellClock} /> + <Route path="/hello" component={Hello} /> </main> <footer className="text-center bg-light py-5"> @@ -100,5 +76,5 @@ export const PageFrame = () => ( BootCell v2 </a> </footer> - </> + </div> );