Skip to content

Commit 18f6cee

Browse files
TechQueryTechQuery
authored
[migrate] upgrade to WebCell v3 RC & MobX 6.11+ (#6)
1 parent ddc7e10 commit 18f6cee

File tree

19 files changed

+6530
-5469
lines changed

19 files changed

+6530
-5469
lines changed

‎.github/workflows/main.yml‎

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,22 +7,30 @@ jobs:
77
Build-and-Publish:
88
runs-on: ubuntu-latest
99
steps:
10-
- name: Checkout
11-
uses: actions/checkout@v2
12-
- name: Use Node.js
13-
uses: actions/setup-node@v2-beta
10+
- uses: actions/checkout@v3
11+
12+
- uses: pnpm/action-setup@v2
1413
with:
15-
node-version: 14
14+
version: 8
15+
- uses: actions/setup-node@v3
16+
with:
17+
node-version: 18
1618
registry-url: https://registry.npmjs.org
17-
cache: yarn
19+
cache: pnpm
1820
- uses: browser-actions/setup-chrome@latest
19-
- name: Install, Build & Publish
21+
22+
- name: Install Dependencies
23+
run: |
24+
pnpm i --frozen-lockfile
25+
pnpm set-chrome
26+
27+
- name: Build & Publish
2028
run: |
21-
yarn && yarn set-chrome
22-
cd test/ && yarn && cd ..
23-
yarn publish
29+
cd test/ && pnpm i && cd ..
30+
npm publish
2431
env:
2532
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
33+
2634
- name: Update document
2735
uses: peaceiris/actions-gh-pages@v3
2836
with:

‎.npmignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
test/
22
Contributing.md
33
docs/
4+
.env
5+
.parcelrc
46
.parcel-cache/
57
.husky/
68
.github/

‎.npmrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
auto-install-peers = false

‎.parcelrc‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"extends": "@parcel/config-default",
3+
"transformers": {
4+
"*.{ts,tsx}": [
5+
"@parcel/transformer-typescript-tsc"
6+
]
7+
}
8+
}

‎ReadMe.md‎

Lines changed: 75 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
[Web Component][1] Router based on [WebCell][2] & [MobX][3]
44

