diff --git a/.github/workflows/push.yml b/.github/workflows/push.yml new file mode 100644 index 0000000..77a0d51 --- /dev/null +++ b/.github/workflows/push.yml @@ -0,0 +1,35 @@ +name: Commit preview +on: + push: + branches-ignore: + - main +jobs: + Build-and-Deploy: + env: + VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }} + VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }} + VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }} + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + + - uses: pnpm/action-setup@v2 + with: + version: 8 + - uses: actions/setup-node@v3 + with: + node-version: 18 + cache: pnpm + - name: Install & Build + run: | + pnpm i --frozen-lockfile + pnpm build + + - uses: amondnet/vercel-action@v25 + if: ${{ env.VERCEL_TOKEN && env.VERCEL_ORG_ID && env.VERCEL_PROJECT_ID }} + with: + vercel-token: ${{ secrets.VERCEL_TOKEN }} + github-token: ${{ secrets.GITHUB_TOKEN }} + vercel-org-id: ${{ secrets.VERCEL_ORG_ID }} + vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }} + working-directory: ./docs diff --git a/.gitignore b/.gitignore index 364609f..8445b39 100644 --- a/.gitignore +++ b/.gitignore @@ -4,4 +4,5 @@ yarn.lock dist/ .parcel-cache/ docs/ -.vscode/settings.json \ No newline at end of file +.vscode/settings.json +.vercel diff --git a/.npmignore b/.npmignore index 17077e2..78f5ce2 100644 --- a/.npmignore +++ b/.npmignore @@ -1,9 +1,11 @@ .eslintrc.json jest.config.ts test/ +preview/ .parcel-cache/ Contributing.md docs/ .husky/ .github/ -.vscode/ \ No newline at end of file +.vscode/ +.vercel/ \ No newline at end of file diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..f048ded --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +auto-install-peers = false diff --git a/Migrating.md b/Migrating.md index aac016b..f6267f7 100644 --- a/Migrating.md +++ b/Migrating.md @@ -16,16 +16,16 @@ import { component, + observer, - mixin, -+ WebCell, - createCell, - Fragment +- createCell, +- Fragment } from 'web-cell'; +import { observable } from 'mobx'; -interface State { +class State { + @observable - key: string; +- key: string; ++ accessor key = ''; } @component({ @@ -33,7 +33,7 @@ import { }) +@observer -export class MyTag extends mixin<{}, State>() { -+export class MyTag extends WebCell() { ++export class MyTag extends HTMLElement { - state: Readonly = { - key: 'value' - }; @@ -57,7 +57,7 @@ At the same time, `shouldUpdate() {}` life-cycle has been dropped. You just need MobX's [`@observable`][4] & [`reaction()`][5] are awesome APIs to implement these above with clear codes, so we add `mobx` package as a dependency: ```shell -npm install mobx@5 +npm install mobx ``` On the other hand, [`mobx-web-cell` adapter][6] has been merged into the core package. And cause of replacing **Prototype Overwrite** with **Class Inheritance** to refactor **Class Mixins**, `@observer` decorator should follow strict order to make observation work: @@ -70,9 +70,8 @@ import { - watch, + observer, - mixin, -+ WebCell, - createCell, - Fragment +- createCell, +- Fragment } from 'web-cell'; -import { observer } from 'mobx-web-cell'; +import { observable } from 'mobx'; @@ -86,11 +85,14 @@ export interface MyTagProps extends WebCellProps { }) @observer -export class MyTag extends mixin() { -+export class MyTag extends WebCell() { ++export class MyTag extends HTMLElement { ++ declare props: MyTagProps; + @attribute - @watch + @observable - count = 0; +- count = 0; ++ accessor count = 0; - render({ count }: MyTagProps) { + render() { @@ -109,7 +111,6 @@ export interface MyTagProps extends WebCellProps { import { component, - mixin -+ WebCell } from 'web-cell'; @component({ @@ -117,7 +118,7 @@ import { - renderTarget: 'children' }) -export class MyTag extends mixin() { -+export class MyTag extends WebCell() { ++export class MyTag extends HTMLElement { } ``` @@ -127,7 +128,6 @@ import { import { component, - mixin -+ WebCell } from 'web-cell'; @component({ @@ -136,7 +136,7 @@ import { + mode: 'open' }) -export class MyTag extends mixin() { -+export class MyTag extends WebCell() { ++export class MyTag extends HTMLElement { } ``` @@ -149,7 +149,6 @@ This makes **Shadow CSS** to react with the data of component instances. import { component, - mixin -+ WebCell } from 'web-cell'; @component({ @@ -163,7 +162,7 @@ import { - } }) -export class MyTag extends mixin() { -+export class MyTag extends WebCell() { ++export class MyTag extends HTMLElement { render() { return <> +