diff --git a/ReadMe.md b/ReadMe.md index 64627fe..267bd43 100644 --- a/ReadMe.md +++ b/ReadMe.md @@ -2,7 +2,7 @@ [Web Component][1] Router based on [WebCell][2] & [MobX][3] -[![NPM Dependency](https://david-dm.org/EasyWebApp/cell-router.svg)][4] +[![NPM Dependency](https://img.shields.io/librariesio/github/EasyWebApp/cell-router.svg)][4] [![CI & CD](https://github.com/EasyWebApp/cell-router/actions/workflows/main.yml/badge.svg)][5] [![NPM](https://nodei.co/npm/cell-router.png?downloads=true&downloadRank=true&stars=true)][6] @@ -30,21 +30,33 @@ https://web-cell.dev/scaffold/ ## Installation +### Command + ```shell -npm install web-cell cell-router -npm install parcel -D +npm install dom-renderer web-cell cell-router +npm install parcel @parcel/config-default @parcel/transformer-typescript-tsc -D ``` -`tsconfig.json` +### `tsconfig.json` ```json { "compilerOptions": { - "target": "ES5", - "experimentalDecorators": true, - "jsx": "react", - "jsxFactory": "createCell", - "jsxFragmentFactory": "Fragment" + "target": "ES6", + "useDefineForClassFields": true, + "jsx": "react-jsx", + "jsxImportSource": "dom-renderer" + } +} +``` + +### `.parcelrc` + +```json +{ + "extends": "@parcel/config-default", + "transformers": { + "*.{ts,tsx}": ["@parcel/transformer-typescript-tsc"] } } ``` @@ -53,35 +65,34 @@ npm install parcel -D ### Sync Pages -`source/index.tsx` +#### `source/index.tsx` -```jsx -import { documentReady, render, createCell, Fragment } from 'web-cell'; -import { History, PageProps, CellRouter } from 'cell-router/source'; +```tsx +import { documentReady } from 'web-utility'; +import { DOMRenderer } from 'dom-renderer'; +import { FC } from 'web-cell'; +import { createRouter, PageProps } from 'cell-router'; -const history = new History(); +const { Route, Link } = createRouter(); -function TestPage({ path, history, defaultSlot, ...data }: PageProps) { - return ( - - ); -} +const TestPage: FC = ({ path, history, defaultSlot, ...data }) => ( + +); documentReady.then(() => - render( + new DOMRenderer().render( <> - +
+ + +
) ); @@ -89,7 +100,7 @@ documentReady.then(() => ### Async Pages -`tsconfig.json` +#### `tsconfig.json` ```json { @@ -99,7 +110,7 @@ documentReady.then(() => } ``` -`source/page/index.ts` +#### `source/page/index.ts` ```javascript export default [ @@ -114,7 +125,7 @@ export default [ ]; ``` -`source/index.tsx` +#### `source/index.tsx` ```jsx import { documentReady, render, createCell, Fragment } from 'web-cell'; @@ -140,7 +151,7 @@ documentReady.then(() => [1]: https://www.webcomponents.org/ [2]: https://web-cell.dev/ [3]: https://github.com/mobxjs/mobx/tree/mobx4and5/docs -[4]: https://david-dm.org/EasyWebApp/cell-router +[4]: https://libraries.io/npm/cell-router [5]: https://github.com/EasyWebApp/cell-router/actions/workflows/main.yml [6]: https://nodei.co/npm/cell-router/ [7]: https://github.com/EasyWebApp/cell-router/blob/v2/test/source/index.less#L5 diff --git a/package.json b/package.json index b442efe..47cf400 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "cell-router", - "version": "3.0.0-rc.0", + "version": "3.0.0-rc.1", "license": "LGPL-3.0", "description": "Web Component Router based on WebCell & MobX", "keywords": [ @@ -29,7 +29,7 @@ "mobx": ">=6.11", "regenerator-runtime": "^0.14.1", "urlpattern-polyfill": "^9.0.0", - "web-cell": "^3.0.0-rc.3", + "web-cell": "^3.0.0-rc.4", "web-utility": "^4.1.3" }, "devDependencies": { @@ -53,7 +53,7 @@ "rimraf": "^5.0.5", "ts-jest": "^29.1.1", "typedoc": "^0.25.6", - "typedoc-plugin-mdn-links": "^3.1.10", + "typedoc-plugin-mdn-links": "^3.1.11", "typescript": "~5.3.3" }, "scripts": { @@ -63,7 +63,7 @@ "preview": "cd test/ && rimraf .parcel-cache/ dist/ && parcel --open", "pack-preview": "cd test/ && rimraf .parcel-cache/ dist/ && parcel build --public-url=. --dist-dir=../docs/preview/", "pack-dist": "rimraf dist/ && parcel build source/index.ts", - "test": "lint-staged && npm run pack-dist && npm run pack-preview && jest --testTimeout 6000 --forceExit", + "test": "lint-staged && npm run pack-dist && npm run pack-preview", "pack-docs": "rimraf docs/ && typedoc source/", "build": "npm run pack-dist && npm run pack-docs", "help": "npm run pack-docs && web-server docs/ -o", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b265aa2..90e7273 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -21,8 +21,8 @@ dependencies: specifier: ^9.0.0 version: 9.0.0 web-cell: - specifier: ^3.0.0-rc.3 - version: 3.0.0-rc.3(element-internals-polyfill@1.3.10)(typescript@5.3.3) + specifier: ^3.0.0-rc.4 + version: 3.0.0-rc.4(element-internals-polyfill@1.3.10)(typescript@5.3.3) web-utility: specifier: ^4.1.3 version: 4.1.3(typescript@5.3.3) @@ -89,8 +89,8 @@ devDependencies: specifier: ^0.25.6 version: 0.25.6(typescript@5.3.3) typedoc-plugin-mdn-links: - specifier: ^3.1.10 - version: 3.1.10(typedoc@0.25.6) + specifier: ^3.1.11 + version: 3.1.11(typedoc@0.25.6) typescript: specifier: ~5.3.3 version: 5.3.3 @@ -5988,8 +5988,8 @@ packages: mime-types: 2.1.35 dev: true - /typedoc-plugin-mdn-links@3.1.10(typedoc@0.25.6): - resolution: {integrity: sha512-jwf08RS71CMLZ31bDqhW3Y+JRYIS5eHlVD/XwfEuk86prIlBvZqIWN4EuYtK7N757oV30yzSSZOsOdYmcp9Plw==} + /typedoc-plugin-mdn-links@3.1.11(typedoc@0.25.6): + resolution: {integrity: sha512-WmEt+FD6HKXCkcbQEmdVKtkEEJb9SLmUnGnKwKM9U5grocy9TOUQ1GmO2cXnzMBQ2i/o/wF8LK4JQf5Vch3DKg==} peerDependencies: typedoc: '>= 0.23.14 || 0.24.x || 0.25.x' dependencies: @@ -6121,8 +6121,8 @@ packages: resolution: {integrity: sha512-DEAoo25RfSYMuTGc9vPJzZcZullwIqRDSI9LOy+fkCJPi6hykCnfKaXTuPBDuXAUcqHXyOgFtHNp/kB2FjYHbw==} dev: true - /web-cell@3.0.0-rc.3(element-internals-polyfill@1.3.10)(typescript@5.3.3): - resolution: {integrity: sha512-y/wiET3sMuC078PsQsqzCnmKX3gQOPBLlzMKV6TTiUVmW2iE8YdrN3fc1xRIUMYb8C/OauY5DugDhy2BqYWjsA==} + /web-cell@3.0.0-rc.4(element-internals-polyfill@1.3.10)(typescript@5.3.3): + resolution: {integrity: sha512-cez7095TRb39xIbXUSflsZzxo4igJNFSZfqpYj2a6wH0268fXhWbmDfr4pViF7tsjwIHwUe9296AKKqDicTjyQ==} peerDependencies: '@webcomponents/webcomponentsjs': ^2.8 core-js: ^3 diff --git a/source/Router.tsx b/source/Router.tsx index 120ff5d..0fd0b87 100644 --- a/source/Router.tsx +++ b/source/Router.tsx @@ -1,6 +1,6 @@ import { computed, observable } from 'mobx'; import { - ComponentClass, + ClassComponent, FunctionComponent, attribute, component, @@ -14,14 +14,12 @@ import { PageProps, nextTick, watchStop } from './utility'; export interface CellRouteProps extends HTMLProps { path: string; - component: FunctionComponent | ComponentClass; + component: FunctionComponent | ClassComponent; startClass?: string; endClass?: string; } -@component({ - tagName: 'cell-route' -}) +@component({ tagName: 'cell-route' }) @observer export class CellRoute extends HTMLElement { declare props: CellRouteProps; @@ -30,8 +28,7 @@ export class CellRoute extends HTMLElement { @observable accessor path: string; - @observable - accessor component: CellRouteProps['component']; + component: CellRouteProps['component']; @attribute @observable