5-
[![NPM Dependency](https://david-dm.org/EasyWebApp/cell-router.svg)][4]
5+
[![NPM Dependency](https://img.shields.io/librariesio/github/EasyWebApp/cell-router.svg)][4]
66
[![CI & CD](https://github.com/EasyWebApp/cell-router/actions/workflows/main.yml/badge.svg)][5]
77

88
[![NPM](https://nodei.co/npm/cell-router.png?downloads=true&downloadRank=true&stars=true)][6]
@@ -30,21 +30,33 @@ https://web-cell.dev/scaffold/
3030

3131
## Installation
3232

33+
### Command
34+
3335
```shell
34-
npm install web-cell cell-router
35-
npm install parcel -D
36+
npm install dom-renderer web-cell cell-router
37+
npm install parcel @parcel/config-default @parcel/transformer-typescript-tsc -D
3638
```
3739

38-
`tsconfig.json`
40+
### `tsconfig.json`
3941

4042
```json
4143
{
4244
"compilerOptions": {
43-
"target": "ES5",
44-
"experimentalDecorators": true,
45-
"jsx": "react",
46-
"jsxFactory": "createCell",
47-
"jsxFragmentFactory": "Fragment"
45+
"target": "ES6",
46+
"useDefineForClassFields": true,
47+
"jsx": "react-jsx",
48+
"jsxImportSource": "dom-renderer"
49+
}
50+
}
51+
```
52+
53+
### `.parcelrc`
54+
55+
```json
56+
{
57+
"extends": "@parcel/config-default",
58+
"transformers": {
59+
"*.{ts,tsx}": ["@parcel/transformer-typescript-tsc"]
4860
}
4961
}
5062
```
@@ -53,95 +65,84 @@ npm install parcel -D
5365

5466
### Sync Pages
5567

56-
`source/index.tsx`
68+
#### `source/index.tsx`
5769

58-
```jsx
59-
import { documentReady, render, createCell, Fragment } from 'web-cell';
60-
import { History, PageProps, CellRouter } from 'cell-router/source';
70+
```tsx
71+
import { DOMRenderer } from 'dom-renderer';
72+
import { FC } from 'web-cell';
73+
import { createRouter, PageProps } from 'cell-router';
6174

62-
const history = new History();
75+
const { Route, Link } = createRouter();
6376

64-
function TestPage({ path, history, defaultSlot, ...data }: PageProps) {
65-
return (
66-
<ul>
67-
<li>Path: {path}</li>
68-
<li>Data: {JSON.stringify(data)}</li>
69-
</ul>
70-
);
71-
}
77+
const TestPage: FC<PageProps> = ({ path, history, defaultSlot, ...data }) => (
78+
<ul>
79+
<li>Path: {path}</li>
80+
<li>Data: {JSON.stringify(data)}</li>
81+
</ul>
82+
);
7283

73-
documentReady.then(() =>
74-
render(
75-
<>
76-
<nav>
77-
<a href="test?a=1">Test</a>
78-
<a href="example?b=2">Example</a>
79-
</nav>
80-
<CellRouter
81-
className="router"
82-
history={history}
83-
routes={[{ paths: ['test', /^example/], component: TestPage }]}
84-
/>
85-
</>
86-
)
84+
new DOMRenderer().render(
85+
<>
86+
<nav>
87+
<Link to="test?a=1">Test</Link>
88+
<Link to="example/2">Example</Link>
89+
</nav>
90+
<main className="router">
91+
<Route path="test" component={TestPage} />
92+
<Route path="example/:id" component={TestPage} />
93+
</main>
94+
</>
8795
);
8896
```
8997

9098
### Async Pages
9199

92-
`tsconfig.json`
100+
#### `tsconfig.json`
93101

94102
```json
95103
{
96104
"compilerOptions": {
97-
"module": "ESNext"
105+
"module": "ES2020"
98106
}
99107
}
100108
```
101109

102-
`source/page/index.ts`
103-
104-
```javascript
105-
export default [
106-
{
107-
paths: ['', 'home'],
108-
component: async () => (await import('./Home.tsx')).default
109-
},
110-
{
111-
paths: ['list'],
112-
component: async () => (await import('./List.tsx')).default
113-
}
114-
];
115-
```
110+
#### `source/index.tsx`
116111

117-
`source/index.tsx`
112+
```tsx
113+
import { DOMRenderer } from 'dom-renderer';
114+
import { FC, lazy } from 'web-cell';
115+
import { createRouter, PageProps } from 'cell-router';
118116

119-
```jsx
120-
import { documentReady, render, createCell, Fragment } from 'web-cell';
121-
import { History, CellRouter } from 'cell-router/source';
117+
const { Route, Link } = createRouter();
122118

123-
import routes from './page';
124-
125-
const history = new History();
126-
127-
documentReady.then(() =>
128-
render(
129-
<>
130-
<nav>
131-
<a href="test?a=1">Test</a>
132-
<a href="example?b=2">Example</a>
133-
</nav>
134-
<CellRouter className="router" history={history} routes={routes} />
135-
</>
136-
)
119+
const TestPage: FC<PageProps> = ({ path, history, defaultSlot, ...data }) => (
120+
<ul>
121+
<li>Path: {path}</li>
122+
<li>Data: {JSON.stringify(data)}</li>
123+
</ul>
124+
);
125+
const AsyncPage = lazy(() => import('./Async'));
126+
127+
new DOMRenderer().render(
128+
<>
129+
<nav>
130+
<Link to="test?a=1">Test</Link>
131+
<Link to="example/2">Example</Link>
132+
</nav>
133+
<main className="router">
134+
<Route path="test" component={TestPage} />
135+
<Route path="example/:id" component={AsyncPage} />
136+
</main>
137+
</>
137138
);
138139
```
139140

140141
[1]: https://www.webcomponents.org/
141142
[2]: https://web-cell.dev/
142-
[3]: https://github.com/mobxjs/mobx/tree/mobx4and5/docs
143-
[4]: https://david-dm.org/EasyWebApp/cell-router
143+
[3]: https://mobx.js.org/
144+
[4]: https://libraries.io/npm/cell-router
144145
[5]: https://github.com/EasyWebApp/cell-router/actions/workflows/main.yml
145146
[6]: https://nodei.co/npm/cell-router/
146-
[7]: https://github.com/EasyWebApp/cell-router/blob/v2/test/source/index.less#L5
147-
[8]: https://github.com/EasyWebApp/cell-router/blob/v2/test/source/page/index.tsx#L12
147+
[7]: https://github.com/EasyWebApp/cell-router/blob/b7f98243834f9226088c15b111428e211bbfaa9f/test/source/index.less#L5-L25
148+
[8]: https://github.com/EasyWebApp/cell-router/blob/b7f98243834f9226088c15b111428e211bbfaa9f/test/source/page/index.tsx#L19-L32

‎package.json‎

Lines changed: 34 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "cell-router",
3-
"version": "3.0.0-alpha.0",
3+
"version": "3.0.0-rc.2",
44
"license": "LGPL-3.0",
55
"description": "Web Component Router based on WebCell & MobX",
66
"keywords": [
@@ -24,41 +24,47 @@
2424
"main": "dist/index.js",
2525
"module": "dist/index.esm.js",
2626
"dependencies": {
27-
"@swc/helpers": "^0.3.17",
28-
"mobx": ">=4.0.0 <6.0.0",
29-
"regenerator-runtime": "^0.13.9",
30-
"urlpattern-polyfill": "^5.0.3",
31-
"web-cell": "^3.0.0-beta.1",
32-
"web-utility": "^3.7.3"
27+
"@swc/helpers": "^0.5.3",
28+
"dom-renderer": "^2.0.5",
29+
"mobx": ">=6.11",
30+
"regenerator-runtime": "^0.14.1",
31+
"urlpattern-polyfill": "^9.0.0",
32+
"web-cell": "^3.0.0-rc.6",
33+
"web-utility": "^4.1.3"
3334
},
3435
"devDependencies": {
35-
"@parcel/packager-ts": "~2.6.0",
36-
"@parcel/transformer-less": "~2.6.0",
37-
"@parcel/transformer-typescript-types": "~2.6.0",
38-
"@types/jest": "^28.1.1",
39-
"element-internals-polyfill": "^1.1.4",
40-
"fs-match": "^1.6.0",
41-
"husky": "^8.0.1",
42-
"jest": "^28.1.0",
43-
"jest-environment-jsdom": "^28.1.0",
44-
"koapache": "^2.2.1",
45-
"lint-staged": "^13.0.0",
46-
"parcel": "~2.6.0",
47-
"prettier": "^2.6.2",
36+
"@parcel/config-default": "~2.11.0",
37+
"@parcel/packager-ts": "~2.11.0",
38+
"@parcel/transformer-less": "~2.11.0",
39+
"@parcel/transformer-typescript-tsc": "~2.11.0",
40+
"@parcel/transformer-typescript-types": "~2.11.0",
41+
"@types/jest": "^29.5.11",
42+
"element-internals-polyfill": "^1.3.10",
43+
"fs-match": "^1.7.1",
44+
"husky": "^8.0.3",
45+
"jest": "^29.7.0",
46+
"jest-environment-jsdom": "^29.7.0",
47+
"koapache": "^2.2.2",
48+
"lint-staged": "^15.2.0",
49+
"parcel": "~2.11.0",
50+
"prettier": "^3.1.1",
4851
"process": "^0.11.10",
49-
"puppeteer-core": "^14.2.1",
50-
"ts-jest": "^28.0.4",
51-
"typedoc": "^0.22.17",
52-
"typescript": "~4.7.3"
52+
"puppeteer-core": "^21.7.0",
53+
"rimraf": "^5.0.5",
54+
"ts-jest": "^29.1.1",
55+
"typedoc": "^0.25.7",
56+
"typedoc-plugin-mdn-links": "^3.1.11",
57+
"typescript": "~5.3.3"
5358
},
5459
"scripts": {
5560
"prepare": "husky install",
5661
"start": "cd test/ && npm start",
57-
"pack-test": "cd test/ && npm run build",
5862
"set-chrome": "app-find chrome -c",
59-
"pack-dist": "rm -rf dist/ && parcel build source/index.ts",
60-
"test": "lint-staged && npm run pack-dist && npm run pack-test && jest --testTimeout 6000 --forceExit",
61-
"pack-docs": "rm -rf docs/ && typedoc source/",
63+
"preview": "cd test/ && rimraf .parcel-cache/ dist/ && parcel --open",
64+
"pack-preview": "cd test/ && rimraf .parcel-cache/ dist/ && parcel build --public-url=. --dist-dir=../docs/preview/",
65+
"pack-dist": "rimraf dist/ && parcel build source/index.ts",
66+
"test": "lint-staged && npm run pack-dist && npm run pack-preview",
67+
"pack-docs": "rimraf docs/ && typedoc source/",
6268
"build": "npm run pack-dist && npm run pack-docs",
6369
"help": "npm run pack-docs && web-server docs/ -o",
6470
"prepublishOnly": "npm test && npm run build"

0 commit comments

Comments
 (0)